MotherApp Engine

MotherApp Engine Overview

Tutorial

MotherApp HTML Introduction
1. Getting Started
See how to use MotherApp Engine to create a mobile app
2. MA Debugger
See how to use MotherApp Debugger to debug your app
3. GeoCamera
See how to create application using Map, GPS and Camera.
4. Offline Application
See how to create application that can be used without network.

Part 1: Getting started

MotherApp Tutorial

To start your tutorial we first create a Hello World app in 7 lines of HTML. Then, we show you how to create a task list, or "todo", client. We assume you have basic knowledge of HTML and know how to construct the server backend for our todo app (or have access to someone who does), using tools like PHP, ASP, Django or Ruby on Rails.

Hello World in MotherApp
Create a todo app

1. Hello World in MotherApp

MotherApp uses a subset of XHTML with some custom attributes to specify an app. If you know the basics of HTML, learning MotherApp is easy. Here is a very simple MotherApp HTML page:

<html>  
  <head></head> 
  <body>
    <wf_titlebar><title align="center">Hello World</title></wf_titlebar>
    <div>Hello, MotherApp!</div>   
  </body>  
</html>

It consists of the typical HTML tags, such as "<html>", "<title>" and "<body>", along with a special MotherApp tag "wf_titlebar".. The "title" tag describes the title of the app and the "body" tag describes the content of the app. The wf_titlebar" tag creates a title bar in the display that holds the title. After saving this page on your server, e.g., http://mysite.com/helloworld.html, you send us the link to this file. We then create an app package for downloading and installation on your mobile device. That package includes the MotherApp engine, which can translate MotherApp HTML into native code for the mobile device. Your app server only need to generate HTML. In this example. the MotherApp engine reads the HTML page you have written and creates the app shown below:

2. Create a todo app

We now show you how to create a todo app. We assume you know how to write the server side code and here we only show you the desired HTML output from your server..

2.1. Create an empty skeleton

To create our Todo app, you simply begin with an HTML page with "Todo" as its title and save the page to "/" on your web server (i.e., the root location of the URL you sent us).

<html>  
  <head></head> 
  <body>
    <wf_titlebar><title align="center">Todo</title></wf_titlebar>
  </body>
</html>

2.2. Build the item-list-screen by using HTML "table" tag

Now, we want to build the screen with a list of todo items. In MotherApp, a list is defined by "table//tr/td" tags. For the "table" tag, there are different styles: "transparent" and "fullscreen". We want to use all the screen space, so we use the "fullscreen" style. Since the style is defined in MotherApp and not in standard HTML, we use a custom attribute called "wf_style". Now, pull the todo items stored in your database and display them in the table.

<html>  
  <head></head> 
  <body>
    <wf_titlebar><title align="center">Todo</title></wf_titlebar>
    <table wf_style="fullscreen">
       <tr><td wf_style="padding">Learn MotherApp Framework</td></tr> 
       <tr><td wf_style="padding">Play with MotherApp</td></tr>  
       <tr><td wf_style="padding">Phone Steve Jobs</td></tr>  
       <tr><td wf_style="padding">Learn Objective-C</td></tr>
    </table>       
  </body>   
</html>

2.3. Show the priorities of the items using HTML "img" tag

Next, we want to show the priorities of the items by using the following images:

We add them to the screen by using the standard "img" tag in HTML. It is a good practice to include the "width" and "height" of the image in the "img" tag, since MotherApp will make use of that information to display the text first and then load the images asynchronously. We have placed the images in the same directory as the HTML, but you can place them anywhere and use either absolute or relative file paths to indicate their location. Be sure the put the "/" as part of the closing marker for the <img> tag: <img ... />.

<html>  
  <head> 
  </head>    
  <body>
    <wf_titlebar><title align="center">Todo</title></wf_titlebar> 
    <table wf_style="fullscreen">  
      <tr><td><img src= "high.png" width="67" height="43"/></td>   
          <td wf_style="padding">Learn MotherApp Framework</td></tr>        
      <tr><td><img src= "high.png" width="67" height="43"/></td>              
          <td wf_style="padding">Play with MotherApp</td></tr>  
      <tr><td><img src= "medium.png" width="67" height="43"/></td>  
          <td wf_style="padding">Phone Steve Jobs</td></tr>         
      <tr><td><img src= "low.png" width="67" height="43"/></td>  
          <td wf_style="padding">Learn Objective-C</td></tr>      
    </table>
  </body>      
</html>

2.4. Handle the click event of a todo item by using HTML "wf_href" attribute in "tr" tag

The first screen is nearly finished. When a user clicks the item, we want to show the corresponding detail screen for that item. We need to do two things:

1) handle the click behavior

2) build the item-detail-screens

In MotherApp, handing the click behavior can be done simply by using the "a" tag. Assume the HTML of the item-detail-screen is located at "item[ITEM_NUMBER].html", we can just add the "a" tags to the corresponding items to create links to those pages..

If you are viewing the app on an iPhone, note that after adding the links, MotherApp adds an arrow to each link automatically to indicate that the items are clickable.

<html>  
  <head></head>  
  <body>  
    <wf_titlebar><title align="center">Todo</title></wf_titlebar>  
    <table wf_style="fullscreen">  
      <tr wf_href ="item1.html"><td><img src= "high.png" width="67" height="43"/></td>  
          <td wf_style="padding">Learn MotherApp Framework</td></tr>  
      <tr wf_href ="item2.html"><td><img src= "high.png" width="67" height="43"/></td>  
          <td wf_style="padding">Play with MotherApp</td></tr>  
      <tr wf_href ="item3.html"><td><img src= "medium.png" width="67" height="43"/></td>  
          <td wf_style="padding">Phone Steve Jobs</td></tr>  
      <tr wf_href ="item4.html"><td><img src= "low.png" width="67" height="43"/></td>  
          <td wf_style="padding">Learn Objective-C</td></tr>  
    </table>  
  </body>  
</html>

2.5. Build the item-detail-screen

After clicking on an item in our Todo list, we want to display the corresponding item-detail-screen. We want to show the "Task", "Status" and "Priority" of an item and we will use a "transparent" table this time. Here is HTML for the second todo item "Play with MotherApp".We use the "width" attribute in "td" to specify the width of the column as a percentage. Note that a "Back" button is automatically generated by MotherApp when you use a link to go from one page to another. MotherApp stores all the previous screens on a stack and it allows user to go back to the previous screen easily.

<html>  
  <head></head>  
  <body>    
    <wf_titlebar>
      <title align="center">Play with MotherApp</title>
    </wf_titlebar>  
    <table wf_style="rounded">  
      <tr><td width="30%" wf_style="padding">Task</td>      
          <td width="70%" wf_style="padding">Play with MotherApp</td></tr>        
      <tr><td width="30%" wf_style="padding">Status</td>                
          <td width="70%" wf_style="padding">In Progress</td></tr>            
      <tr><td width="30%" wf_style="padding">Priority</td>  
          <td width="70%" wf_style="padding"><img src= "high.png" width="67" height="43"/></td>
    </table>  
  </body>  
</html>

2.6. Add a "Done" button on the titlebar

After playing with MotherApp, you want to mark this item as done. To do that, we add a titlebar button on the screen by just creating a link with "titlebar" style.

<html>  
  <head></head>  
  <body>  
    <wf_titlebar>
      <a href="/./d-media/reference/item2.html?action=done" align="right">Done</a>
      <title>Play with MotherApp</title>
    </wf_titlebar>  
    <table wf_style="rounded">
      <tr><td width="30%" wf_style="padding">Text</td>  
          <td width="70%" wf_style="padding">Play with MotherApp</td></tr>                  
      <tr><td width="30%" wf_style="padding">Status</td>  
          <td width="70%" wf_style="padding">In Progress</td></tr>
      <tr><td width="30%" wf_style="padding">Priority</td>  
          <td width="70%" wf_style="padding"><img src= "high.png" width="67" height="43"/></td></tr>
    </table>   
  </body>
</html>

After clicking the "Done" toolbar button, the app sends the "/item/?id=2&action=done" request to server. The server responses with the following page and marks the "Status" as "Done".

<html>  
  <head></head>  
  <body>  
    <wf_titlebar>
      <title>Play with MotherApp</title>
    </wf_titlebar>  
    <table wf_style="rounded">
      <tr><td width="30%" wf_style="padding">Text</td>  
          <td width="70%" wf_style="padding">Play with MotherApp</td></tr>                  
      <tr><td width="30%" wf_style="padding">Status</td>  
          <td width="70%" wf_style="padding">DONE</td></tr>
      <tr><td width="30%" wf_style="padding">Priority</td>  
          <td width="70%" wf_style="padding"><img src= "high.png" width="67" height="43"/></td></tr>
    </table>   
  </body>
</html>

2.7. Get rid of the "Back" button

But wait, there is a problem after clicking "Done". Since "Done" is a link, MotherApp automatically adds a "Back" button. But we don't want a user to undone an item by clicking the "Back" button. We can get rid of it by marking the style of the "a" link with 'wf_style="navigation_unchanged"'. Now,when the detail page is at "Status = In Progress" and a user clicks done , the page changes to "Status = Done".and cllicking the "Back" button goes back to the item-list-screen instead of the "Status = In Progress" screen.

Note: There are several wf_style values, and you may want to apply more than one to an element. MotherApp supports applying multiple styles; you just need to separate different styles with a space.

<html>  
  <head></head>  
  <body>  
    <wf_titlebar>
      <a href="/./d-media/reference/item2.html?action=done" align="right"
         wf_style="navigation_unchanged">Done</a>
      <title>Play with MotherApp</title>
    </wf_titlebar>  
    <table wf_style="rounded">
      <tr><td width="30%" wf_style="padding">Text</td>  
          <td width="70%" wf_style="padding">Play with MotherApp</td></tr>                  
      <tr><td width="30%" wf_style="padding">Status</td>  
          <td width="70%" wf_style="padding">In Progress</td></tr>
      <tr><td width="30%" wf_style="padding">Priority</td>  
          <td width="70%" wf_style="padding"><img src= "high.png" width="67" height="43"/></td></tr>
    </table>   
  </body>
</html>

2.8. Add an "Add" button on the item-list-screen

So far , we have created two screens: item-list-screen and item-detail-screen. But we want to be able to create new items as well. So we add a "+" button to the item-list-screen and create a third screen to handle the item creation. Assuming the third screen is specified by the page "/new/", we just need to add the link to the titlebar..

<html>  
  <head></head>  
  <body>  
    <wf_titlebar>
      <title align="center">Todo</title>
      <a href="/./d-media/reference/add.html" align="right">+</a>
    </wf_titlebar>  
    <table wf_style="fullscreen">      
      <tr wf_href ="item1.html"><td><img src= "high.png" width="67" height="43"/></td>  
          <td wf_style="padding">Learn MotherApp Framework</td></tr>  
      <tr wf_href ="item2.html"><td><img src= "high.png" width="67" height="43"/></td>  
          <td wf_style="padding">Play with MotherApp</td></tr>  
      <tr wf_href ="item3.html"><td><img src= "medium.png" width="67" height="43"/></td>  
          <td wf_style="padding">Phone Steve Jobs</td></tr>  
      <tr wf_href ="item4.html"><td><img src= "low.png" width="67" height="43"/></td>  
          <td wf_style="padding">Learn Objective-C</td></tr>  
    </table>  
  </body>
</html>

2.9. Submit the item to the server by using HTML "form" tag

We now build the item-creation-screen. Just like typical HTML, you can pass information to the server by form posting.

<html>  
  <head></head>  
  <body>  
    <wf_titlebar>
      <title align="center">Create Todo</title>
      <input type="submit" form="form1" name="s" value="Create" align="right"></input>
    </wf_titlebar>  
    <form id="form1" action="add.html" method="post">  
    <table wf_style="rounded">             
      <tr><td width="30%" wf_style="padding">Text</td>  
          <td width="70%" wf_style="padding"><input type="text" name="text" value=""/></td></tr>         
      <tr><td width="30%" wf_style="padding">Priority</td>  
          <td width="70%" wf_style="padding">  
            <select name="priority" wf_style="segment">  
              <option value="high">High</option>  
              <option value="medium">Mid</option>  
              <option value="low">Low</option>  
            </select></td></tr>   
    </table>              
    </form>  
  </body>  
</html>

Line 15 shows the <select> tag with its wf_style attribute set to "segment". By default, MotherApp would display the selection widget like a normal combo box. Using wf_style="segment" causes the selection widget to display on a iPhone as a segmented set of options.

When we click the "Create" button, the app send the information to the server by using the HTTP POST method. Remember that we needed to use "navigation_unchanged" earlier? We do not need do that when submitting a form. MotherApp is smart enough to do that automatically for form interactions. In response to the request, the server replies with the same page, but adding the message "Item created".

<html>  
  <head></head>  
  <body>  
    <wf_titlebar>
      <title align="center">Create Todo</title>
      <input type="submit" form="form1" name="s" value="Create" align="right"></input>
    </wf_titlebar>
    <div>Item created</div>
    <form action="add.html" id="form1" method="post">  
    <table wf_style="rounded">             
      <tr><td width="30%" wf_style="padding">Text</td>  
          <td width="70%" wf_style="padding"><input type="text" name="text" value=""/></td></tr>         
      <tr><td width="30%" wf_style="padding">Priority</td>  
          <td width="70%" wf_style="padding">  
            <select name="priority" wf_style="segment">  
              <option value="high">High</option>  
              <option value="medium">Mid</option>  
              <option value="low">Low</option>  
            </select></td></tr>   
    </table>              
    </form>  
  </body>  
</html>

We hope this tutorial can get you familiar with MotherApp.

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.