Documentations

Tutorial Part 1: Getting Started - See how to use MotherApp to create a mobile app
Tutorial Part 2: MotherApp iPhone simulator - Debug your app with MotherApp iPhone simulator
Tutorial Part 3: Create a Movie Showtimes application - A step-by-step example
Coding References - An overview of all available features in syntax

Coding References

Select from below tags to sort coding references by different order

Formatting - Basics

Formatting - Tab

Formatting - Header/Footer

Formatting - Others

Image

Text Style

<b>

<big>

<small>

Clickable Row Link

<a>

Button Link

Toolbar Link

Link behaviours - Basics

Link behaviours - Popup

Link behaviours - Others

Form

Form Inputs

Colorings

<[body/table/tr/td/div] bgcolor="#RRGGBB">

Album

Map

[wf:map_center]

[wf:map_zoom]

Other Widgets

Phone Features

"mailto://[email address]"

"sms://[phone number]"

"tel://[phone number]"

"wf://device/contact/add"

[wf:device_id]

Hardware Features

"wf://device/vibrate"

[wf:accelerometer]

[wf:gps]

Multimedia

Caching

[permanent caching]

Supported HTTP features

[cookies handling]

[http caching]

<body>

Create the body of an app.

<html>
    <head><title>&lt;body&gt;</title></head>
<body>
    <div>The body element contains all
    the contents of an HTML document,
    such as text, hyperlinks, images, tables,
    etc</div>
</body>
</html>

iPhone

<div>

The <div> tag defines a division or a section in an HTML document.
The <div> tag is often used to group block-elements to format them with styles.

<html>
	<head><title>Check for DIV</title></head>
	<body>
		<div>Hello world</div>
		<div>Rosetta Test Cases</div>
		<div>
			<div>Curabitur tellus. Phasellus tellus turpis, iaculis in, faucibus lobortis, posuere in, lorem. Donec a ante. Donec neque purus, adipiscing id, eleifend a, cursus vel, odio. Vivamus varius justo sit amet leo. Morbi sed libero. Vestibulum blandit augue at mi. Praesent fermentum lectus eget diam. Nam cursus, orci sit amet porttitor iaculis, ipsum massa aliquet nulla, non elementum mi elit a mauris.</div>

			<div>Vestibulum blandit augue at mi. Praesent fermentum lectus eget diam. Nam cursus, orci sit amet porttitor iaculis, ipsum massa aliquet nulla, non elementum mi elit a mauris. In hac habitasse platea. Vestibulum blandit augue at mi. Praesent fermentum lectus eget diam. Nam cursus, orci sit amet porttitor iaculis, ipsum massa aliquet nulla, non elementum mi elit a mauris. In hac habitasse platea.</div>
		</div>
	</body>
</html>

iPhone

Insert padding in the <div>.

<html>
    <head><title>Check for DIV</title></head>
    <body>
        <div>Hello world</div>
        <div wf_style="padding">Rosetta Test Cases</div>
        <div wf_style="padding">
            <div>Curabitur tellus. Phasellus tellus turpis, iaculis in, faucibus lobortis, posuere in, lorem. Donec a ante. Donec neque purus, adipiscing id, eleifend a, cursus vel, odio. Vivamus varius justo sit amet leo. Morbi sed libero. Vestibulum blandit augue at mi. Praesent fermentum lectus eget diam. Nam cursus, orci sit amet porttitor iaculis, ipsum massa aliquet nulla, non elementum mi elit a mauris.</div>

            <div>Vestibulum blandit augue at mi. Praesent fermentum lectus eget diam. Nam cursus, orci sit amet porttitor iaculis, ipsum massa aliquet nulla, non elementum mi elit a mauris. In hac habitasse platea. Vestibulum blandit augue at mi. Praesent fermentum lectus eget diam. Nam cursus, orci sit amet porttitor iaculis, ipsum massa aliquet nulla, non elementum mi elit a mauris. In hac habitasse platea.</div>
        </div>
    </body>
</html>

iPhone

<span>

Define the content enclosed by the <span> tag to be inline.

<div>
    <span>
        span 1.
    </span>
    <span>
        span 2.
    </span>
    <span>
        span 3.
    </span>
    <span>
        span 4.
    </span>
</div>

iPhone

<table>

Create a table. Use table to layout your UI elements.

Note:
• The maximum number of column is 3.
• You cannot put a table inside another table.
• It can only be enclosed by the <body> tag.

<html>
    <head>
        <title>Restaurant</title>
    </head>

    <body>
        <table>
            <tbody>
                <tr>

                    <td width="40%" wf_style="padding">
                        Name
                    </td>
                    <td width="60%" wf_style="padding">
                        Cafe Union
                    </td>
                </tr>
                <tr>
                    <td wf_style="padding">
                        Address
                    </td>

                    <td wf_style="padding">
                        1/F The Landmark Central
                    </td>
                </tr>
            </tbody>
        </table>
    </body>
</html>

iPhone

Set the table title.

<html>
    <head>
        <title>Restaurant</title>
    </head>

    <body>
    	<!-- maybe the fullscreen table is the same as normal table in some devices -->
        <table wf_style="fullscreen" title="Restaurant">
            <tbody>

                <tr>
                    <td width="40%" wf_style="padding">
                        Name
                    </td>
                    <td width="60%" wf_style="padding">
                        Cafe Union
                    </td>
                </tr>
                <tr>
                    <td wf_style="padding">

                        Address
                    </td>
                    <td wf_style="padding">
                        1/F The Landmark Central
                    </td>
                </tr>
            </tbody>
        </table>
    </body>
</html>

iPhone

Stretch the column to fill up the whole screen.

<html>
    <head>
        <title>Restaurant</title>
    </head>

    <body>
    	<!-- maybe the fullscreen table is the same as normal table in some devices -->
        <table wf_style="fullscreen">
            <tbody>
                <tr>
                    <td width="40%" wf_style="padding">
                        Name
                    </td>
                    <td width="60%" wf_style="padding">
                        Cafe Union
                    </td>
                </tr>
                <tr>
                    <td wf_style="padding">

                        Address
                    </td>
                    <td wf_style="padding">
                        1/F The Landmark Central
                    </td>
                </tr>
            </tbody>
        </table>
    </body>
</html>

iPhone

Make the table transparent.

<html>
    <head>
        <title>Restaurant</title>
    </head>

    <body>
        <table wf_style="transparent">
            <tbody>
                <tr>
                    <td width="40%" wf_style="padding">
                        Name
                    </td>
                    <td width="60%" wf_style="padding">
                        Cafe Union
                    </td>
                </tr>
                <tr>
                    <td wf_style="padding">
                        Address
                    </td>

                    <td wf_style="padding">
                        1/F The Landmark Central
                    </td>
                </tr>
            </tbody>
        </table>
    </body>
</html>

iPhone

Specify the cell's width as X percentage of the table's width.

<html>
    <head>
        <title>Restaurant</title>
    </head>

    <body>
        <table>
            <tbody>
                <tr>
                    <td width="40%" wf_style="padding">
                        Name
                    </td>
                    <td width="60%" wf_style="padding">
                        Cafe Union
                    </td>
                </tr>
                <tr>
                    <td wf_style="padding">
                        Address
                    </td>

                    <td wf_style="padding">
                        1/F The Landmark Central
                    </td>
                </tr>
            </tbody>
        </table>
    </body>
</html>

iPhone

align the elements inside <td> tags

<html>
	<head><title>td align</title></head>
	<body>
        <table>
            <tbody>
                <tr>
                    <td wf_style="padding">without align</td>
                </tr>

                <tr>
                    <td wf_style="padding" align="center">align center </td>
                </tr>
                <tr>
                    <td wf_style="padding" align="right">align right </td>
                </tr>
            </tbody>
        </table>

	</body>
</html>

iPhone

<title>

Create the title of the app.

<html>
  <head>
    <title>&lt; title &gt;</title>
  </head>
  <body>
  </body>
</html>

iPhone

Create a tabbar.
For the "tabbar" widget, it is similar to the "frame" in html, so we cannot support "tabbar" widget combined with other contents.
this is the tedtalk example you can follow http://tedtalk.willflow.com/
it only contains a tabbar widget and point to 3 pages. And MotherApp load the 1st one by default (The default loading tab page can be override by using 'wf_style="selected"' in <a> link).

Note:
• Use a link with "wf_tab_img" and "wf_tab_img_active" to create a tab. iPhone ONLY NEEDS "wf_tab_img", as it generates the blue shading and shadow of the active tab automatically. The icon image should be:
- 40 by 30 pixels.
- Use png-24 with transparent background.
- Do not add shadow.
- The text for the icon should be included in the link instead of the image.
See the following image as an example.

<html>
	<head><title>Tab Demonstration</title></head>
	<body>
		<div wf_type="tabbar">
            <a href="052-tab_1.html" wf_tab_img="tab_icon.png" wf_tab_img_active="tab_icon_on.png">Tab 1</a>
			<a href="052-tab_2.html" wf_tab_img="tab_icon.png" wf_tab_img_active="tab_icon_on.png">Tab 2</a>
		</div>
	</body>

</html>

iPhone

Create a footer.

<html>
	<head><title>Footer</title></head>
	<body>
		<table wf_style="fullscreen">
			<tbody>
                <tr>
                    <td>
                        <img src="food1.jpg" width="50" height="50"/>
                    </td>

                    <td>
                        Curabitur tellus. Phasellus tellus turpis, iaculis in, faucibus lobortis, posuere in, lorem. Donec a ante. Donec neque purus, adipiscing id, eleifend a, cursus vel, odio.
                    </td>
                </tr>
			</tbody>
		</table>
        <div wf_style="footer">
            <div>This is the footer</div>
        </div>

	</body>
</html>

iPhone

Create a header.

<html>
	<head><title>Header</title></head>
	<body>
		<div wf_style="header">
			<div>This is the header</div>
		</div>
		<table wf_style="fullscreen">
			<tbody>

				<tr>
					<td>
						<img src="food1.jpg" width="50" height="50"/>
					</td>
					<td>
						Curabitur tellus. Phasellus tellus turpis, iaculis in, faucibus lobortis, posuere in, lorem. Donec a ante. Donec neque purus, adipiscing id, eleifend a, cursus vel, odio.
					</td>
				</tr>
			</tbody>

		</table>
	</body>
</html>

iPhone

Hide the toolbar from screen

Note that if the application is of multiple tabs, only the tab with this style is affected, but not the other tabs.

<html>
	<head><title>I should be hidden</title></head>
	<body wf_style="hide_toolbar">
		toolbar hide test
	</body>
</html>

iPhone

the screen is not able to be scrolled (iphone only)

<html>
	<head><title>no scroll</title></head>
	<body wf_style="iphone_no_scroll">
		<div>
			I cannot be scrolled
		</div>
	</body>
</html>

iPhone

Create an image.
If no width or no height attributes, image would be retrieved from server before rendering.
If including width and height attributes, the image will be loaded after ui rendering.

If the image is the only child in <td>, the <td> width will fit the width of image automatically

1.
<html>
	<head><title>img test case</title></head>
	<body>
		<div>JPG: <img src="hello_world.jpg" width="48" height="48"/></div>
		<div>PNG: <img src="hello_world.png" width="45" height="41"/></div>
		<div>GIF: <img src="hello_world.gif" width="50" height="50"/></div>
		<div>No this image: <img src="no_this_image.jpg" width="50" height="50"/></div>

	</body>
</html>

2.
<html>
	<head><title>img test case</title></head>
	<body>
		<table>
		<tbody>
                <tr>
                    <td wf_style="padding">
                        <img src="hello_world.jpg" width="48" height="48"/>
                    </td>
                    <td wf_style="padding">

                        World
                    </td>
                </tr>
                <tr>
                    <td wf_style="padding">
                        <img src="hello_world.jpg" width="48" height="48"/>
                    </td>
                    <td wf_style="padding">

                        World
                    </td>
                </tr>
                <tr>
                    <td wf_style="padding">
                        <img src="hello_world.jpg" width="48" height="48"/>
                    </td>
                    <td wf_style="padding">
                        Man
                    </td>

                </tr>
			</tbody>
		</table>
	</body>
</html>

iPhone

Create image map. <area/> tags should be added inside, just as normal HTML image maps.

<!-- note that the image_map.png has a red & blue block inside the image, for illustration purpose -->
<html>
	<head><title>image map</title></head>
	<body wf_style="fullscreen">

		<map name="map1">
			<area href="s1.html" shape="rect" coords="0,0,100,100"/>
			<area href="s2.html" shape="rect" coords="200,200,300,300"/>
		</map>
				
		<table><tr><td><img src="image_map.png" usemap="#map1"/></td></tr></table>
	</body>
</html>

iPhone

<b>

Create bold text.

<html>
	<head><title>Bold Test Case</title></head>
	<body>
		<div>Normal Text Here</div>
		<div>
			<b>Bold Text Here</b>
		</div>
	</body>

</html>

iPhone

<big>

Create big text

<html>
	<head><title>Big Test Case</title></head>
	<body>
		<div>Normal Text Here</div>
		<div>
			<big>Big Text Here</big>
		</div>
	</body>

</html>

iPhone

Change the title text size.
nn in points

<html>
	<head><title>Title With Text Size</title></head>
	<body wf_style="toolbar_title_text_size:12">
        <div>Hello World</div>
	</body>
</html>

iPhone

change size of text, the specified value is point size of font

<html>
	<head><title>Text Size</title></head>
	<body>
		<table>
			<tr> <td><div wf_style="text_size:18">this is of 18 point</div></td></tr>
			<tr> <td><div wf_style="text_size:22">this is of 22 point</div></td></tr>
		</table>

	</body>
</html>

iPhone

text_small: Render the text in the section as small text.
text_bold: Render the text in the section as bold text.
text_big: Render the text in the section as big text.

<html>
	<head><title>Text style</title></head>
  <body>
<div>
    <div>Render the text in the section without style.</div>
    <div wf_style="text_bold">Render the text in the section as bold text.</div>
    <div wf_style="text_small">Render the text in the section as small text.</div>
    <div wf_style="text_big">Render the text in the section as big text.</div>
</div>
  </body>
</html>

iPhone

<small>

Small text

<html>
	<head><title>Small Test Case</title></head>
	<body>
		<div>Normal Text Here</div>
		<div>
			<small>Small Text Here</small>
		</div>
	</body>

</html>

iPhone

<a>

Row link, must in using in <tr><td>.
The <a> must be the only child of <td>. (p.s. inside <a>, you can use button <a> link)

<html>
    <head><title>Level 1</title></head>
    <body>
        <table>
            <tbody>
                <tr>
                    <td wf_style="padding">
                        <a href="031-navigation_testing_level_2.html?dummy=value1&dummy2=value2">
                            Goto Level 2
                        </a>

                    </td>
                </tr>
                <tr>
                    <td wf_style="padding">
                        <a href="broken_link.html">
                            Broken Link
                        </a>
                    </td>
                </tr>

            </tbody>
        </table>
    </body>
</html>

iPhone

Create a link button (if text inside)
Create an image button (if img tag inside)

1. Text Button
<html>
    <head><title>Toolbar button for a links</title></head>
    <body>
        <div>
        <a href="053-toolbar_a_links.php?link=Button+Link+1" wf_style="button">Link 1</a>
        <a href="053-toolbar_a_links.php?link=Button+Link+2" wf_style="button">Link 2</a>
        <a href="053-toolbar_a_links.php?link=Button+Link+3" wf_style="button">Link 3</a>
        <a href="./" disabled="disabled" wf_style="button">Disabled button</a>
        </div>
    </body>
</html>

2. Image Button
<html>
    <head><title>Image button for a links</title></head>
    <body>
        <div>
        <a href="053-toolbar_a_links.php?link=Image+Link+1" wf_style="button">
            <img src="hello_world.jpg" width="48" height="48"/>
        </a>
        <a href="053-toolbar_a_links.php?link=Image+Link+2" wf_style="button">
            <img src="hello_world.png" width="45" height="41"/>

        </a>
        </div>
    </body>
</html>

iPhone

Create a button at the toolbar. To put an image icon on the toolbar, use <img> to create an image link.

1. Text Toolbar
<html>
    <head><title>Toolbar button for a links</title></head>
    <body>
        <a href="053-toolbar_a_links.php?link=Toolbar+Link+1" wf_style="toolbar">Link 1</a>
        <a href="./" disabled="disabled" wf_style="toolbar">Disabled link</a>
    </body>
</html>

2. Toolbar in submit
<html>
    <head><title>Toolbar button for a links</title></head>
    <body>
        <form action="053-toolbar_a_links.php">
            <input type="hidden" name="link" value="Submit Link 1"/>
            <input type="submit" name="s" value="Link 1" wf_style="toolbar"/>            
        </form>

        <form action="053-toolbar_a_links.php">
            <input type="hidden" name="link" value="Submit Link 2"/>

            <input type="submit" name="s" value="Link 2" wf_style="toolbar"/>           
        </form>

        <form action="053-toolbar_a_links.php">
            <input type="hidden" name="link" value="Submit Back"/>
            <input type="submit" name="s" value="Back" wf_style="toolbar_back"/>
        </form>

        <form action="./">
            <input type="submit" disabled="disabled" name="s" value="Disabled" wf_style="toolbar"/>

        </form>
    </body>
</html>

3. image toolbar
<html>
    <head><title>Toolbar image</title></head>
    <body>
        <div>This page shows the toolbar button with image</div>
        <a href="053-toolbar_a_links.php?link=Toolbar+Image+Link" wf_style="toolbar"><img src="toolbar_add.png"/></a>
    </body>
</html>

iPhone

Create a button at the "Back" button position.

<html>
    <head><title>Toolbar back button</title></head>
    <body>
        <a href="053-toolbar_a_links.php?link=Toolbar+Back" wf_style="toolbar_back">Back</a>
    </body>
</html>

iPhone

Create a up arrow button at the toolbar.

<html>
    <head><title>Toolbar up button</title></head>
    <body>
        <a href="053-toolbar_a_links.php?link=Toolbar+Up+Arrow" wf_style="toolbar_up_arrow"></a>
    </body>
</html>

iPhone

Create a down arrow button at the toolbar.

<html>
    <head><title>Toolbar down button</title></head>
    <body>
        <a href="053-toolbar_a_links.php?link=Toolbar+Down+Arrow" wf_style="toolbar_down_arrow"></a>
    </body>
</html>

iPhone

Create a down arrow button at the toolbar.

<html>
    <head><title>Toolbar left button</title></head>
    <body>
        <a href="053-toolbar_a_links.php?link=Toolbar+Left+Arrow" wf_style="toolbar_left_arrow"></a>
    </body>
</html>

iPhone

Create a right arrow button at the toolbar.

<html>
    <head><title>Toolbar right button</title></head>
    <body>
        <a href="053-toolbar_a_links.php?link=Toolbar+Right+Arrow" wf_style="toolbar_right_arrow"></a>
    </body>
</html>

iPhone

After following the link from page A to page B, reset all navigation and load page B as if it is the beginning of the app.

<html>
    <head><title>Level 1</title></head>
    <body>
        <table>
            <tbody>
                <tr>
                    <td wf_style="padding">
                        <a href="0312-navigation_reset_level_2.html" wf_style="navigation_reset">
                            Goto Level 2
                        </a>

                    </td>
                </tr>
            </tbody>
        </table>
    </body>
</html>

iPhone

By default, all the <a> links are using "navigation_pushed" style.
When you load a page B from page A, page B will be stacked on the page A. So page B is on the page A. Then there is a "Back" button (for iPhone) automatically on page B so that you can click the "Back" button to go back to page A. There is a "Back" hardware button for some mobile devices. This "Back" button would use the same behaviour as the "Back" button in iPhone (e.g. go back to page A)

page A:
<html>
    <head><title>Level 1</title></head>
    <body>
        <table>
            <tbody>
                <tr>
                    <td wf_style="padding">
                        <a href="031-navigation_testing_level_2.html?dummy=value1&dummy2=value2">
                            Goto Level 2
                        </a>

                    </td>
                </tr>
                <tr>
                    <td wf_style="padding">
                        <a href="broken_link.html">
                            Broken Link
                        </a>
                    </td>
                </tr>

            </tbody>
        </table>
    </body>
</html>

page B:
<html>
    <head><title>Level 2</title></head>
    <body>
    	<div>You should have a back button automatically</div>
        <table>
            <tbody>
                <tr>
                    <td wf_style="padding">

                        <a href="031-navigation_testing_level_3.html">
                            Goto Level 3
                        </a>
                    </td>
                </tr>
            </tbody>
        </table>
    </body>
</html>

iPhone

After following the link from page A to page B, use the navigation of A in page B. For example, if A has a "Back" button that goes back to the "Home" screen, the same "Back" button will appear on page B.

<html>
    <head><title>Level 1</title></head>
    <body>
        <table>
            <tbody>
                <tr>
                    <td wf_style="padding">
                        <a href="0311-navigation_unchanged_level_2.html" wf_style="navigation_unchanged">
                            Goto Level 2
                        </a>
                    </td>
                </tr>
            </tbody>
        </table>
    </body>
</html>

iPhone

Force MotherApp to refresh the loaded pages.
refresh_all: force to refresh all the pages
refresh_parent: force to refresh the pages in the same tab

1. Refresh Parent
<html>
    <head>
        <meta name="wf_action" content="refresh_parent"/>
        <title>Refersh Parent Page</title>
    </head>
    <body>
        <div>Click back to see whether the parent is reloaded</div>
    </body>
</html>

2. Refresh All
<html>
    <head>
        <meta name="wf_action" content="refresh_all"/>
        <title>Refersh All Page</title>
    </head>
    <body>
        <div>Click back and then click Tab1 to see whether the two pages are reloaded</div>
    </body>
</html>

iPhone

Same as "popup_bottom".

<html>
    <head><title>Popup</title></head>
    <body>
        <table wf_style="transparent">
            <tbody>
                <tr>
                    <td wf_style="padding">
                        <a href="/newpage.html" wf_style="popup">Open the link with a popup.</a>

                    </td>
                </tr>
            </tbody>
        </table>
    </body>
</html>

iPhone

Open the link with a popup that is placed at the bottom.

<html>
    <head><title>Popup bottom</title></head>
    <body>
        <table wf_style="transparent">
            <tbody>
                <tr>
                    <td wf_style="padding">
                        <a href="newpage.html" wf_style="popup_bottom">Open the link with a popup_bottom.</a>

                    </td>
                </tr>
            </tbody>
        </table>
    </body>
</html>

iPhone

Open the link with a popup that is placed at the center.

<html>
    <head><title>Popup center</title></head>
    <body>
        <table wf_style="transparent">
            <tbody>
                <tr>
                    <td wf_style="padding">
                        <a href="newpage.html" wf_style="popup_center">Open the link with a popup_center.</a>

                    </td>
                </tr>
            </tbody>
        </table>
    </body>
</html>

iPhone

Open the link with a web browser.

<html>
    <head><title>Embedded Browser</title></head>
    <body>
        <table wf_style="transparent">
            <tbody>
                <tr>
                    <td wf_style="padding">
                        <a href="http://www.google.com" wf_style="browser">Open the link with a web browser.</a>
                    </td>
                </tr>
            </tbody>
        </table>
    </body>
</html>

iPhone

method="get":
Use the get method. Send the user inputs in the URL string.

method="post":
Use the post method. Send the user inputs in the body of the request.

action="url":
The url for the data to send to.

enctype="multipart/form"
If you want to send non-text data such as images, please use this attribute.

wf_style="navigation_pushed/navigation_reset/navigation_unchanged" (Optional)
The navigation_xxx is similar to the <a> link behaviour. But for <form> tag, "navigation_unchanged" is the default behaviour.

<html>
    <head><title>Textbox</title></head>
    <body>
        <form action="036-form_get_textbox.php" method="get">
            <div>
            <div><input type="text" name="query"/></div>
            <div><input type="submit" name="s" value="Submit"/></div></div>
        </form>
    </body>
</html>

iPhone

Enclose a <select> in <div> to create an iPhone style picker that is embedded on the screen.

<html>
<head>
    <title>Embedded iPhone Picker</title>
</head>
<body wf_style="fullscreen">
<form action="" method="post">
    <div>
    <div wf_style="iphone_picker_embedded">
        <select name="area">
            <option value="all">Area - All</option>

            <option value="kln_city">Kowloon City</option>
            <option value="central">Central</option>
            <option value="tst">Tsim Sha Tsui</option>
            <option value="mk">Mong Kok</option>
        </select>
        <select name="cuisine">
            <option value="all">Cuisine - All</option>

            <option value="american">American</option>
            <option value="japanese">Japanese</option>
            <option value="thai">Thai</option>
            <option value="italian">Italian</option>
        </select>
    </div></div>
    <div>
        <input type="submit" name="s" value="Submit"/>
    </div>
</form>
</body>
</html>

iPhone

Show a datepicker widget

The value may be preset.

<html>
    <head><title>date time picker</title></head>
    <body>
        <form action="" method="get">
        <table>
            <tr><td><input type="date" name="t1" value=""/></td></tr>
            <tr><td><input type="submit" value="Send"/></td></tr>
        </table>
        </form>

        <!-- outuput display -->
        <table>
            <tr><td>t1 value:</td></tr>
        </table>
    </body>
</html>

iPhone

Text Input

<html>
    <head><title>Textbox</title></head>
    <body>
        <form action="036-form_get_textbox.php" method="get">
            <div>
            <div><input type="text" name="query"/></div>
            <div><input type="submit" name="s" value="Submit"/></div></div>
        </form>
    </body>
</html>

iPhone

Create a hidden field.

<html>
    <head><title>Hidden input</title></head>
    <body>
        <div>This page contains a hidden input with name=query, value=Hello World</div>
        <form action="038-form_get_hidden.php" method="get">
            <div>
            <input type="hidden" name="query" value="Hello World"/>
            <input type="submit" name="s" value="Submit"/></div>
       </form>
    </body>
</html>

iPhone

HTML input checkbox type

<html>
    <head><title>Checkbox input</title></head>
    <body>
        <div>You have not checked the box</div>
        <form action="043-form_get_checkbox.php" method="get"><div>
            <input type="checkbox" name="query" value="Y"/>
            <input type="submit" name="s" value="Submit"/></div>
        </form>
    </body>
</html>

iPhone

create a password field

<html>
    <head><title>Password input</title></head>
    <body>
        <div>This page contains a password input with name=query, value=Hello World</div>
        <form action="039-form_get_password.php" method="get">
            <div>
            <input type="password" name="query" value="Hello World"/>
            <input type="submit" name="s" value="Submit"/></div>
        </form>
    </body>
</html>

iPhone

Create a search box

<html>
    <head><title>Search Box</title></head>
    <body>
        <form action="0485-form_post_searchbox.php" method="post">
            <div>
                <div><input type="text" name="query" wf_style="search"/></div>
            </div>
        </form>
    </body>
</html>

iPhone

Create a submit button

Note that the submit button may act as a normal button, as well as a toolbar button.

<html>
    <head><title>Textbox</title></head>
    <body>
        <form action="036-form_get_textbox.php" method="get">
            <div>
            <div><input type="text" name="query"/></div>
            <div><input type="submit" name="s" value="Submit"/></div></div>
        </form>
    </body>
</html>

iPhone

This selects the type of keyboard, the currently supported are:
number
number_and_period
number_and_symbols

If keyboard type is not set, the character keyboard would be used.

<html>
    <head><title>Textbox</title></head>
    <body>
                <form action="083-form_get_textbox_numeric_keyboard.php" method="get">
            <div>
            <div><input type="text" name="query" wf_style="keyboard_type:number_and_period"/></div>
            <div><input type="submit" name="s" value="Submit"/></div></div>
        </form>
    </body>
</html>

iPhone

Create a file dialog. In iPhone, the default is camera. In iPod touch, the default is the photo album.
p.s. remember using enctype="multipart/form-data" and method="post" in <form>

Extended Attributes:
camera: Create a camera.
user_album: Create the user multimedia album.
system_album: Create the system multimedia album.

<html>
    <head><title>File Input</title></head>
    <body>
        <form enctype="multipart/form-data" action="048-form_post_file.php" method="POST">
            <div>
            <input type="hidden" name="MAX_FILE_SIZE" value="1000000" />
                Choose a file to upload: <input name="uploadedfile" type="file"/><br/>
            <input type="submit" value="Upload File" /></div>
        </form>
    </body>
</html>

iPhone

Create a drop-down list.

<html>
    <head><title>Select input</title></head>
    <body>
        <form action="041-form_get_select.php" method="get"><div>
            <select name="query">
                <option value="Apple">Apple</option>
                <option value="Banana">Banana</option>
                <option value="Cat">Cat</option>
                <option selected="selected">Dog</option>
                <option>Egg</option>
            </select>
            <input type="submit" name="s" value="Submit"/></div>
        </form>
    </body>
</html>

iPhone

Hide the drop-down list. Show it as popup after the "Submit" button is clicked.

<html>
    <head><title>Select input</title></head>
    <body>
         <form action="" method="get"><div>
            <select name="query" wf_style="popup">
                <option value="Apple">Apple</option>
                <option value="Banana">Banana</option>
                <option value="Cat">Cat</option>

                <option value="Dog">Dog</option>
                <option>Egg</option>
            </select>
            <input type="submit" name="s" value="Submit"/></div>
        </form>
    </body>
</html>

iPhone

The drop-down list is shown as a segment.

<html>
    <head><title>Select input</title></head>
    <body>
        <form action="" method="get"><div>
            <select name="query" wf_style="segment">
                <option value="Apple">Apple</option>
                <option value="Banana">Banana</option>
                <option value="Cat">Cat</option>

            </select>
            <input type="submit" name="s" value="Submit"/></div>
        </form>
    </body>
</html>

iPhone

HTML Textarea, used to fill in multiple-line text

<html>
    <head><title>Textarea input</title></head>
    <body>
        <form action="045-form_get_textarea.php" method="get"><div>
            <textarea name="query">Type your message here</textarea>
            <input type="submit" name="s" value="Submit"/></div>
        </form>
    </body>
</html>

iPhone

change toolbar background color

<html>
	<head><title>Toolbar color</title></head>
	<body wf_style="toolbar_color:#4e0000">
        Hello World
	</body>
</html>

iPhone

Specifies color of toolbar buttons

<html>
	<head><title>Toolbar button color</title></head>
	<body wf_style="toolbar_button_color:#4e0000">
        Hello World
        <a href="#" wf_style="toolbar">Go</a>
	</body>
</html>

iPhone

change text color for toolbar title

<html>
	<head><title>Title With Color Text</title></head>
	<body wf_style="toolbar_title_text_color:#4e0000">
        <div>Hello World</div>
	</body>
</html>

iPhone

specified back button color of toolbar

<html>
	<head><title>Toolbar back button color</title></head>
	<body wf_style="toolbar_back_button_color:#4e0000">
        Hello World
        <a href="#" wf_style="toolbar_back">Go</a>
	</body>
</html>

iPhone

<[body/table/tr/td/div] bgcolor="#RRGGBB">

Specifies the background color of a UI element.

<html>
  <head>
    <title>bgcolor</title>
  </head>
  <body bgcolor="#f69191">
    <div>mild red</div>
    <table wf_style="fullscreen" bgcolor="#bcf691">
        <tr>

            <td>mild green</td>
        </tr>
        <tr bgcolor="#91bef6">
            <td>sky blue</td>
        </tr>
        <tr>
            <td bgcolor="#dd91f6">violet</td>

        </tr>
    </table>
    <div bgcolor="#f6f091">yellow</div>
  </body>
</html>

iPhone

change the text color of labels

<html>
	<head><title>Text color</title></head>
	<body wf_style="fullscreen">
		<table>
			<tr><td color="red"><div wf_style="text_color:#FF0000">Red Label</div></td></tr>
			<tr><td><div wf_style="text_color:#00FF00">Green Label</div></td></tr>
			<tr><td><div wf_style="text_color:#0000FF">Blue Label</div></td></tr>

		</table>
	</body>
</html>

iPhone

Display an album widget to show the photos for user to view photos easily

<html>
	<head><title>Photoes</title></head>
	<body>
		<a wf_style="toolbar navigation_reset" href="">refresh</a>
		<table><tr><td>
					<div wf_type="album" height="300">
						<img src="sky.png"/>
						<img src="tomato.png"/>
						<img src="tomato.png"/>
					</div>
		</td></tr></table>
	</body>
</html>

iPhone

Create a map. You should use other formatting tags, e.g. <div>, <table>, ... when using map. But you can use <a> with "toolbar" wf_style.

Note:
• Use a link with the attribute wf_geo_location="LAT,LNG" to create a flag on the map.
• For iPhone, the size of the map with tab is 320x460, without the tab is 320x416.

Extended Attributes:
wf_map_center: used to specify center of the map.

for the map flag, you can use <a> with:
• wf_geo_location="LAT,LNG" as the location
• href="xxx" as the link
• wf_style="hide_flag" to hide the flag and/or use <img> inside <a> to replace the flag icon

<html>
    <head>
        <title>Map</title>
    </head>
    <body>
        <div wf_type="map" wf_map_center="22.232142,114.171515" wf_map_zoom="15">
            <a href="061-a_abyss.html" wf_geo_location="22.232142,114.171515" >The Abyss</a>
            <a href="061-a_abyss.html" wf_geo_location="22.24541,114.175458" >Giant Pandas</a>

            <a href="061-a_abyss.html" wf_geo_location="22.233582,114.172567" >Sea Jelly</a>
            <a href="061-a_abyss.html" wf_geo_location="22.233612,114.168173" >Mine Train</a>
            <a href="061-a_abyss.html" wf_geo_location="22.233145,114.17085" wf_style="hide_flag" ><img src="house.png" alt="Pacific Tier"/></a>
        </div>
    </body>
</html>

iPhone

[wf:map_center]

<html>
    <head>
        <title>Map</title>
    </head>
    <body>
        <a href="062-map-variables.php?center=[wf:map_center]&zoom=[wf:map_zoom]" wf_style="toolbar">Test variables</a>
        <div wf_type="map" wf_map_center="22.232142,114.171515" wf_map_zoom="15">
            <a href="061-a_abyss.html" wf_geo_location="22.232142,114.171515" >The Abyss</a>
            <a href="061-a_abyss.html" wf_geo_location="22.24541,114.175458" >Giant Pandas</a>

            <a href="061-a_abyss.html" wf_geo_location="22.233582,114.172567" >Sea Jelly</a>
            <a href="061-a_abyss.html" wf_geo_location="22.233612,114.168173" >Mine Train</a>
            <a href="061-a_abyss.html" wf_geo_location="22.233145,114.17085" >Pacific Pier</a>
        </div>
    </body>
</html>

iPhone

[wf:map_zoom]

<html>
    <head>
        <title>Map</title>
    </head>
    <body>
        <a href="062-map-variables.php?center=[wf:map_center]&zoom=[wf:map_zoom]" wf_style="toolbar">Test variables</a>
        <div wf_type="map" wf_map_center="22.232142,114.171515" wf_map_zoom="15">
            <a href="061-a_abyss.html" wf_geo_location="22.232142,114.171515" >The Abyss</a>
            <a href="061-a_abyss.html" wf_geo_location="22.24541,114.175458" >Giant Pandas</a>

            <a href="061-a_abyss.html" wf_geo_location="22.233582,114.172567" >Sea Jelly</a>
            <a href="061-a_abyss.html" wf_geo_location="22.233612,114.168173" >Mine Train</a>
            <a href="061-a_abyss.html" wf_geo_location="22.233145,114.17085" >Pacific Pier</a>
        </div>
    </body>
</html>

Create an embedded toolbar on the screen.

The <a> links inside describe the buttons in the toolbar.

<html>
    <head><title>Embedded Toolbar</title></head>
    <body>
        <div wf_type="toolbar_embedded">
            <a href="053-toolbar_a_links.php?link=Embedded+Link+1">Link 1</a>
            <a href="053-toolbar_a_links.php?link=Embedded+Link+2">Link 2</a>
            <a href="053-toolbar_a_links.php?link=Embedded+Link+3">Link 3</a>
            <a href="./" disabled="disabled">Disabled</a>
        </div>
    </body>
</html>

iPhone

Create a input field, that allows users to select a contact from local contact list, and fill into the corresponding input boxes

<html>
    <head><title>contact picker</title></head>
    <body >
        <form action="" method="get">
        <table>
            <tr><td wf_style="padding"><input type="contact" name="ct" wf_fields="id,name,birthday,phone,email"/></td></tr>
            <tr><td align="center"><input type="submit" value="Send"/></td></tr>
        </table>
        </form>

        <!-- output display -->
        <table>
            <tr><td>id value:<?= $_GET["ct_id"] ?></td></tr>
            <tr><td>name value:<?= $_GET["ct_name"] ?></td></tr>
            <tr><td>phone value:<?= $_GET["ct_phone"] ?></td></tr>
            <tr><td>email value:<?= $_GET["ct_email"] ?></td></tr>
        </table>
    </body>
</html>

iPhone

"mailto://[email address]"

start up an email client

<html>
	<head><title>Phone, SMS, Email</title></head>
	<body>
	<table>
		<tr><td><a href="tel://24278265">Phone call</a></td></tr>
		<tr><td><a href="sms://88343224">Sms</a></td></tr>
		<tr><td><a href="mailto://support@motherapp.com">Email</a></td></tr>
	</table>
	</body>
</html>

iPhone

"sms://[phone number]"

start up a screen for sending SMS

<html>
	<head><title>Phone, SMS, Email</title></head>
	<body>
	<table>
		<tr><td><a href="tel://24278265">Phone call</a></td></tr>
		<tr><td><a href="sms://88343224">Sms</a></td></tr>
		<tr><td><a href="mailto://support@motherapp.com">Email</a></td></tr>
	</table>
	</body>
</html>

iPhone

"tel://[phone number]"

dial up the number of the phone

<html>
	<head><title>Phone, SMS, Email</title></head>
	<body>
	<table>
		<tr><td><a href="tel://24278265">Phone call</a></td></tr>
		<tr><td><a href="sms://88343224">Sms</a></td></tr>
		<tr><td><a href="mailto://support@motherapp.com">Email</a></td></tr>
	</table>
	</body>
</html>

iPhone

"wf://device/contact/add"

Add a user contact to contact list, name must be specified. Phone, email & birthday are optional

<html>
    <head><title>Add Contact</title></head>
    <body>
        <form action="wf://device/contact/add" method="get">
            <table>
                <tr>
                    <td width="30%" wf_style="padding">Name:</td>
                    <td width="70%" wf_style="padding"><input type="text" name="name" value="Jenny Cheung"/></td>

                </tr>
                <tr>
                    <td width="30%" wf_style="padding">Phone:</td>
                    <td width="70%" wf_style="padding"><input type="text" name="phone" value="26450003"/></td>
                </tr>
                <tr>
                    <td width="30%" wf_style="padding">Email:</td>
                    <td width="70%" wf_style="padding"><input type="text" name="email" value="tong2@willflow.com"/></td>

                </tr>
                <tr>
                    <td width="30%" wf_style="padding">Birthday:</td>
                    <td width="70%" wf_style="padding"><input type="text" name="birthday" value="2008-05-24"/></td>
                </tr>
            </table>
            <div align="center"><input type="submit" value="Add to Contact"/></div>
        </form>

    </body>
</html>

iPhone

[wf:device_id]

Replace the string "[wf:device_id]" with the device id of the phone. Can be used in URL or <form>.

<html>
    <head><title>Device ID Test Case</title></head>
    <body>
        <table wf_style="fullscreen">
            <tbody>
                <tr>
                    <td><a href="060-device_id.php?from_a_tag=[wf:device_id]">Device id a link</a></td>
                </tr>
            </tbody>
        </table>
        <form action="060-device_id.php" method="get">
            <div>
                <input type="hidden" name="from_hidden" value="[wf:device_id]"/>
                <select name="from_select">
                    <option value="[wf:device_id]">Device id select</option>
                    <option value="No">No device id select</option>
                </select>
                <input type="submit" name="s" value="Submit"/>
            </div>
        </form>
    </body>
</html>

iPhone

"wf://device/vibrate"

Trigger vibration of device

<html>
	<head>
		<title>vibrate</title>
		<meta name="wf_action" content="wf://device/vibrate"/>
	</head>
	<body wf_style="fullscreen">
		<table><tr><td wf_style="padding"><a href="">Reload</a></td></tr></table>
	</body>
</html>

iPhone

[wf:accelerometer]

get the values of accelerometer (x,y,z)

<html>
	<head><title>accelerometer</title></head>
	<body wf_style="fullscreen padding">
		<a wf_style="toolbar" href="?accel=[wf:accelerometer]">reload</a>
		<table><tr><td wf_style="padding">acceleration:<?= $_GET["accel"]?></td></tr></table>
	</body>
</html>

iPhone

[wf:gps]

Replace the string "[wf:gps]" with "LAT,LNG", the current user position. LAT is latitude and LNG is longitude.

<html>
    <head><title>GPS Test Case</title></head>
    <body>
        <a href="059-gps.php?from_a_tag=[wf:gps]" wf_style="toolbar">GPS</a>
        <table wf_style="fullscreen">
            <tbody>
                <tr>
                    <td><a href="059-gps.php?from_a_tag=[wf:gps]">GPS a link</a></td>
                </tr>
                <tr>
                    <td><a href="059-gps.php?from_a_tag=[wf:gps]" wf_style="button">GPS Button</a></td>
                </tr>
            </tbody>
        </table>
        <form action="059-gps.php" method="get">
            <div>
                <input type="hidden" name="from_hidden" value="[wf:gps]"/>
                <select name="from_select">
                    <option value="[wf:gps]">GPS select</option>
                    <option value="No">No GPS select</option>
                </select>
                <input type="submit" name="s" value="Submit"/>
            </div>
        </form>
    </body>
</html>

iPhone

Play audio.
The suffix of the link must be ".mp3"

<html>
  <head>
    <title>mp3</title>
  </head>
  <body>
    <div><a href="sample.mp3" wf_style="button">Play song</a></div>
  </body>
</html>

iPhone

Play video.
.mp4 must be the suffix of the url.

<html>
  <head>
    <title>mp4</title>
  </head>
  <body>
    <div><a href="sample.mp4" wf_style="button">Play</a></div>
  </body>
</html>

iPhone

This tag creates an audio player.

"src" attribute is identified the source of audio stream.

When "autoplay" attribute is set to true, the audio stream is started when the page is loaded.

<html>
    <head><title>Audio</title></head>
    <body>
        <table>
            <tr><td>
                <audio src="http://128.208.34.80:8000/" autoplay="true">Your browser does not support audio</audio>
            </td></tr>
        </table>

    </body>
</html>

iPhone

[permanent caching]

Supporting permanent cache for offline accessing availability.
The cache needed to be supplied before compiling the app.
You can use "wget -r -l0 [url]" to download all the contents. You zip it and send it to MotherApp Team to compile for you.

[cookies handling]

MotherApp supports simple cookies handling.

[http caching]

Supporting HTTP Caching, including Last-Modified and ETag headers