Mojax: Mobile Ajax Framework

Styling with CSS

You can use style sheets within Mojax to define colors, fonts, layout, and other visual aspects of the application. Style sheets separate style elements of an application from the actual content. Style-sheet information can be specified in many contexts. Looking at the definition for mainScreen (Listing Two), you notice that style attributes are defined inline within each of the two textboxes. An additional option is to define style information using a <style> tag:

<style>
  .splashtext {
    color: #00008B;
    background-color: #FFFFFF;
    font-size: large;
    font-weight: bold;
    font-family: system;
  }
</style>

The preferred means for defining style information is to place all definitions within a file. For example, the style information for this application is stored within a file named "mZillow.mcss." The code below is a partial listing of the style information.

textinput { 
  color: #00008B;
  ...
}

textinput:focus {
  border-width: 1px;
  border-color: #00008B;
  ...
}

In this style definition I specify the look of the <textinput> tag. Pay attention to the differences in the attributes for a textinput box and a textinput box with focus. With this approach, additional code is not needed in the application to check whether a textinput box has focus. Instead, with style sheets, such changes are managed for you by the Mojax runtime. The aforementioned style attributes are used within the search screen when prompting for an address, city, and state, which is shown in Example 2.

<screen id="searchScreen" layout="vertical">
  <imagebox url="Images/zillow.gif" width="100%" halign="center"/>
  <box height="100%" width="100%" layout="vertical">
    <!-- Two textboxes for input -->
    <textbox style="padding: 2px;">Enter street address:</textbox>
    <textinput length="25" value="bind{Cache.address}"/>
    <textbox style="padding: 2px;">Enter city and state:</textbox>
    <textinput length="25" value="bind{Cache.citystate}"/>
  </box> 
 ...
</screen>

Example 3 is an illustration of accessing style information through class attributes within a tag. Notice in Figure 1 that a grid is displayed with two columns and six rows. Class attributes are used within the <textbox> tags to specify the background color, padding, and other attributes. With a few quick changes to the style sheet, you can quickly change the look-and-feel of the application.

.propertylabel {
  background-color: #DAE4F6;
  padding: 2px;
  color: #445681;
  border-bottom-width: 1px;
  border-bottom-color: #445681;
}
<prototype name="propertydetail" layout="vertical" extends="Box" width="100%">
    <gridbox cols="2" rows="6" height="100%" width="100%" layout="horizontal"
             valign="top">
     <textbox width="100%" 
              class="propertylabel">Year Built:</textbox>
     <textbox width="100%"
              class="propertyvalue">bind{propertyXML[0].yearbuilt}</textbox>
   ...
</prototype>

Mojax Script

Mojax provides an implementation of ECMAScript, not unlike ActionScript (Adobe) or JScript (Microsoft). Example 4 illustrates it being used for an initialization function.

<script><![CDATA[
   function init() 
   {
     // If no cached value
     if (!Cache.address) 
     {
       // Default to zillow example address
       Cache.address = "2114 Bigelow Ave";
       Cache.citystate = "Seattle,WA";
     }      
   }
  ...
]]></script>

Another common use of scripting is within a <method> tag. For example, when processing key events, you can opt to check whether a numeric key was pressed:

<method name="onKeyPressed">
  if (event.isNumeric() == true) {
  ...
  }
</method>

The uses of script within Mojax are many and varied. For instance, you could embed a short script within a screen tag as follows to display a debug message to the development environment console when the user selects the right softkey:

<screen id="mainScreen" layout="vertical" 
   onRightSoftkey="if (varx > 10) 
   debug('varx: ' + varx);">
  ...
</screen>