Using JSDOs to create mobile and web clients : Dynamic data binding for alternate client platforms : Using the UIHelper class
  

Using the UIHelper class

The UIHelper is instantiated to work with a JSDO instance. The setListView( ) method is used to specify the HTML element for the list (<ul> element). The clearItems( ) and addItem( ) methods are used to build the list view. The showListView( ) method is used to show the list view on the screen.
Note: For complete information on the methods of the UIHelper class, see JSDO properties, methods, and events reference.
The following is a sample HTML file using JQuery Mobile (index.html):
Table 10. Sample HTML file using JQuery Mobile (index.html)
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <title>Customers</title>
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
        <style>
            /* App custom styles */
        </style>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">
        </script>
        <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js">
        </script>
        <script src="progress.session.js"></script>
        <script src="progress.js"></script>
        <script src="customers.js"></script>
    </head>
    <body>
        <div data-role="page" id="custlist">
            <div data-theme="b" data-role="header">
                <h3>Customers</h3>
            </div>
            <div data-role="content">
                <ul id="listview" data-role="listview" data-divider-theme="b" data-inset="true" data-filter="true">
                </ul>
            </div>
        </div>
        <div data-role="page" id="custdetail" data-add-back-btn="true" data-theme="b">
        <div data-theme="b" data-role="header"><h1>Customer</h1></div>
        <div data-role="content">
            <form action="" id="customerform">
            </form>
        </div>
        </div>
    </body>
</html>
The following is the customers.js script used in the sample HTML.
Table 11. Sample JavaScript file using JQuery Mobile (customers.js)
var customers;
var uihelper;
var forminitialized = false;

$(document).ready(function() {
    var session = new progress.data.Session();
    
    session.login("http://localhost:8980/SportsApp", "", "");
    session.addCatalog(
'http://localhost:8980/SportsApp/static/mobile/CustomerOrderSvc.json'
);
    customers = new progress.data.JSDO({ name: 'CustomerOrder' });
    customers.subscribe('AfterFill', onAfterFillCustomers, this);
    uihelper = new progress.ui.UIHelper({ jsdo: customers });
    uihelper.eCustomer.setDetailPage({ name: 'custdetail' });
    uihelper.eCustomer.setListView({
        name:'listview',
        format: '{CustNum}<br>{Name}<br>{State}',
        autoLink: true
});
    $('#customerform').html(
       uihelper.eCustomer.getFormFields()
            + '<input type="button" value="Add" id="btnAdd" />'
            + '<input type="button" value="Save" id="btnSave" />'
            + '<input type="button" value="Delete" id="btnDelete" />'
    );
    customers.fill();
});

function onAfterFillCustomers() {
    uihelper.eCustomer.clearItems();
    customers.eCustomer.foreach(function(customer) {
        uihelper.eCustomer.addItem();
    });
    uihelper.eCustomer.showListView();
}
The setDetailPage( ) method is used to specify the name of the HTML element, generally a <div>, that represents the detail page.
The getFormFields( ) method can be used to obtain the HTML text for the fields of the specified table reference. This HTML text is generally added to the HTML element representing the form in the detail page. This element does not need to be a <form> element; it can be a <div> element.
The format property of the initialization object for setListView( ) contains substitution parameters that are replaced when addItem( ) is called: {CustNum}, {Name}, and {State}. The working record of the specified table reference is used to determine the values of the fields. In the sample customer.js script, the call to addItem( ) queries the working record to obtain the values of the fields CustNum, Name, and State. The addItem( ) method then builds a list item using a default template for list items.