Show: Delphi C++
Display Preferences

Tutorial: Using LiveBindings and DataModules with the Metropolis UI

From RAD Studio XE3
Jump to: navigation, search

Go Up to Tutorials

Go Up to LiveBindings Designer


This tutorial will guide you through the steps of connecting data to the FireMonkey Metropolis UI Grid Template. This tutorial consists of populating the GridView Listboxes with data that is linked to the DetailView, and adding navigational buttons using actions to navigate through data on the DetailView form.

Contents

Step 1: Creating the Project

Create a new project. Choose a FireMonkey Metropolis UI Application - Delphi for this example. From the Wizard, choose Grid Metropolis UI Application.

  1. Right-click your project name (for instance Project1.exe) in the Project Manager and select Add New > Other.

    LBMetroUI1.png

  2. From the Delphi Projects | Delphi Files page, select Data Module.

    LBMetroUI2.png

  3. Rename the Data Module unit in the Project Manager to DataModule.pas.
  4. Open the GridView.pas unit and go to File > Use Unit and select DataModule.pas. This operation is identical to manually adding DataModule.pas to the Uses clause of the GridView.pas unit.
  5. Similarly, add the DataModule.pas unit to the uses clause of the DetailView.pas unit.
  6. Open the DataModule.pas unit and add a TPrototypeBindSource component from the Tool Palette.
  7. Right-click the PrototypeBindSource1 component and select Add Field command.

    LBMetroUI3.png

  8. Multiselect some items to add multiple fields of sample data. Make sure you select BitmapNames and Bitmaps among other items.
  9. Return to GridView.pas and select the ListBox1 control (make sure not to select the individual MetroListBoxItem items).
  10. Go to the View menu and choose the LiveBindings Designer command to bring up the LiveBindings Designer. If you do not see the Data Module in the LiveBindings Designer, right-click in the designer and select the Refresh Designer command.

Step 2: Creating the LiveBindings

In the LiveBindings Designer:

  1. Bind DataModule1.PrototypeBindSource1.BitmapName1 to ListBox1.ItemText.

    LBMetroUI4.png

  2. Select your new LiveBinding by clicking it in the Designer.
  3. In the Object Inspector, go to ListItemStyle and select MetropolisUI from the drop-down menu.

    LBMetroUI5.png

    At this moment the items in the ListBox1 control are automatically populated with data through LiveBindings.
  4. Bind DataModule1.PrototypeBindSource1.ColorsName1 to ListBox1.Item.SubTitle DataModule1.PrototypeBindSource1.Bitmap1 to ListBox1.Item.Icon.

    LBMetroUI6.png

    The items in the ListBox1 update once again.
  5. Add new fields in the TPrototypeDataSource1 component from the DataModule.pas unit and repeat the four steps above for the other list boxes (ListBox2 and ListBox3).

Save your project at this point and continue with the following steps:

  1. Open the DetailView.pas unit and bind DataModule1.PrototypeBindSource1.Bitmap1 to Illustration1.Bitmap.

    LBMetroUI7.png

  2. Bind DataModule1.PrototypeBindSource1.ColorsName1 to Item.SubTitle.Text, DataModule1.PrototypeBindSource1.BitmapName1 to ItemTitle.Text.

    LBMetroUI8.png

Save your files once again. Return to the GridView.pas unit and select the ListBox1 control. Go to the Object Inspector, and set up an OnChange event with the following code:

begin
  if ListBox1.ItemIndex <> -1 then
  begin
    DataModule1.PrototypeBindSource1.ItemIndex := ListBox1.ItemIndex;
    Application.GetDeviceForm('DetailView').Show;
  end;
end;

Repeat this procedure for the other two list boxes (ListBox2 and ListBox3).

Return to the DetailView.pas unit and:

  1. Add two buttons on the form. Place them at your convenience.

    LBMetroUI9.png

  2. From the Tool Palette add a TActionList component to the form.
  3. For Button1, go to the Object Inspector and search the Action property. From the drop-down menu select New Standard Action > LiveBindings and choose TFMXBindNavigatorPrior.

    LBMetroUI10.png

    Now expand the action in the Object Inspector and double-click the DataSource property.

    LBMetroUI11.png

    This automatically sets the DataModule1.PrototypeBindSource1 component.
  4. For Button2, go to the Object Inspector and search the Action property. From the drop-down menu select New Standard Action > LiveBindings and choose TFMXBindNavigatorNext. Now expand the action in the Object Inspector and double-click the DataSource property. This automatically sets the DataModule1.PrototypeBindSource1 component.
  5. For each of the two buttons, now clear the button action's Text property and the button's Text property.
  6. For Button1, set the StyleLookup property to flipviewleftbutton, while for Button2, set the same property to flipviewrightbutton. The buttons should change appearance.

    LBMetroUI12.png

The Results

Run the Application by pressing F9 or using the Run > Run menu command.

Select individual items and observe how LiveBindings automatically provides data to the items in the Grid/Detail views.

LBMetroUI13.png

LBMetroUI14.png

See Also

Personal tools
Previous Versions