JSDO class and object reference : progress.ui.UIHelper class
  

progress.ui.UIHelper class

The progress.ui.UIHelper class is a JSDO class that provides methods for managing the user interface of a mobile app that accesses a JSDO. This class is intended for use by:
*Developers using JavaScript libraries, such as jQuery Mobile, to build user interfaces by creating HTML-based lists and fields.
*Developers using tools other than the Telerik Platform. The Telerik Platform and its Kendo UI DataSource eliminate the need for UIHelper functionality.
Each instance of UIHelper supports the display of data for a specific JSDO, and typically controls the format and content of a list view (showing items representing table records) and a detail page (showing a form with input fields for the list item clicked by the user).

Constructor

Instantiates a UIHelper object for use in managing the UI for a specified JSDO.
Syntax
progress.ui.UIHelper( JSDO-object )
JSDO-object
An object reference to the JSDO associated with the UIHelper instance.

Properties

Table 26. progress.ui.UIHelper properties
Member
Brief description (See also the reference entry)
An object reference property on a UIHelper instance that corresponds to a table of the JSDO with which the UIHelper instance is associated.

Methods

Table 27. progress.ui.UIHelper class-level methods
Member
Brief description (See also the reference entry)
A class method that specifies a new default field format for all detail forms created with UIHelper instances in the current JavaScript session.
A class method that specifies a new default item format for all list views created with UIHelper instances in the current JavaScript session.
Table 28. progress.ui.UIHelper table-reference methods
Member
Brief description (See also the reference entry)
Adds an item to a list view based on the working record of a specified table reference.
Updates a specified working record in JSDO memory with the values currently displayed on the detail page form.
Clears the items from a list view associated with a single table reference.
Copies the field values of a given record to corresponding fields in the current HTML document for display in the form on the detail page.
Reads the schema of the referenced table and returns a string containing the HTML text of field definitions created by processing a UIHelper form field template against fields that you specify.
Returns a JSRecord object for the record shown in the form on the detail page.
Returns a JSRecord object for a specified item in a list view.
Specifies the HTML page that contains the form in which item details are displayed.
Defines a list view for a referenced JSDO table.
Displays the referenced table's list view on the mobile app device or browser page.

Events

This class has no events.

Example

The sample mobile app shown below is followed by the code for its index page (index.html) and client logic (customers.js):
Figure 2. Sample mobile screen using the progress.ui.UIHelper class
Table 29. Example — 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-role="header"><h1>Customer</h1></div>
        <div data-role="content">      
                <form action="" id="customerform">                
                </form>
        </div>
        </div>
    </body>
</html>
Table 30. Example — 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/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();
}

See also

progress.data.JSDO class