Tutoriel mobile : Utilisation des composants Zone de liste pour afficher une vue table (iOS et Android)

De Appmethod Topics
Aller à : navigation, rechercher

Remonter à Tutoriels mobiles : Développement d'applications mobiles (iOS et Android)


Utilisation des composants Zone de liste pour afficher une vue table dans des applications mobiles

Sur la plate-forme mobile, FireMonkey utilise le composant FMX.ListBox.TListBox pour présenter une vue Table dans le style mobile, comme les zones de liste suivantes :

Remarque :

Les performances de FMX.ListBox.TListBox peuvent être lentes sur le mobile. Utilisez TListView si vous souhaitez développer des applications plus complexes, en particulier des apps comportant de grandes bases de données.

Liste simple

iOS Android (LG E-612)

IOSListBoxPlain.PNG

Android ListBoxPlain.png


Liste groupée

IOSListBoxGrouped.PNG

Remarque : Seuls les périphériques iOS supportent les listes groupées.


Zone de recherche

Vous pouvez ajouter une zone de recherche à une zone de liste. La zone de recherche permet aux utilisateurs de réduire une sélection à partir d'une longue liste comme dans les images suivantes.

AllStatesBeforeSearch.PNG AllStatesContainsC.PNG

Ce tutoriel décrit les étapes élémentaires relatives à la construction d'éléments pour une vue Table dans votre application FireMonkey mobile.

Création des éléments sur le composant Zone de liste

  1. Sélectionnez :
  2. Sélectionnez le composant TListBox dans la palette d'outils, puis déposez-le sur le Concepteur de fiches mobiles FireMonkey. Pour trouver TListBox, tapez les premiers caractères (comme "TListB") dans la zone Chercher de la palette d'outils :
    SelectTListBox.png

  3. Sélectionnez le composant TListBox sur le Concepteur de fiches mobiles, allez dans l'inspecteur d'objets et sélectionnez Client pour la propriété Align :
    AlClient.png

  4. Sur le Concepteur de fiches mobiles FireMonkey, cliquez avec le bouton droit sur le composant TListBox, et sélectionnez Editeur d'éléments :
    SelectListBoxItemsEditor.png

  5. Sur le Concepteur d'éléments, cliquez plusieurs fois sur le bouton Ajouter un élément pour ajouter plusieurs éléments à la zone de liste :
    AddListBoxItemsOnItemsDesigner.png

  6. Fermez le Concepteur d'éléments. Vous pouvez maintenant trouver les éléments de zone de liste sur le composant TListBox. Par exemple :
    ListBoxItemsOnTListBox.png

Ajout d'un en-tête

Vous pouvez définir un en-tête sur le composant TListBox en suivant les étapes ci-dessous :

En-tête d'un TListBox
  1. Sur le Concepteur de fiches mobiles FireMonkey, cliquez avec le bouton droit sur le composant TListBox, et sélectionnez Ajouter un élément > TListBoxHeader :
    AddTListBoxHeader.png

  2. Sur la palette d'outils, sélectionnez le composant TLabel et déposez-le au-dessus du composant TListBoxHeader que vous venez d'ajouter :
    AddLabelOnTListBoxHeader.png

  3. Dans l'inspecteur d'objets, modifiez les propriétés du composant TLabel comme suit :
Propriété Valeur
Align Client
StyleLookup toollabel
TextSettings.HorzAlign Center
Text (Valeur texte de votre choix)

Ajout d'un groupe en-tête/pied à la liste

Vous pouvez définir un en-tête et un pied de groupe pour les éléments de TListBox en procédant comme suit :

ListBoxItemsWithGroupHeaderAndFooter.png

  1. Sur le Concepteur de fiches mobiles FireMonkey, cliquez avec le bouton droit sur le composant TListBox, et sélectionnez Editeur d'éléments.
  2. Sur le Concepteur d'éléments, sélectionnez TListBoxGroupHeader dans la liste déroulante, puis sélectionnez Ajouter un élément :
    SelectTListBoxGroupHeader.png

  3. Sélectionnez TListBoxGroupFooter dans la liste déroulante, puis sélectionnez Ajouter un élément.
  4. Sélectionnez ListBoxGroupHeader1 dans la liste d'éléments et cliquez sur le bouton Haut plusieurs fois jusqu'à ce que cet élément devienne le premier de la liste :
    MoveListBoxGroupHeader.png

  5. Fermez la boîte de dialogue. Vous avez maintenant un en-tête et un pied de groupe pour le composant TListBox.

Affichage des éléments de liste sous forme d'éléments groupés séparés

Les éléments d'une zone de liste peuvent être affichés sous la forme d'une liste simple ou d'une liste groupée (uniquement pour la plate-forme cible iOS). Ce choix est contrôlé par la propriété GroupingKind et la propriété StyleLookup, comme affiché par le graphique suivant :

Affichage des éléments sous la forme d'une liste simple Affichage des éléments sous la forme d'une liste groupée
ListBoxItemsWithGroupHeaderAndFooter.png TListBoxgsGrouped.png
Plain = Valeur de la propriété GroupingKind  Grouped = Valeur de la propriété GroupingKind 
listboxstyle = Valeur de la propriété StyleLookup  transparentlistboxstyle = Valeur de la propriété StyleLookup

Important : Pour les périphériques iOS, vous pouvez spécifier l'un ou l'autre style pour votre composant TListBox dans l'inspecteur d'objets. Pour les périphériques Android, vous ne pouvez spécifier que la liste simple.

Vous pouvez sélectionner la propriété GroupingKind et la propriété StyleLookup dans l'inspecteur d'objets lorsque l'élément de zone de liste est sélectionné dans le Concepteur de fiches.

Ajout d'une case à cocher ou d'un autre accessoire à un élément de zone de liste

Chaque élément d'un TListBox peut utiliser un accessoire tel qu'une case à cocher via la propriété ItemData.Accessory. L'image suivante affiche la valeur que vous pouvez affecter à ItemData.Accessory ainsi que l'accessoire ayant été affecté :

ValuesForItemDataAccessory.PNG

Vous pouvez sélectionner la propriété Accessory dans l'inspecteur d'objets lorsque l'élément de zone de liste est sélectionné dans le Concepteur de fiches.

SetItemDataAccessory.png

Ajout d'une icône à un élément de zone de liste

Chaque élément d'un composant Zone de liste peut contenir des données bitmap, comme une icône, via la propriété ItemData.Bitmap :

SetItemDataBitmapProperty.png

Vous pouvez sélectionner la propriété Bitmap dans l'inspecteur d'objets lorsque l'élément de zone de liste est sélectionné dans le Concepteur de fiches.

Ajout d'informations de détail à un élément

Vous pouvez ajouter des informations texte supplémentaires pour chaque élément du composant Zone de liste.

Spécifiez le texte supplémentaire dans la propriété ItemData.Detail et sélectionnez l'emplacement du texte de détail via la propriété StyleLookup comme affiché dans le tableau suivant :

Propriété StyleLookup Apparence
listboxitemnodetail ListBoxItemlistboxitemnodetail.PNG
listboxitembottomdetail ListBoxItemlistboxitembottomdetail.PNG
listboxitemrightdetail ListBoxItemlistboxitemrightdetail.PNG
listboxitemleftdetail ListBoxItemlistboxitemleftdetail.PNG

Exécution de votre application

Exécutez l'application en choisissant Exécuter > Exécuter ou en appuyant sur F9.

Création de votre application de zone de liste

  1. Sélectionnez :
  2. Sélectionnez le composant TListBox dans la palette d'outils et déposez-le sur le Concepteur de fiches mobiles FireMonkey.
  3. Sélectionnez le composant TListBox sur le Concepteur de fiches mobiles, allez dans l'inspecteur d'objets et sélectionnez Client pour la propriété Align.

Ajouter des éléments à une zone de liste à partir du code

Pour ajouter des éléments réguliers à une zone de liste, il vous suffit d'appeler la méthode Items.Add comme dans l'extrait de code suivant :

  • Object Pascal :
  ListBox1.Items.Add('Text to add');
  • Appmethod C++ :
  ListBox1->Items->Add("Text to add");

Si vous voulez créer des éléments autres qu'un élément simple, ou contrôler d'autres propriétés, vous pouvez créer d'abord une instance de l'élément puis l'ajouter à la zone de liste.

Les exemples de code suivants ajoutent des éléments à une zone de liste, comme illustré dans l'image :

iOS Android (LG E-612)

ListBoxItemAddedByCode.PNG

Android ListBoxItemAddedByCode.png


Object Pascal :
procedure TForm1.FormCreate(Sender: TObject);
var
  c: Char;
  i: Integer;
  Buffer: String;
  ListBoxItem : TListBoxItem;
  ListBoxGroupHeader : TListBoxGroupHeader;
begin
  ListBox1.BeginUpdate;
  for c := 'a' to 'z' do
  begin
    // Add header ('A' to 'Z') to the List
    ListBoxGroupHeader := TListBoxGroupHeader.Create(ListBox1);
    ListBoxGroupHeader.Text := UpperCase(c);
    ListBox1.AddObject(ListBoxGroupHeader);

    // Add items ('a', 'aa', 'aaa', 'b', 'bb', 'bbb', 'c', ...) to the list
    for i := 1 to 3 do
    begin
      // StringOfChar returns a string with a specified number of repeating characters.
      Buffer := StringOfChar(c, i);
      // Simply add item
      // ListBox1.Items.Add(Buffer);

      // or, you can add items by creating an instance of TListBoxItem by yourself
      ListBoxItem := TListBoxItem.Create(ListBox1);
      ListBoxItem.Text := Buffer;
      // (aNone=0, aMore=1, aDetail=2, aCheckmark=3)
      ListBoxItem.ItemData.Accessory := TListBoxItemData.TAccessory(i);
      ListBox1.AddObject(ListBoxItem);
    end;
  end;
  ListBox1.EndUpdate;
end;
Appmethod C++ :
void __fastcall TForm1::FormCreate(TObject *Sender)
{

  char c;
  int i;
  String Buffer ;
  TListBoxItem *ListBoxItem  ;
  TListBoxGroupHeader *ListBoxGroupHeader  ;

  ListBox1->BeginUpdate();
  for (c = 'a'; c <= 'z'; c++)
  {
	// Add header ('A' to 'Z') to the List
	ListBoxGroupHeader = new TListBoxGroupHeader(ListBox1);
	ListBoxGroupHeader->Text = UpperCase(c);
	ListBox1->AddObject(ListBoxGroupHeader);

	// Add items ('a', 'aa', 'aaa', 'b', 'bb', 'bbb', 'c', ->->->) to the list
	for (i = 1; i < 4; i++)
	{
	  // StringOfChar returns a string with a specified number of repeating characters->
	  Buffer = StringOfChar(c, i);
	  // Simply add item
	  // ListBox1->Items->Add(Buffer);

	  // or, you can add items by creating an instance of TListBoxItem by yourself
	  ListBoxItem = new TListBoxItem(ListBox1);
	  ListBoxItem->Text = Buffer;
	  // (aNone=0, aMore=1, aDetail=2, aCheckmark=3)
	  ListBoxItem->ItemData->Accessory = static_cast<TListBoxItemData::TAccessory>(i);
	  ListBox1->AddObject(ListBoxItem);
	};
  };
  ListBox1->EndUpdate();
}

Création d'un menu de dépassement

Vous pouvez accéder à un menu popup de dépassement via la barre d'action. Ce menu vous permet d'accéder à des éléments supplémentaires ou à des éléments utilisés moins souvent.

Dans FireMonkey, vous pouvez facilement implémenter un menu de dépassement en utilisant TListBox :

  1. Ajoutez un composant TToolBar sur la fiche et définissez l'alignement sur Top.
  2. Placez trois composants TSpeedButton sur le composant TToolBar :
    Actionbar.png
  3. Déposez un TListBox sur la fiche.
    • Ajoutez cinq TListBoxItem à partir de l'éditeur d'éléments.
    • Cochez akTop et akRight à partir de la propriété Anchors du composant TListBox.
    • Définissez Height sur 220.
    • Changez Name par OverflowMenu.
    • Définissez la propriété Visible sur False.
  4. Pour les quatre premiers composants TListBoxItem de TListBox, allez dans l'inspecteur d'objets, développez ItemData, définissez la propriété Bitmap et changez la propriété Text par la valeur de texte de votre choix.
  5. Pour le dernier TListBoxItem, définissez Accessory sur aMore et Text sur More.
  6. Ajoutez un composant TShadowEffect sur le menu de dépassement.

Structure.pngOverflow.png

Création du gestionnaire d'événement pour le bouton de dépassement

Dans le Concepteur de fiches, double-cliquez sur le composant OverflowButton. Ajoutez le code suivant à ce gestionnaire d'événement :

  • Object Pascal :
procedure TForm1.OverflowButtonClick(Sender: TObject);
begin
  OverflowMenu.Visible := not OverflowMenu.Visible; //change the visibility status 
  if OverflowMenu.Visible then // the Overflow Menu is displayed
  begin
    ListBox1.SendToBack;       
    OverflowMenu.BringToFront;
    OverflowMenu.ItemIndex := -1; //  the ItemIndex property specifies the currently selected item(default value is -1 that means that no item is selected)
    OverflowMenu.ApplyStyleLookup;
    OverflowMenu.RealignContent; // realigns the children TListBoxItem controls of the OverflowMenu TListBox
  end;
end;
  • Appmethod C++ :
void __fastcall TForm1::OverflowButtonClick(TObject *Sender) {
	OverflowMenu->Visible = !(OverflowMenu->Visible); //change the visibility status
	if (OverflowMenu->Visible) {   // the Overflow Menu is displayed
                ListBox1->SendToBack();
                OverflowMenu->BringToFront();
		OverflowMenu->ItemIndex = -1; //  the ItemIndex property specifies the currently selected item(default value is -1 that means that no item is selected)
		OverflowMenu->ApplyStyleLookup();
		OverflowMenu->RealignContent(); // realigns the children TListBoxItem controls of the OverflowMenu TListBox
	}
}

Ajout d'une zone de recherche

  • Pour ajouter une zone de recherche au composant Zone de liste, cliquez avec le bouton droit sur le composant TListBox et sélectionnez simplement Ajouter un élément > TSearchBox dans le menu contextuel :

AddSearchBox.png

  • Pour l'ajouter à la barre d'action :
    • Définissez la propriété Visible sur False.
    • Pour créer le gestionnaire d'événement pour SearchButton, double-cliquez dessus et ajoutez le code suivant :
Object Pascal :
procedure TForm1.SearchButtonClick(Sender: TObject);
begin
  SearchBox1.Visible := not SearchBox1.Visible; //change the visibility status
end;
Appmethod C++ :
void __fastcall TForm1::SearchButtonClick(TObject *Sender) {
	SearchBox1->Visible = !(SearchBox1->Visible); //change the visibility status
}

Exécution de votre application

  1. Sélectionnez l'une des options suivantes :
    • Exécuter > Exécuter
    • Exécuter > Exécuter sans débogage
  2. Pour invoquer le menu de dépassement, cliquez sur les points de suspension à la verticale dans la barre d'action.
  3. Pour afficher la zone de recherche, cliquez sur SearchButton.
Android (Samsung Tab 2.0) Android (Samsung Tab 2.0)

Actionbar-overflowMenu.png

Android-search.png

Affichage du menu de dépassement

Affichage de la zone de recherche

Voir aussi