Channels ▼

Open Source

Mojax: Mobile Ajax Framework

Source Code Accompanies This Article. Download It Now.

User Interface

Listing One generates the sample app's splashscreen. There are several things to note about this listing. First, a <screen> tag is defined and assigned an ID of splashScreen. This identifier refers to this screen when it needs to be shown or hidden on the device display. The layout of contents on the screen is a vertical orientation and an <imagebox> tag shows a banner across the top of the screen. The remaining content of the splashscreen are within a <box> tag, which you can use to further define the layout. The <textbox> tag defines the message to be displayed to users while the application loads.

The second <imagebox> tag displays an animated progress indicator. Associated with this tag are two <method> tags— onShow and onHide. The former is called when the imagebox (essentially, the splashscreen) is shown on the device. The work that needs to be done here is to call the init() function to initialize the application, start the animation of the progress indicator, and call the Zillow API through the pingzillow() method. The onHide method is called when this screen is no longer visible on the display, your cue to stop the animation. (Regarding the GIF image: Mojax supports JPG, GIF, and Animated GIF files, even on devices that do not directly support these file types.)

<screen id="splashScreen" layout="vertical">
  <imagebox url="Images/zillow.gif" width="100%" halign="center"/>
  <box height="100%" width="100%" layout="vertical" halign="center"
    <textbox class="splashtext" width="100%" halign="center" valign="center">
      Loading, please wait ...
    <imagebox id="splashloading" focusable="false" url="Images/loading.gif">
      <method name="onShow">
        init();                   // Initiation application data 
        this.animate(true);        // Start animation
        pingzillow();             // Get property information
      <method name="onHide">     
        this.animate(false);      // Stop animation

Listing One

The next screen is the main UI defined using a <screen> tag mainScreen; see Listing Two. In Listing One, I created two <method> tags for managing the onShow and onHide events. In Listing Two, the events onLeftSoftkey and onRightSoftkey are defined inline within the <screen> tag. Either approach suffices, as the end result is the same; that is, when some specified event occurs, perform some action. Generally, I use the <method> tag when more than one action is tied to an event.

<screen id="mainScreen" layout="vertical" onLeftSoftkey="exit()"
  <imagebox url="Images/zillow.gif" width="100%" halign="center"/>
  <!-- Show address info across top -->
  <textbox layout="vertical" width="100%" halign="center" style="padding: 1px;" 
    valign="center" value="bind{Cache.address}"/>    
  <textbox layout="vertical" width="100%" halign="center" 
      style="padding: 1px; border-bottom-width: 1px; border-bottom-color: #00008B;"
      valign="center" value="bind{Cache.citystate}"/>      
  <!-- Property information -->
  <scrollbox width="100%" height="100%" focusable="true" scrollbar="true" >
  <softkeys left="Exit" right="Search"/>
Listing Two

There is a powerful concept hidden within the <textbox> tags—the ability to work with dynamic content using bind, which associates an expression with the value of an object. In the two textboxes shown, bind displays the current address, city, and state by retrieving the current value of Cache.address and Cache.citystate.

The primary content on the main screen is contained with a <scrollbox> tag. I use this tag when the contents of the property information returned from Zillow can't be shown on one screen. The contents of the scrollbox are managed in the <propertydetail> tag.

Notice the softkey references (onLeftSoftkey/onRightSoftkey) and the methods associated with them. When users select the left softkey, exit() is called to shut down the application. When the right softkey is pressed, the method show() is invoked, passing in the name of the screen to show; in this case, the search screen.

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.