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"
valign="center">
<textbox class="splashtext" width="100%" halign="center" valign="center">
Loading, please wait ...
</textbox>
<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>
<method name="onHide">
this.animate(false); // Stop animation
</method>
</imagebox>
</box>
</screen>
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()"
onRightSoftkey="show(searchScreen)">
<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" >
<propertydetail/>
</scrollbox>
<softkeys left="Exit" right="Search"/>
</screen>
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.
