Mobile Tutorial: Using LiveBindings to Populate a ListBox in Mobile Applications (iOS and Android)

From RAD Studio
Jump to: navigation, search

Go Up to Mobile Tutorials

Go Up to Database and LiveBindings Tutorials


This tutorial guides you through the steps of connecting data to a FireMonkey ListBox control on your mobile devices, using LiveBindings.

Step 1: Creating the Project

In this project, you need a list box, a rectangle, and also a prototyping binding source. To add these components, follow the steps below:

  1. Select:
  2. Select the TListBox component in the Tool Palette, and drop it on the Form Designer.
  3. Select the list box component on the Form Designer, and in the Object Inspector, locate the DefaultItemStyles.ItemStyle property. Set it to the listboxitemrightdetail style.

    LBListBoxiOS2.png

  4. Unselect the list box component by clicking in a blank area of the Form Designer.
  5. Select the TRectangle component in the Tool Palette, and drop it on the Form Designer.
  6. Select the rectangle component on the Form Designer, and in the Object Inspector, set the Align property to Bottom.
  7. Select the list box component and set its Align property to Client.
  8. Now drop a TPrototypeBindSource from the Tool Palette onto your form.

At this point, your form should be similar to the following iOS screen:

LBListBoxiOS.png

You need to add sample data for colors and color names to the TPrototypeBindSource component in order to support the purpose of this tutorial and to link to the list box and the rectangle.

  1. Right-click the TPrototypeBindSource component, and then click Add Field on the context menu.
  2. Select AlphaColors and ColorsNames from the Field Data list, and clear the Shuffle Values check box.
    This operation adds sample alphabetically sorted data (alpha color values and names).

    LBListBoxiOS3.png

  3. Validate your selection by clicking the OK button. Now the sample data is ready to be used through LiveBindings.

Step 2: Creating the LiveBindings

Open the LiveBindings Designer. The diagram with no connections is similar to the following image:

LBListBoxiOS4.png

  1. Bind ColorsName1 from PrototypeBindSource1 to Item.Text from ListBox1. (Click ColorsName1 and drag the mouse to Item.Text.) Now the list box displays all the color names in the prototyping binding source.
  2. Bind ColorsName1 from PrototypeBindSource1 to ItemHeader.Text from ListBox1. Now the list box also displays headers with all the color names in the prototyping binding source.
  3. In the LiveBindings Designer, click the binding that connects ColorsName1 to ItemHeader.Text.
  4. In the Object Inspector, locate the FillHeaderCustomFormat property and select the SubString(%s, 0, 1) binding expression from the drop-down list.
    At this point, the list box groups all the color names into alphabetical categories:

    LBListBoxiOS5.png

  5. Bind AlphaColor1 from PrototypeBindSource1 to Item.LookupData from ListBox1. This ensures that the selection of the color name also points to the correct alpha color value.
  6. Bind AlphaColor1 from PrototypeBindSource1 to Item.Detail from ListBox1. This ensures the alpha color value appears in the right side of the item in the list box.
  7. Click the ellipsis button [...] on the Rectangle1 diagram block in the LiveBindings Designer, and in the dialog that opens, type Fill.Color. Select the Fill.color check box, then click OK:

    LBListBoxiOS6.png

  8. Bind Fill.Color from Rectangle1 to SelectedValue from ListBox1. This ensures the rectangle's fill color changes according to your list box item selection.

Note: When attempting to bind Fill.Color to SelectedValue, a confirmation message box opens. In this message box, choose Yes.

After you complete the steps above, the LiveBindings diagram will be similar to the following image:

LBListBoxiOS7.png

Your application is now ready to run on the mobile device.

The Results

To run the application, press F9 or choose Run > Run.

When you select a list box item, the rectangle's color changes accordingly:


iOS (iPad) Android (LG-E612)

LiveBindings iOS.png

LiveBindings Android.png

See Also

Retrieved from "https://docwiki.embarcadero.com/RADStudio/Athens/e/index.php?title=Mobile_Tutorial:_Using_LiveBindings_to_Populate_a_ListBox_in_Mobile_Applications_(iOS_and_Android)&oldid=236218"