MotherApp Engine - Developer

Supported platform: iPhone, Android, BlackBerry, Debugger

This tag is equivalent to the standard HTML <body> tag. It identifies the body of an app. All the visual aspects of the app will go into the <body> section.

 <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>

API version: Version 0.9

Supported platform: iPhone, Android, BlackBerry, Debugger

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.
As with standard HTML, a <DIV> division has an implicit line break before and after it.
if you do not want to have the line breaks, use the <span> tag instead.

 <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

Android

BlackBerry

API version: Version 0.9

Supported platform: iPhone, Android, BlackBerry, Debugger

Insert padding (approximately one blank line) before and after 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

Android

BlackBerry

API version: Version 0.9

Supported platform: iPhone, Android, BlackBerry, Debugger

Create an inline frame that contains another document inside a cell. The source in iframe should be a complete html document: it should be in a separate file and contain <html> and <body> tags. The iframe needs to be inside a table cell and have it's width and height given, so that the layout can be determined.

The iframe document can contain a table. This is a way to embed a table within another table. But the iframe document cannot contain header and footer.

In iPhone, you can use use <a> link with target attribute to update the iframe directly.

 <html> 
	<head><title>iframe</title></head> 
	<body> 
        <table wf_style="fullscreen">
            <tr><td>
                <iframe width="320" height="200" src="s1.html"></iframe>
            </td></tr>
        </table> 
	</body> 
</html> 

--- s1.html (this is in a separate file) ---
<html> 
	<head><title>s1</title></head> 
	<body> 
		<table><tr><td>s1</td></tr></table> 
	</body> 
</html>

API version: Version 0.9

Supported platform: iPhone, BlackBerry, Android, Debugger

Like a <div> tag, a <span> tag allows you to assign attributes, such as wf_style, to a section of your code. Unline <div> there is no linebreak before or after a <span> tag; the contents enclosed by the <span> tag are shown inline. Using a span tag allows you to change color of font size, for example, in the middle of line of text.

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

API version: Version 0.9

Supported platform: iPhone, Android, BlackBerry, Debugger

Creates a table. Use <table> tags (along with their component tags <tr> and <td> to control the layout of your UI elements.

Note:
• The maximum number of columns for a table is 3.
• It is not supported to define a table inside another table (Please refer to the <iframe> tag for alternative).
• A table must be at the top level inside the <body> tags. E.g., it cannot be inside a <div>.
• You can apply wf_style attributes to a table.

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

    <body>
        <table>
            
                <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>
            
        </table>
    </body>
</html>

iPhone

Android

BlackBerry

API version: Version 0.9

Supported platform: iPhone, Android, BlackBerry, Debugger

Display a title for the table. The title will appear immediately above the table.

Note: This is different from the <title> tag, which gives a title to the page.

 <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="Details of Restaurant">
                <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>
        </table>
    </body>
</html>

iPhone

Android

BlackBerry

API version: Version 0.9

Supported platform: iPhone, Android, BlackBerry, Debugger

Stretch the table width to fill up the width of the screen.

Note; fullscreen mode is the default for some devices.

 <html>
    <head>
        <title>Restaurant</title>
    </head>
    <body>
        <table wf_style="fullscreen">
            
                <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>
            
        </table>
    </body>
</html>

iPhone

Android

BlackBerry

API version: Version 0.9

Supported platform: iPhone, Android, BlackBerry, Debugger

Make the table (but not its contents) transparent. Border and contrasting background color will not be available in transparent table.

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

    <body>
        <table wf_style="transparent">
            
                <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>
            
        </table>
    </body>
</html>

iPhone

Android

BlackBerry

API version: Version 0.9

Supported platform: iPhone, Android, BlackBerry, Debugger

Specify table cell width in percentage.
If there are multiple cells in a single row, width percentages should be able to add up to 100%.
Cells in the same column, but in different rows, cannot have different cell widths. It is recommended to specify the cell widths for one row, normally the first row.

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

    <body>
        <table>
            
                <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>
            
        </table>
    </body>
</html>

iPhone

Android

BlackBerry

<[td/div] align="center/right">

API version: Version 0.9

Supported platform: iPhone, Android, BlackBerry, Debugger

Align the content of a table cell on the right or in the center.
If the align attribute is not given the contents will be aligned on the left.

 <html>
	<head><title>td align</title></head>
	<body>
        <table>
            
                <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>
            
        </table>

	</body>
</html>

iPhone

Android

BlackBerry

<wf_titlebar bgcolor="#RRGGBB">

API version: Version 0.9

Supported platform: iPhone, Android, BlackBerry, Debugger

Define a title bar for the page and assign it a background color. You can add buttons to the left and right sides of the titlebar, and give a title that is centered within the titebar. The buttons and title are defined inside the <wf_titlebar> </wf_titlebar> tags.

Notes:
• The background color is specifed as 2-hexidecimal digits for the red, green, and blue values, prefixed with a "#" to indicate the numbers are in hex. E.g., bgcolor="#FF0000" gives a red background.

• The titlebar title is specified by <title> </title> tags within the <wf_titlebar> </wf_titlebar> tags.

• To add buttons to the titlebar use either a link tag, <a>, or a, for a form, an <input type="submit"> tag. The buttons can have icons; these are specified by an <img> tag or by the wf_icon attribute for <input> tags.

You can add <img> tag in <title> also.

 1.
<html> 
<head><title>Title Bar</title></head> 
<body> 
    <wf_titlebar> 
        <a align="left" href="009-div.html">OO</a> 
 
        <title align="center">Hello Bar</title> 
 
        <a align="right" href="009-div.html"><img src="toolbar_add.png"/></a> 
    </wf_titlebar> 
</body> 
</html>

2.
<html> 
<head><title>Title Bar</title></head> 
<body> 
    <wf_titlebar bgcolor="#330000"> 
        <a align="left" href="009-div.html">OO</a> 
        <input align="left" type="submit" form="form" value="DD"/> 
        <input align="left" type="submit" form="form2" value="EE" wf_icon="toolbar_add.png"/> 
 
        <title align="center">Title Bar 2</title> 
 
        <a align="right" href="009-div.html">AA</a> 
        <a align="right" href="009-div.html">BB</a> 
        <a align="right" href="009-div.html"><img src="toolbar_add.png"/></a> 
    </wf_titlebar> 
 
    <form id="form" action=""> 
    <div>Hello World</div> 
    <div><input type="hidden" name="hello" value="world DD"/></div> 
    </form> 
 
    <form id="form2" action=""> 
    <div><input type="hidden" name="hello" value="world EE"/></div> 
    </form> 
 
    <div> 
        <input type="hidden" name="outside" form="form" value="form"/> 
        <input type="hidden" name="outside" form="form2" value="form2"/> 
    </div> 
 
    <div>Hello: </div> 
    <div>Form: </div> 
</body> 
</html> 

3.
<html> 
<head><title>Title Bar</title></head> 
<body> 
    <wf_titlebar bgcolor="#330000"> 
        <a align="left" href="009-div.html">OO</a> 
        <input align="left" type="submit" form="form" value="DD"/> 
        <input align="left" type="submit" form="form2" value="EE" wf_icon="toolbar_add.png"/> 
 
        <title align="center"><img src="title_image.png"/></title> 
 
        <a align="right" href="009-div.html">AA</a> 
        <a align="right" href="009-div.html">BB</a> 
        <a align="right" href="009-div.html"><img src="toolbar_add.png"/></a> 
    </wf_titlebar> 
 ...
</body> 
</html>

API version: Version 1.0

Supported platform: iPhone, Android, BlackBerry, Debugger

Create a tabbar. A tabbar is a list of links to other pages of the app. This list acts like a tabbar on a browser, with all the tab links visible, and the contents of one tab active at a time. The tabbar appears at the bottom of the screen on an iPhone or BlackBerry and at the top of the screen on an Andriod phone.

By default, the contents of the first tab is loaded when the page loads. This default can be overridden by using the attribute 'wf_style="selected"' in the <a> link definition for the tab you wish to load initially.

A MotherApp tabbar is similar to a <frameset>, except that the contents of the tabs do not all appear on the screen together. The master page containing the tabbar definition
(<wf_tabbar></wf_tabbar>) should include the links to the various tabs. These tabs must be in separate files and not in the master page that contains the tabbar definition.

A tabbar must be at the top level of the app definition within <body></body> tags. It canot be embedded, for example, within a table.

http://tedtalk.willflow.com/ is an example of a tabbar based app. This example contains a tabbar widget and links to three pages.

Defining Tabs:
• Each tab is defined as an <a> link.
• Within each <a> link use the attributes "wf_tab_img" and "wf_tab_img_active" to specify
the graphic images to display for the tab.
For iPhone apps, you only need to specify "wf_tab_img", since the iPhone generates a blue
shading and shadow for the active tab automatically. The tab images should be:
- 40 by 30 pixels.
- In PNG format files with 24-bit color and a transparent background.
- Do not add a shadow effect to the tab image.
- The text label for the icon should be included in the link not in the image.

 <html>
  <head><title>Tab Demonstration</title></head>
  <body>
    <wf_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>
    </wf_tabbar>
  </body>
</html>

  --- 052-tab_1.html (this is in a separate file) ---
  --- since this is the first tab, it's contents are initially loaded into the app ---
<html>
  <head><title>1st Tab</title></head>
  <body>
    <table wf_style="fullscreen">
      <tr> <td wf_style="padding">
        <a href="tab_child.html">Go to child page</a>
      </td> </tr>
      <tr> <td wf_style="padding">
        <a href="tab_child.html">Go to child page</a>
      </td> </tr>
      <tr> <td wf_style="padding">
        <a href="tab_child.html">Go to child page</a>
      </td> </tr>      <tr> <td wf_style="padding">
        <a href="tab_child.html">Go to child page</a>
      </td> </tr>
      <tr> <td wf_style="padding">
        <a href="tab_child.html">Go to child page</a>
      </td> </tr>      <tr> <td wf_style="padding">
        <a href="tab_child.html">Go to child page</a>
      </td> </tr>
    </table>
  </body>
</html>

iPhone

Android

BlackBerry

<wf_footer>

API version: Version 1.0

Supported platform: iPhone, Android, BlackBerry, Debugger

Create a footer bar that appears at the bottom of the screen. The <div> tag for the footer can appear anywhere in the <body> section of the code; it does not need to be at the end.

You can position and format the text in the footer bar using the align attribute.

 <html>
	<head><title>Footer</title></head>
	<body>
		<table wf_style="fullscreen">
			
                <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>
			
		</table>
        <wf_footer>
            <div>This is the footer</div>
        </wf_footer>

	</body>
</html>

API version: Version 1.0

Supported platform: iPhone, Android, BlackBerry, Debugger

Create a header bar that appears at the top of the screen. The <div> tag for the header can appear anywhere in the <body> section of the code; it does not need to be at the end.

If you have both a titlebar (<wf_titlebar>) and a header, the header will appear below the titlebar.

You can position and format the text in the header bar using the align attribute.
You cannot have a link or an image in the header bar, just text. If you wish to have a header bar with buttons or icons, consider using <wf_titlebar>.

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

				<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>
			

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

iPhone

Android

BlackBerry

API version: Version 1.0

Supported platform: iPhone, Android, BlackBerry, Debugger

Hide the title bar 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_titlebar">
		<div>title bar should be hidden</div>
	</body>
</html>

iPhone

Android

BlackBerry

API version: Version 1.1

Supported platform: 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

API version: Version 1.1

Supported platform: iPhone

create a search index bar for iphone table view

 <html> 
<head> 
<title>Section Index</title> 
</head> 
<body> 
<a href="" wf_style="toolbar navigation_unchanged">Refresh</a> 
<table wf_style="fullscreen" title="A" wf_section_index="A"> 
   
    <tr wf_style="iphone_cell_style_none"> 
      <td width="90%" wf_style="padding text_small text_size:7"><a href="">TD</a></td> 
    </tr> 
     <tr wf_style="iphone_cell_style_none"> 
      <td width="90%" wf_style="padding text_small text_size:7">TD</td> 
    </tr> 
    
   
     <tr wf_style="iphone_cell_style_none"> 
      <td width="90%" wf_style="padding text_small text_size:7">TD</td> 
    </tr>  
   
</table> 
<table wf_style="fullscreen" title="B" wf_section_index="B"> 
   
    <tr wf_style="iphone_cell_style_none"> 
      <td width="90%" wf_style="padding text_small text_size:7">TD</td> 
    </tr> 
     <tr wf_style="iphone_cell_style_none"> 
      <td width="90%" wf_style="padding text_small text_size:7">TD</td> 
    </tr> 
    
   
     <tr wf_style="iphone_cell_style_none"> 
      <td width="90%" wf_style="padding text_small text_size:7">TD</td> 
    </tr>  
   
</table> 
...
</body> 
</html>

iPhone

API version: Version 0.9

Supported platform: iPhone, Android, BlackBerry, Debugger

Specify the location and size of an image to display. The image will be located on the screen based on where the <IMG> tag is located in your code. The src attribute gives the location of the graphic image to display. This location can be given as an absolute or relative path.

If no width or no height attributes, the image will be retrieved from the server before rendering the UI. This may introduce performance impacts rendering UI elements. If you include the image width and height attributes, MotherApp will first render the non-graphical portions of the UI and then the image will be loaded.

If the image is the only child in a table element (<td>), MotherApp will automatically fit the width of <td> to the width of the image.

 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>
		
                <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>
			
		</table>
	</body>
</html>

iPhone

Android

BlackBerry

API version: Version 0.9

Supported platform: iPhone, Android, BlackBerry, Debugger

Create an image map; this is the same as a normal HTML use map: Different parts of the map are links, specified by <area> tags. Thus, <area/> tags should be added inside, as with normal HTML use maps.

The only area shape supported is "rect" (rectangle)

 <!-- 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> 
    <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 wf_style="fullscreen"><tr><td><img src="image_map.png" usemap="#map1" width="308" height="380"/></td></tr></table> 
  </body> 
</html>

iPhone

Android

BlackBerry

API version: Version 0.9

Supported platform: iPhone, Android, BlackBerry, Debugger

Set the size of the text, the specified value, nnn, is the desired point size of the font.
This style can be used in a <body>, <div>, or <span> tag, etc. The font style is inherited by any text sections (<body>, <div>, <span>) within the section where the size is given.

 <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 wf_style="text_size:14">Size 14
                <div>Size 14</div> 
            </div> 
            <div wf_style="text_size:16">Size 16
                <div>Size 16</div> 
            </div> 
        </div> 
 
        <table wf_style="fullscreen"> 
            <tr><td>Size 8</td></tr> 
        </table> 
		
        <table wf_style="text_size:12 fullscreen"> 
            <tr><td>Size 12</td></tr> 
        </table> 
 
        <table wf_style="fullscreen"> 
            <tr wf_style="text_size:14"><td>Size 14</td></tr> 
        </table> 
 
        <table wf_style="fullscreen"> 
            <tr><td wf_style="text_size:16">Size 16</td></tr> 
        </table> 
        ...
	</body> 
</html>

iPhone

Android

BlackBerry

API version: Version 0.9

Supported platform: iPhone, Android, BlackBerry, Debugger

MotherApp has three general font attributes:
- 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.

This style can be used in a <body>, <div>, or <span> tag, etc. The font size in inherited by any text sections (<body>, <div>, <span>) within the section where the size is given.

In addition you can control the font size more precisely using wf_style="text_size:nnn

 <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

Android

BlackBerry

API version: Version 1.0

Supported platform: iPhone, Android, BlackBerry, Debugger

Create a row link.
"wf_href" attribute specifies the url of the link

 <html>
    <head><title>Level 1</title></head>
    <body>
        <table>
            
                <tr wf_href="navigation_testing_level_2.html?dummy=value1&dummy2=value2">
                    <td wf_style="padding">
                         Goto Level 2
                    </td>
                </tr>
                <tr wf_href="broken_link.html">
                    <td wf_style="padding">
                         Broken Link
                    </td>
                </tr>
            
        </table>
    </body>
</html>

iPhone

Android

BlackBerry

API version: Version 0.9

Supported platform: iPhone, Android, BlackBerry, Debugger

Create a link button, if the <a> tag has text inside. The text becomes the label on the button.
If you insert an image tag (<img>) inside the link, instead of text , MotherApp will create an graphical button with the image.

 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>

API version: Version 1.0

Supported platform: Android, BlackBerry

Add Menu Item to the default menu of Android and BlackBerry.
In BlackBerry, the disabled link will be no effect when clicked.
In Android, the disabled link will be grey out and cannot be selected.

 <html>
    <head><title>Menu test case</title></head>
    <body>
        <wf_menu>
            <a href="toolbar_a_links.php?link=Toolbar+Link+1">Link 1</a>
            <a href="./" disabled="disabled">Disabled link</a>
        </wf_menu>
    </body>
</html>

Android

BlackBerry

<wf_segment_toolbar [bgcolor="#rrggbb"] [button_color="#rrggbb"]>

API version: Version 1.1

Supported platform: iPhone

Add a native iPhone segment toolbar in the application.

 <html>
	<head>
		<title>
			Title
		</title>
	</head>
	<body>
	<wf_segment_toolbar bgcolor="#330000"  button_color="#000033">
		<a href="flip.html" wf_style="navigation_reset" >BBB</a>
		<a href="" selected="YES">CCCCC</a>
		<a href="" selected="YES">DDD</a>
		<a href="" disable="YES">BBB</a>
	</wf_segment_toolbar>
	</body>
</html>

iPhone

API version: Version 0.9

Supported platform: iPhone, Android, BlackBerry, Debugger

When user navigates from one page to the other, MotherApp stores your navigation history in the "Navigation Stack". This allows user to navigate back to visited page(s) through the "Back" button. It should be noted that each tab defined in the Tabbar has its own Navigation Stack.

If an <a> link has wf_style="navigation_reset" defined, MotherApp will clear the current Navigation Stack. As a result, the "back" button will not be shown and users will not be able to navigate to the previous page.

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

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

iPhone

Android

BlackBerry

API version: Version 0.9

Supported platform: iPhone, Android, BlackBerry, Debugger

When user navigates from one page to the other, MotherApp stores your navigation history in the "Navigation Stack". This allows user to navigate back to visited page(s) through the "Back" button. It should be noted that each tab defined in the Tabbar has its own Navigation Stack.

If an <a> link has wf_style="navigation_pushed" defined, MotherApp will replace the current page with the target page of the link and puts the formerly current page on the top of the navigation stack, so that pressing the "Back" button returns to the original page.

On an iPhone, MotherApp automatically adds a "Back" button to the titlebar when appropriate (when there is a previous screen); on other mobile platforms there is a "Back" hardware button for some mobile devices. This "Back" button would have the same behaviour as the "Back" button in iPhone.

 page A:
<html>
    <head><title>Level 1</title></head>
    <body>
        <table>
            
                <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>

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

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

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

iPhone

Android

BlackBerry

API version: Version 0.9

Supported platform: iPhone, Android, BlackBerry, Debugger

Assume there are three pages in the App (A,B and C). A is the first page, B is the second page, and C is the last page.

When you use <a wf_style="navigation_unchanged"> in page B to navigate to Page C. MotherApp will not add page B to the navigation stack. As a result, if user press the "Back" button on page C, the app will navigate back to page A instead.

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

iPhone

Android

BlackBerry

API version: Version 1.1

Supported platform: iPhone, Android, BlackBerry

Execute navigation at the back, so the collected HTML would not affect UI (like Ajax). It is normally used for firing up of onload actions.

 <html>
	<head><title>Sync DB</title></head>
	<body wf_style="fullscreen">
		<a href="" wf_style="toolbar">Refresh</a>
		<a href="index30_sync.html" wf_style="toolbar navigation_background">Sync</a>

		<table>
			<tr><td wf_style="padding"><a href="page_a.html">Page A</a></td></tr>
			<tr><td wf_style="padding"><a href="page_b.html">Page B</a></td></tr>
			<tr><td wf_style="padding"><a href="page_c.html">Page C</a></td></tr>
			<tr><td wf_style="padding" align="center"><a href="index30_sync.html" wf_style="button navigation_background">Sync</a></td></tr>
		</table>

	</body>
</html>

---
<!-- index30_sync.html -->
<html>
	<body>
		<a href="page_a.html" wf_style="fetch_onload"/>
		<a href="page_b.html" wf_style="fetch_onload"/>
		<a href="page_c.html" wf_style="fetch_onload"/>
	</body>
</html>

API version: Version 1.1

Supported platform: iPhone, Android, BlackBerry

The link, "wf_style" attribute has "onload", "onload_foreground" or "onload_background", would be triggered automatically after the page is loaded.

onload: the link would be triggered automatically after the page is loaded
onload_foreground: the link would be triggered automatically after the page is loaded if the current page is loaded in foreground (the page would be rendered on the screen)
onload_background: the link would be triggered automatically after the page is loaded if the current page is loaded in background (see navigation_background section)

Caution!! Please be sure that your "onload" page is not loaded recursively itself.

 Add a database record (load_time, 201006290940) when the page is loaded:
<a href="wf://device/db/add?key=load_time&value=201006290940" wf_style="onload"></a>

Load current page in background when the page is loaded in foreground:
<a href="" wf_style="onload_foreground navigation_background"></a>

Trigger an analytics link when the page is loaded:
<a href="/analytics/?device_id=%5Bwf%3Adevice_id%5D" wf_style="onload"></a>

API version: Version 0.9

Supported platform: iPhone, Android, BlackBerry

This <meta> tage has MotherApp refresh some or all of the currently loaded pages.
The refresh occurs when the page containing the <meta> tag is loaded.

- refresh_all: forces a refresh of all the visited pages.
- refresh_parent: forces a refresh just of the pages in the same tab

Usage example: if the bookmarks page is in the second tab and you want to let user add bookmark in the first tab, the "add bookmark" page should define "refresh_all". "refresh_all" would force refresh the bookmark page.

 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>

API version: Version 0.9

Supported platform: iPhone, Android

Opens the target of link as a popup that is placed at the bottom of the screen.
This is the same as <a wf_style="popup">.

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

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

iPhone

Android

API version: Version 0.9

Supported platform: iPhone, Android, BlackBerry, Debugger

Opens the target of link as a popup that is placed in the center of the screen.

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

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

iPhone

Android

BlackBerry

API version: Version 1.1

Supported platform: iPhone

Display iPhone native popup buttons.

 <html>
	<head>
		<title>
			Title
		</title>
	</head>
	<body>

		<a href="#abc1" wf_style="toolbar popup_buttons">aaaa</a>
		<wf_buttons name="abc1" title="This is title?">
			<a href="slider.html" wf_style="navigation_reset">set 1 button 1</a>
			<a href="flip.html">button 2</a>
			<a href="" wf_style="navigation_reset">button 3</a>
			<a href="" wf_style="navigation_reset">button 4</a>
			<a href="" wf_style="navigation_reset">button 4</a>			
		</wf_buttons>
		
		<a href="#abc2" wf_style="button popup_buttons">aaaa</a>
		<wf_buttons name="abc2" title="Title">
			<a href="slider.html" wf_style="navigation_reset">set 2 button 1</a>
			<a href="flip.html">button 2</a>
			<a href="" wf_style="navigation_reset">button 3</a>
			<a href="" wf_style="navigation_reset">button 4</a>
			<a href="" wf_style="navigation_reset">button 4</a>
			
			
		</wf_buttons>
	</body>
</html>

iPhone

API version: Version 1.1

Supported platform: iPhone

Popup using iPhone fullscreen style.
<a href="popup_fullscreen.html" wf_style="popup_fullscreen">GO</a>

You can modify the toolbar position in the result page:
<meta name="TOOL_BAR_POSITION" content="top" />

You can modify the close message in the result page:
<meta name="CLOSE_MSG" content="關閉" />

 <html>
	<head>
		<meta name="CLOSE_MSG" content="關閉" />
		<title>
			Title
		</title>
	</head>
	<body>
		<div wf_style="header">
			<div>
				Text
			</div>
		</div>
		<table>
			<tr>
				<td>
					<a href="121-popup_fullscreen.html" wf_style="popup_fullscreen">Pop </a>
				</td>
			</tr>
		</table>
		<div wf_style="footer">
			<div>
				Text
			</div>
		</div>
	</body>
</html>

iPhone

API version: Version 1.1

Supported platform: iPhone

Attribute "target" can be used with the <iframe> which with the "name" attribute. So the iframe area can be updated dynamically.

 <html>
<body wf_style="iphone_no_scroll fullscreen">
<div>
    <wf_titlebar>
        <title align="center">iFrame Target</title>
    </wf_titlebar>

    <div>
    	<a wf_style="button" href="iframe_update2.html" target="abc">Upper iframe to 2</a> 
    	<a wf_style="button" href="s2.html" target="abc1">lower iframe to s2</a> 
	</div>

	<table wf_style="fullscreen">
		<tr>
			<td>
				<iframe width="320" height="200" name="abc" src="iframe_update1.html" ></iframe>
            </td>
        </tr>
	</table> 
	<table wf_style="fullscreen">
		<tr>
			<td>
				<iframe width="320" height="200" name="abc1" src="s1.html"></iframe>
            </td>
        </tr>
	</table> 
</div>
</body>
</html>

iPhone

API version: Version 0.9

Supported platform: iPhone, Android, BlackBerry, Debugger

Opens the target of link in the mobile devices web browser.

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

iPhone

Android

BlackBerry

API version: Version 1.1

Supported platform: Android, BlackBerry

Developers can override the hardware back button by adding "hardware_back" to the "wf_style" attribute.

 <html> 
<body> 
<a href="148-hardware_back_tab_back.html" wf_style="button hardware_back">Back</a> 
</body> 
</html>

API version: Version 1.1

Supported platform: iPhone, Android, BlackBerry, Debugger

launch the web browser of the phone with url "xxx"

 <a href="http://www.google.com/" wf_style="browser_launched button">Search</a>

API version: Version 1.1

Supported platform: iPhone

In iPhone, you can add transition animation for navigating pages in MotherApp HTML.

Note: the style must be used with navigation_unchanged wf_style

 <html>
	<head>
		<title>
			Transition
		</title>
	</head>
	<body wf_style="fullscreen">
		
		<table title="Test">
			<tr>
				<td wf_style="padding">
					<a href="" wf_style="transition_flip_from_left navigation_unchanged">
					transition_flip_from_left
					</a>
				</td>
				
			</tr>
			<tr>
				<td wf_style="padding">
					<a href="" wf_style="transition_flip_from_right navigation_unchanged">
					transition_flip_from_right
					</a>
				</td>
			</tr>
			<tr>
				<td wf_style="padding">
					<a href="" wf_style="transition_curl_up navigation_unchanged">
					transition_curl_up
					</a>
				</td>
			</tr>
			<tr>
				<td wf_style="padding">
					<a href="" wf_style="transition_curl_down navigation_unchanged">
					transition_curl_down
					</a>
				</td>
			</tr>

		</table>

	
	</body>
</html>

iPhone

[wf:datetime8]

API version: Version 1.0

Supported platform: iPhone, Android, BlackBerry, Windows Mobile, Debugger

automatically transfers into an string of [yyyymmdd], e.g. 20100428

API version: Version 0.9

Supported platform: iPhone, Android, BlackBerry, Debugger

Use the <form> tag to submit information from the mobile device to 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.

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

action="url": The "url" is the address to which the form data will be sent.

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

wf_style="navigation_pushed/navigation_reset/navigation_unchanged" (Optional)
As with <a> tags, these values for wf_style allow you to control the navigation stack:

• Navigation_unchanged: This does not add the current page to the navigation stack but still navigates 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. It is strongly recommended to use navigation_unchanged for <form> submission to avoid unexpected resubmissions.

•Navigation_pushed: Puts the current page on the top of the current navigation stack and goes to the new page.

•Navigation_reset: Removes all the contents from the current navigation history stack.

 <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

Android

BlackBerry

API version: Version 0.9

Supported platform: iPhone

Use <div wf_style="iphone_picker_embedded"> to create an iPhone style picker on the screen for selections from one or more lists. To create the lists use the HTML <select> and <option> tags. You can place up to three selection lists in an iPhone style picker.

 <html> 
<head> 
    <title>Embedded iPhone Picker</title> 
</head> 
<body> 
<form action="" method="post"> 
    <table wf_style="fullscreen"> 
    <tr><td> 
    <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> 
        <input type="submit" name="s" value="Submit"/> 
    </div> 
    <div> 
    	    </div> 
    </td></tr></table> 
</form> 
</body> 
</html>

iPhone

API version: Version 0.9

Supported platform: iPhone, Android, BlackBerry, Debugger

Creates a date-picker graphical widget for entering dates. The look of the widget depends on the platform.

The value may be preset, for example: "2010-02-28" for February 28,2010, using the value attribute for <input>.

 <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

Android

BlackBerry

API version: Version 0.9

Supported platform: iPhone, Android, BlackBerry, Debugger

Creates a hidden field. Hidden fields do not display in the UI, but their values are passed as part of the form submission data. The value in a hidden field can be dynamically set, for instance by a MotherApp variable, such as [wf:device_id], [wf:gps], [wf:map_center], etc.

 <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

Android

BlackBerry

API version: Version 0.9

Supported platform: iPhone, Android, BlackBerry, Debugger

Creates an input field of type password. This looks and works just like a text input field except that the text entered is not display; instead dots are displayed to keep the password private.

 <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

Android

BlackBerry

API version: Version 0.9

Supported platform: iPhone, Android, BlackBerry, Debugger

Creates a text input field with the look of a native search widget.
The look and functionality will depend on the platform.

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

iPhone

Android

BlackBerry

API version: Version 1.0

Supported platform: iPhone, Android, BlackBerry, Debugger

Create a submit button

Note that the submit button may act as a normal button. You may change the appearance by adding wf_icon attribute.

 --- 1 ---------
<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>

--- 2 ---------
<html> 
	<head><title>Textbox</title></head> 
	<body> 
		         <form action="" method="get"> 
        <table> 
            <tr><td> <input type="text" name="query"/></td></tr> 
        </table> 
 
            <div align="center"><input type="submit" name="s" value="Submit2" wf_icon="hello_world.png"/></div> 
        </form> 
    </body> 
</html>

iPhone

API version: Version 0.9

Supported platform: iPhone, Android, BlackBerry, Debugger

Creates an checkbox for input. The checkbox will have the mobile device's native look.
You can set the checkbox to be checked initiallyby using the "checked" attribute:
<input type="checkbox" name="XXX" checked="checked" value="yyy" />

 <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

Android

BlackBerry

API version: Version 0.9

Supported platform: iPhone, Android, BlackBerry, Debugger

Creates a radio button style input widget. One of the radio buttons can be preset as the selection by using the checked attribute: <input type="radio" name="xxx" value="yyy" checked="checked"/>

 <html> 
	<head><title>Radio input</title></head> 
	<body> 
		<div>query: </div> 
		<form action="103-form_get_radio.php" method="get"><div> 
			<input type="radio" name="query" value="Y" checked="checked"/> 
			<input type="radio" name="query" value="N"/> 
			<input type="submit" name="s" value="Submit"/></div> 
		</form> 
	</body> 
</html>

iPhone

Android

BlackBerry

API version: Version 0.9

Supported platform: iPhone, Android, BlackBerry, Debugger

Creates a text input widget. The look and functionality will depend on the platform. On the iPhone, for example, selecting the text input field will cause a keyboard to display at the bottom of the screen to allow you to type in the text field. (You can control the type of keyboard, see <input type="text" wf_style="keyboard_type:xxx">).

You can also add a placeholder attribute to control the tips/hints in the text to guide the users what information should be input.

 --- 1 ---------------
<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>

--- 2 ---------------
<html> 
<head> 
    <title></title> 
</head> 
<body> 
<form action="" method="post"> 
    <div> 
    	<input type="text" placeholder="Test"/> 
        <input type="text" wf_style="search" placeholder="Test"/> 
    </div> 
</form> 
</body> 
</html>

iPhone

Android

BlackBerry

API version: Version 0.9

Supported platform: iPhone

The iPhone allows you to control text input by controlling the type of keyboard used.
You can control the keyboard type by using wf_style="keyboard_type:xxx".

The types of keyboards available are:
• number -- This restricts user input to the characters 0 through 9
• number_and_period -- This restricts user input to the characters 0 through 9 plus "."
• number_and_symbols -- Allows the user to enter all alphanumeric characters plus standard symbols.

If the keyboard type is not set, the number_and_symbols 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

API version: Version 0.9

Supported platform: iPhone, Android, BlackBerry, Debugger

Creates a file dialog to let the user enter a file, for example, to upload to your website.
The type of file can be specified using wf_type.
p.s. remember using enctype="multipart/form-data" and method="post" in <form>

Default values:
• For the iPhone, the default type is camera.
• For the iPod touch, the default type is user_album.
• For the Andriod, the default is the phone's file system
• For the Blackberry, the default is the phone's file system

Extended Attributes:
• camera: Create a camera and use the camera output as the file.
• 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

Android

BlackBerry

API version: Version 1.1

Supported platform: iPhone, Android

MotherApp HTML supports HTML5 input range. It shows a slider for user to select a value from a range of possible values.

 <html>
<head><title>range</title></head>
<body>
<div>
</div>
<form action="" method="get">
	<div>
		<input type="range" min="5000" max="25000" value="" name="value" width="260"/><br/>
		<input type="submit" name="" value="Submit"/>
	</div>
</form>

</body>
</html>

iPhone

Android

API version: Version 0.9

Supported platform: iPhone, Android, BlackBerry, Debugger

Creates a drop-down list from which the user can select an option.
Use <option> tags to specify the options for the drop-down list.
The presentation of the list can be modified using the wf_style attribute
and by enclosing the <select> tags inside a <div wf_style="iphone_picker_embedded">
tag set.

 <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

Android

BlackBerry

API version: Version 0.9

Supported platform: iPhone, Android, BlackBerry, Debugger

This tag is used within <form> tags and with a <input type="submit"> tag.
It creates a hidden drop-down list. The list appears in a pop-up window for selection
after the "Submit" button is clicked. The value selected is submitted as part of the form.

The values in the drop-down list are entered as <option> tags within the <select></select>
tags.

 <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

Android

BlackBerry

API version: Version 0.9

Supported platform: iPhone

The attribute wf_style="segment" will display a selection list as a segmented horizontal bar.

 <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

API version: Version 0.9

Supported platform: iPhone, Android, BlackBerry, Debugger

Creates a multi-line textbox for the user to fill in multiple-line text. Any text entered
between the <textarea></textarea> tags will appear as the initial text in the textbox.
You can control the height and width of the textbox with the rows and columns attributes:
<textarea name="query" rows="5" cols="15">

 <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

Android

BlackBerry

<body|table|tr|td|div bgcolor="#RRGGBB">

API version: Version 0.9

Supported platform: iPhone, Android, BlackBerry, Debugger

bgcolor specifies the background color of a UI element. It can be used within any of the following tags:
<body>, <table>, <tr>, <td>, or <div>. All sub-elements of the tag will inherit the given background color, unless a different color is specified.

Note: bgcolor cannot be used with a <span> tag.

The color is given in hexidecimal (indicated by the "#" prefix), with two hex digits each for the red, green, and blue values. Thus red = "#FF0000", blue = "#0000FF", black = "#000000", and white = "#FFFFFF", etc.

Note: for rounded table in iPhone, bgcolor cannot support <td>

 <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

Android

BlackBerry

<div|body|table|tr|td|a|span| wf_style="text_color:#RRGGBB">

API version: Version 0.9

Supported platform: iPhone, Android, BlackBerry, Debugger

The attribute wf_style="text_color:#RRGGBB" is used to specify the color the text within a UI element. It can be used within any of the following tags:
<body>, <table>, <tr>, <td>, <a>, <div>, or <span>. All sub-elements of the tag will inherit the given text color, unless a different color is specified.

The color is given in hexidecimal (indicated by the "#" prefix), with two hex digits each for the red, green, and blue values. Thus red = "#FF0000", blue = "#0000FF", black = "#000000", and white = "#FFFFFF", etc.

 <html> 
	<head><title>Text color</title></head> 
	<body wf_style="text_color:#AAAAAA"> 
        <table wf_style="fullscreen"><tr><td> 
        <div>Gray Text</div> 
 
        <div>Gray Text
            <div wf_style="text_color:#AA0000">Red Text</div> 
            <div wf_style="text_color:#00AA00">Green Text</div> 
            <div wf_style="text_color:#0000AA">Blue Text</div> 
        </div> 
 
        <div wf_style="text_color:#AA0000">Red Text
            <div>Red Text</div> 
            <div wf_style="text_color:#00AA00">Green Text</div> 
            <div wf_style="text_color:#0000AA">Blue Text</div> 
        </div> 
        </td></tr></table> 
 
		<table wf_style="fullscreen"> 
            <tr><td>Gray Text</td></tr> 
			<tr wf_style="text_color:#00AA00"> 
                <td>Green Text</td> 
            </tr> 
			<tr> 
                <td wf_style="text_color:#0000AA">Blue Text</td> 
            </tr> 
		</table> 
 
		<table wf_style="fullscreen text_color:#AA0000"> 
            <tr><td>Red Text</td></tr> 
			<tr wf_style="text_color:#00AA00"> 
                <td>Green Text</td> 
            </tr> 
			<tr> 
                <td wf_style="text_color:#0000AA">Blue Text</td> 
            </tr> 
		</table> 
 
		<table wf_style="fullscreen text_color:#AA0000"> 
            <tr><td>Red Text
                <div>Red Text
                    <div wf_style="text_color:#AA0000">Red Text</div> 
                    <div wf_style="text_color:#00AA00">Green Text</div> 
                    <div wf_style="text_color:#0000AA">Blue Text</div> 
                </div> 
            </td></tr> 
			<tr wf_style="text_color:#00AA00"> 
                <td>Green Text
                <div>Green Text
                    <div wf_style="text_color:#AA0000">Red Text</div> 
                    <div wf_style="text_color:#00AA00">Green Text</div> 
                    <div wf_style="text_color:#0000AA">Blue Text</div> 
                </div> 
                </td> 
            </tr> 
			<tr> 
                <td wf_style="text_color:#0000AA">Blue Text
                <div>Blue Text
                    <div wf_style="text_color:#AA0000">Red Text</div> 
                    <div wf_style="text_color:#00AA00">Green Text</div> 
                    <div wf_style="text_color:#0000AA">Blue Text</div> 
                </div> 
                </td> 
            </tr> 
		</table> 
	</body> 
</html>

iPhone

Android

BlackBerry

<wf_album height="nn">

API version: Version 1.0

Supported platform: iPhone, Android, BlackBerry, Debugger

Creates a photo album widget to display photos for user to view.
The vertical size, in pixels, of the photo album is specified with the height attribute. The width of the album widget would automatically fit the screen width.

 <html> 
  <head> 
    <title>Album</title> 
  </head> 
  <body> 
    <table wf_style="fullscreen"><tr><td> 
      <wf_album height="300"> 
         <img src="hk_1.jpg"/> 
         <img src="hk_2.jpg"/> 
         <img src="hk_3.jpg"/> 
         <img src="hk_4.jpg"/> 
         <img src="hk_5.jpg"/> 
         <img src="hk_6.jpg"/> 
         <img src="hk_7.jpg"/> 
         <img src="hk_8.jpg"/> 
         <img src="hk_9.jpg"/> 
         <img src="hk_10.jpg"/> 
      </wf_album> 
    </td></tr></table> 
  </body> 
</html>

API version: Version 0.9

Supported platform: iPhone, Android, BlackBerry, Debugger

A MotherApp variable which returns the map center "LAT, LNG" co-ordinates. This variable can only be used in conjunction with the map widget.

 <html>
    <head>
        <title>Map</title>
    </head>
    <body>
        <wf_titlebar> 
            <title align="center">Map</title> 
            <a align="right" href="062-map-variables.php?center=[wf:map_center]&zoom=[wf:map_zoom]">Test variables</a> 
        </wf_titlebar> 
        <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>

[wf:map_zoom]

API version: Version 0.9

Supported platform: iPhone, Android, BlackBerry, Debugger

A MotherApp variable which returns the map zoom from 1 to 17. This variable can only be used in conjunction with the map widget.

 <html>
    <head>
        <title>Map</title>
    </head>
    <body>
        <wf_titlebar> 
            <title align="center">Map</title> 
            <a align="right" href="062-map-variables.php?center=[wf:map_center]&zoom=[wf:map_zoom]">Test variables</a> 
        </wf_titlebar> 
        <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>

<wf_map wf_map_center="LAT,LNG" wf_map_zoom="ZOOMLEVEL">

API version: Version 1.0

Supported platform: iPhone, Android, BlackBerry, Debugger

Creates a map. It is recommended to use a combination of other formatting tags like <div>, <table>, etc to adjust the layout of the map page.

Extended Attributes:
• wf_map_center: use this attribute to specify center of the map.

Creating pins, or points of interest, on the map:
• Use a <a> link with the attribute wf_geo_location="LAT,LNG" to create a pin on the map.
Pressing the pin will take the user to the target of the <a> link.
• Use wf_style="hide_flag" within the <a> tag to hide the flag, or
• Use an <img> tag in the link to replace the pin icon with your own icon.

• For iPhone, the size of the map with a tab is 320x416 pixels, without the tab is the size is 320x460 pixels.

 <html>
    <head>
        <title>Map</title>
    </head>
    <body>
        <wf_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>
        </wf_map>
    </body>
</html>

API version: Version 1.0

Supported platform: iPhone, Android, BlackBerry, Debugger

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>
        <wf_toolbar>
            <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>
        </wf_toolbar>
    </body>
</html>

iPhone

Android

BlackBerry

<wf_web height="nnn">

API version: Version 1.1

Supported platform: iPhone, Android, BlackBerry, Debugger

Embedded the default web view from the SDK in the application.

 <html>
	<head><title>web view</title></head>
	<body wf_style="fullscreen">
        <table><tr><td><wf_web width="440" height="320">
                        <![CDATA[

                        <b>bold in webview<b><br/>
                        <b>bold in webview<b><br/>
                        ...
                        ]]>
        </wf_web></td></tr></table>
	</body>
</html>

iPhone

Android

BlackBerry

"mailto://[email address]?[subject=subject&body=body]"

API version: Version 0.9

Supported platform: iPhone, Android, BlackBerry, Debugger

This is equivalent to the mailto prefix for href's in standard HTML.
When the link containing such an href is pressed, the email client on the mobile platform is invoked
and a new email is created with the specified target email address in the "To:" field.

You can also pass the email client values for the subject and body of the email by
using either href="mailto://address@domain.com?subject=subject_text", or
href="mailto://address@domain.com?body=body_text", or both:
href="mailto://address@domain.com?subject=subject_text&body=body_text

 <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

Android

BlackBerry

"sms://[phone number]?[body=message]"

API version: Version 0.9

Supported platform: iPhone, Android, BlackBerry, Debugger

start up a screen for sending SMS

This is similar to the mailto prefix for href's in standard HTML, but it is for text messaging (SMS).
When a link containing an href="sms://phone_number" is pressed, the client text messaging widget is stared with the specified phone number as the destination.

You can also specify the body of the text message by
using href="sms://[phone number]?body=[message]", for example:
<a href="sms://18885551212?body=this is my text message">

 <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

Android

BlackBerry

"tel://[phone number]"

API version: Version 0.9

Supported platform: iPhone, Android, BlackBerry, Debugger

When used as a value for the href in a link, this dials the specified phone number.

 <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>

API version: Version 0.9

Supported platform: iPhone, Android, BlackBerry, Debugger

[wf:device_id] is a MotherApp variable. Wherever it appears in the code,
MotherApp replaces it with the device ID of the phone. It can be used in
URLs and in <form> fields.

 <html>
    <head><title>Device ID Test Case</title></head>
    <body>
        <table wf_style="fullscreen">
            
                <tr>
                    <td><a href="060-device_id.php?from_a_tag=[wf:device_id]">Device id a link</a></td>
                </tr>
            
        </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

Android

BlackBerry

API version: Version 1.1

Supported platform: iPhone, Android

The barcode scanner is only supported in iPhone 4 and Android.

By default, it would show a text field and a scan button on the screen. User can click the scan button to trigger the camera out and scan for barcode.

If wf_style="popup" is defined, the text field and the scan button will be hide. The camera will be trigger when the form is submit.

You can overlay an transparent image on the barcode scanning screen in iPhone.

Code supported in iPhone: Scan EAN/UPC codes, QR codes, UPS and FedEx

 --- 1 ---------------
<html> 
	<head> 
		<title> 
			Title
		</title> 
	</head> 
	<body> 
		<form action="" method="post"> 
		<table > 
			<tr> 
				<td wf_style="padding"> 
					<input name="popup1"  type="text" wf_type="barcode" wf_overlay_img="barcode.png"/> 
					<input  type="submit" value="Submit"/> 
				</td> 
			</tr> 
		</table> 
		</form> 
	</body> 
</html>

--- 2 ---------------
<html>
	<head>
		<title>
			Title
		</title>
	</head>
	<body>
		<form action="" method="post">
		<table >
			<tr>
				<td wf_style="padding">
					<input name="popup"  type="text" wf_type="barcode" wf_style="popup"/>
					<input  type="submit" value="Submit"/>
				</td>
			</tr>
		</table>
		</form>
	</body>
</html>

[wf:gps]

API version: Version 0.9

Supported platform: iPhone, Android, BlackBerry, Debugger

[wf:device_id] is a MotherApp variable. Wherever it appears in the code,
MotherApp replaces it with the device's current latitude and longitude, as real
numbers separated by a comma: "LAT,LNG".

 <html>
    <head><title>GPS Test Case</title></head>
    <body>
        <wf_titlebar> 
            <title align="center">Map</title> 
            <a align="right" href="059-gps.php?from_a_tag=[wf:gps]">GPS</a> 
        </wf_titlebar> 
        <table wf_style="fullscreen">
            
                <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>
            
        </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

Android

BlackBerry

API version: Version 0.9

Supported platform: iPhone, Android, BlackBerry, Debugger

When the taget of a link's href is a file with the extension ".mp3", pressing the link will start
the device's audio player and play the specified file. The audio file must have an ".mp3" file extension.

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

iPhone

Android

BlackBerry

API version: Version 0.9

Supported platform: iPhone, Android, BlackBerry, Debugger

When the taget of a link's href is a URL/file with the extension ".mp4", pressing the link will start
the device's video player and run the specified video file. The file must have an ".mp4" file extension.

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

iPhone

Android

BlackBerry

API version: Version 1.1

Supported platform: iPhone, Android, BlackBerry

When user clicks the link, the audio url will be played in background. So, the user can continue to navigate in the application.

Note: developers have to make sure whether the phone supporting the audio codec.

 <html>
    <head><title>Background Audio</title></head>
    <body>
        <wf_titlebar>
            <title align="center">Background Audio</title>
            <a align="right" href="rtsp://210.0.235.248/1.sdp" wf_style="background_audio">Play</a>
            <a align="right" href="sample.mp3" wf_style="background_audio">Play for iPhone</a>
        </wf_titlebar>
    </body>
</html>

API version: Version 0.9

Supported platform: iPhone, Android, BlackBerry, Debugger

This tag creates an audio player. The "src" attribute specifies the audio source.
When "autoplay" attribute is set to true, the audio stream is started automatically
when the page is loaded. If set the false, the user must press the play button to start the audio.

Note: You can put text, such as "Your browser does not support audio" between the <audio></audio> tags. Any text between these tags will be displayed when the native audio player cannot be started.

 <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

Android

BlackBerry

API version: Version 1.1

Supported platform: iPhone, Android, BlackBerry

The requested link will be fetched into the local cache after loaded from the network (see force_fetch also). The local cache would not be expired (even quit the application) unless "force_fetch" wf_style is used.

Additional information:
1. If the requested link is in the local cache, the requested content will be returned immediately without requesting from the network unless "force_fetch" wf_style is used.

2. This style could be used along with other navigation styles, e.g. navigation_unchanged, navigation_reset

 <html>
    <head><title>Fetch Page</title></head>
    <body wf_style="fullscreen">

        <table>
            <tr><td wf_style="padding"><a href="s1.html" wf_style="fetch">Simple Page (Access network once only)</a></td></tr>
        </table>

    </body>
</html>

API version: Version 1.0

Supported platform: iPhone, Android, BlackBerry

The requested link will be fetched into the local cache after loaded from the network (see fetch also). The local cache would not be expired (even quit the application) unless "force_fetch" wf_style is used.

Additional information:
1. If the requested link is in the local cache, the requested content will be returned immediately without requesting from the network unless "force_fetch" wf_style is used.

2. This style could be used along with other navigation styles, e.g. navigation_unchanged, navigation_reset

 <html>
    <head><title>Fetch Page</title></head>
    <body wf_style="fullscreen">

        <table>
            <tr><td wf_style="padding"><a href="s1.html" wf_style="fetch">Simple Page (Access network once only)</a></td></tr>
            <tr><td wf_style="padding"><a href="s1.html" wf_style="force_fetch">Reload from network</a></td></tr>
        </table>

    </body>
</html>

"wf://device/db/delete?key=xxx"

API version: Version 1.1

Supported platform: iPhone, Android, BlackBerry

Delete a local database record defined by "key". e.g.
wf://device/db/delete?key=load_time: delete the record with key=load_time

You can also make use of MotherApp variables such as "[wf:device_id]" in the key. e.g.
wf://device/db/delete?key=[wf:device_id]_name: delete the record with key is device id + "_name"

see tutorial http://developer.motherapp.com/tutorial/4/#add_delete_query

"wf://device/db/add?key=xxx&value=xxx[&redirect=url]"

API version: Version 1.1

Supported platform: Android, BlackBerry, iPhone

Add a (key, value) pair into the local database in the application.

You can make use of MotherApp variables such as "[wf:device_id]" and "[wf:datetime8]" to fill the value.
For example, wf://device/db/add?key=load_time&value=[wf:datetime8], storing a key with "load_time" and a value with the current day into the local database.

You can make use of a substitution mechanism to do a more complex add.
For example, wf://device/db/add?key=shop001&value=%7Bname%2520%7D%7Baddress%25100%7D&name=ABCShop&address=SanJose,USA. Url decode the query string:

|_. key |_. value |
|key: |shop001|
|value: |{name%20}{address%100}|
|name: |ABCShop|
|address: |SanJose,USA|

MotherApp engine substitute the "name" and "address" into "value" with the padding size. In this case, "name" left-space-padded with 20 characters and "address" left-space-padded with 100 characters. This substitution mechanism helps developer to do local database adding in <form> tag easily and store information in columns logically.

Every "wf" url, you can specify the "redirect" parameter to redirect the page to a specific "url" after the "wf" url executed.

see tutorial http://developer.motherapp.com/tutorial/4/#add_delete_query

"wf://device/db/query?subkey[mm]:[nn]=[op]xxx[(-|,)[op]yyy...]&subkey[mm]:[nn]=[op]xxx[(-|,)[op]yyy...][&result_filter=is_empty]"

API version: Version 1.1

Supported platform: iPhone, Android, BlackBerry

Query the local database. It should be used with the [DB UI Template] in order to render the retrieved records into user interface.

Syntax:
subkey[mm]:[nn]:
try to match the substring of the key from index [mm] to index [nn] where [mm] is inclusive and [mm] is exclusive.

[op]: the comparator to compare the key:
"eq": =
"ge": >=
"gt": >
"le": <=
"lt": <
"li": like

Logical operator:
"-": and (using in the same subkey)
",": or (using in the same subkey)
"&": and (using in different subkey)

result_filter=is_empty: if there is no record found, it would return one dummy record. Otherwise, no record return.

 EXAMPLES:
Return records with the key started with "15":
wf://device/db/query?subkey0:2=eq15

Return records with the key started with "15" or "19" or "20":
wf://device/db/query?subkey0:2=eq15,eq19,eq20

Return records for substring(key, 0, 2) >= '15' and substring(key, 2, 4) = 'sun':
wf://device/db/query?subkey0:2=ge15&subkey2:4=eqsun

Return records with the first two characters between "15" and "20":
wf://device/db/query?subkey0:2=ge15-le20

Return 1 record if no result found for wf://device/db/query?subkey0:2=ge15-le20. Otherwise, return 0 record.
wf://device/db/query?subkey0:2=ge15-le20&result_filter=is_empty

see tutorial http://developer.motherapp.com/tutorial/4/#add_delete_query

[wf:db:(key)]

API version: Version 1.1

Supported platform: iPhone, Android, BlackBerry

Record value can be retrieved from local database using MotherApp variable.

(key) is the key of the record. The value of such record will be used to replace the variable.

see tutorial http://developer.motherapp.com/tutorial/4/#add_delete_query

 Query the local database with the key which is defined in the "searchkey" in the local database:
<tr wf_source="wf://device/db/query?subkey0:99=%5Bwf%3Adb%3Asearchkey%5D">
...
</tr>

API version: Version 1.1

Supported platform: iPhone, Android, BlackBerry

Use "wf_source" in the tag. You can query the local database and render the user interface base on the results from the query.

Following variables are used to insert the information from the record that returned:
{{key}}: key of the record
{{value}}: value of the record
{{valueMM:NN}: substring of the value from index MM (inclusive) to NN (exclusive) of the record
{{counter}}: loop counter

see tutorial http://developer.motherapp.com/tutorial/4/#template

 <html>
<!--
local db (key, value):
world     |This is offline db sample   |
world1    |This is offline db sample1 |
world2    |This is offline db sample2 |
-->
  <head><title>Table Row Source</title></head>
  <body>
    <table>
      <tr wf_source="wf://device/db/query?subkey0:1=eqw">
        <td width="30%">{{value}}--abc</td>
        <td width="30%">{{value0:3}}--abc</td>
        <td width="10%">{{counter}}</td>
        <td><div>{{key}}</div></td>
      </tr>
    </table>

    <div>
      <input type="text" wf_source="wf://device/db/query?subkey0:1=eqw" value="{{key}}"/>
    </div>
  </body>
</html>

<!--
Result:
<html>
  <head><title>Table Row Source</title></head>
  <body>
    <table>
      <tr wf_source="wf://device/db/query?subkey0:1=eqw">
        <td width="30%">world|This is offline db sample--abc</td>
        <td width="30%">Thi--abc</td>
        <td width="10%">0</td>
        <td><div>world</div></td>
      </tr>
      <tr wf_source="wf://device/db/query?subkey0:1=eqw">
        <td width="30%">world|This is offline db sample1--abc</td>
        <td width="30%">Thi--abc</td>
        <td width="10%">1</td>
        <td><div> world1</div></td>
      </tr>
      <tr wf_source="wf://device/db/query?subkey0:1=eqw">
        <td width="30%">world|This is offline db sample2--abc</td>
        <td width="30%">Thi--abc</td>
        <td width="10%">2</td>
        <td><div> world2</div></td>
      </tr>
    </table>

    <div>
      <input type="text"  wf_source="wf://device/db/query?subkey0:1=eqw" value="world"/>
      <input type="text" wf_source="wf://device/db/query?subkey0:1=eqw" value="world1"/>
      <input type="text" wf_source="wf://device/db/query?subkey0:1=eqw" value="world2"/>
    </div>
  </body>
</html>
-->

[UA-OS]

API version: Version 0.9

Supported platform: iPhone, Android, BlackBerry, Debugger

"UA-OS" is Embedded in HTTP header
The value of it is either:
1) iPhone
2) BlackBerry
3) Android
It helps your server backend to determine which mobile device requesting.

 In PHP:
$_SERVER['HTTP_UA_OS']

In Django:
request.META["HTTP_UA_OS"]

In Ruby on Rails:
request.env["HTTP_UA_OS"]

In JSP:
request.getHeader("UA-OS")

In ASP:
Request.ServerVariables("HTTP_UA_OS")

[UA-Pixels]

API version: Version 0.9

Supported platform: iPhone, Android, BlackBerry, Debugger

"UA-Pixels" is embedded in the HTTP header.
Server can use this information to determine the screen resolution of the requesting device

 In PHP:
$_SERVER['HTTP_UA_PIXELS']

In Django:
request.META["HTTP_UA_PIXELS"]

In Ruby on Rails:
request.env["HTTP_UA_PIXELS"]

In JSP:
request.getHeader("UA-Pixels")

In ASP:
Request.ServerVariables("HTTP_UA_PIXELS")

[cookie handling]

API version: Version 0.9

Supported platform: iPhone, Android, BlackBerry, Debugger

MotherApp supports simple cookie handling.

 In PHP:
get cookie: $_COOKIE['Cookie1']
set cookie: setcookie("Cookie1", "cyan")

In Django:
get cookie: request.COOKIES['Cookie1']
set cookie: response.set_cookie("Cookie1", "cyan")

In Ruby on Rails:
get cookie: cookies[:Cookie1]
set cookie: cookies[:Cookie1] = "cyan"

In ASP:
get cookie: Request.Cookies("Cookie1")
set cookie: Response.Cookies("Cookie1")="cyan"

[http caching]

API version: Version 0.9

Supported platform: iPhone, Android, BlackBerry, Debugger

MotherApp supports HTTP Caching, including Last-Modified and ETag headers

Coding References

Formatting - Basics

Formatting - Tab

Formatting - Header/Footer

Formatting - Others

Image

Text Style

Clickable Row Link

Button Link

Link behaviours - Basics

Link behaviours - Popup

Link behaviours - Others

Form

Form Inputs

Colorings

Album

Map

Other Widgets

Phone Features

Hardware Features

Multimedia

Caching

Database

DB Layout Template

Supported HTTP features