MList

The MList component is a dynamic list using the jQueryMobile library. This list can be filled with data either manually, through its Items property, or with a database connection.

Usage

Fill From a Datasource

You can fill an MList from a Datasource component using PHP code. Take the following function as an example:

function fillMList($sender, $params)
{
    // Get the items array from the MList (you cannot work with the property directly).
    $items = $this->MList1->Items;

    // Add all the item to the items array.
    // NOTE: items are associative arrays, see the documentation of the Items property.
 	  $this->DataSource1->DataSet->first();
	   while( ! $this->DataSource1->DataSet->EOF )
   	{
		      $items[] = array("Caption" => $this->DataSource1->DataSet->Fields["column_name"]);
        // NOTE: This example adds an item with the value of its caption field filled with the value
        // of the ‘column_name’ column from the DataSource.
        // See the documentation of the Items property for a list of available item fields.

		      $this->DataSource1->DataSet->next();
	   }

    // Save the items array back to the property.
    $this->MList1->Items = $items;
}

You can call it from your Page’s OnBeforeShow event.

Get the Clicked Item

From JavaScript:

$("#MList1 li").on("click", function() {
    $clickedItemCaption = $(this).html();
});

Client-side Features

DOM Elements

The component generates the following client-side DOM elements:

• Wrapper (HTMLDivElement). Full web browser support. Access it with $("#ComponentName_outer").get()[0].
  • List (HTMLUListElement). Full web browser support. Access it with: $("#ComponentName").get()[0].
    • List Item (HTMLLiElement). Full web browser support. Access it with: $("#ComponentName li").get(ListItemIndex)[0].

Client-side Events

Documented in the RPCL Reference.

Server-side Features

Properties, Methods and Events

Documented in the RPCL Reference.

Help Resources

Tutorials

• The Shopping List, development of a server mobile application to keep a list in sync with a MySQL database, with the ability to add, modify and delete items.
• Where It Was, development of a server mobile application to keep a list of locations, and display them on a map when requested.

Video Tutorials

• HTML5 Builder Mobile Development & Deployment.
  • 10:50 — Writting a server mobile page connected to an InterBase database using an MList.
  • 15:25 — Writting a client mobile page to keep a list of items stored using MDB, and displayed on an MList.

Sample Applications

In the following folders inside the sample applications directory you will find projects covering this component:

• jQueryMobile\basic. Showcase of several mobile components, including the MList in the mlist.php page.
• Features\ClientStorage\SimpleList. How to work with the component from JavaScript.