Channels ▼


Mojax: Mobile Ajax Framework

Source Code Accompanies This Article. Download It Now.

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:

  .splashtext {
    color: #00008B;
    background-color: #FFFFFF;
    font-size: large;
    font-weight: bold;
    font-family: system;

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}"/>

Example 2: Search screen code (partial).

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"
     <textbox width="100%" 
              class="propertylabel">Year Built:</textbox>
     <textbox width="100%"

Example 3: Accessing class attributes within a tag.

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.

   function init() 
     // If no cached value
     if (!Cache.address) 
       // Default to zillow example address
       Cache.address = "2114 Bigelow Ave";
       Cache.citystate = "Seattle,WA";

Example 4: Using Mojax 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) {

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);">

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.