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

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

Utilisation des composants Zone de liste pour afficher une vue table dans les plates-formes 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)

Liste groupée

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.

Ce tutoriel décrit les étapes élémentaires relatives à la construction d'éléments pour une vue Table dans vos applications multi-périphériques pour les plates-formes mobiles.

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

1. Sélectionnez :
   • Pour Delphi : Fichier > Nouveau > Application multi-périphérique - Delphi > Application vide
   • Pour C++Builder : Fichier > Nouveau > Application multi-périphérique - C++Builder > Application vide
2. Sélectionnez le composant TListBox dans la palette d'outils, et déposez-le sur le Concepteur de fiches. Pour trouver TListBox, tapez les premiers caractères (comme "TList") dans la zone Chercher de la palette d'outils :

   
   
   

3. Sélectionnez le composant TListBox sur le Concepteur de fiches, allez dans l'inspecteur d'objets et sélectionnez Client pour la propriété Align.
4. Sur le Concepteur de fiches, cliquez avec le bouton droit sur le composant TListBox, et sélectionnez Editeur d'éléments :

   
   
   

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 :

   
   
   

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

   
   
   

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, cliquez avec le bouton droit sur le composant TListBox, et sélectionnez Ajouter un élément > TListBoxHeader :

   
   
   

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 :

   
   
   

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 :

1. Sur le Concepteur de fiches, 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 :

   
   
   

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 :

   
   
   

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

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

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.

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 :

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.

Afin de visualiser l'icône, vous devez sélectionner un StyleLookup qui supporte la propriété Bitmap. Changez la propriété StyleLookup property en listboxitemleftdetail.

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
listboxitembottomdetail
listboxitemrightdetail
listboxitemleftdetail

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 :
   • Pour Delphi : Fichier > Nouveau > Application multi-périphérique - Delphi > Application vide
   • Pour C++Builder : Fichier > Nouveau > Application multi-périphérique - C++Builder > Application vide
2. Sélectionnez le composant TListBox dans la palette d'outils et déposez-le sur le Concepteur de fiches.
3. Sélectionnez le composant TListBox sur le Concepteur de fiches, 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 :

• Delphi :

  ListBox1.Items.Add('Text to add');

• 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)

Delphi :

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;

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 :

   

   • Pour le premier TSpeedButton :
     • Définissez la propriété Align sur Left.
     • Changez la propriété Name par OrganizeButton.
     • Définissez StyleLookup sur organizetoolbutton.
   • Pour le second TSpeedButton :
     • Définissez la propriété Align sur Right.
     • Changez la propriété Name par OverflowButton.
     • Sélectionnez detailstoolbutton pour la propriété StyleLookup.
   • Pour le dernier TSpeedButton :
     • Définissez la propriété Align sur Right.
     • Dans l'inspecteur d'objets développez le noeud Margins et définissez la marge Right sur 5.
     • Changez la propriété Name par SearchButton.
     • Définissez StyleLookup sur searchtoolbutton.
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, ouvrez l'inspecteur d'objets et développez ItemData :
   • Définissez la propriété Bitmap.
   • Remplacez la valeur de la propriété Text par la valeur texte de votre choix.
   • Sélectionnez listboxitemleftdetail pour la propriété StyleLookup.
5. Pour le dernier TListBoxItem, ouvrez l'inspecteur d'objets et développez ItemData :
   • Définissez Accessory sur aMore et Text sur More.
6. Ajoutez un composant TShadowEffect sur le menu de dépassement.

Vue Structure	Android LG-E612

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 :

• Delphi :

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

• C++ :

void __fastcall TForm1::OverflowButtonClick(TObject *Sender)
{
        OverflowMenu->Visible = !(OverflowMenu->Visible); //change the visibility status
		if (OverflowMenu->Visible) {   // the Overflow Menu is displayed
                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 :

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

Delphi :

procedure TForm1.SearchButtonClick(Sender: TObject);
begin
  SearchBox1.Visible := not SearchBox1.Visible; //change the visibility status
end;

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éboguer
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)
Affichage du menu de dépassement	Affichage de la zone de recherche

Voir aussi

• FMX.ListBox.TListBox
• Tutoriel mobile : Utilisation de LiveBindings pour remplir une vue liste (iOS et Android)
• Tutoriel mobile : Utilisation de LiveBindings pour remplir une zone de liste dans les applications mobiles (iOS et Android)
• Tutoriel mobile : Utilisation d'un composant Bouton avec différents styles (iOS et Android)
• Tutoriel mobile : Utilisation du composant Navigateur Web (iOS et Android)
• Tutoriel mobile : Utilisation des composants Onglet pour afficher des pages (iOS et Android)