This is a simple look and feel option that you can use on all
platforms.
Note: Windows Mobile 6.x Professional platforms
always use the Optimize for performance look and feel, as this platform is not
supported by jQuery Mobile.
Choose the Optimize for performance option
when you configure Hybrid App Designer preferences. For this
look and feel, the layout of the HTML at a high level is:
- Each screen has a block, a <div> element. Each of those <div> elements has an unordered list element, <ul>, a child element for the menu. The menu has one list item, <li>, for each menu item.
- In addition to a menu, each <div> has a form element, <form>, where the controls are hosted.
- Each form has a single table, <table>, with a number of table rows, <tr>. The first table row has a block to display help, a <span> element. The next table row is a built-in element, a table data or <td>, that can be used to find the top of the form.
- The last table row is another built-in element, a <td>, that can be used to find the bottom of the form.
- All the other rows in the form correspond to the controls put on that screen in the Hybrid App Designer. You might get, for example, a row with two table datas, the first holding a <label> and the second holding a textbox (<input>).
- A column can have only one width, so if you have more than one line, one column
may contain different widths, which means the last width prevails. The contents
of a field are wrapped only where there is a space. If there is no space, the
contents are not wrapped. As a result, depending on the length of the data,
Listviews may not respect the field widths specified in the
Hybrid App Designer with this look-and-feel.
Example 1
A typical Hybrid App with this
look and feel, without extraneous attributes, looks similar to
this:
<html>
<body onload="onHybridAppLoad();">
<div id="Department_createScreenDiv">
<ul id="Department_createScreenDivMenu" class="menu">
<li><a class="nav" name="Create" onclick="menuItemCallbackDepartment_createSubmit_Workflow();">Create</a></li>
<li><a class="nav" name="Cancel" onclick="menuItemCallbackDepartment_createCancel();">Cancel</a></li>
</ul>
<form name="Department_createForm" id="Department_createForm">
<table class="screen">
<tr>
<td colspan="2"><span id="Department_createForm_help" class="help"></span></td>
</tr>
<tr>
<td colspan="2" id="topOfDepartment_createForm"></td>
</tr>
<tr>
<td class="left"><label for="Department_create_dept_name_paramKey">Dept name:</label></td>
<td class="right"><input class="right" type="text" id="Department_create_dept_name_paramKey"/><span id="Department_create_Department_create_dept_name_paramKey_help" class="help"></span></td>
</tr>
<tr><td colspan="2" id="bottomOfDepartment_createForm"></td></tr></table>
</form>
</div>
</body>
</html>