Optimized for Performance Look-and-Feel

This look-and-feel is simple and can be used on all platforms, including Windows 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 as follows:

Each screen has a block, a <div> element. Each of those <div>s 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, <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 put aside for use 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 will 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, <label> and the second holding a textbox, <input>.

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>