Example 2

Table Component

This example demonstrates the features of the MyMobileWeb table component. The image below shows the contents of the XML file. As the code shows, the table used in this example has three columns, however, the third column will only be displayed when the device used is a PDA (using the display attribute). MyMobileWeb provides mechanisms for the definition of device clusters. In this case, PDADevice is a cluster of devices that corresponds to those devices with the typical screen dimensions of a PDA. With respect to data binding, the XML file contains the following remarkable attributes:

• The context (model) variable used by the bind attribute will be automatically updated with the identifier of the row selected by the user.

• The model (context) variable defined by the optionsbind attribute will contain all rows to be displayed in the table.
  

• Different member attributes define the mapping between columns and specific subparts of the data.

 

With regards to pagination, MyMobileWeb will automatically paginate table rows (if necessary) when the paginate attribute is set to true.

N.B. This example does not cover everything to do with event handling or obtaining table data via execution of an OA.

The CSS code used for specifying the look and feel of the table in this example can be seen below.

The CSS properties that define the look and feel of the pagination bar will be automatically rendered when necessary. When no paging labelling schema is specified, the “direct link to each page” schema is used by default.

The screenshots below show how the table would be displayed on different mobile devices. The amount of page number links (each of which can be selected by the user to jump to a specific page) displayed depends on the width of the device’s screen. The wider the screen, the more page number links displayed. By making changes to the CSS properties, the pagination bar could be displayed at the top or at the bottom of the table.

The next set of screenshots show how changes can be made to the pagination labelling schema. Using the “page x of y” schema allows the user to advance sequentially through the set of pages. This example shows how the table and pagination bar would be displayed in a Nokia Series 40 browser.

The last set of screenshots in this example show how the table would be displayed on a PDA, with three columns and the “direct link to each page” pagination labelling schema.