Optimize for Performance Look and Feel

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>