Documentations

MotherApp Tutorial

Part 3: Create a Movie Showtimes app

This is a more advanced tutorial. If you want to know the basics, please read the Getting started and MotherApp simulator.

In this tutorial we are going to develop a Movie Showtimes app. You will learn how to:

  1. Create a tabbar
  2. Use the GPS
  3. Use link type to trigger a phone call or SMS
  4. Use a map

Again, we assume you know how to handle the server side script and we only show how to create the screen using MotherApp HTML.

You can see the complete example running on the MotherApp simulator.

1. Tabbar

Our app has two tabs:

  1. Movies, which list all the movies based on the user's current location.
  2. Cinemas, which list all the cinemas based on the user's current location.

Creating a tabbar with the tabs above is similar to the frame concept in HTML:

<html>
    <head>
        <title>Showtimes</title>
    </head>
    <!-- main content here -->
    <body>
        <!-- tab bar definition -->
        <div wf_type="tabbar">
            <a href="/movies.html"
                wf_tab_img="movies_off.png"
                wf_tab_img_active="movies_on.png">
                Movies
            </a>
            <a href="/cinemas.html"
                wf_tab_img="cinemas_off.png"
                wf_tab_img_active="cinemas_on.png">
                Cinemas
            </a>
        </div>
    </body>
</html>

Line 8-19 creates the tabbar. Line 8 tells MotherApp that it is a tabbar. Line 9-13 and line 14-18 define two tabs which link to "movies.html" and "cinemas.html". The attribute "wf_tab_img" defines the image for the tab. The attribute "wf_tab_img_active" defines the image of the tab when it is on or active. By default, the first tab (movies.html) would be the active tab.

Since "movies.html" is not existed yet, the title of the screen is "404 Not Found". So, we add the page "movies.html" to show a list of movies:

<html> 
    <head><title>Movies</title></head> 
    <body> 
        <table wf_style="fullscreen"> 
            <tbody> 
                <tr> 
                    <td wf_style="padding"><a href="/movie.html?id=1"><div><b>A Christmas Tale (Un conte de Noel)</b></div> 
                    <div><small>‎2hr 30min‎‎ - Drama‎</small></div></a> 
                    </td>                  
                </tr> 
                <tr> 
                    <td wf_style="padding"><a href="/movie.html?id=2"><div><b>A Secret (Un Secret)</b></div> 
                    <div><small>‎1hr 47min‎‎ - Drama‎</small></div></a> 
                    </td>                  
                </tr> 
                ...
            </tbody> 
        </table> 
    </body> 
</html>

2. GPS

However, instead of just showing the movies, we want to show them based on user's current location. To get the location of the user, just use the variable "[wf:gps]":

<html>
    <head>
        <title>Showtimes</title>
    </head>
    <!-- main content here -->
    <body>
        <!-- tab bar definition -->
        <div wf_type="tabbar">
            <a href="/movies.html?location=[wf:gps]"
                wf_tab_img="movies_off.png"
                wf_tab_img_active="movies_on.png">
                Movies
            </a>
            <a href="/cinemas.html?location=[wf:gps]"
                wf_tab_img="cinemas_off.png"
                wf_tab_img_active="cinemas_on.png">
                Cinemas
            </a>
        </div>
    </body>
</html>

Lines 9 and 14 show the way we transfer the location information to the server. When the tab is loaded, MotherApp replaces "[wf:gps]" with the location detected by the device in "latitude,longitude" format. For examples, "movies.html?location=[wf:gps]" will becomes "movies.html?location=22.22,114.11" and pass on to the server. Then, the server side can use this information and return the movies nearby. You can also use "[wf:gps]" as hidden input in <form> or option value in <select>. For example:

<input type="hidden" name="ll" value="[wf:gps]"/>

and

<option value="[wf:gps]">Locate me</option>

3. Link types

Now, let's look at the cinema details screen. We want to call the cinema by clicking on its number. In MotherApp, just use the link type "tel://" instead of "http://". There are other link types such as SMS (sms://) and email (mailto://).

<html> 
    <head><title>ABC Cinema</title></head> 
    <body> 
        <div><b>ABC Cinema</b></div> 
        <table> 
            <tbody> 
                <tr> 
                    <td width="30%" wf_style="padding">Phone</td> 
                    <td width="70%" wf_style="padding"><a href="tel://(212) 757-2280">(212) 757-2280</a></td> 
                </tr> 
                <tr> 
                    <td wf_style="padding">Address</td> 
                    <td wf_style="padding"><a href="/cinema_map.html?id=1">30 Lincoln Plaza, New York, NY</a></td> 
                </tr> 
            </tbody> 
        </table> 
    </body> 
</html>

4. Map

It is very easy to use a map. You only have to use a simple markup similar to the tabbar. See the following code (cinema_map.html):

<html> 
    <head><title>ABC Cinema</title></head> 
    <body> 
        <div wf_type="map" wf_map_center="40.580795,-74.111343" wf_map_zoom="12"> 
            <a wf_geo_location="40.580795,-74.111343" href="tel://(212) 757-2280">Dial</a> 
        </div> 
    </body> 
</html>

Line 4-6 creates the map. Use "wf_map_center" to define the latitude and longitude of the map center. Use "wf_map_zoom" to define the zoom level, which ranges from 1 to 17. Use a simple link with "wf_geo_location" to define a flag.

We hope this tutorial helps you to build your dream app.

← Previous
Tutorial Part 2: MotherApp iPhone simulator

Next →
Coding References