Channels ▼
RSS

Web Development

Mojax: Mobile Ajax Framework

Source Code Accompanies This Article. Download It Now.


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>

Example 5: Extending the Box object.

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.


Related Reading


More Insights






Currently we allow the following HTML tags in comments:

Single tags

These tags can be used alone and don't need an ending tag.

<br> Defines a single line break

<hr> Defines a horizontal line

Matching tags

These require an ending tag - e.g. <i>italic text</i>

<a> Defines an anchor

<b> Defines bold text

<big> Defines big text

<blockquote> Defines a long quotation

<caption> Defines a table caption

<cite> Defines a citation

<code> Defines computer code text

<em> Defines emphasized text

<fieldset> Defines a border around elements in a form

<h1> This is heading 1

<h2> This is heading 2

<h3> This is heading 3

<h4> This is heading 4

<h5> This is heading 5

<h6> This is heading 6

<i> Defines italic text

<p> Defines a paragraph

<pre> Defines preformatted text

<q> Defines a short quotation

<samp> Defines sample computer code text

<small> Defines small text

<span> Defines a section in a document

<s> Defines strikethrough text

<strike> Defines strikethrough text

<strong> Defines strong text

<sub> Defines subscripted text

<sup> Defines superscripted text

<u> Defines underlined text

Dr. Dobb's encourages readers to engage in spirited, healthy debate, including taking us to task. However, Dr. Dobb's moderates all comments posted to our site, and reserves the right to modify or remove any content that it determines to be derogatory, offensive, inflammatory, vulgar, irrelevant/off-topic, racist or obvious marketing or spam. Dr. Dobb's further reserves the right to disable the profile of any commenter participating in said activities.

 
Disqus Tips To upload an avatar photo, first complete your Disqus profile. | View the list of supported HTML tags you can use to style comments. | Please read our commenting policy.
 
Dr. Dobb's TV