Documentations

MotherApp Tutorial

Part 1: Getting started

We first create a Hello World app in 8 lines of HTML. Then, we show you how to create a todo iPhone client. We assume you have basic knowledge in HTML and know how to construct the backend of the todo app using things like PHP, ASP, Django or Ruby on Rails.
  1. Hello World in MotherApp
  2. Create a todo app
    1. Create an empty skeleton
    2. Build the item-list-screen by using HTML "table" tag
    3. Show the priorities of the items by using HTML "img" tag
    4. Handle the click event of a todo item by using HTML "a" tag
    5. Build the item-detail-screen
    6. Add a "Done" button on the toolbar
    7. Get rid of the "Back" button
    8. Add an "Add" button on the item-list-screen
    9. Submit the todo item to the server by using HTML "form" tag

1. Hello World in MotherApp

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

<html>
    <head>
        <title>Hello World</title>
    </head>
    <body>
        <div>Hello, MotherApp!</div>
    </body>
</html>

It consists of the typical tags such as "html", "title" and "body". The "title" tag describes the title of the app and the "body" tag describes the content of the app. After saving this page at http://mysite.com/helloworld.html, you can send us the link. MotherApp reads the HTML page and create the iPhone app 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 logics and here we only show you the desired output of the HTML.

2.1. Create an empty skeleton

First, we begin with the HTML page with "Todo" as title and save the page to "/" in the server.

<html>
    <head>
        <title>Todo</title>
    </head>
    <body>
    </body>
</html>

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

Then, we want to build the screen with a list of todo items. In MotherApp, a list is defined by "table/tbody/tr/td" tags. For "table" tag, there are 3 different styles: "transparent", "rounded" (default) and "fullscreen". We want to use all the screen space, and 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, just pull the todo items stored in your database and display them in the table.

<html>    
    <head>
        <title>Todo</title>
    </head>
    <body>
        <table wf_style="fullscreen">
            <tbody>
                <tr>
                    <td>Learn MotherApp Framework</td>
                </tr>
                <tr>
                    <td>Play with MotherApp</td>
                </tr>
                <tr>
                    <td>Phone to Steve Job</td>
                </tr>
                <tr>
                    <td>Learn Objective-C</td>
                </tr>
            </tbody>
        </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 those additional information to display the text first and then load the images asynchronously.

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

2.4. Handle the click event of a todo item by using HTML "a" tag

The first screen is nearly finished. When a user clicks the item, we want to show the corresponding detail screen of the item. We need to do two things: 1) handle the click behavior; 2) build the item-detail-screen.

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/?id=[ITEM_NUMBER]", we can just add the "a" tags to the corresponding items.

Note that after adding the links, MotherApp adds the arrows automatically to indicate that the items are clickable.

<html>
    <head>
        <title>Todo</title>
    </head>
    <body>
        <table wf_style="fullscreen">
            <tbody>
                <tr>
                    <td><img src="/high.png" width="67" height="43"       /></td>
                    <td><a href="/item/?id=1">Learn MotherApp Framework</a></td>
                </tr>
                <tr>
                    <td><img src="/high.png" width="67" height="43"       /></td>
                    <td><a href="/item/?id=2">Play with MotherApp</a></td>
                </tr>
                <tr>
                    <td><img src="/medium.png" width="67" height="43"       /></td>
                    <td><a href="/item/?id=3">Phone to Steve Job</a></td>
                </tr>
                <tr>
                    <td><img src="/low.png" width="67" height="43"       /></td>
                    <td><a href="/item/?id=4">Learn Objective-C</a></td>
                </tr>
            </tbody>
        </table>
    </body>
</html>

2.5. Build the item-detail-screen

After handling on an item, we want to build the corresponding item-detail-screen. We want to show the "Text", "Status" and "Priority" of an item and we will use a "rounded" 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 in 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>
        <title>Play with MotherApp</title>
    </head>
    <body>
        <table wf_style="rounded">
            <tbody>
                <tr>
                    <td width="30%">Text</td>
                    <td width="70%">Play with MotherApp</td>
                </tr>
                <tr>
                    <td width="30%">Status</td>
                    <td width="70%">In Progress</td>
                </tr>
                <tr>
                    <td width="30%">Priority</td>
                    <td width="70%"><img src="/high.png" width="67" height="43"/></td>
                </tr>
            </tbody>
        </table>
    </body>
</html>

2.6. Add a "Done" button on the toolbar

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

<html>
    <head>
        <title>Play with MotherApp</title>
    </head>
    <body>
        <a href="/item/?id=2&action=done" wf_style="toolbar">Done</a>
        <table wf_style="rounded">
            <tbody>
                <tr>
                    <td width="30%">Text</td>
                    <td width="70%">Play with MotherApp</td>
                </tr>
                <tr>
                    <td width="30%">Status</td>
                    <td width="70%">In Progress</td>
                </tr>
                <tr>
                    <td width="30%">Priority</td>
                    <td width="70%"><img src="/high.png" width="67" height="43"/></td>
                </tr>
            </tbody>
        </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 specify the "Status" as "Done". 

<html>
    <head>
        <title>Play with MotherApp</title>
    </head>
    <body>
        <table wf_style="rounded">
            <tbody>
                <tr>
                    <td width="30%">Text</td>
                    <td width="70%">Play with MotherApp</td>
                </tr>
                <tr>
                    <td width="30%">Status</td>
                    <td width="70%">DONE</td>
                </tr>
                <tr>
                    <td width="30%">Priority</td>
                    <td width="70%"><img src="/high.png" width="67" height="43"/></td>
                </tr>
            </tbody>
        </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 "navigation_unchanged. Note that MotherApp supports multiple style such as "toolbar navigation_unchanged. You just need to separate different styles with a space. Now, at "Status = In Progress", when a user clicks done , it goes to the "Status = Done". Clicking the "Back" button goes back to the item-list-screen instead of the "Status = In Progress" screen. 

<html>
    <head>
        <title>Play with MotherApp</title>
    </head>
    <body>
        <a href="/item/?id=2&action=done" wf_style="toolbar navigation_unchanged">Done</a>
        <table wf_style="rounded">
            <tbody>
                <tr>
                    <td width="30%">Text</td>
                    <td width="70%">Play with MotherApp</td>
                </tr>
                <tr>
                    <td width="30%">Status</td>
                    <td width="70%">In Progress</td>
                </tr>
                <tr>
                    <td width="30%">Priority</td>
                    <td width="70%"><img src="/high.png" width="67" height="43"/></td>
                </tr>
            </tbody>
        </table>
    </body>
</html>

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

Until now, 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 with style "toolbar".

<html>
    <head>
        <title>Todo</title>
    </head>
    <body>
        <a href="/new/" wf_style="toolbar">+</a>
        <table wf_style="fullscreen">
            <tbody>
                <tr>
                    <td><img src="/high.png" width="67" height="43"/></td>
                    <td><a href="/item/?id=1">Learn MotherApp Framework</a></td>
                </tr>
                <tr>
                    <td><img src="/high.png" width="67" height="43"/></td>
                    <td><a href="/item/?id=2">Play with MotherApp</a></td>
                </tr>
                <tr>
                    <td><img src="/medium.png" width="67" height="43"/></td>
                    <td><a href="/item/?id=3">Phone to Steve Job</a></td>
                </tr>
                <tr>
                    <td><img src="/low.png" width="67" height="43"/></td>
                    <td><a href="/item/?id=4">Learn Objective-C</a></td>
                </tr>
            </tbody>
        </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><title>Create todo</title></head>
    <body>
        <form action="/new/" method="post">
        <table wf_style="rounded">
            <tbody>
                <tr>
                    <td width="30%">Text</td>
                    <td width="70%"><input type="text" name="text" value=""/></td>
                </tr>
                <tr>
                    <td width="30%">Priority</td>
                    <td width="70%">
                        <select name="priority" wf_style="segment">
                            <option value="high">High</option>
                            <option value="medium">Mid</option>
                            <option value="low">Low</option>
                        </select>
                    </td>
                </tr>
            </tbody>
        </table>
        <div>
            <input type="submit" name="s" value="Create" wf_style="toolbar"/>
        </div>
        </form>
    </body>
</html>

Line 14 shows the select tag with segment wf_style attribute, MotherApp would display it like a button. If no specification on wf_style, just shows a normal combo box.

When we click the "Create" button, the app send the information to the server by using the HTTP POST method. Remember we need to use "navigation_unchanged" earlier? MotherApp is smart enough to do that automatically for form interaction. In response to the request, the server replies with the message "Item created".

<html>
    <head><title>Create todo</title></head>
    <body>
        <div>Item created</div>
        <form action="/new/" method="post">
        <table wf_style="rounded">
            <tbody>
                <tr>
                    <td width="30%">Text</td>
                    <td width="70%"><input type="text" name="text" value=""/></td>
                </tr>
                <tr>
                    <td width="30%">Priority</td>
                    <td width="70%">
                        <select name="priority" wf_style="segment">
                            <option value="high">High</option>
                            <option value="medium">Mid</option>
                            <option value="low">Low</option>
                        </select>
                    </td>
                </tr>
            </tbody>
        </table>
        <div>
            <input type="submit" name="s" value="Create" wf_style="toolbar"/>
        </div>
        </form>
    </body>
</html>

We hope this tutorial can get you familiar with MotherApp.

Once you get the idea of MotherApp, you can read through next article MotherApp Simulator. The article tells you how to develop an iPhone app using a normal web browser before deploying to iPhone. It is a great tool for debuging your app.

Last Updated (Wednesday, 28 October 2009 21:43)

← Previous
Generator Overview

Next →
Tutorial Part 2: MotherApp iPhone simulator