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

IOSListBoxPlain.PNG

Android ListBoxPlain.png


Liste groupée

IOSListBoxGrouped.PNG


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 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 Object Pascal : Fichier > Nouveau > Application multi-périphérique - Object Pascal > Application vide
    • Pour C++ : Fichier > Nouveau > Application multi-périphérique - C++ > 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 :
    SelectTListBox.png

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

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.

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 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 :
    • Pour Object Pascal : Fichier > Nouveau > Application multi-périphérique - Object Pascal > Application vide
    • Pour C++ : Fichier > Nouveau > Application multi-périphérique - C++ > 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 :

  • Object Pascal :
  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)

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;
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, 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 :
  6. Ajoutez un composant TShadowEffect sur le menu de dépassement.
Vue Structure Android LG-E612

Structure.png

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

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

Actionbar-overflowMenu.png

Android-search.png

Affichage du menu de dépassement

Affichage de la zone de recherche

Voir aussi