Optimized for Performance Look and Feel

This is a simple look and feel you can use on all platforms.

Note: Windows Mobile 6.x Professional platforms always use the Optimized for performance look and feel, as this platform is not supported by jQuery Mobile.

Choose the Optimized for performance option when you configure Mobile Workflow Forms Editor 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 Mobile Workflow Forms editor. 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.

Example 1

A typical mobile workflow with this look and feel, without extraneous attributes, looks similar to this:

<html>
  <body onload="onWorkflowLoad();">
    <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>