Mobile Tutorial: Using LiveBindings to Populate a ListView (iOS and Android)

From Appmethod Topics
Jump to: navigation, search

Go Up to Mobile Tutorials: Mobile Application Development (iOS and Android)

Go Up to LiveBindings in Appmethod


This tutorial shows how to use LiveBindings Designer to populate a FireMonkey ListView component from a TPrototypeBindSource containing some sample data. The tutorial shows you how to add the sample data and how to make the bindings between the prototyping source and the list view component in order to fill the list.

Like every LiveBinding, this tutorial requires no code. However, in order to create a useful application, you do need to add event handlers and other code.

Step 1: Creating the Project

  1. Create a new project. Choose a FireMonkey Mobile Application for this example. In the wizard, choose Blank Application.

    LBListView1.jpg

  2. In the Tool Palette, locate a TListView component and drop it onto the form.
  3. Add a TPrototypeBindSource component to the form.
  4. On the form, select the ListView1 component, and then in the Object Inspector, set the Align property to Client and the SearchVisible property to True.
    After placing the required components on the mobile form, the form should look like the following screen on an iOS device:

    LBListView2.jpg

Step 2: Adding Fields

  1. Right-click the TPrototypeBindSource component and select Add Field....

    LBListView3.jpg

  2. From the Add Field dialog box, select ColorsNames and click OK.

    AddFieldListView.png

Step 3: Creating LiveBindings

  1. Open the LiveBindings Designer, if it is not already open, and drag the ColorsName1 property of the TPrototypeBindSource onto the Item.Text property of the list view to bind these properties.
    The list view component automatically populates its items with color names from the prototyping data component:

    LBListView4.jpg

  2. In the Structure View, locate the ListView1 component and then click ItemAppearance in the hierarchy.
  3. In the Object Inspector, locate the ItemAppearance property and change its value to ImageListItemRightButton.

    LBListView5.jpg

  4. Optionally, you can apply a tint to the TListView text buttons. Do the following:
    • In the Structure View, locate the ListView1 component and then expand ItemAppearance in the hierarchy.
    • Under ItemAppearance, expand Item, and then select TextButton.
    • In the Object Inspector, locate the TintColor property and set its value to an appropriate value, such as Seagreen.

    LBListView6.png

At this point, the list view component is configured to display an image on the left-hand side of the item text, and a button on the right-hand side of the item text. The image and button are populated with sample data that you add in the next step.

Step 4: Adding More Fields

You need to add two more fields in order to make the list view component display an image and some text on the button associated with each list item.

  1. Right-click the TPrototypeBindSource component and select Add Field....
  2. In the Add Field dialog box, Ctrl+Click to select Bitmaps and Currency field data. When finished, click OK.
  3. Go to the LiveBindings Designer and do the following:
    1. Connect the Bitmap1 property of the prototyping source data to the Item.Bitmap property of the list view component.
      This step adds a button representing the color and number of each list view item, such as Blue 19.
    2. Connect the CurrencyField1 property from the prototyping source data to the Item.ButtonText property of the list view component.
    This step displays the currency field value on the button located on the right-hand side of each list view item.

    LBListView6.jpg


Now the list view displays some color data associated with each item and also displays sample currency data on the button associated with each list item.

Step 5: Adding the onButtonClick Event Handler

To create a usefull application, you can add the onButtonClick event handler that fires when you click a ListView item.

To add the onButtonClick event handler

  1. On the mobile application form, select the ListView1 component.
  2. In the Object Inspector, open the Events tab, and then double-click OnButtonClick.
  3. In the Code Editor, implement an appropriate OnButtonClick event handler.

The following sample code adds the event handler that displays a message box when you click a ListView item:

Object Pascal:

procedure TForm1.ListView1ButtonClick(const Sender: TObject;
  const AItem: TListViewItem; const AObject: TListItemSimpleControl);
begin
   ShowMessage(AItem.Text + ' ' +AItem.ButtonText + ' is clicked.');
end;

Appmethod C++:

void __fastcall TForm1::ListView1ButtonClick(const TObject *Sender, const TListViewItem *AItem,
                  const TListItemSimpleControl *AObject)
{
  ShowMessage(AItem->Text + " " + AItem->ButtonText + " is clicked.");
}

The Results

Run the application on your mobile device, either by pressing F9 or by choosing Run > Run.

iOS Android

LBinding IOS.png
iPad

LBListView Android.png
Galaxy S4



If you click the Blue item, the application displays the following message box:

LBindingMessagebox Android.png

See Also