Tutorial: Verwenden von LiveBindings und Datenmodulen mit der Metropolis-UI

Aus RAD Studio
Wechseln zu: Navigation, Suche

Nach oben zu Tutorials zu Datenbanken und LiveBindings


Dieses Tutorial führt Sie durch die Schritte zum Verbinden von Daten mit der FireMonkey-Rastervorlage für die Metropolis-UI. In diesem Tutorial werden die GridView-Listenfelder mit Daten gefüllt, die mit der DetailView verknüpft sind, und Navigationsschaltflächen hinzugefügt, über die mittels Aktionen durch die Daten im DetailView-Formular navigiert wird.

Schritt 1: Erstellen des Projekts

Erstellen Sie ein neues Projekt. Wählen Sie Datei > Neu > Weitere > Delphi-Projekte > FireMonkey-Anwendung für Metropolis-UI, und wählen Sie im geöffneten Experten Metropolis-UI-Anwendung mit Raster aus.

  1. Klicken Sie in der Projektverwaltung mit der rechten Maustaste auf den Projektnamen (z. B. Project1.exe), und wählen Sie Neue hinzufügen > Weitere aus.

    LBMetroUI1.png

  2. Wählen Sie auf der Seite Delphi-Projekte | Delphi-Dateien den Eintrag Datenmodul aus.

    LBMetroUI2.png

  3. Benennen Sie die Datenmodul-Unit in der Projektverwaltung in DataModule.pas um.
  4. Öffnen Sie die Unit GridView.pas, wählen Sie Datei > Unit verwenden und dann DataModule.pas. Dieser Vorgang entspricht dem manuellen Hinzufügen von DataModule.pas zu der uses-Klausel der Unit GridView.pas.
  5. Fügen Sie auf dieselbe Weise der uses-Klausel der Unit DetailView.pas die Unit DataModule.pas hinzu.
  6. Öffnen Sie die Unit DataModule.pas, und fügen Sie eine TPrototypeBindSource-Komponente aus der Tool-Palette hinzu.
  7. Klicken Sie mit der rechten Maustaste auf die Komponente PrototypeBindSource1, und wählen Sie den Befehl Feld hinzufügen.

    LBMetroUI3.png

  8. Wählen Sie einige Einträge aus, um mehrere Felder mit Beispieldaten hinzuzufügen. Wählen Sie auch die Einträge BitmapNames und Bitmaps aus.
  9. Kehren Sie zu GridView.pas zurück, und wählen Sie das Steuerelement ListBox1 aus (achten Sie darauf, nicht einzelne MetroListBoxItem-Einträge auszuwählen).
  10. Wählen Sie im Menü Ansicht den Befehl LiveBindings-Designer, um den LiveBindings-Designer zu öffnen. Wenn das Datenmodul nicht im LiveBindings-Designer angezeigt wird, klicken Sie mit der rechten Maustaste in den Designer, und wählen Sie den Befehl Designer aktualisieren.

Schritt 2: Erstellen der LiveBindings

Führen Sie im LiveBindings-Designer Folgendes aus:

  1. Binden Sie DataModule1.PrototypeBindSource1.BitmapName1 an ListBox1.ItemText.

    LBMetroUI4.png

  2. Wählen Sie die neue LiveBinding aus, indem Sie im Designer darauf klicken.
  3. Wählen Sie im Objektinspektor für die Eigenschaft ListItemStyle den Eintrag MetropolisUI aus dem Dropdown-Menü aus.

    LBMetroUI5.png

    Dadurch werden die Einträge im ListBox1-Steuerelement sofort automatisch über LiveBindings mit Daten gefüllt.
  4. Binden Sie DataModule1.PrototypeBindSource1.ColorsName1 an ListBox1.Item.SubTitle und DataModule1.PrototypeBindSource1.Bitmap1 an ListBox1.Item.Icon.

    LBMetroUI6.png

    Die Einträge in ListBox1 werden erneut aktualisiert.
  5. Fügen Sie in die Komponente TPrototypeDataSource1 neue Felder aus der Unit DataModule.pas ein, und wiederholen Sie die vier vorherigen Schritte für die anderen Listenfelder (ListBox2 und ListBox3).

Speichern Sie Ihr Projekt jetzt, und fahren Sie mit den folgenden Schritten fort:

  1. Öffnen Sie die Unit DetailView.pas, und binden Sie DataModule1.PrototypeBindSource1.Bitmap1 an Illustration1.Bitmap.

    LBMetroUI7.png

  2. Binden Sie DataModule1.PrototypeBindSource1.ColorsName1 an Item.SubTitle.Text und DataModule1.PrototypeBindSource1.BitmapName1 an ItemTitle.Text.

    LBMetroUI8.png

Speichern Sie Ihre Dateien erneut. Wählen Sie in der Unit GridView.pas das Steuerelement ListBox1 aus. Richten Sie im Objektinspektor ein OnChange-Ereignis mit dem folgenden Code ein:

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

Wiederholen Sie diesen Vorgang für die anderen beiden Listenfelder (ListBox2 und ListBox3).

Führen Sie in der Unit DetailView.pas Folgendes aus:

  1. Fügen Sie dem Formular zwei neue Schaltflächen hinzu. Platzieren Sie sie an einer passenden Position.

    LBMetroUI9.png

  2. Fügen Sie dem Formular aus der Tool-Palette eine TActionList-Komponente hinzu.
  3. Suchen Sie im Objektinspektor die Eigenschaft Action von Button1. Wählen Sie im Dropdown-Menü Neue Standardaktion > LiveBindings und dann TFMXBindNavigatorPrior aus.

    LBMetroUI10.png

    Erweitern Sie im Objektinspektor die Aktion, und doppelklicken Sie auf die Eigenschaft DataSource.

    LBMetroUI11.png

    Dadurch wird die Komponente DataModule1.PrototypeBindSource1 automatisch festgelegt.
  4. Suchen Sie im Objektinspektor die Eigenschaft Action von Button2. Wählen Sie im Dropdown-Menü Neue Standardaktion > LiveBindings und dann TFMXBindNavigatorNext aus. Erweitern Sie im Objektinspektor die Aktion, und doppelklicken Sie auf die Eigenschaft DataSource. Dadurch wird die Komponente DataModule1.PrototypeBindSource1 automatisch festgelegt.
  5. Leeren Sie bei beiden Schaltflächen die Eigenschaft Text der Schaltflächenaktion und die Eigenschaft Text der Schaltfläche.
  6. Setzen Sie für Button1 die Eigenschaft StyleLookup auf flipviewleftbutton und für Button2 dieselbe Eigenschaft auf flipviewrightbutton. Die Darstellung der Schaltflächen sollte sich daraufhin ändern.

    LBMetroUI12.png

Die Ergebnisse

Führen Sie die Anwendung mit F9 oder mit dem Menübefehl Start > Start aus.

Wählen Sie einzelne Einträge aus, und beobachten Sie, wie über LiveBindings automatisch Daten für die Einträge in den Raster-/Detail-Ansichten bereitgestellt werden.

LBMetroUI13.png

LBMetroUI14.png

Siehe auch