Structure of a biNu page
Firstly, it's important to understand the anatomy of a biNu XML page. When defining a page for a biNu app there is a structure to which every page must conform. The biNu XML schema defines that structure.
biNu XML pages consist of a number of sub sections including the most common ones:
For a complete definition of all tags used within a biNu XML page, please consult the biNu XML schema.
Perhaps the best way to understand how biNu XML works is to see a working example. So why not check out our version of the well known Hello World app?
Or for something a little more complex (and useful) the biNu Google Search app provides a very good example of biNu XML concepts.
Positioning and sizing items on the screen
Items are located by providing x, y coordinates with an origin located in the top/left of the screen. The co-ordinates refer to the actual pixels on the screen. The width and height of objects are also defined in terms of pixels.
For Fixed pageSegments, items are positioned relative to the actual phone's screen. These items never move. For other types of pageSegments, items are positioned relative to the top left hand corner of that pageSegment. Items are positioned on a canvas that can move within a viewing window.
Locations can be specified as a simple integer value, for example, this will locate an image with its top left corner at pixel 10:10 and corner at 110:110.
<image x="10" y="10" w="100" h="100">
Positions and sizes can also be defined as formulae referencing system variables or user defined variables. For example, this text will span the width of the screen.
<text x="0" y="10" w="width" h="100">
The system defined variables are:
For X coordinates and Widths:
width - the width of the screen in Fixed PageSegments. The width of the PageSegment itself for other types.
center - the center of the screen / PageSegment
x – the current x position – following to the right of the last object
textX - one space after the last character of text written.
For Y coordinates and Heights:
height - the height of the screen in Fixed PageSegments. The height of the PageSegment itself for other types, but only if it's height has been defined.
center - the center of the screen in Fixed PageSegments. The center of the PageSegment itself for other types, but only if it's height has been defined.
y – the current Y position – following directly below the last object
textY - the baseline of the last item of text written.
User defined variables
The developer can define their own variables using the <mark> construct. This can be used to capture the current position and them locate a number of items together.
One challenge developers normally struggle with when developing apps for phones are the limitations of fonts. These include:
- the phones only allow the developer to specify 3 character sizes – small, medium and large.
- these translate to different real fonts and different sizes on different devices.
- only languages (character sets) pre-loaded on the phone can be used.
biNu overcomes all these limitations.
With biNu the developer is not restricted to the fonts installed on the phone. The developer can use a huge range of fonts and almost any font size can be used (although fonts of less than 8pts (approx 8 pixel height) should be avoided as they become illegible on some phones). More important, the developer knows that the text will be rendered identically, exactly the same size, on every phone. This means that the developer can control and manage the layout of their pages with great accuracy and confidence.
Binu supports 3 types of internal fonts or styles. These can be used directly by specifying the font attribute e.g. font="small".
SMALL, MEDIUM, LARGE – These styles are 8, 10, 12 pixels tall respectively. The characters used have been specifically selected to render well and consistently over a wide range of phones. These styles only support ASCII characters. i.e. they cannot be used for Arabic, Hebrew and Asian languages.
Unicode Fixed Sizes
UNISMALL, UNIMEDIUM, UNILARGE. These styles are 8, 10, 12 pixels tall respectively. They support any Unicode character set. For ASCII characters, they do not render as clearly or as small as the Fixed size styles.
VARSMALL, VARMEDIUM, VARLARGE. These styles vary in size between 8 and 14 pixels depending on the size of the phone's screen. The smaller the screen the small the character size. These fonts do not support Unicode characters. They should be used by the developer where the screen layout is flexible and will not be upset by changing font sizes.
It is possible for the developer to access the actual height of the characters being used using the <mark> tag.
Other styles and fonts
To use other fonts the developer must specify a <style> in the <styles> section of the <binu> document. The style is then named in the 'style' attribute of the binu element. For example,
<styles> <style name="Arial8"> <color value="#FF000000"/> <font face="Arial" size="8"/> </style> ....
<text x="10" y="y+15" mode="wrap" style="Arial8"> A quick brown fox jumps over the lazy dog. </text>
The names Small, Medium,Large, Unismall, Unimedium, Unilarge, Varsmall, Varmedium, Varlarge are reserved names. You cannot define your own styles with these names.
To be used in an application, a font needs to be installed on the biNu proxy. A list of already installed fonts is listed below. If you want to use a font that is not already on the proxy, contact biNu and we will add it.