Tutorial: Verwenden von LiveBindings und Datenmodulen mit der Metropolis-UI
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.
Inhaltsverzeichnis
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.
- 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.
- Wählen Sie auf der Seite Delphi-Projekte | Delphi-Dateien den Eintrag Datenmodul aus.
- Benennen Sie die Datenmodul-Unit in der Projektverwaltung in DataModule.pas um.
- Ö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.
- Fügen Sie auf dieselbe Weise der uses-Klausel der Unit DetailView.pas die Unit DataModule.pas hinzu.
- Öffnen Sie die Unit DataModule.pas, und fügen Sie eine TPrototypeBindSource-Komponente aus der Tool-Palette hinzu.
- Klicken Sie mit der rechten Maustaste auf die Komponente PrototypeBindSource1, und wählen Sie den Befehl Feld hinzufügen.
- 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.
- 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).
- 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:
- Binden Sie
DataModule1.PrototypeBindSource1.BitmapName1
anListBox1.ItemText
. - Wählen Sie die neue LiveBinding aus, indem Sie im Designer darauf klicken.
- Wählen Sie im Objektinspektor für die Eigenschaft
ListItemStyle
den Eintrag MetropolisUI aus dem Dropdown-Menü aus.
Dadurch werden die Einträge im ListBox1-Steuerelement sofort automatisch über LiveBindings mit Daten gefüllt. - Binden Sie
DataModule1.PrototypeBindSource1.ColorsName1
anListBox1.Item.SubTitle
undDataModule1.PrototypeBindSource1.Bitmap1
anListBox1.Item.Icon
.
Die Einträge in ListBox1 werden erneut aktualisiert. - 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:
- Öffnen Sie die Unit DetailView.pas, und binden Sie
DataModule1.PrototypeBindSource1.Bitmap1
anIllustration1.Bitmap
. - Binden Sie
DataModule1.PrototypeBindSource1.ColorsName1
anItem.SubTitle.Text
undDataModule1.PrototypeBindSource1.BitmapName1
anItemTitle.Text
.
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:
- Fügen Sie dem Formular zwei neue Schaltflächen hinzu. Platzieren Sie sie an einer passenden Position.
- Fügen Sie dem Formular aus der Tool-Palette eine TActionList-Komponente hinzu.
- Suchen Sie im Objektinspektor die Eigenschaft
Action
von Button1. Wählen Sie im Dropdown-Menü Neue Standardaktion > LiveBindings und dann TFMXBindNavigatorPrior aus.
Erweitern Sie im Objektinspektor die Aktion, und doppelklicken Sie auf die EigenschaftDataSource
.
Dadurch wird die Komponente DataModule1.PrototypeBindSource1 automatisch festgelegt. - 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 EigenschaftDataSource
. Dadurch wird die Komponente DataModule1.PrototypeBindSource1 automatisch festgelegt. - Leeren Sie bei beiden Schaltflächen die Eigenschaft
Text
der Schaltflächenaktion und die EigenschaftText
der Schaltfläche. - 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.
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.