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

Aus Appmethod Topics
Wechseln zu: Navigation, Suche

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.

    LBListView1.jpg

  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:

    LBListView2KH.png

    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....

    LBListView3.jpg

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

    AddFieldListView.png

Schritt 3: Erstellen von LiveBindings

  1. Öffnen Sie den LiveBindings-Designer (wählen Sie Ansicht > 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:

    LBListView4.jpg

  2. Setzen Sie TListView.ItemAppearance wie folgt auf ImageListItemRightButton:

  3. Optional können Sie eine Färbung für die Text-Schaltflächen von TListView zuweisen. Führen Sie Folgendes aus:

    LBListView6.png

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.

    LBListView6.jpg


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:

Object Pascal:

procedure TForm1.ListView1ButtonClick(const Sender: TObject;
  const AItem: TListViewItem; const AObject: TListItemSimpleControl);
begin
   ShowMessage(AItem.Text + ' ' +AItem.ButtonText + ' is clicked.');
end;

Appmethod C++:

void __fastcall TForm1::ListView1ButtonClick(TObject * const Sender,
	TListViewItem * const AItem, TListItemSimpleControl * const AObject) {
	ShowMessage(AItem->Text + " " + AItem->ButtonText + " 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

LBinding IOS.png
iPad

LBListView Android.png
Galaxy S4



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

LBindingMessagebox Android.png

Siehe auch