MotherApp Engine

MotherApp Engine

Tutorial

MotherApp HTML Introduction

The MotherApp HTML Language

To create MotherApp apps, have your web server generate pages in MotherApp HTML. These are parsed by the MotherApp devEngine that is deployed on the mobile device and converted into native code on that device.

MotherApp applications are written in MotherApp HTML, as subset of standard HTML relevant to mobile platforms, extended with special language extensions that allow you to access the special features of the mobile devices. These language extensions are identified by the suffix "wf".

Key Concepts

Titlebar

MotherApp provides the ability to create and control a titlebar in your app. If the app is on an iPod or iPhone, this will be a native iPhone/iPod navbar, placed at the top of the screen. For Android and BlackBerry phones a similar type of widget is created at the top of the screen. The titlebar provides a title for, and allows for navigation among, the pages of your app, including back, up and down buttons. You can also add buttons to the titlebar for links or for submitting form data. Titlebars are created using the special <wf_titlebar> tag.


    <title align="center">Movies</title>
arrow titlebar screen shot

Tabbar

MotherApp provides an extension to HTML for groups of tabs, similar in function to the tabbars on browsers. This is done by adding the special MotherApp attribute wf_type to a <div> section of the code and giving it the value of "tabbar". This is similar to frames in standard HTML. The contents of each tab are specified as links using <a> tags.


  Tab 1
  Tab 2

<div wf_type="tabbar"> will create a separate tabbar on the screen (this appears at the bottom of the screen on an iPhone or BlackBerry and at the top of the screen on an Andriod phone), and loads the rest of the screen with the contents of the first link specified (what tab is initially loaded can be overridden by using 'wf_style="selected"' in the <a> link for that tab).

You can specify the tabbar image for both active and inactive tabs by using the MotherApp attributes "wf_tab_img" and "wf_tab_img_active".

Since tabbars works the way frames do, they cannot be embedded inside other elements; a <div wf_type="tabbar"> element needs to be at the top level inside the <body> section of a page. You place the various tab contents in separate files, just as you do with frames. You cannot have a "tabbar" widget combined with other content; tabbar is just like a <frameset> tag in this respect.

HTML Elements

MotherApp HTML supports the following standard HTML tags.

Document Structure Tags

The main HTML document structure tags are supported: <html>, <head>, and <body>, along with <div> and <span> tags.

Comments can be embedded in your code using the HTML comment tag: <!- comment>.

Table Tags

As with normal HTML pages, tables are used to control layout. MotherApp HTML provides the normal HTML table tags: <table>, <tr>, and <td>. You can set the background color using the bgcolor attribute and width of table cells using the width attribute (the using for width can be either % or pixels):

<td bgcolor="#444444">Name</td>
<td width="50%">Phone</td>

MotherApp HTML does not support rowspan or colspan attributes. The other restriction to keep in mind is you cannot embed a table inside another table.

Tables can displayed in three different styles:

  • wf_style = "fullscreen" — This is stretches the table width to fill the entire screen.
  • wf_style = "transparent" — This suppresses the background color and borders for the table, making it transparent. This is useful when using a table to control layout.
  • wf_style = "rounded" — The table will appear with rounded corners. (iPhone only)

<div> and <span> Tags

MotherApp HTML allows you to group divisions of your code that share the same attributes with <div> and <span> tags. These are used extensively to specify formatting styles, such as padding and text color.

In MotherApp HTML, <div> is basically shorthand for:

<table wf_style="transparent"><tr><td>xxx</td></tr></table>

so, you cannot put <div> directly inside a <table> tag ( but you can nest <div> inside a <td> tag ).

Use <div> and <span> tags where you normally would use them in normal HTML. <div> tags are sometimes required to clearly group code to which you want to supply a particular style. For example, if you wish to create an iPhone style pick list for you app, you can do this using the HTML <select> and <option> tags inside a set of <div></div> tags where that style is specified:

<div wf_style="iphone_picker_embedded">
   <select name="city">
       <option value="sf">San Francisco</option>
       <option value="nyc">New York City</option>
       …
       <option value="hk">Hong Kong</option>
   </select>
</div>

The <div> tags with wf_style="iphone_picker_embedded" attribute clearly group the pick list code.

Links

The <a> is used to create links for page traversal, as in normal HTML. Such links need to be within a table row or a set of <div></div> tags. Some platforms, such as BlackBerry, have a limitation of only one link per table row.

The <a> tag is also used to create button links, titlebar buttons, and to activate certain features of the mobile app, such as starting the browser, audio or video players, or initiating a telephone call, text message, or email message.

Font Tags

Since there is limited native font support for mobile platforms, the HTML font tags are not used. Instead, you use the MotherApp wf_type attribute. This attribute can set to the following values:

  • text_small
  • text_big
  • text_bold

Example: 

<div wf_style="text_small">this is small text</div>

For finer control over the font size you can specify the font by point size: wf_style="text_size:n", where n is the point size of the font you want.

Using wf_style, You can set the text size in a <body>, <table>, <tr>, <td>, or <div> tag. The size will be inherited by all the child and descendent tags, unless it is overridden by another wf_style tag with a more specific scope. Thus: 

<html>
   <head><title>Text Size</title></head>
   <body wf_style="text_size:8">
      <div>Size 8
         <div>Size 8</div>
         <div wf_style="text_size:12">Size 12
            <div>Size 12</div>
         </div>
      </div>
      ...
   </body>
</html>
Screen shot of different sized text

Heading tags (<h1>, <h2>, …, <h6>) are not supported.

Graphics and Multimedia Tags

MotherApp supports for both <img> tags and <map> tags. For maps, MotherApp provides extensions to allow for zooming in and out on maps and centering the map.

With image tags you can, and should specify the image height and width, using the normal HTML syntax:

<img src="/picture.png" width="67" height="43" />

By providing the image dimensions, MotherApp can load the page quickly, leaving space for the image, which is them downloaded.

MotherApp provides support for HTML's <audio> tag to embed an audio player. This can also be done by giving an mp3 file (i.e., "HeyJude.mp3") as the href for a link tag: 

<div><a href="HeyJude.mp3" wf_style="button">Play song</a></div>

The autoplay attribute is supported, so that the audio source can be made to start automatically when the page is loaded.

Starting the mobile platforms video player is also handled using the link tag and giving href a value that is an mp4 file: 

<div><a href="Avatar.mp4" wf_style="button">Play Film Clip</a></div>

Frame Tags

MotherApp does not use normal frame tags. Instead, MotherApp provides a tabbar, which is the expected style for mobile platforms. See Key Concepts above.

MotherApp does support inline frames, <iframe>, however. These can be used to display information that needs to be continually dynamically updated, such as real-time stock prices.

Form Tags

MotherApp HTML includes <form> tags and the key sub-elements of forms for submitting information from the mobile platform to you web server. Both get and post methods are supported.

The "get" method will submit the user's input as part of the URL string going to your web server. This information is unencrypted and so should not be used for sensitive data. There is also a limit set by your web server on how much data you can put in a URL (MotherApp will support URL limits of up to 4096 characters).

The "post" method sends the form-data as an HTTP post transaction. This is more robust and secure than "get", and "post" does not have size limitations.

The other main form-related tags are provided: <input>, <select>, <option>, and <textarea>. The <input> tag can be set to types: text, hidden, submit, password, checkbox, radio, file, data, and "searchable text"

Page Navigation

MotherApp provides a page navigation stack, similar to that of a web browser, but with the ability for control by your app. As you navigate from one page to the next, MotherApp stores all the previous screens on a stack and allows you to back up to a previous screen. On an iPhone, MotherApp automatically adds a "Back" button to the titlebar when appropriate (when there is a previous screen); on other mobile platforms you can create a back button by adding the wf_style="navigation_back" attribute to the link that triggers a page transition. If your app uses a tabbar, each tab maintains its own navigation stack, so that moving from one tab to another does not lose the navigation information in each tab.

You can control the navigation behavior of this "Back" button by specifying the navigation behavior you wish for any link or form submission, i.e., for any action that changes the page being viewed. This is done by using wf_style to specify how the page navigation stack should behave for a particular link or form.

  • navigation_pushed: puts the current page on the top of the current navigation stack and go to the new page. This is the default behaviour for links and is the same behaviour you have with web browsers.
  • navigation_unchanged: For forms you often do not want to have a back button (for example, if someone is submitting a purchase order you do not want them to back up, or they may accidentally resubmit the order). For these situations, MotherApp allows you to specify that the navigation be unchanged. Navigation_unchanged does not add the current page to the navigation stack but still transitions to the new page. If the user then presses the "Back" button they will go back to the last page on the current navigation stack, skipping over the previous page. This is the default behaviour for the form submission button, to avoid accidental resubmissions.
  • navigation_reset: If a link has this style specified, MotherApp will remove all the contents from the current navigation history stack.
  • navigation_back: If a link has this style specified, MotherApp will go back to the previous page in navigation history stack. ("href" attribute will be ignored)

Examples

  • This is equivalent to <a href="page2.html" wf_style="navigation_pushed">
    <a href="page2.html">
  • This will refresh the current page without adding it to the navigation stack. 
    <a href="page3.html" href="" wf_style="navigation_unchanged">Refresh</a>
  • This is equivalent to < form action="get_result.php" method="get" wf_style="navigation_unchanged"> 
    <form action="get_result.php" method="get">
  • This will clear the navigation stack, removing all history for this page or tab. 
    <a href="home.html" wf_style="navigation_reset">Start Over</a>
  • This will goes back to previous page in the navigation stack.
    <a href="" wf_style="navigation_back">Back</a>

Special Characters

Certain characters, such as "<", are special in HTML and need to be encoded so that they are not interpreted as HTML code. So, for example "&lt;" is the encoding used in HTML to display "<" on the screen. MotherApp recognizes the encoded versions of the following characters:

Character Encoding Description
< &lt; less than symbol or left angle bracket
> &gt; greater than symbol or right angle bracket
' &apos; apostrophe or single quote mark
" &quot; double quote mark
& &amp; ampersand
&nbsp; non-breaking space

Unsupported HTML Tags

The following HTML tags are not supported in MotherApp HTML:

  • Heading tags: 
    <h1>,<h2>, …, <h6>
  • Line breaks, paragraph tags and horizontal lines: 
    <br>, <p>, <hr>
  • Framesets (this functionality is provided by the tabbar)
  • Anchors: 
    <a name="…">
  • List tags (to create lists in MotherApp, use tables and rows)

HTML Attributes Supported by MotherApp

Attribute Allowed Values and Elements Supported
align Supported values are "left", "center", and "right" works with <body> and <td> tags (align is not supported on BlackBerry)
bgcolor The background color is s pecified as standard RGB values in hexadecimal (i.e., "#RRGGBB) works with <body>, <table>, <tr>, <td>, <div> tags
href Works with <a> tags
src Works with <img>, <audio>, and <iframe> tags
width Works with <table>, <td>, and <img> tags; specifying the size (width and height) of an image allows MotherApp to allocate space for the image and display the page quickly, then download the image
height works with <table>, <img>, and <iframe> tags; specifying the size (width and height) of an image allows MotherApp to allocate space for the image and display the page quickly, then download the image
type Works with <input> tags
name Works with <input> tags
value Works with <input> tags
usemap Works with client side map <img> tags
method Works with <form> tags
action Works with <form> tags
enctype Works with <form> tags

MotherApp Extensions

Mother App Attributes

MotherApp
Attribute		 Possible Values
wf_type Possible Values
  • camera
  • user_album or system_album -- Creates a user or system multimedia album (iPhone only)
wf_style Formatting styles
  • no_separator – suppresses the lines between table cells
  • padding
  • text_small/text_big/text_bold
  • text_color
  • text_size
Layout styles
  • transparent (used with tables)
  • fullscreen (used with tables)
  • rounded (used with tables)
  • footer/header (create a footer or a header bar on the screen)
HTML widgets:
  • button
  • popup/popup_bottom/popup_center
  • segment – When used with a selection list, the list is displayed horizontally as segments
    (iPhone only)
  • iphone_picker_embedded (iPhone only)
  • keyboard_type:number/number_and_period/number_and_symbols.
    This creates a screen keyboard of the type specified. (iPhone only)
  • browser
Link Behaviors:
  • navigation_reset/navigation_pushed/navigation_unchanged/navigation_back
    Allows you to control the navigation stack for screen transitions.

MotherApp Variables

MotherApp HTML allows you to access dynamic information on the mobile device to use in your app. This is done with variables. These variables are identified by a "[wf:" prefix and a "]" suffix. For example, the identification number for the mobile device can be accessed by the following MotherApp variable: [wf:device_id]. When placed in a form (<form></form>) or a URL, the variable, [wf:device_id], will be replaced by the identifier of the device. 

<table>
   <tr>
       <td><a href="register_phone.php?id=[wf:device_id]">
            Register this phone</a></td>
   </tr>
</table>

MotherApp provides the following variables:

Variable Meaning/Value
[wf:device_id] MotherApp replaces this variable with the device ID
[wf:gps] MotherApp replaces this variable with the current latitude and longitude of the device (these are floating point numbers).
Example: 
<a href="/restaurants.html?location=[wf:gps]">
    Find nearby restaurants</a>
[wf:map_center] If you have a map widget as part of your app, MotherApp replaces this variable with the longitude and latitude of the center of the current map.
[wf:map_zoom] If you have a map widget as part of your app, MotherApp replaces this variable with the current zoom factor (an integer from 1 to 17) of the map.

Meta Tag Extensions

MotherApp has added features that do not directly generate a display on the screen. These appear in <meta> tags in the <head> section of the MotherApp HTML page. They are indicated by a <meta> tag with the name attribute of wf_action. The specific action to take is given by the content attribute. For example:

<meta name="wf_action" content=refresh_parent>

The action will take place when the page is loaded. Wf_action can be used to trigger to following actions:

  • refresh_all – This will refresh all the app pages
  • refresh_parent – This will refresh the pages that are part of the currently active tab of the app's tabbar.

Where to Go Next

Now that you have a general overview of MotherApp HTML, go through the tutorials to see how these elements are used in practice.

For details on specific MotherApp language elements consult the Reference Guide.

 

 

 

What Resources Are Available to Me as a Developer?

  • MotherApp HTML Reference
    Click here to see the complete reference for MotherApp HTML. You can select having the code elements displayed by category, alphabetically, or with associated screen shots.
  • Development Tools
    • Click here to use the MotherApp Debugger.
      Use the debugger test your application using a web browser (the Safari 4, Firefox 3.5 and Google Chrome browsers are recommended). The generated user interface may differ somewhat from the display on any particular device (since the app will display natively, and therefore differently, on each platform), but the debugger accepts the same MotherApp HTML as the devEngine. It will allow you to to check the syntax for your MotherApp HTML pages.
    • Click here to use the MotherApp Sandbox
      The MotherApp sandbox helps generates the testing version of app that could be actually deployed to the devices.
    • Click here to view our set of sample apps.
  • More Information
    • Click here to view our list of MotherApp "How to"s. For example, "how to deliver your completed app," or "how to launch the video player."
    • Click here to view the answers to our Frequently Asked Questions (FAQ)
    • Click here to go to our Support Forum.

 

 

 

MotherApp © 2010