The default look and feel is provided by the jQuery Mobile framework.
In Preferences, Optimize for appearance is the default look and feel.
For the standard look and feel, the layout of the HTML at a high level is:
<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>
<a id="Department_createScreenDivCreate" name="Create" onclick="menuItemCallbackDepartment_createSubmit_Workflow();"> Create</a>
<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 element is a block used to display help in 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.
In the Custom.js file, it is recommended that you add customizations such as branding to the div element, "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 divs in the form correspond to the controls put on that screen during design time in the Hybrid App Designer. You might see, for example, a div that holds a label and a textbox (input element). 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.
<html> <body onload="hwc.onHybridAppLoad();"> <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>
CSS look and feel files include: