Mojax: Mobile Ajax Framework
by John Muchow


Example 1: 

<moblet default="main">
  <style>
  screen {
    color: #483D8B;
    background-color: #DCDCDC;
    font-size: medium;
  }
  </style>
  <screen id="main" layout="vertical">
    <textbox width="100%" halign="center">Hello World!</textbox>
  </screen>
</moblet>

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;

 .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>

Example 4:

<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>


Example 5: 

  <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>

Listing One

<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>


Listing Two

<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>

3


