BlackBerry 6.0, Android, and iOS Look and Feel

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

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

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. Use the contents of the header <div> to manipulate 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 menu item:

<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. The "content" <div> is where you can do customizations, for example, branding.
```
<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 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.

If you look into Custom.js file, it is recommended that you add customizations such as branding to the <div> "TopOf" ScreenKey "Form" and "bottomOf" screenKey "Form." For example:
```
/*
var screenKey = getCurrentScreen();
var form = document.forms[screenKey "Form"];
if (form) {
var topOfFormElem = document.getElementById("topOf" screenKey "Form");
! topOfFormElem.innerHTML = "Use this screen to ..."; 
var bottomOfFormElem = document.getElementById("bottomOf" screenKey "Form");
bottomOfFormElem.innerHTML = "<a href=\"help.html\">Click here to open help</a>";
}
*/
```
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 are 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>