Mobile-Tutorial: Füllen von ListBox-Steuerelementen über LiveBindings in mobilen Anwendungen (iOS und Android)

Nach oben zu Mobile-Tutorials

Nach oben zu Tutorials zu Datenbanken und LiveBindings

In diesem Tutorial werden die Schritte zum Verbinden von Daten mit einem FireMonkey-ListBox-Steuerelement über LiveBindings auf mobilen Geräten beschrieben.

Schritt 1: Erstellen des Projekts

In diesem Projekt benötigen Sie ein Listenfeld, ein Rechteck und eine Bindungsquelle als Prototyp. Führen Sie zum Hinzufügen dieser Komponenten die folgenden Schritte aus:

1. Wählen Sie einen der folgenden Befehle aus:
   • Für Delphi: Datei > Neu > Geräteübergreifende Anwendung - Delphi
   • Für C++: Datei > Neu > Geräteübergreifende Anwendung - C++Builder
2. Wählen Sie in der Tool-Palette die Komponente TListBox aus, und ziehen Sie sie in den Formular-Designer.
3. Wählen Sie im Formular-Designer die Listenfeld-Komponente aus, und suchen Sie im Objektinspektor die Eigenschaft DefaultItemStyles.ItemStyle. Setzen Sie sie auf den Stil listboxitemrightdetail.
   
   
   
   
4. Heben Sie die Markierung der Listenfeld-Komponente auf, indem Sie im Formular-Designer auf einen leeren Bereich klicken.
5. Wählen Sie in der Tool-Palette die Komponente TRectangle aus, und ziehen Sie sie in den Formular-Designer.
6. Wählen Sie im Formular-Designer die Rechteck-Komponente aus, und setzen Sie im Objektinspektor die Eigenschaft Align auf Bottom.
7. Markieren Sie die Listenfeld-Komponente, und setzen Sie deren Eigenschaft Align auf Client.
8. Ziehen Sie eine TPrototypeBindSource-Komponente aus der Tool-Palette auf das Formular.

Das Formular sollte nun wie der folgende iOS-Bildschirm aussehen:

Sie müssen für dieses Tutorial der TPrototypeBindSource-Komponente Beispieldaten für Farben und Farbnamen hinzufügen, um das Listenfeld und das Rechteck zu verknüpfen.

1. Klicken Sie mit der rechten Maustaste auf die Komponente TPrototypeBindSource, und klicken Sie dann im Kontextmenü auf Feld hinzufügen.
2. Wählen Sie AlphaColors und ColorsNames in der Liste Felddaten aus, und deaktivieren Sie das Kontrollkästchen Werte mischen.
   Damit werden alphabetisch sortierte Beispieldaten (Alphafarbwerte und -namen) hinzugefügt.
   
   
   
   
3. Bestätigen Sie Ihre Auswahl durch Klicken auf die Schaltfläche OK. Die Beispieldaten können jetzt mit LiveBindings verwendet werden.

Schritt 2: Erstellen der LiveBindings

Öffnen Sie den LiveBindings-Designer. Das Diagramm ohne Verbindungen sollte wie in der folgenden Abbildung dargestellt aussehen:

1. Binden Sie ColorsName1 in PrototypeBindSource1 an Item.Text in ListBox1. (Klicken Sie auf ColorsName1, und ziehen Sie den Mauszeiger auf Item.Text.) Im Listenfeld werden jetzt alle Farbnamen aus der Prototyp-Bindungsquelle angezeigt.
2. Binden Sie ColorsName1 in PrototypeBindSource1 an ItemHeader.Text in ListBox1. Im Listenfeld werden jetzt zusätzlich zu allen Farbnamen aus der Prototyp-Bindungsquelle Kopfbereiche angezeigt.
3. Klicken Sie im LiveBindings-Designer auf die Bindung, die ColorsName1 mit ItemHeader.Text verknüpft.
4. Suchen Sie im Objektinspektor die Eigenschaft FillHeaderCustomFormat, und wählen Sie in der Dropdown-Liste den Bindungsausdruck SubString(%s, 0, 1) aus.

   Im Listenfeld werden nun alle Farbnamen in alphabetische Kategorien gruppiert:
   
   
   
   

5. Binden Sie AlphaColor1 in PrototypeBindSource1 an Item.LookupData in ListBox1. Damit stellen Sie sicher, dass bei Auswahl des Farbnamens auch der korrekte Aalphafarbwert übernommen wird.
6. Binden Sie AlphaColor1 in PrototypeBindSource1 an Item.Detail in ListBox1. Damit stellen Sie sicher, dass der Aalphafarbwert rechts neben dem Eintrag im Listenfeld angezeigt wird.
7. Klicken Sie im LiveBindings-Designer im Diagrammblock Rectangle1 auf die Ellipsen-Schaltfläche [...], und geben Sie im angezeigten Dialogfeld Fill.Color ein. Aktivieren Sie das Kontrollkästchen Fill.color, und klicken Sie dann auf OK:
   
   
   
   
8. Binden Sie Fill.Color in Rectangle1 an SelectedValue in ListBox1. Damit stellen Sie sicher, dass die Füllfarbe des Rechtecks entsprechend der Farbauswahl im Listenfeld geändert wird.

Hinweis: Beim Binden von Fill.Color an SelectedValue wird ein Bestätigungsdialogfeld angezeigt. Wählen Sie in diesem Dialogfeld Ja.

Nach Abschluss der obigen Schritte sollte das LiveBindings-Diagramm wie in der folgenden Abbildung dargestellt aussehen:

Ihre Anwendung kann jetzt auf einem mobilen Gerät ausgeführt werden.

Die Ergebnisse

Führen Sie die Anwendung durch Drücken von F9 oder Auswahl des Menübefehls Start > Start aus.

Wenn Sie einen Eintrag in dem Listenfeld auswählen, ändert sich die Farbe des Rechtecks entsprechend:

iOS (iPad)	Android (LG-E612)

Siehe auch

• LiveBindings in RAD Studio
• LiveBindings-Designer
• Verwenden von eigenen Format- und Analyseausdrücken in LiveBindings
• Mobile-Tutorial: Füllen von ListView-Steuerelementen über LiveBindings (iOS und Android)
• Mobile-Tutorial: Verwenden von Listenfeld-Komponenten zur Anzeige von Tabellenansichten (iOS und Android)
• Mobile-Tutorial: Verwenden von InterBase ToGo mit dbExpress (iOS und Android)