Creating Objects Using Prototypes
Prototypes are a powerful concept for encapsulating common code into reusable classes. Within Mojax, the <prototype> tag is the equivalent of the prototype object in ECMAScript. One common use of a prototype within Mojax apps is for managing softkeys. Notice in Example 5 how the prototype extends the Box object, which is a logical choice as this object is designed specifically as a container for other visual elements. Attributes are defined, one for each softkey, left and right. Two <textbox> tags are defined, one for each label to be associated with the left and right keys. Once the prototype is defined, you can use the object as you would any other Mojax tag. For example, the code below shows a <screen> tag definition that declares a <softkeys> tag used to associate the text "Exit" with the left softkey, and the text "Search" with the right.
<screen id="mainScreen" layout= "vertical" onLeftSoftkey="exit()" onRightSoftkey="show(searchScreen)"> ... <softkeys left= "Exit" right="Search"/> </screen>
Referring back to Example 5, notice that inside the <attribute> tag I referenced the <textbox> tags using the IDs assigned to the textbox tags; for example, this.lefttext.value. When you define a <softkeys> tag, an event is generated for each attribute defined in the tag. For example, left="Exit" generates a call to the attribute tag within the prototype definition with the name left, which sets the value of the first textbox to Exit and sets its visible property to true. The same logic applies for the right="Search" definition, setting the value and visible properties of the object.
<prototype name="softkeys" extends="Box" layout="horizontal" width="100%">
<attribute name="left">
this.lefttext.value = this.left;
this.lefttext.visible = true;
</attribute>
<attribute name="right">
this.righttext.value = this.right;
this.righttext.visible = true;
</attribute>
<textbox id="lefttext" width="100%" halign="left" visible="false"/>
<textbox id="righttext" width="100%" halign="right" visible="false"/>
</prototype>
The reason for the visible property in the prototype definition is to allow use of a <softkey> tag, which has just one key definition. In other words, you may want to enable just one softkey for a screen:
<screen id="anotherScreen"
layout="vertical"
onLeftSoftkey="
show(mainScreen)">
...
<softkeys left="Back"/>
</screen>
By definition, the textboxes in the prototype are not visible; thus, just one label (Back) is shown on the device display.
In Listing Two, you see the reference to a <propertydetail> tag. Figure 1 shows the device output when using this tag, which displays the property information returned for the Zillow API. In Listing Four (available online) the variable propertyXML was assigned the value of the XPath expression:
propertyXML = xpath(response#/response/result);
In the <propertydetail> tag, this variable is accessed to dynamically bind the results of the XML response to the textboxes on the main screen. Using bind, the content of the screen is automatically bound to the current value of the XML response, which allows the application to dynamically update its contents based on the results returned from Zillow.
Conclusion
Mojax extends the concepts that drive Ajax technology to mobile applications. Using JavaScript, CSS, and XML/XSLT, you can develop mobile applications for a range of devices and platforms, with one code base. In approximately 325 lines of code, I created a cross-platform application that accesses a remote API over HTTP and dynamically binds the returned information to visual elements on a mobile device display.
