Mobile-Tutorial: Füllen von ListView-Steuerelementen über LiveBindings (iOS und Android)

Nach oben zu Mobile-Tutorials: Mobile Anwendungsentwicklung (iOS und Android)

Nach oben zu Tutorials zu Datenbanken und LiveBindings

In diesem Tutorial wird gezeigt, wie mit dem LiveBindings-Designer eine FireMonkey-ListView-Komponente mit Beispieldaten aus einer TPrototypeBindSource-Komponente gefüllt wird. Das Tutorial zeigt, wie die Beispieldaten hinzugefügt und die Bindungen zwischen der Prototypquelle und der Listenansicht zum Füllen der Liste erstellt werden.

Wie bei allen LiveBindings ist für dieses Tutorial keinerlei Code erforderlich. Um eine einsetzbare Anwendung zu erstellen, müssen Sie aber keine Ereignisbehandlungsroutinen oder anderen Code hinzufügen.

Schritt 1: Erstellen des Projekts

1. Erstellen Sie ein neues Projekt. Wählen Sie für dieses Beispiel Geräteübergreifende Anwendung. Wählen Sie im Experten Leere Anwendung.

   
   

   

   
   

2. Suchen Sie in der Tool-Palette die Komponente TListView, und ziehen Sie sie auf das Formular.
3. Fügen Sie dem Formular eine TPrototypeBindSource-Komponente hinzu.
4. Wählen Sie im Formular die ListView1-Komponente aus, und setzen Sie dann im Objektinspektor die Eigenschaft Align auf Client und die Eigenschaft SearchVisible auf True.

   Bevor Sie den Stil oder die Ansicht im Formular-Designer festlegen, sollte das Formular wie der folgende Bildschirm aussehen:

   
   

   

   
   

   Hinweis: Weitere Informationen zur Auswahl des Stils und der Ansichten finden Sie unter Stilauswahl und Verwenden von FireMonkey-Ansichten.

Schritt 2: Hinzufügen von Feldern

1. Klicken Sie mit der rechten Maustaste auf die Komponente TPrototypeBindSource, und wählen Sie dann Feld hinzufügen....

   
   

   

   
   

2. Wählen Sie im Dialogfeld Feld hinzufügen die Eigenschaft ColorsNames aus, und klicken Sie auf OK.

   
   

   

Schritt 3: Erstellen von LiveBindings

1. Öffnen Sie den LiveBindings-Designer (wählen Sie Ansicht > Tool-Fenster > LiveBindings-Designer), und ziehen Sie die Eigenschaft ColorsName1 von TPrototypeBindSource auf die Eigenschaft Item.Text von ListView, um diese Eigenschaften zu binden.

   Die ListView-Komponente wird automatisch mit den Farbnamen aus der Prototypdaten-Komponente gefüllt:

   
   

   

   
   

2. Setzen Sie TListView.ItemAppearance wie folgt auf ImageListItemRightButton:
   • Setzen Sie den Fokus auf die ListView-Komponente, indem Sie sie auswählen (in der Strukturansicht, im Formular-Designer oder im Objektinspektor).
   • Suchen Sie dann im Objektinspektor den Knoten ItemAppearance, erweitern Sie ihn, und ändern Sie die Eigenschaft ItemAppearance in ImageListItemRightButton:

   

   
   

3. Optional können Sie eine Färbung für die Text-Schaltflächen von TListView zuweisen. Führen Sie Folgendes aus:
   • Setzen Sie den Fokus auf die ListView-Komponente, indem Sie sie auswählen (in der Strukturansicht, im Formular-Designer oder im Objektinspektor).
   • Erweitern Sie in der Strukturansicht unter ItemAppearance den Eintrag Item, und wählen Sie dann TextButton aus.
   • Suchen Sie im Objektinspektor die Eigenschaft TintColor, und setzen Sie deren Wert auf den gewünschten Wert, wie z. B. Seagreen.

     Die folgende Abbildung zeigt die Strukturansicht und den Objektinspektor. In der Strukturansicht wird der Eintrag Item erweitert und TextButton markiert, und im Objektinspektor wird TintColor auf Seagreen gesetzt:

   
   

   

   
   

Hinweis: Zur Entwurfszeit wird die Farbe, die Sie zugewiesen haben, möglicherweise nicht angezeigt. Wählen Sie in der Stilauswahl die Master-Ansicht aus, um den aktuellen Stil Ihres Formular-Designers entweder in Android oder iOS zu ändern, damit Ihre Änderungen angezeigt werden. Einzelheiten finden Sie unter Formular-Designer.

Nun ist die Listenansichts-Komponente so konfiguriert, dass sie links vom Eintragstext ein Bild und rechts davon eine Schaltfläche anzeigt.
Im nächsten Schritt werden das Bild und die Schaltfläche mit Beispieldaten gefüllt.

Schritt 4: Hinzufügen weiterer Felder (Bitmaps, Currency)

Damit in der Listenansicht-Komponente für jeden Listeneintrag ein Bild und Text auf der Schaltfläche angezeigt werden, müssen Sie zwei weitere Felder hinzufügen.

1. Klicken Sie mit der rechten Maustaste auf die Komponente TPrototypeBindSource, und wählen Sie Feld hinzufügen....
2. Wählen Sie im Dialogfeld Feld hinzufügen mit STRG+Klicken die Felddaten Bitmaps und Currency aus. Klicken Sie dann auf OK.
3. Wechseln Sie zum LiveBindings-Designer, und führen Sie Folgendes aus:
   1. Verbinden Sie die Eigenschaft Bitmap1 der Prototypquellendaten mit der Eigenschaft Item.Bitmap der Listenansicht-Komponente.

      Mit diesem Schritt wird eine Schaltfläche hinzugefügt, die die Farbe und die Nummer jedes Eintrags der Listenansicht darstellt, z. B. Blue 19.

   2. Verbinden Sie die Eigenschaft CurrencyField1 der Prototypquellendaten mit der Eigenschaft Item.ButtonText der Listenansicht-Komponente.

   Durch diesen Schritt wird der Wert des Währungsfeldes auf der Schaltfläche angezeigt, die sich rechts neben jedem Listeneintrag befindet.

   
   

   

   
   

In der Listenansicht werden nun dem jeweiligen Eintrag zugeordnete Farbdaten und auf den Schaltflächen zugehörige Beispielwährungsdaten angezeigt.

Schritt 5: Hinzufügen einer OnButtonClick-Ereignisbehandlungsroutine

Um eine nützliche Anwendung zu erstellen, können Sie die OnButtonClick-Ereignisbehandlungsroutine hinzufügen, die beim Klicken auf einen ListView-Eintrag ausgelöst wird.

So fügen Sie die OnButtonClick-Ereignisbehandlungsroutine hinzu:

1. Wählen Sie im geräteübergreifenden Anwendungsformular die Komponente ListView1 aus.
2. Öffnen Sie im Objektinspektor die Registerkarte Ereignisse, und doppelklicken Sie auf OnButtonClick.
3. Implementieren Sie im Quelltext-Editor eine geeignete OnButtonClick-Ereignisbehandlungsroutine.

Der folgende Beispielcode fügt die Ereignisbehandlungsroutine hinzu, die beim Klicken auf einen ListView-Eintrag ein Meldungsdialogfeld anzeigt:

Delphi:

procedure TForm2.OnButtonClick(const Sender: TObject; const AItem: TListItem; const AObject: TListItemSimpleControl);
begin
  const LItem = AItem as TListViewItem;
  ShowMessage(LItem.Text + ' ' + LItem.ButtonText + ' is clicked.');
end;

C++Builder:

void __fastcall TForm2::OnButtonClick(TObject * const Sender,
	TListItem * const AItem, TListItemSimpleControl * const AObject)
{
	ShowMessage(dynamic_cast<TListViewItem*>(AItem)->Text +
		L" "+dynamic_cast<TListViewItem*>(AItem)->ButtonText + L" is clicked.");
}

Die Ergebnisse

Damit Sie die mobile App so anzeigen können, wie sie auf einem mobilen Gerät dargestellt würde, müssen Sie Ihr System, wie im entsprechenden Tutorial zur Konfiguration konfigurieren und im Formular-Designer die Ansicht auf ein mobiles Zielgerät (wie iPhone 4 Zoll) einstellen. Anschließend müssen Sie die erforderlichen Schritte zum Bereitstellen Ihrer App auf der mobilen Zielplattform durchführen.

Sie können die Anwendung dann auf Ihrem mobilen Gerät ausführen, indem Sie F9 drücken oder Start > Start wählen.

iOS	Android
iPad	Galaxy S4

Wenn Sie auf den Eintrag Blue klicken, wird das folgende Meldungsdialogfeld angezeigt:

Siehe auch

• Mobile-Tutorial: Verwenden von Registerkarten-Komponenten zur Anzeige von Seiten (iOS und Android)
• Mobile-Tutorial: Füllen von ListBox-Steuerelementen über LiveBindings in mobilen Anwendungen (iOS und Android)
• Mobile-Tutorial: Verwenden von Layouts zur Ausrichtung unterschiedlicher Formulargrößen (iOS und Android)
• Anpassen der Darstellung von FireMonkey-Listenansichten
• FMX.ListView.TListView
• TPrototypeBindSource
• LiveBindings in RAD Studio
• LiveBindings-Designer
• Verwenden von FireMonkey-Ansichten
• Verwenden von mit Stilen versehenen und farbigen Schaltflächen auf Zielplattformen
• Tutorials von RAD Studio