Afficher : Object Pascal C++
Préférences d'affichage

Tutoriel mobile : Utilisation de composants Zone de liste déroulante pour sélectionner des éléments dans une liste (iOS et Android)

De Appmethod Topics

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


Implémentation d'un sélecteur dans des applications multi-périphériques

Pour les plates-formes mobiles, FireMonkey encapsule le composant Sélecteur avec le composant TComboBox :

iOS 7 (iPad2) Android (LG-E612)

TComboBox iOS7.png

Android ComboBox 1.png


Pour définir un sélecteur et la liste d'éléments associés :

  1. Sélectionnez l'une des options suivantes :
    • Fichier > Nouveau > Application multi-périphérique - Object Pascal > Application vide
    • Fichier > Nouveau > Application multi-périphérique - C++ > Application vide
  2. Sélectionnez le composant TComboBox dans la palette d'outils et déposez-le sur le Concepteur de fiches.
    Pour trouver TComboBox, tapez les premiers caractères ("Com") dans la zone de recherche de la palette d'outils :
    SelectComboBox.png

  3. Dès qu'il a été déposé, le composant TComboBox est visible dans le Concepteur de fiches.
    Cliquez avec le bouton droit sur le composant TComboBox et sélectionnez Editeur d'éléments... :
    SelectItemsEditorForComboBox.png

  4. Pour définir des éléments, cliquez plusieurs fois sur Ajouter un élément.
    AddComboBoxItems.png

  5. Dans la vue Structure, sélectionnez ListBoxItem1 (le premier élément de la liste).
  6. Dans l'inspecteur d'objets, modifiez la propriété Text de ListBoxItem1.
    Dans cet exemple qui traite des cinquante états des Etats-Unis, entrez "Alabama" comme premier élément de la liste :
    EditComboBoxItems.png

  7. Modifiez les autres éléments en spécifiant Alaska, Arizona, Arkansas, California, Colorado, etc.
  8. Exécutez l'application sur la plate-forme cible mobile choisie (pour Object Pascal uniquement) : Simulateur iOS, Périphérique iOS ou Périphérique Android.
    Dès que vous touchez le composant TComboBox, le contrôle Sélecteur apparaît. Vous pouvez sélectionner un élément dans la liste.

Construction d'une liste d'éléments en utilisant le code

Pour construire une liste d'éléments en utilisant le code, vous devez implémenter le gestionnaire d'événement onFormCreate comme suit :

Object Pascal :
procedure TForm27.FormCreate(Sender: TObject);
begin
  ComboBox1.Items.Add('Alabama');
  ComboBox1.Items.Add('Alaska');
  ComboBox1.Items.Add('Arizona');
  ComboBox1.Items.Add('Arkansas');
  ComboBox1.Items.Add('California');
  // Other states can be listed here
  ComboBox1.Items.Add('Virginia');
  ComboBox1.Items.Add('Washington');
  ComboBox1.Items.Add('West Virginia');
  ComboBox1.Items.Add('Wisconsin');
  ComboBox1.Items.Add('Wyoming');
end;
C++ :
void __fastcall TForm27::FormCreate(TObject *Sender)
{
  ComboBox1->Items->Add("Alabama");
  ComboBox1->Items->Add("Alaska");
  ComboBox1->Items->Add("Arizona");
  ComboBox1->Items->Add("Arkansas");
  ComboBox1->Items->Add("California");
  // Other states can be listed here
  ComboBox1->Items->Add("Virginia");
  ComboBox1->Items->Add("Washington");
  ComboBox1->Items->Add("West Virginia");
  ComboBox1->Items->Add("Wisconsin");
  ComboBox1->Items->Add("Wyoming");
}

Affichage d'un élément spécifique

L'élément actuellement sélectionné est spécifié par la propriété ItemIndex. ItemIndex est une valeur entière spécifiée en utilisant un index de base zéro (ce qui signifie que le premier élément est zéro).

Pour afficher la liste avec le cinquième élément sélectionné ("California" dans le code exemple suivant), spécifiez ItemIndex comme suit :

Object Pascal :
procedure TForm27.FormCreate(Sender: TObject);
begin
  ComboBox1.Items.Add('Alabama');
  ComboBox1.Items.Add('Alaska');
  ComboBox1.Items.Add('Arizona');
  ComboBox1.Items.Add('Arkansas');
  ComboBox1.Items.Add('California');
  // Other states can be listed here

  // Index of 5th item is "4"
  ComboBox1.ItemIndex := 4;
end;
C++ :
void __fastcall TForm27::FormCreate(TObject *Sender)
{
  ComboBox1->Items->Add("Alabama");
  ComboBox1->Items->Add("Alaska");
  ComboBox1->Items->Add("Arizona");
  ComboBox1->Items->Add("Arkansas");
  ComboBox1->Items->Add("California");
  // Other states can be listed here

  // Index of 5th item is "4"
  ComboBox1->ItemIndex = 4;
}

Si vous ne connaissez pas la valeur de l'index, vous pouvez la trouver en utilisant la méthode IndexOf comme suit :

Object Pascal :
procedure TForm27.FormCreate(Sender: TObject);
begin
  ComboBox1.Items.Add('Alabama');
  ComboBox1.Items.Add('Alaska');
  ComboBox1.Items.Add('Arizona');
  ComboBox1.Items.Add('Arkansas');
  ComboBox1.Items.Add('California');
  // Other states can be listed here

  ComboBox1.ItemIndex := ComboBox1.Items.IndexOf('California');
end;
C++ :
void __fastcall TForm27::FormCreate(TObject *Sender)
{
  ComboBox1->Items->Add("Alabama");
  ComboBox1->Items->Add("Alaska");
  ComboBox1->Items->Add("Arizona");
  ComboBox1->Items->Add("Arkansas");
  ComboBox1->Items->Add("California");
  // Other states can be listed here
  
  ComboBox1->ItemIndex = ComboBox1->Items->IndexOf("California");
}

Implémentation d'un gestionnaire d'événement correspondant à la sélection effectuée par l'utilisateur

Dès que l'utilisateur sélectionne un élément, l'événement OnChange est déclenché. En réponse à l'action de l'utilisateur, vous pouvez implémenter un gestionnaire d'événement pour l'événement OnChange.

Remarque : Avant de continuer ce scénario, exécutez les étapes suivantes :
  1. Sélectionnez le composant TMemo dans la palette d'outils et déposez-le sur le Concepteur de fiches.
  2. Dans l'inspecteur d'objets, définissez la propriété TMemo.Align sur Fit.

Pour implémenter un gestionnaire d'événement OnChange :

  1. Sélectionnez le composant TComboBox.
  2. Dans l'inspecteur d'objets, ouvrez la page Evénements et double-cliquez sur la zone vierge qui suit OnChange.
  3. L'éditeur de code s'ouvre. Ecrivez le code comme suit :
Object Pascal :
procedure TForm27.ComboBox1Change(Sender: TObject);
begin
  Memo1.Lines.Insert(0, (Format('Item %s at Index %d was selected. ', [ComboBox1.Selected.Text,  
    ComboBox1.ItemIndex])));
end;
C++ :
void __fastcall TForm27::ComboBox1Change(TObject *Sender)
{
  Memo1->Lines->Insert(0, "Item " + ComboBox1->Selected->Text + " at Index " + IntToStr(ComboBox1->ItemIndex) + " was selected.");
}

Ce gestionnaire d'événement affiche un dialogue de message indiquant l'élément qui a été sélectionné.

Dans le code Object Pascal, la fonction Format renvoie une chaîne formatée composée d'une chaîne de format et d'un tableau d'arguments :


Android (LG-E612) iOS6 (iPad)

TComboBox Android.png

TComboBox IOS6.png

Voir aussi

Outils personnels
Autres langues