Let's have a look at a sample biNu XML page and break it down to explain each of the sections. The sample we'll use is for a page that says "Hello World" which appears on the handset like the one alongside.

The biNu XML for this page is shown below. For illustration purposes we have attempted to show the anatomy of a biNu XML page by highlighting the different sections or tags and providing a brief explanation for each one.

<styles>
<style name="style1">
<color value="#000000" />
<font face="Arial Unicode MS" size="18" />
</style>
</styles>

<page>


<pageSegment x="0" y="0" h="height">
<fixed>
<text x="5" y="30" w="width" mode="wrap" style="style1">Hello World</text>
</fixed>
</pageSegment>

</page>

The layout of the page is defined by specifying a number of <pageSegment> tags which together form the complete page.

This simple page contains only one <pageSegment> that contains the "Hello World" text. Page segments are positioned by coordinates, and elements within a page segment use their own offset coordinates. Here the "Hello World" text is placed 5 pixels from the left and 30 pixels from the top of the <pageSegment> in which it sits.

<control>
<actions>

<action key="select" spider="N">http://pip/home/</action>

</actions>
</control>

The <control> section defines what actions should be executed when the user presses a key on the handset.

This example shows that an action has been defined only for the Action key (which is usually the left hand key just beneath the handset screen). If the user presses that key the app will navigate to the home page.

Other keys that can be defined are the number keys, Select and Navigate keys.

</binu>

Below is the biNu XML with an explanation of each of the sections. The Google Search page appears on the handset like this.

You can see the page is made up three main sections, known as "page segments":

• a header section with an image of Google's logo
• a numbered list containing three menu items which can be selected by pressing numeric keys on the handset
• a footer section with menu options (Menu, My biNu and Back) which are activated by keys on the handset

<styles>

<style name="list_text">
<color value="#FF000000"/>
<font face="Arial Unicode MS" size="12"/>
</style>

<style name="footer_text">
<color value="#FF000000"/>
<font face="Arial Unicode MS" size="11"/>
</style>

<style name="body">
<color value="#FFFFFFFF"/>
</style>

<style name="grey_line">
<color value="#FF9E9FA2"/>
</style>

<style name="footer_bg">
<color value="#FFD8DADB"/>
</style>

</styles>

<page>

<pageSegment x="0" y="0">
<fixed>
<image x="13" y="1" w="100" h="36" mode="crop" url="http://apps.binu.net/prod/apps/gsearch/google_home_s.png"/>
</fixed>
</pageSegment>

<pageSegment x="0" y="y" h="-13">
<listing listName="listing1" type="simple">
<link name="url" spider="N" x="2" y="3" w="15" mode="truncate" style="body"/>
<field name="text" x="12" y="0" w="-10" mode="wrap" style="list_text"/>
</listing>
</pageSegment>

<pageSegment x="0" y="-15">
<fixed>
<rectangle x="0" y="2" h="1" radius="0" style="grey_line"/>
<rectangle x="0" y="3" h="13" radius="0" style="footer_bg"/>
<text x="2" w="width – 2" y="2" mode="truncate" style="footer_text" align="left">Menu</text>
<text x="0" w="width" y="2" mode="truncate" style="footer_text" align="center">My biNu</text>
<text x="0" w="width -2" y="2" mode="truncate" style="footer_text" align="right">Back</text>
</fixed>
</pageSegment>

</page>

The layout of the page is defined by specifying a number of <pageSegment> tags which together form the complete page layout.

The first <pageSegment> contains the Google logo at the top of the page.

The second contains a <listing> called "listing1". The items in the listing are defined in the <list> section towards the bottom of the biNu XML page.

The third <pageSegment> contains text items which are positioned to appear in the page footer. Lower down in the XML page, in the <control> section, actions are defined that match these text items.

<control>
<actions>

<menu key="action" align="Left">
<action key="1" text="Web Search">
/prod/apps/gsearch/gsearch2.php?foo=bar&a=wsf&ss=moderate
</action>

<action key="2" text="Image Search">
/prod/apps/gsearch/gsearch2.php?foo=bar&a=isf&ss=moderate
</action>

<action key="3" text="Turn Safe Search Off">
/prod/apps/gsearch/gsearch2.php?foo=bar&a=sp&start=0&1=&ss=off
</action>

<action key="4" text="Help">
http://prod/apps/client_docs/info.php?
homePageUrl=%2Fprod%2Fapps%2Fgsearch%2Fgsearch2.php%3F
foo%3Dbar&appName=Google%20Search
</action>

<action key="5" text="My biNu">
http://pip/home/
</action>

<action key="6" text="Exit" actionType="exit"/>

</menu>

<action key="select" spider="Y">
http://pip/home/
</action>

<action key="navigate" spider="Y" actionType="back"/>

</actions>
</control>

The <control> section defines what actions should be executed when the user presses a key on the handset.

This example shows that actions have been defined for keys, 1, 2, 3, 4, 5 and 6.

The following keys have also been defined:

• Action (usually the left hand key just underneath the handset screen
• Select (usually the middle key just underneath the handset screen
• Navigate (usually the right hand key just underneath the handset screen).

<list name="listing1">

<listItem>
<itemField name="url" value="/prod/apps/gsearch/gsearch2.php?foo=bar&a=wsf&ss=moderate"/>
<itemField name="text" value="Web search"/>
</listItem>

<listItem>
<itemField name="url" value="/prod/apps/gsearch/gsearch2.php?foo=bar&a=isf&ss=moderate"/>
<itemField name="text" value="Image Search"/>
</listItem>

<listItem>
<itemField name="url" value="/prod/apps/gsearch/gsearch2.php?foo=bar&a=sp&ss=off"/>
<itemField name="text" value="Turn safe search Off"/>
</listItem>

</list>