RAD Studio - Benutzerbeiträge [de]

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

2020-07-15T22:28:45Z

Alejandra.rivera: Included the Note macro to the content

{{Parent|Mobile-Tutorials: Mobile Anwendungsentwicklung (iOS und Android)}}
{{Parent|Tutorials zu Datenbanken und LiveBindings}}

In diesem Tutorial wird gezeigt, wie mit dem '''[[LiveBindings-Designer|LiveBindings-Designer]]''' eine '''[[lib_de:FMX.ListView.TListView|{{FM}}-ListView-Komponente]]''' mit Beispieldaten aus einer '''[[lib_de:Data.Bind.ObjectScope.TPrototypeBindSource|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==

# Erstellen Sie ein neues Projekt. Wählen Sie für dieses Beispiel [[Geräteübergreifende Anwendung|Geräteübergreifende Anwendung]]. Wählen Sie im Experten '''Leere Anwendung'''.
#: 
#:[[File:LBListView1.jpg|border|link=]]
#: 
# Suchen Sie in der [[Tool-Palette|Tool-Palette]] die Komponente '''[[lib_de:FMX.ListView.TListView|TListView]]''', und ziehen Sie sie auf das Formular.
# Fügen Sie dem Formular eine '''[[lib_de:Data.Bind.ObjectScope.TPrototypeBindSource|TPrototypeBindSource]]'''-Komponente hinzu.
# Wählen Sie im Formular die '''ListView1'''-Komponente aus, und setzen Sie dann im [[Objektinspektor|Objektinspektor]] die Eigenschaft '''[[lib_de:FMX.Controls.TControl.Align|Align]]''' auf <code>Client</code> und die Eigenschaft '''[[lib_de:FMX.ListView.TListViewBase.SearchVisible|SearchVisible]]''' auf <code>True</code>.
#:Bevor Sie den '''Stil''' oder die '''Ansicht''' im [[Formular-Designer|Formular-Designer]] festlegen, sollte das Formular wie der folgende Bildschirm aussehen:
#: 
#: [[File:TListView1.png|520px|border|link=]]
#: 
#:{{Note|Weitere Informationen zur Auswahl des '''Stils''' und der '''Ansichten''' finden Sie unter [[Formular-Designer#Stilauswahl|Stilauswahl]] und [[Verwenden von FireMonkey-Ansichten|Verwenden von FireMonkey-Ansichten]].}}

==Schritt 2: Hinzufügen von Feldern==

# Klicken Sie mit der rechten Maustaste auf die Komponente [[lib_de:Data.Bind.ObjectScope.TPrototypeBindSource|TPrototypeBindSource]], und wählen Sie dann '''Feld hinzufügen...'''.
#: 
#:[[File:AddField.png|border|link=]]
#: 
# Wählen Sie im Dialogfeld [[Feld hinzufügen (LiveBindings)|Feld hinzufügen]] die Eigenschaft '''ColorsNames''' aus, und klicken Sie auf '''OK'''.
#: 
#:[[File:AddFieldDialog.png|link=]]

==Schritt 3: Erstellen von LiveBindings==

# Öffnen Sie den [[LiveBindings-Designer|LiveBindings-Designer]] (wählen Sie '''Ansicht > Tool-Fenster > [[LiveBindings-Designer|LiveBindings-Designer]]'''), und ziehen Sie die Eigenschaft <code>ColorsName1</code> von TPrototypeBindSource auf die Eigenschaft <code>Item.Text</code> von ListView, um diese Eigenschaften zu binden.
#: Die ListView-Komponente wird automatisch mit den Farbnamen aus der Prototypdaten-Komponente gefüllt:
#: 
#:[[File:LiveBindings.png|border|link=]]
#: 
# Setzen Sie [[lib_de:FMX.ListView.TListView.ItemAppearance|TListView.ItemAppearance]] wie folgt auf '''ImageListItemRightButton''':
#* Setzen Sie den Fokus auf die ListView-Komponente, indem Sie sie auswählen (in der [[Strukturansicht|Strukturansicht]], im [[Formular-Designer|Formular-Designer]] oder im [[Objektinspektor|Objektinspektor]]).
#* Suchen Sie dann im [[Objektinspektor|Objektinspektor]] den Knoten '''ItemAppearance''', erweitern Sie ihn, und ändern Sie die Eigenschaft '''ItemAppearance''' in <code>ImageListItemRightButton</code>:
#:[[File:ItemAppearance.png|border|link=]]
#: 
# 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|Strukturansicht]], im [[Formular-Designer|Formular-Designer]] oder im [[Objektinspektor|Objektinspektor]]).
#* Erweitern Sie in der [[Strukturansicht|Strukturansicht]] unter '''ItemAppearance''' den Eintrag '''Item''', und wählen Sie dann '''[[lib_de:FMX.ListView.Appearances.TItemAppearanceObjects.TextButton|TextButton]]''' aus.
#* Suchen Sie im [[Objektinspektor|Objektinspektor]] die Eigenschaft '''[[lib_de:FMX.ListView.Types.TListItemTextButton.TintColor|TintColor]]''', und setzen Sie deren Wert auf den gewünschten Wert, wie z. B. <code>Seagreen</code>.
#*:Die folgende Abbildung zeigt die [[Strukturansicht|Strukturansicht]] und den [[Objektinspektor|Objektinspektor]]. In der [[Strukturansicht|Strukturansicht]] wird der Eintrag '''Item''' erweitert und '''TextButton''' markiert, und im [[Objektinspektor|Objektinspektor]] wird [[lib_de:FMX.ListView.Types.TListItemTextButton.TintColor|TintColor]] auf <code>Seagreen</code> gesetzt:
#: 
#:[[File:TintColor.png|border|link=]]
#: 

::{{Note|Zur Entwurfszeit wird die Farbe, die Sie zugewiesen haben, möglicherweise nicht angezeigt. Wählen Sie in der [[Formular-Designer#Stilauswahl|Stilauswahl]] die '''Master'''-Ansicht aus, um den aktuellen Stil Ihres [[Formular-Designer|Formular-Designers]] entweder in <code>Android</code> oder <code>iOS</code> zu ändern, damit Ihre Änderungen angezeigt werden. Einzelheiten finden Sie unter [[Formular-Designer|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.

# Klicken Sie mit der rechten Maustaste auf die Komponente [[lib_de:Data.Bind.ObjectScope.TPrototypeBindSource|TPrototypeBindSource]], und wählen Sie '''Feld hinzufügen...'''.
# Wählen Sie im Dialogfeld [[Feld hinzufügen (LiveBindings)|Feld hinzufügen]] mit <code>STRG+Klicken</code> die Felddaten '''Bitmaps''' und '''Currency''' aus. Klicken Sie dann auf '''OK'''.
# Wechseln Sie zum [[LiveBindings-Designer|LiveBindings-Designer]], und führen Sie Folgendes aus:
## Verbinden Sie die Eigenschaft <code>Bitmap1</code> der Prototypquellendaten mit der Eigenschaft <code>Item.Bitmap</code> 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.
## Verbinden Sie die Eigenschaft <code>CurrencyField1</code> der Prototypquellendaten mit der Eigenschaft <code>Item.ButtonText</code> der Listenansicht-Komponente.
#: Durch diesen Schritt wird der Wert des Währungsfeldes auf der Schaltfläche angezeigt, die sich rechts neben jedem Listeneintrag befindet.
#: 
#:[[File:LiveBindingDesigner.png|border|link=]]
#: 

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:'''

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

Der folgende Beispielcode fügt die Ereignisbehandlungsroutine hinzu, die beim Klicken auf einen ListView-Eintrag ein Meldungsdialogfeld anzeigt:
<l s="delphi" />

'''{{Delphi}}:'''
<source lang="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;
</source><l e="delphi" /><l s="cpp" />

'''{{CBuilder}}:'''
<source lang="cpp">
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.");
}
</source><l e="cpp" />

==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 '''[[Mobile-Tutorials: Mobile Anwendungsentwicklung (iOS und Android)#Konfiguration|Konfiguration]]''' konfigurieren und im Formular-Designer die '''Ansicht''' auf ein mobiles Zielgerät (wie '''iPhone 4 Zoll''') einstellen. Anschließend müssen Sie '''[[Schritte bei der Entwicklung von geräteübergreifenden Anwendungen|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'''
|-
| style="vertical-align: top;" |
[[File:LBinding IOS.png|400px|link=]] '''iPad'''
|
[[File:LBListView Android.png|300px|link=]] '''Galaxy S4'''
|}

 
Wenn Sie auf den Eintrag '''Blue''' klicken, wird das folgende Meldungsdialogfeld angezeigt: [[File:LBindingMessagebox Android.png|400px|link=]]

==Siehe auch==

*[[Mobile-Tutorial: Verwenden von Registerkarten-Komponenten zur Anzeige von Seiten (iOS und Android)|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: 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)|Mobile-Tutorial: Verwenden von Layouts zur Ausrichtung unterschiedlicher Formulargrößen (iOS und Android)]]
* [[Anpassen der Darstellung von FireMonkey-Listenansichten|Anpassen der Darstellung von FireMonkey-Listenansichten]]
*[[lib_de:FMX.ListView.TListView|FMX.ListView.TListView]]
*[[lib_de:Data.Bind.ObjectScope.TPrototypeBindSource|TPrototypeBindSource]]
*[[LiveBindings in RAD Studio|LiveBindings in RAD Studio]]
*[[LiveBindings-Designer|LiveBindings-Designer]]
* [[Verwenden von FireMonkey-Ansichten|Verwenden von FireMonkey-Ansichten]]
* [[Verwenden von mit Stilen versehenen und farbigen Schaltflächen auf Zielplattformen|Verwenden von mit Stilen versehenen und farbigen Schaltflächen auf Zielplattformen]]
*[[Tutorials|Tutorials von {{Product}}]]

{{DEFAULTSORT:Mobile-Tutorial: Fullen von ListView-Steuerelementen uber LiveBindings (iOS und Android)}}
[[Category:Delphi]]
[[Category:C++]]
[[Category:XE4]]
[[Category:FMX]]
[[Category:LiveBindings]]
[[Category:AMMigrate]]

[[en:Mobile Tutorial: Using LiveBindings to Populate a ListView (iOS and Android)]]
[[fr:Tutoriel mobile : Utilisation de LiveBindings pour remplir une vue liste (iOS et Android)]]
[[ja:モバイルチュートリアル：LiveBinding を使用してリストビューの内容を設定する（iOS および Android）]]

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

2020-07-15T21:42:53Z

Alejandra.rivera: RS-97799

{{Parent|Mobile-Tutorials: Mobile Anwendungsentwicklung (iOS und Android)}}
{{Parent|Tutorials zu Datenbanken und LiveBindings}}

In diesem Tutorial wird gezeigt, wie mit dem '''[[LiveBindings-Designer|LiveBindings-Designer]]''' eine '''[[lib_de:FMX.ListView.TListView|{{FM}}-ListView-Komponente]]''' mit Beispieldaten aus einer '''[[lib_de:Data.Bind.ObjectScope.TPrototypeBindSource|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==

# Erstellen Sie ein neues Projekt. Wählen Sie für dieses Beispiel [[Geräteübergreifende Anwendung|Geräteübergreifende Anwendung]]. Wählen Sie im Experten '''Leere Anwendung'''.
#: 
#:[[File:LBListView1.jpg|border|link=]]
#: 
# Suchen Sie in der [[Tool-Palette|Tool-Palette]] die Komponente '''[[lib_de:FMX.ListView.TListView|TListView]]''', und ziehen Sie sie auf das Formular.
# Fügen Sie dem Formular eine '''[[lib_de:Data.Bind.ObjectScope.TPrototypeBindSource|TPrototypeBindSource]]'''-Komponente hinzu.
# Wählen Sie im Formular die '''ListView1'''-Komponente aus, und setzen Sie dann im [[Objektinspektor|Objektinspektor]] die Eigenschaft '''[[lib_de:FMX.Controls.TControl.Align|Align]]''' auf <code>Client</code> und die Eigenschaft '''[[lib_de:FMX.ListView.TListViewBase.SearchVisible|SearchVisible]]''' auf <code>True</code>.
#:Bevor Sie den '''Stil''' oder die '''Ansicht''' im [[Formular-Designer|Formular-Designer]] festlegen, sollte das Formular wie der folgende Bildschirm aussehen:
#: 
#: [[File:TListView1.png|520px|border|link=]]
#: 
#:'''Hinweis:''' Weitere Informationen zur Auswahl des '''Stils''' und der '''Ansichten''' finden Sie unter [[Formular-Designer#Stilauswahl|Stilauswahl]] und [[Verwenden von FireMonkey-Ansichten|Verwenden von FireMonkey-Ansichten]].

==Schritt 2: Hinzufügen von Feldern==

# Klicken Sie mit der rechten Maustaste auf die Komponente [[lib_de:Data.Bind.ObjectScope.TPrototypeBindSource|TPrototypeBindSource]], und wählen Sie dann '''Feld hinzufügen...'''.
#: 
#:[[File:AddField.png|border|link=]]
#: 
# Wählen Sie im Dialogfeld [[Feld hinzufügen (LiveBindings)|Feld hinzufügen]] die Eigenschaft '''ColorsNames''' aus, und klicken Sie auf '''OK'''.
#: 
#:[[File:AddFieldDialog.png|link=]]

==Schritt 3: Erstellen von LiveBindings==

# Öffnen Sie den [[LiveBindings-Designer|LiveBindings-Designer]] (wählen Sie '''Ansicht > Tool-Fenster > [[LiveBindings-Designer|LiveBindings-Designer]]'''), und ziehen Sie die Eigenschaft <code>ColorsName1</code> von TPrototypeBindSource auf die Eigenschaft <code>Item.Text</code> von ListView, um diese Eigenschaften zu binden.
#: Die ListView-Komponente wird automatisch mit den Farbnamen aus der Prototypdaten-Komponente gefüllt:
#: 
#:[[File:LiveBindings.png|border|link=]]
#: 
# Setzen Sie [[lib_de:FMX.ListView.TListView.ItemAppearance|TListView.ItemAppearance]] wie folgt auf '''ImageListItemRightButton''':
#* Setzen Sie den Fokus auf die ListView-Komponente, indem Sie sie auswählen (in der [[Strukturansicht|Strukturansicht]], im [[Formular-Designer|Formular-Designer]] oder im [[Objektinspektor|Objektinspektor]]).
#* Suchen Sie dann im [[Objektinspektor|Objektinspektor]] den Knoten '''ItemAppearance''', erweitern Sie ihn, und ändern Sie die Eigenschaft '''ItemAppearance''' in <code>ImageListItemRightButton</code>:
#:[[File:ItemAppearance.png|border|link=]]
#: 
# 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|Strukturansicht]], im [[Formular-Designer|Formular-Designer]] oder im [[Objektinspektor|Objektinspektor]]).
#* Erweitern Sie in der [[Strukturansicht|Strukturansicht]] unter '''ItemAppearance''' den Eintrag '''Item''', und wählen Sie dann '''[[lib_de:FMX.ListView.Appearances.TItemAppearanceObjects.TextButton|TextButton]]''' aus.
#* Suchen Sie im [[Objektinspektor|Objektinspektor]] die Eigenschaft '''[[lib_de:FMX.ListView.Types.TListItemTextButton.TintColor|TintColor]]''', und setzen Sie deren Wert auf den gewünschten Wert, wie z. B. <code>Seagreen</code>.
#*:Die folgende Abbildung zeigt die [[Strukturansicht|Strukturansicht]] und den [[Objektinspektor|Objektinspektor]]. In der [[Strukturansicht|Strukturansicht]] wird der Eintrag '''Item''' erweitert und '''TextButton''' markiert, und im [[Objektinspektor|Objektinspektor]] wird [[lib_de:FMX.ListView.Types.TListItemTextButton.TintColor|TintColor]] auf <code>Seagreen</code> gesetzt:
#: 
#:[[File:TintColor.png|border|link=]]
#: 

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

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.

# Klicken Sie mit der rechten Maustaste auf die Komponente [[lib_de:Data.Bind.ObjectScope.TPrototypeBindSource|TPrototypeBindSource]], und wählen Sie '''Feld hinzufügen...'''.
# Wählen Sie im Dialogfeld [[Feld hinzufügen (LiveBindings)|Feld hinzufügen]] mit <code>STRG+Klicken</code> die Felddaten '''Bitmaps''' und '''Currency''' aus. Klicken Sie dann auf '''OK'''.
# Wechseln Sie zum [[LiveBindings-Designer|LiveBindings-Designer]], und führen Sie Folgendes aus:
## Verbinden Sie die Eigenschaft <code>Bitmap1</code> der Prototypquellendaten mit der Eigenschaft <code>Item.Bitmap</code> 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.
## Verbinden Sie die Eigenschaft <code>CurrencyField1</code> der Prototypquellendaten mit der Eigenschaft <code>Item.ButtonText</code> der Listenansicht-Komponente.
#: Durch diesen Schritt wird der Wert des Währungsfeldes auf der Schaltfläche angezeigt, die sich rechts neben jedem Listeneintrag befindet.
#: 
#:[[File:LiveBindingDesigner.png|border|link=]]
#: 

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:'''

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

Der folgende Beispielcode fügt die Ereignisbehandlungsroutine hinzu, die beim Klicken auf einen ListView-Eintrag ein Meldungsdialogfeld anzeigt:
<l s="delphi" />

'''{{Delphi}}:'''
<source lang="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;
</source><l e="delphi" /><l s="cpp" />

'''{{CBuilder}}:'''
<source lang="cpp">
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.");
}
</source><l e="cpp" />

==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 '''[[Mobile-Tutorials: Mobile Anwendungsentwicklung (iOS und Android)#Konfiguration|Konfiguration]]''' konfigurieren und im Formular-Designer die '''Ansicht''' auf ein mobiles Zielgerät (wie '''iPhone 4 Zoll''') einstellen. Anschließend müssen Sie '''[[Schritte bei der Entwicklung von geräteübergreifenden Anwendungen|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'''
|-
| style="vertical-align: top;" |
[[File:LBinding IOS.png|400px|link=]] '''iPad'''
|
[[File:LBListView Android.png|300px|link=]] '''Galaxy S4'''
|}

 
Wenn Sie auf den Eintrag '''Blue''' klicken, wird das folgende Meldungsdialogfeld angezeigt: [[File:LBindingMessagebox Android.png|400px|link=]]

==Siehe auch==

*[[Mobile-Tutorial: Verwenden von Registerkarten-Komponenten zur Anzeige von Seiten (iOS und Android)|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: 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)|Mobile-Tutorial: Verwenden von Layouts zur Ausrichtung unterschiedlicher Formulargrößen (iOS und Android)]]
* [[Anpassen der Darstellung von FireMonkey-Listenansichten|Anpassen der Darstellung von FireMonkey-Listenansichten]]
*[[lib_de:FMX.ListView.TListView|FMX.ListView.TListView]]
*[[lib_de:Data.Bind.ObjectScope.TPrototypeBindSource|TPrototypeBindSource]]
*[[LiveBindings in RAD Studio|LiveBindings in RAD Studio]]
*[[LiveBindings-Designer|LiveBindings-Designer]]
* [[Verwenden von FireMonkey-Ansichten|Verwenden von FireMonkey-Ansichten]]
* [[Verwenden von mit Stilen versehenen und farbigen Schaltflächen auf Zielplattformen|Verwenden von mit Stilen versehenen und farbigen Schaltflächen auf Zielplattformen]]
*[[Tutorials|Tutorials von {{Product}}]]

{{DEFAULTSORT:Mobile-Tutorial: Fullen von ListView-Steuerelementen uber LiveBindings (iOS und Android)}}
[[Category:Delphi]]
[[Category:C++]]
[[Category:XE4]]
[[Category:FMX]]
[[Category:LiveBindings]]
[[Category:AMMigrate]]

[[en:Mobile Tutorial: Using LiveBindings to Populate a ListView (iOS and Android)]]
[[fr:Tutoriel mobile : Utilisation de LiveBindings pour remplir une vue liste (iOS et Android)]]
[[ja:モバイルチュートリアル：LiveBinding を使用してリストビューの内容を設定する（iOS および Android）]]

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

2020-07-14T20:43:32Z

Alejandra.rivera: RS-70000

{{Parent|Mobile-Tutorials: Mobile Anwendungsentwicklung (iOS und Android)}}
{{Parent|Tutorials zu Datenbanken und LiveBindings}}

In diesem Tutorial wird gezeigt, wie mit dem '''[[LiveBindings-Designer|LiveBindings-Designer]]''' eine '''[[lib_de:FMX.ListView.TListView|{{FM}}-ListView-Komponente]]''' mit Beispieldaten aus einer '''[[lib_de:Data.Bind.ObjectScope.TPrototypeBindSource|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==

# Erstellen Sie ein neues Projekt. Wählen Sie für dieses Beispiel [[Geräteübergreifende Anwendung|Geräteübergreifende Anwendung]]. Wählen Sie im Experten '''Leere Anwendung'''.
#: 
#:[[File:LBListView1.jpg|link=]]
#: 
# Suchen Sie in der [[Tool-Palette|Tool-Palette]] die Komponente '''[[lib_de:FMX.ListView.TListView|TListView]]''', und ziehen Sie sie auf das Formular.
# Fügen Sie dem Formular eine '''[[lib_de:Data.Bind.ObjectScope.TPrototypeBindSource|TPrototypeBindSource]]'''-Komponente hinzu.
# Wählen Sie im Formular die '''ListView1'''-Komponente aus, und setzen Sie dann im [[Objektinspektor|Objektinspektor]] die Eigenschaft '''[[lib_de:FMX.Controls.TControl.Align|Align]]''' auf <code>Client</code> und die Eigenschaft '''[[lib_de:FMX.ListView.TListViewBase.SearchVisible|SearchVisible]]''' auf <code>True</code>.
#:Bevor Sie den '''Stil''' oder die '''Ansicht''' im [[Formular-Designer|Formular-Designer]] festlegen, sollte das Formular wie der folgende Bildschirm aussehen:
#: 
#: [[File:TListView1.png|520px|link=]]
#: 
#:'''Hinweis:''' Weitere Informationen zur Auswahl des '''Stils''' und der '''Ansichten''' finden Sie unter [[Formular-Designer#Stilauswahl|Stilauswahl]] und [[Verwenden von FireMonkey-Ansichten|Verwenden von FireMonkey-Ansichten]].

==Schritt 2: Hinzufügen von Feldern==

# Klicken Sie mit der rechten Maustaste auf die Komponente [[lib_de:Data.Bind.ObjectScope.TPrototypeBindSource|TPrototypeBindSource]], und wählen Sie dann '''Feld hinzufügen...'''.
#: 
#:[[File:AddField.png|link=]]
#: 
# Wählen Sie im Dialogfeld [[Feld hinzufügen (LiveBindings)|Feld hinzufügen]] die Eigenschaft '''ColorsNames''' aus, und klicken Sie auf '''OK'''.
#: 
#:[[File:AddFieldDialog.png|link=]]

==Schritt 3: Erstellen von LiveBindings==

# Öffnen Sie den [[LiveBindings-Designer|LiveBindings-Designer]] (wählen Sie '''Ansicht > Tool-Fenster > [[LiveBindings-Designer|LiveBindings-Designer]]'''), und ziehen Sie die Eigenschaft <code>ColorsName1</code> von TPrototypeBindSource auf die Eigenschaft <code>Item.Text</code> von ListView, um diese Eigenschaften zu binden.
#: Die ListView-Komponente wird automatisch mit den Farbnamen aus der Prototypdaten-Komponente gefüllt:
#: 
#:[[File:LiveBindings.png|link=]]
#: 
# Setzen Sie [[lib_de:FMX.ListView.TListView.ItemAppearance|TListView.ItemAppearance]] wie folgt auf '''ImageListItemRightButton''':
#* Setzen Sie den Fokus auf die ListView-Komponente, indem Sie sie auswählen (in der [[Strukturansicht|Strukturansicht]], im [[Formular-Designer|Formular-Designer]] oder im [[Objektinspektor|Objektinspektor]]).
#* Suchen Sie dann im [[Objektinspektor|Objektinspektor]] den Knoten '''ItemAppearance''', erweitern Sie ihn, und ändern Sie die Eigenschaft '''ItemAppearance''' in <code>ImageListItemRightButton</code>:
#:[[File:ItemAppearance.png|link=]]
#: 
# 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|Strukturansicht]], im [[Formular-Designer|Formular-Designer]] oder im [[Objektinspektor|Objektinspektor]]).
#* Erweitern Sie in der [[Strukturansicht|Strukturansicht]] unter '''ItemAppearance''' den Eintrag '''Item''', und wählen Sie dann '''[[lib_de:FMX.ListView.Appearances.TItemAppearanceObjects.TextButton|TextButton]]''' aus.
#* Suchen Sie im [[Objektinspektor|Objektinspektor]] die Eigenschaft '''[[lib_de:FMX.ListView.Types.TListItemTextButton.TintColor|TintColor]]''', und setzen Sie deren Wert auf den gewünschten Wert, wie z. B. <code>Seagreen</code>.
#*:Die folgende Abbildung zeigt die [[Strukturansicht|Strukturansicht]] und den [[Objektinspektor|Objektinspektor]]. In der [[Strukturansicht|Strukturansicht]] wird der Eintrag '''Item''' erweitert und '''TextButton''' markiert, und im [[Objektinspektor|Objektinspektor]] wird [[lib_de:FMX.ListView.Types.TListItemTextButton.TintColor|TintColor]] auf <code>Seagreen</code> gesetzt:
#: 
#:[[File:TintColor.png|link=]]
#: 

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

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.

# Klicken Sie mit der rechten Maustaste auf die Komponente [[lib_de:Data.Bind.ObjectScope.TPrototypeBindSource|TPrototypeBindSource]], und wählen Sie '''Feld hinzufügen...'''.
# Wählen Sie im Dialogfeld [[Feld hinzufügen (LiveBindings)|Feld hinzufügen]] mit <code>STRG+Klicken</code> die Felddaten '''Bitmaps''' und '''Currency''' aus. Klicken Sie dann auf '''OK'''.
# Wechseln Sie zum [[LiveBindings-Designer|LiveBindings-Designer]], und führen Sie Folgendes aus:
## Verbinden Sie die Eigenschaft <code>Bitmap1</code> der Prototypquellendaten mit der Eigenschaft <code>Item.Bitmap</code> 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.
## Verbinden Sie die Eigenschaft <code>CurrencyField1</code> der Prototypquellendaten mit der Eigenschaft <code>Item.ButtonText</code> der Listenansicht-Komponente.
#: Durch diesen Schritt wird der Wert des Währungsfeldes auf der Schaltfläche angezeigt, die sich rechts neben jedem Listeneintrag befindet.
#: 
#:[[File:LiveBindingDesigner.png|link=]]
#: 

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:'''

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

Der folgende Beispielcode fügt die Ereignisbehandlungsroutine hinzu, die beim Klicken auf einen ListView-Eintrag ein Meldungsdialogfeld anzeigt:
<l s="delphi" />

'''{{Delphi}}:'''
<source lang="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;
</source><l e="delphi" /><l s="cpp" />

'''{{CBuilder}}:'''
<source lang="cpp">
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.");
}
</source><l e="cpp" />

==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 '''[[Mobile-Tutorials: Mobile Anwendungsentwicklung (iOS und Android)#Konfiguration|Konfiguration]]''' konfigurieren und im Formular-Designer die '''Ansicht''' auf ein mobiles Zielgerät (wie '''iPhone 4 Zoll''') einstellen. Anschließend müssen Sie '''[[Schritte bei der Entwicklung von geräteübergreifenden Anwendungen|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'''
|-
| style="vertical-align: top;" |
[[File:LBinding IOS.png|400px|link=]] '''iPad'''
|
[[File:LBListView Android.png|300px|link=]] '''Galaxy S4'''
|}

 
Wenn Sie auf den Eintrag '''Blue''' klicken, wird das folgende Meldungsdialogfeld angezeigt: [[File:LBindingMessagebox Android.png|400px|link=]]

==Siehe auch==

*[[Mobile-Tutorial: Verwenden von Registerkarten-Komponenten zur Anzeige von Seiten (iOS und Android)|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: 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)|Mobile-Tutorial: Verwenden von Layouts zur Ausrichtung unterschiedlicher Formulargrößen (iOS und Android)]]
* [[Anpassen der Darstellung von FireMonkey-Listenansichten|Anpassen der Darstellung von FireMonkey-Listenansichten]]
*[[lib_de:FMX.ListView.TListView|FMX.ListView.TListView]]
*[[lib_de:Data.Bind.ObjectScope.TPrototypeBindSource|TPrototypeBindSource]]
*[[LiveBindings in RAD Studio|LiveBindings in RAD Studio]]
*[[LiveBindings-Designer|LiveBindings-Designer]]
* [[Verwenden von FireMonkey-Ansichten|Verwenden von FireMonkey-Ansichten]]
* [[Verwenden von mit Stilen versehenen und farbigen Schaltflächen auf Zielplattformen|Verwenden von mit Stilen versehenen und farbigen Schaltflächen auf Zielplattformen]]
*[[Tutorials|Tutorials von {{Product}}]]

{{DEFAULTSORT:Mobile-Tutorial: Fullen von ListView-Steuerelementen uber LiveBindings (iOS und Android)}}
[[Category:Delphi]]
[[Category:C++]]
[[Category:XE4]]
[[Category:FMX]]
[[Category:LiveBindings]]
[[Category:AMMigrate]]

[[en:Mobile Tutorial: Using LiveBindings to Populate a ListView (iOS and Android)]]
[[fr:Tutoriel mobile : Utilisation de LiveBindings pour remplir une vue liste (iOS et Android)]]
[[ja:モバイルチュートリアル：LiveBinding を使用してリストビューの内容を設定する（iOS および Android）]]

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

2020-07-14T20:22:59Z

Alejandra.rivera: RS-70000

{{Parent|Mobile-Tutorials: Mobile Anwendungsentwicklung (iOS und Android)}}
{{Parent|Tutorials zu Datenbanken und LiveBindings}}

In diesem Tutorial wird gezeigt, wie mit dem '''[[LiveBindings-Designer|LiveBindings-Designer]]''' eine '''[[lib_de:FMX.ListView.TListView|{{FM}}-ListView-Komponente]]''' mit Beispieldaten aus einer '''[[lib_de:Data.Bind.ObjectScope.TPrototypeBindSource|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==

# Erstellen Sie ein neues Projekt. Wählen Sie für dieses Beispiel [[Geräteübergreifende Anwendung|Geräteübergreifende Anwendung]]. Wählen Sie im Experten '''Leere Anwendung'''.
#: 
#:[[File:LBListView1.jpg|link=]]
#: 
# Suchen Sie in der [[Tool-Palette|Tool-Palette]] die Komponente '''[[lib_de:FMX.ListView.TListView|TListView]]''', und ziehen Sie sie auf das Formular.
# Fügen Sie dem Formular eine '''[[lib_de:Data.Bind.ObjectScope.TPrototypeBindSource|TPrototypeBindSource]]'''-Komponente hinzu.
# Wählen Sie im Formular die '''ListView1'''-Komponente aus, und setzen Sie dann im [[Objektinspektor|Objektinspektor]] die Eigenschaft '''[[lib_de:FMX.Controls.TControl.Align|Align]]''' auf <code>Client</code> und die Eigenschaft '''[[lib_de:FMX.ListView.TListViewBase.SearchVisible|SearchVisible]]''' auf <code>True</code>.
#:Bevor Sie den '''Stil''' oder die '''Ansicht''' im [[Formular-Designer|Formular-Designer]] festlegen, sollte das Formular wie der folgende Bildschirm aussehen:
#: 
#: [[File:TListView1.png|520px|link=]]
#: 
#:'''Hinweis:''' Weitere Informationen zur Auswahl des '''Stils''' und der '''Ansichten''' finden Sie unter [[Formular-Designer#Stilauswahl|Stilauswahl]] und [[Verwenden von FireMonkey-Ansichten|Verwenden von FireMonkey-Ansichten]].

==Schritt 2: Hinzufügen von Feldern==

# Klicken Sie mit der rechten Maustaste auf die Komponente [[lib_de:Data.Bind.ObjectScope.TPrototypeBindSource|TPrototypeBindSource]], und wählen Sie dann '''Feld hinzufügen...'''.
#: 
#:[[File:AddField.png|link=]]
#: 
# Wählen Sie im Dialogfeld [[Feld hinzufügen (LiveBindings)|Feld hinzufügen]] die Eigenschaft '''ColorsNames''' aus, und klicken Sie auf '''OK'''.
#: 
#:[[File:AddFieldDialog.png|link=]]

==Schritt 3: Erstellen von LiveBindings==

# Öffnen Sie den [[LiveBindings-Designer|LiveBindings-Designer]] (wählen Sie '''Ansicht > Tool-Fenster > [[LiveBindings-Designer|LiveBindings-Designer]]'''), und ziehen Sie die Eigenschaft <code>ColorsName1</code> von TPrototypeBindSource auf die Eigenschaft <code>Item.Text</code> von ListView, um diese Eigenschaften zu binden.
#: Die ListView-Komponente wird automatisch mit den Farbnamen aus der Prototypdaten-Komponente gefüllt:
#: 
#:[[File:LiveBindings.png|link=]]
#: 
# Setzen Sie [[lib_de:FMX.ListView.TListView.ItemAppearance|TListView.ItemAppearance]] wie folgt auf '''ImageListItemRightButton''':
#* Setzen Sie den Fokus auf die ListView-Komponente, indem Sie sie auswählen (in der [[Strukturansicht|Strukturansicht]], im [[Formular-Designer|Formular-Designer]] oder im [[Objektinspektor|Objektinspektor]]).
#* Suchen Sie dann im [[Objektinspektor|Objektinspektor]] den Knoten '''ItemAppearance''', erweitern Sie ihn, und ändern Sie die Eigenschaft '''ItemAppearance''' in <code>ImageListItemRightButton</code>:
#:[[File:ItemAppearance.png|link=]]
#: 
# 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|Strukturansicht]], im [[Formular-Designer|Formular-Designer]] oder im [[Objektinspektor|Objektinspektor]]).
#* Erweitern Sie in der [[Strukturansicht|Strukturansicht]] unter '''ItemAppearance''' den Eintrag '''Item''', und wählen Sie dann '''[[lib_de:FMX.ListView.Appearances.TItemAppearanceObjects.TextButton|TextButton]]''' aus.
#* Suchen Sie im [[Objektinspektor|Objektinspektor]] die Eigenschaft '''[[lib_de:FMX.ListView.Types.TListItemTextButton.TintColor|TintColor]]''', und setzen Sie deren Wert auf den gewünschten Wert, wie z. B. <code>Seagreen</code>.
#*:Die folgende Abbildung zeigt die [[Strukturansicht|Strukturansicht]] und den [[Objektinspektor|Objektinspektor]]. In der [[Strukturansicht|Strukturansicht]] wird der Eintrag '''Item''' erweitert und '''TextButton''' markiert, und im [[Objektinspektor|Objektinspektor]] wird [[lib_de:FMX.ListView.Types.TListItemTextButton.TintColor|TintColor]] auf <code>Seagreen</code> gesetzt:
#: 
#:[[File:TintColor.png|link=]]
#: 

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

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.

# Klicken Sie mit der rechten Maustaste auf die Komponente [[lib_de:Data.Bind.ObjectScope.TPrototypeBindSource|TPrototypeBindSource]], und wählen Sie '''Feld hinzufügen...'''.
# Wählen Sie im Dialogfeld [[Feld hinzufügen (LiveBindings)|Feld hinzufügen]] mit <code>STRG+Klicken</code> die Felddaten '''Bitmaps''' und '''Currency''' aus. Klicken Sie dann auf '''OK'''.
# Wechseln Sie zum [[LiveBindings-Designer|LiveBindings-Designer]], und führen Sie Folgendes aus:
## Verbinden Sie die Eigenschaft <code>Bitmap1</code> der Prototypquellendaten mit der Eigenschaft <code>Item.Bitmap</code> 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.
## Verbinden Sie die Eigenschaft <code>CurrencyField1</code> der Prototypquellendaten mit der Eigenschaft <code>Item.ButtonText</code> der Listenansicht-Komponente.
#: Durch diesen Schritt wird der Wert des Währungsfeldes auf der Schaltfläche angezeigt, die sich rechts neben jedem Listeneintrag befindet.
#: 
#:[[File:LiveBindingDesigner.png|link=]]
#: 

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:'''

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

Der folgende Beispielcode fügt die Ereignisbehandlungsroutine hinzu, die beim Klicken auf einen ListView-Eintrag ein Meldungsdialogfeld anzeigt:
<l s="delphi" />

'''{{Delphi}}:'''
<source lang="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;
</source><l e="delphi" /><l s="cpp" />

'''{{CBuilder}}:'''
<source lang="cpp">
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.");
}
</source><l e="cpp" />

==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 '''[[Mobile-Tutorials: Mobile Anwendungsentwicklung (iOS und Android)#Konfiguration|Konfiguration]]''' konfigurieren und im Formular-Designer die '''Ansicht''' auf ein mobiles Zielgerät (wie '''iPhone 4 Zoll''') einstellen. Anschließend müssen Sie '''[[Schritte bei der Entwicklung von geräteübergreifenden Anwendungen|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'''
|-
| style="vertical-align: top;" |
[[File:LBinding IOS.png|400px]] '''iPad'''
|
[[File:LBListView Android.png|300px]] '''Galaxy S4'''
|}

 
Wenn Sie auf den Eintrag '''Blue''' klicken, wird das folgende Meldungsdialogfeld angezeigt: [[File:LBindingMessagebox Android.png|400px]]

==Siehe auch==

*[[Mobile-Tutorial: Verwenden von Registerkarten-Komponenten zur Anzeige von Seiten (iOS und Android)|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: 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)|Mobile-Tutorial: Verwenden von Layouts zur Ausrichtung unterschiedlicher Formulargrößen (iOS und Android)]]
* [[Anpassen der Darstellung von FireMonkey-Listenansichten|Anpassen der Darstellung von FireMonkey-Listenansichten]]
*[[lib_de:FMX.ListView.TListView|FMX.ListView.TListView]]
*[[lib_de:Data.Bind.ObjectScope.TPrototypeBindSource|TPrototypeBindSource]]
*[[LiveBindings in RAD Studio|LiveBindings in RAD Studio]]
*[[LiveBindings-Designer|LiveBindings-Designer]]
* [[Verwenden von FireMonkey-Ansichten|Verwenden von FireMonkey-Ansichten]]
* [[Verwenden von mit Stilen versehenen und farbigen Schaltflächen auf Zielplattformen|Verwenden von mit Stilen versehenen und farbigen Schaltflächen auf Zielplattformen]]
*[[Tutorials|Tutorials von {{Product}}]]

{{DEFAULTSORT:Mobile-Tutorial: Fullen von ListView-Steuerelementen uber LiveBindings (iOS und Android)}}
[[Category:Delphi]]
[[Category:C++]]
[[Category:XE4]]
[[Category:FMX]]
[[Category:LiveBindings]]
[[Category:AMMigrate]]

[[en:Mobile Tutorial: Using LiveBindings to Populate a ListView (iOS and Android)]]
[[fr:Tutoriel mobile : Utilisation de LiveBindings pour remplir une vue liste (iOS et Android)]]
[[ja:モバイルチュートリアル：LiveBinding を使用してリストビューの内容を設定する（iOS および Android）]]

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

2020-07-14T20:03:34Z

Alejandra.rivera: RS-70000

{{Parent|Mobile-Tutorials: Mobile Anwendungsentwicklung (iOS und Android)}}
{{Parent|Tutorials zu Datenbanken und LiveBindings}}

In diesem Tutorial wird gezeigt, wie mit dem '''[[LiveBindings-Designer|LiveBindings-Designer]]''' eine '''[[lib_de:FMX.ListView.TListView|{{FM}}-ListView-Komponente]]''' mit Beispieldaten aus einer '''[[lib_de:Data.Bind.ObjectScope.TPrototypeBindSource|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==

# Erstellen Sie ein neues Projekt. Wählen Sie für dieses Beispiel [[Geräteübergreifende Anwendung|Geräteübergreifende Anwendung]]. Wählen Sie im Experten '''Leere Anwendung'''.
#: 
#:[[image:LBListView1.jpg|link=]]
#: 
# Suchen Sie in der [[Tool-Palette|Tool-Palette]] die Komponente '''[[lib_de:FMX.ListView.TListView|TListView]]''', und ziehen Sie sie auf das Formular.
# Fügen Sie dem Formular eine '''[[lib_de:Data.Bind.ObjectScope.TPrototypeBindSource|TPrototypeBindSource]]'''-Komponente hinzu.
# Wählen Sie im Formular die '''ListView1'''-Komponente aus, und setzen Sie dann im [[Objektinspektor|Objektinspektor]] die Eigenschaft '''[[lib_de:FMX.Controls.TControl.Align|Align]]''' auf <code>Client</code> und die Eigenschaft '''[[lib_de:FMX.ListView.TListViewBase.SearchVisible|SearchVisible]]''' auf <code>True</code>.
#:Bevor Sie den '''Stil''' oder die '''Ansicht''' im [[Formular-Designer|Formular-Designer]] festlegen, sollte das Formular wie der folgende Bildschirm aussehen:
#: 
#: [[image:TListView1.png|520px|link=]]
#: 
#:'''Hinweis:''' Weitere Informationen zur Auswahl des '''Stils''' und der '''Ansichten''' finden Sie unter [[Formular-Designer#Stilauswahl|Stilauswahl]] und [[Verwenden von FireMonkey-Ansichten|Verwenden von FireMonkey-Ansichten]].

==Schritt 2: Hinzufügen von Feldern==

# Klicken Sie mit der rechten Maustaste auf die Komponente [[lib_de:Data.Bind.ObjectScope.TPrototypeBindSource|TPrototypeBindSource]], und wählen Sie dann '''Feld hinzufügen...'''.
#: 
#:[[image:AddField.png|link=]]
#: 
# Wählen Sie im Dialogfeld [[Feld hinzufügen (LiveBindings)|Feld hinzufügen]] die Eigenschaft '''ColorsNames''' aus, und klicken Sie auf '''OK'''.
#: 
#:[[image:AddFieldDialog.png|link=]]

==Schritt 3: Erstellen von LiveBindings==

# Öffnen Sie den [[LiveBindings-Designer|LiveBindings-Designer]] (wählen Sie '''Ansicht > Tool-Fenster > [[LiveBindings-Designer|LiveBindings-Designer]]'''), und ziehen Sie die Eigenschaft <code>ColorsName1</code> von TPrototypeBindSource auf die Eigenschaft <code>Item.Text</code> von ListView, um diese Eigenschaften zu binden.
#: Die ListView-Komponente wird automatisch mit den Farbnamen aus der Prototypdaten-Komponente gefüllt:
#: 
#:[[image:LiveBindings.png|link=]]
#: 
# Setzen Sie [[lib_de:FMX.ListView.TListView.ItemAppearance|TListView.ItemAppearance]] wie folgt auf '''ImageListItemRightButton''':
#* Setzen Sie den Fokus auf die ListView-Komponente, indem Sie sie auswählen (in der [[Strukturansicht|Strukturansicht]], im [[Formular-Designer|Formular-Designer]] oder im [[Objektinspektor|Objektinspektor]]).
#* Suchen Sie dann im [[Objektinspektor|Objektinspektor]] den Knoten '''ItemAppearance''', erweitern Sie ihn, und ändern Sie die Eigenschaft '''ItemAppearance''' in <code>ImageListItemRightButton</code>:
#:[[image:ItemAppearance.png|link=]]
#: 
# 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|Strukturansicht]], im [[Formular-Designer|Formular-Designer]] oder im [[Objektinspektor|Objektinspektor]]).
#* Erweitern Sie in der [[Strukturansicht|Strukturansicht]] unter '''ItemAppearance''' den Eintrag '''Item''', und wählen Sie dann '''[[lib_de:FMX.ListView.Appearances.TItemAppearanceObjects.TextButton|TextButton]]''' aus.
#* Suchen Sie im [[Objektinspektor|Objektinspektor]] die Eigenschaft '''[[lib_de:FMX.ListView.Types.TListItemTextButton.TintColor|TintColor]]''', und setzen Sie deren Wert auf den gewünschten Wert, wie z. B. <code>Seagreen</code>.
#*:Die folgende Abbildung zeigt die [[Strukturansicht|Strukturansicht]] und den [[Objektinspektor|Objektinspektor]]. In der [[Strukturansicht|Strukturansicht]] wird der Eintrag '''Item''' erweitert und '''TextButton''' markiert, und im [[Objektinspektor|Objektinspektor]] wird [[lib_de:FMX.ListView.Types.TListItemTextButton.TintColor|TintColor]] auf <code>Seagreen</code> gesetzt:
#: 
#:[[image:TintColor.png|link=]]
#: 

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

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.

# Klicken Sie mit der rechten Maustaste auf die Komponente [[lib_de:Data.Bind.ObjectScope.TPrototypeBindSource|TPrototypeBindSource]], und wählen Sie '''Feld hinzufügen...'''.
# Wählen Sie im Dialogfeld [[Feld hinzufügen (LiveBindings)|Feld hinzufügen]] mit <code>STRG+Klicken</code> die Felddaten '''Bitmaps''' und '''Currency''' aus. Klicken Sie dann auf '''OK'''.
# Wechseln Sie zum [[LiveBindings-Designer|LiveBindings-Designer]], und führen Sie Folgendes aus:
## Verbinden Sie die Eigenschaft <code>Bitmap1</code> der Prototypquellendaten mit der Eigenschaft <code>Item.Bitmap</code> 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.
## Verbinden Sie die Eigenschaft <code>CurrencyField1</code> der Prototypquellendaten mit der Eigenschaft <code>Item.ButtonText</code> der Listenansicht-Komponente.
#: Durch diesen Schritt wird der Wert des Währungsfeldes auf der Schaltfläche angezeigt, die sich rechts neben jedem Listeneintrag befindet.
#: 
#:[[image:LiveBindingDesigner.png|link=]]
#: 

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:'''

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

Der folgende Beispielcode fügt die Ereignisbehandlungsroutine hinzu, die beim Klicken auf einen ListView-Eintrag ein Meldungsdialogfeld anzeigt:
<l s="delphi" />

'''{{Delphi}}:'''
<source lang="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;
</source><l e="delphi" /><l s="cpp" />

'''{{CBuilder}}:'''
<source lang="cpp">
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.");
}
</source><l e="cpp" />

==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 '''[[Mobile-Tutorials: Mobile Anwendungsentwicklung (iOS und Android)#Konfiguration|Konfiguration]]''' konfigurieren und im Formular-Designer die '''Ansicht''' auf ein mobiles Zielgerät (wie '''iPhone 4 Zoll''') einstellen. Anschließend müssen Sie '''[[Schritte bei der Entwicklung von geräteübergreifenden Anwendungen|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'''
|-
| style="vertical-align: top;" |
[[File:LBinding IOS.png|400px]] '''iPad'''
|
[[File:LBListView Android.png|300px]] '''Galaxy S4'''
|}

 
Wenn Sie auf den Eintrag '''Blue''' klicken, wird das folgende Meldungsdialogfeld angezeigt: [[File:LBindingMessagebox Android.png|400px]]

==Siehe auch==

*[[Mobile-Tutorial: Verwenden von Registerkarten-Komponenten zur Anzeige von Seiten (iOS und Android)|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: 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)|Mobile-Tutorial: Verwenden von Layouts zur Ausrichtung unterschiedlicher Formulargrößen (iOS und Android)]]
* [[Anpassen der Darstellung von FireMonkey-Listenansichten|Anpassen der Darstellung von FireMonkey-Listenansichten]]
*[[lib_de:FMX.ListView.TListView|FMX.ListView.TListView]]
*[[lib_de:Data.Bind.ObjectScope.TPrototypeBindSource|TPrototypeBindSource]]
*[[LiveBindings in RAD Studio|LiveBindings in RAD Studio]]
*[[LiveBindings-Designer|LiveBindings-Designer]]
* [[Verwenden von FireMonkey-Ansichten|Verwenden von FireMonkey-Ansichten]]
* [[Verwenden von mit Stilen versehenen und farbigen Schaltflächen auf Zielplattformen|Verwenden von mit Stilen versehenen und farbigen Schaltflächen auf Zielplattformen]]
*[[Tutorials|Tutorials von {{Product}}]]

{{DEFAULTSORT:Mobile-Tutorial: Fullen von ListView-Steuerelementen uber LiveBindings (iOS und Android)}}
[[Category:Delphi]]
[[Category:C++]]
[[Category:XE4]]
[[Category:FMX]]
[[Category:LiveBindings]]
[[Category:AMMigrate]]

[[en:Mobile Tutorial: Using LiveBindings to Populate a ListView (iOS and Android)]]
[[fr:Tutoriel mobile : Utilisation de LiveBindings pour remplir une vue liste (iOS et Android)]]
[[ja:モバイルチュートリアル：LiveBinding を使用してリストビューの内容を設定する（iOS および Android）]]

Datei:LiveBindingDesigner.png

2020-07-14T20:02:16Z

Alejandra.rivera: Datei hochgeladen mit MsUpload

Datei hochgeladen mit MsUpload

Datei:TintColor.png

2020-07-14T20:00:52Z

Alejandra.rivera: Datei hochgeladen mit MsUpload

Datei hochgeladen mit MsUpload

Datei:ItemAppearance.png

2020-07-14T19:57:52Z

Alejandra.rivera: Datei hochgeladen mit MsUpload

Datei hochgeladen mit MsUpload

Datei:LiveBindings.png

2020-07-14T19:56:15Z

Alejandra.rivera: Datei hochgeladen mit MsUpload

Datei hochgeladen mit MsUpload

Datei:AddFieldDialog.png

2020-07-14T19:50:45Z

Alejandra.rivera: Datei hochgeladen mit MsUpload

Datei hochgeladen mit MsUpload

Datei:AddField.png

2020-07-14T19:45:41Z

Alejandra.rivera: Alejandra.rivera lud eine neue Version von Datei:AddField.png hoch

Datei:TListView1.png

2020-07-14T19:44:08Z

Alejandra.rivera: Datei hochgeladen mit MsUpload

Datei hochgeladen mit MsUpload

Vorlage:InterBaseVersion

2019-11-21T19:05:03Z

Alejandra.rivera: RS-97159

2020<noinclude>

[[Category:Datenvorlagen]]
[[Category:AMMigrate]]

Vorlage:InterBaseVersion

2019-11-19T14:40:55Z

Alejandra.rivera: RS-97157

2017<noinclude>

[[Category:Datenvorlagen]]
[[Category:AMMigrate]]