BlackBerry 6.0 and iOS Look-and-Feel

The default look-and-feel for BlackBerry 6.0 and iOS is provided by the jQuery Mobile framework.

For this look-and-feel, the layout of the HTML at a high-level is as follows:

Each screen has a block, contained in a <div> element, with a data-role of "page" and a data-theme of 'a.' Each <div> has a <div> with a data-role of "header," and a child element for the menu.

<div data-role="page" data-theme='a' id="Department_createScreenDiv">
      <div data-role="header" data-position="inline"> 
       <a data-icon="arrow-l" id="Department_createScreenDivCancel" name="Cancel" onclick="menuItemCallbackDepartment_createCancel();"> Cancel</a>
       <h1>Department_create</h1> 
       <a id="Department_createScreenDivCreate" name="Create" onclick="menuItemCallbackDepartment_createSubmit_Workflow();"> Create</a>
     </div>

The menu has one anchor, <a>, for each menuitem:

<a id="Department_createScreenDivCreate" name="Create" onclick="menuItemCallbackDepartment_createSubmit_Workflow();"> Create</a>

In addition to a menu, each screen <div> has a <div> with a data-role of "content," a child element where the controls are hosted. The content <div> has a child <div> with a data-role of "scroller." This <div> in turn has a form with a number of <div>s.
```
<div data-role="content" class="wrapper" >
       <div data-role="scroller">
        <form name="Department_createForm" id="Department_createForm">
          <div class="customTopOfFormStyle"  ><span id="Department_createForm_help" class="help"></span></div>
          <div class="customTopOfFormStyle"   id="topOfDepartment_createForm"></div> 
          <div class="editbox">
            <label class="left" for="Department_create_dept_name_paramKey">Dept name:</label>
            <input class="right" type="text" id="Department_create_dept_name_paramKey"/><span id="Department_create_Department_create_dept_name_paramKey_help" class="help"></span>
          </div>
```
The first <div> is a block put aside for use to display help, a <span> element.

The next <div> is a built-in element that can be used to find the top of the form. The last <div> is another built-in element that can be used to find the bottom of the form.

All the other <div>s in the form correspond to the controls put on that screen during design time in the Mobile Workflow Forms editor. You might see, for example, a <div> that holds a label, <label>, and a textbox, <input>. When the page is opened, the controls will be enhanced by jQuery Mobile to supply additional functionality for controls like buttons, sliders, text inputs, and combo boxes.

Example 1

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

<html>
  <body onload="onWorkflowLoad();">
    <div data-role="page" data-theme='a' id="Department_createScreenDiv">
      <div data-role="header" data-position="inline"> 
       <a data-icon="arrow-l" id="Department_createScreenDivCancel" name="Cancel" onclick="menuItemCallbackDepartment_createCancel();"> Cancel</a>
       <h1>Department_create</h1> 
       <a id="Department_createScreenDivCreate" name="Create" onclick="menuItemCallbackDepartment_createSubmit_Workflow();"> Create</a>
     </div> 
     <div data-role="content" class="wrapper" >
       <div data-role="scroller">
        <form name="Department_createForm" id="Department_createForm">
          <div class="customTopOfFormStyle"  ><span id="Department_createForm_help" class="help"></span></div>
          <div class="customTopOfFormStyle"   id="topOfDepartment_createForm"></div> 
          <div class="editbox">
            <label class="left" for="Department_create_dept_name_paramKey">Dept name:</label>
            <input class="right" type="text" id="Department_create_dept_name_paramKey"/><span id="Department_create_Department_create_dept_name_paramKey_help" class="help"></span>
          </div>
           <div class="customBottomOfFormStyle"   id="bottomOfDepartment_createForm"></div>       
        </form>
       </div>
     </div>
    </div>
  </body>
</html>