Formulaires dans Android

Affichage des formulaires sur les écrans

Ce site ne sera plus alimenté de contenu après août 2014. Tous les nouveaux articles seront redigés pour www.waitingforcode.com

Là aussi, comme dans le cas de l'envoi des e-mails, on pourrait penser que les formulaires sont un domaine réservé à des applications sur les ordinateurs (web et fenêtres). Néanmoins, ils font également partie du système Android. Et ce sont eux qu'on abordera dans cet article. Dans sa première partie il présentera des éléments qu'on peut utiliser dans la création des formulaires. La présentation sera réalisée dans un tableau comparatif avec les tags HTML. Ensuite on touchera plus en détail les champs textuels et de différentes fonctionnalités UI que dans le web se font majoritairement avec JavaScript. A la fin on verra sur un exemple concret, comment implémenter les formulaires sous Android.

Formulaires sous Android

Android a transmis quasi complètement les éléments disponibles dans le HTML dans son environnement. Voici la liste des composants qu'on peut utiliser en tant que champs du formulaire sous Android :

Elément Android Tag HTML Description
EditText <input type="text" />, <textarea /> un champ dans lequel on peut saisir le texte
AutoCompleteTextView <input type="text" />, <textarea /> un champ avec la suggéstion automatique qu'on peut retrouver par exemple avec Google Autocomplete
Button <input type="button" /> un bouton qui permet d'effectuer une action (la méthode spécifiée dans l'attribut onClick) suite au clique sur lui
RadioButton <input type="radio" /> les éléments qui permettent de sélectionner une seule option. Le groupage de ces éléments est également possible à travers RadioGroup
CheckBox <input type="checkbox" /> la sélection d'une ou de plusieurs options est possible pour cet élément
Spinner <select /> une liste déroulante qui permet d'effectuer un seul choix

Types des champs textuels sous Android

L'arrivée de l'HTML 5 a introduit des types pour les champs textuels. Android possède également de différents types pour les champs représentés par EditText. Voici une liste des valeurs qu'il peut prendre dans l'attribut inputType :
- none : pas de type, le texte n'est pas éditable
- text : texte normal
- textCapCharacters : toutes les lettres du texte sont écrites en majuscule
- textCapWords : tous les mots du texte commencent par une majuscule
- textCapSentences : chaque phrase commence par une majuscule
- textAutoCorrect : auto-correction est activée pour chaque mot
- textAutoComplete : auto-suggéstion est activée pour chaque mot saisi
- textMultiLine : le texte peut s'écrire sur plusieurs lignes (par défaut il est d'une seule ligne)
- textImeMultiLine : ?
- textNoSuggestions : auto-suggéstion est désactivée
- textUri : texte est utilisé en tant qu'URI
- textEmailAddress : texte utilisé en tant qu'une adresse e-mail
- textEmailSubject : texte est envoyé en tant que titre d'un e-mail
- textShortMessage : texte est soumis en tant que le contenu d'un message court
- textLongMessage : texte est soumis en tant que le contenu d'un message long
- textPersonName : indique que le texte correspond au nom d'une personne
- textPostalAddress : texte est traité comme un code postal
- textPassword : texte est un mot de passe (*** apparaîtront à la place du texte tapé)
- textVisiblePassword : texte est un mot de passe qui devrait être visible
- textWebEditText : texte est soumis en tant que le contenu d'un formulaire web
- textFilter : ?
- textPhonetic : ?
- textWebEmailAddress : texte utilisé en tant que l'adresse e-mail dans un formulaire web
- textWebPassword : texte utilisé en tant que le mot de passe dans un formulaire web
- number : champ numérique
- numberSigned : ?
- numberDecimal : champ numérique avec une décimale
- numberPassword : champ numérique avec le mot de passe
- phone : le numéro de téléphone
- datetime : la date et l'heure
- date : la date
- time : le temps

Autres champs du formulaire Android

Dans le premier paragraphe on a liste les champs le plus souvent utilisés dans les formulaires créés sous Android. Cependant, il y a plus de possibilités :
- DatePicker : permet de créer un champ qui va afficher le calendrier. L'utilisateur aura alors une possibilité de choisir une date (par exemple pour la date de réservation)
- TimePicker : pareil que DatePicker, sauf qu'il affiche l'heure à déterminer
- ToogleButton : un boutton on/off qui permet d'activer ou de désactiver une option

Dans le cas de notre application on n'utilisera pas de CheckBox, TimePicker et ToogleButton. Regardons cela sur deux exemples : l'un va concerner le formulaire des préférences du web service, l'autre pour le formulaire d'envoi de SMS. Ce second cas est là uniquement pour présenter l'implémentation de l'auto-suggestion sous Android.

Exemples de formulaires sous Android

Regardons d'abord le layout qu'on utilisera pour la gestion des préférences du web service. Il contiendra les champs de texte, les radios, une liste déroulante, un choix de la date et le bouton :

afficher le code

Voici l'explication de tous les éléments :
- <TextView /> : représente les libellés pour les champs
- <EditText /> : les champs textuels pour le type d'une adresse URI et d'un texte sur plusieurs lignes (attribut inputType)
- <RadioGroup /> : regroupe les boutons radio. L'attribut android:text de chaque <RadioButton /> spécifie le libellé qui doit apparaître à côté du bouton
- <DatePicker /> : ne prend pas en compte aucun nouvel attribut
- <Spinner /> : cette liste déroulante contient un attribut android:entries qui prend comme valeur une ressource @array. Elle liste les choix possibles pour les fréquences que peut choisir l'utilisateur.
- <Button /> : son attribut android:onClick indique le nom de la méthode de l'activité qui utilise ce layout, qui sera appelée à la suite du click sur le bouton.

Autocomplete sous Android

Passons maintenant au champ d'auto-suggéstion qui nécessite un peu de codage dans notre activité. Mais présentons d'abord le fragment du layout :

   	<AutoCompleteTextView 
   		android:id="@+id/autocompleteContactList" 
   		android:layout_width="fill_parent"
   		android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_below="@id/labelSmsNumber"
   		android:layout_marginRight="5dip"
   		android:layout_marginTop="10dip"
   		android:layout_marginLeft="5dip"  />

Il n'y a pas de nouveaux attributs. La gestion du positionnement des éléments, les marges et les dimensions ont été expliquées dans la partie consacrée au layout sous Android. On peut donc passer à l'activité qui implémentera cette vue :

public class SendSmsActivity extends BaseActivity {
    // ...
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        // ...
        Cursor contactCursor = getContentResolver().query(ContactsContract.CommonDataKinds.Phone.CONTENT_URI, null, null, null, null);
        ContactAutocompleteAdapter contactAutocompleteAdapter = new ContactAutocompleteAdapter(this, contactCursor, false);
        AutoCompleteTextView autoCompleteTextView = (AutoCompleteTextView) findViewById(R.id.autocompleteContactList);
        autoCompleteTextView.setAdapter(contactAutocompleteAdapter);
        autoCompleteTextView.setThreshold(2); // search after 2 caracters entered
        // ...
    }
}

Tout d'abord on crée l'instance Cursor dont le but est de nous permettre d'accéder à la lecture des éléments trouvés. Ensuite on initialise ContactAutocompleteAdapter qui jouera le rôle d'un adapter de la vue d'auto-suggéstion (AutoCompleteTextView). On indique également que l'auto-suggéstion doit être lancée après la saisie des 2 caractères. A priori rien de compliqué. Pour le confirmer, voici le code du ContactAutocompleteAdapter :

afficher le code

Regardons d'abord les 2 dernières méthodes. convertToString() s'occupe d'afficher uniquement le numéro de téléphone après la sélection d'un élément dans la liste des contacts auto-suggérés. En ce qui concerne runQueryOnBackgroundThread(), cette fonction exécute la requête qui retourne les éléments correspondant au texte introduit dans le champ d'auto-suggéstion. Les 2 autres méthodes concernent l'affichage et elles méritent d'être traitées dans le paragraphe séparé.

Concernant bindView(), elle est appelée pour une vue déjà existante. Elle a pour but d'associer le résultat de recherche au layout initialisé dans newView(). Voici un fragment des logs qui en témoigne :

04-29 18:07:41.415: D/com.example.library.adapter.ContactAutocompleteAdapter(2868): Querying with (display_name IS NOT NULL AND data1 IS NOT NULL ) AND (UPPER(display_name) GLOB ? OR data1 GLOB ?) 04-29 18:07:41.415: D/com.example.library.adapter.ContactAutocompleteAdapter(2868): Looking for content://com.android.contacts/data/phones 04-29 18:07:42.085: D/com.example.library.adapter.ContactAutocompleteAdapter(2868): Contact autocomplete adapter : newView 04-29 18:07:42.146: D/com.example.library.adapter.ContactAutocompleteAdapter(2868): Adding new number 06010101010101 Test2 04-29 18:07:42.155: D/com.example.library.adapter.ContactAutocompleteAdapter(2868): Contact autocomplete adapter : bindView 04-29 18:07:42.175: D/com.example.library.adapter.ContactAutocompleteAdapter(2868): Horizontal is android.widget.LinearLayout{40d6abd0 V.E..... ......I. 0,0-0,0} 04-29 18:07:42.185: D/com.example.library.adapter.ContactAutocompleteAdapter(2868): horizontal child android.widget.TextView{40d5d598 V.ED.... ......I. 0,0-0,0 #1020014 android:id/text1} 04-29 18:07:42.355: D/com.example.library.adapter.ContactAutocompleteAdapter(2868): Contact autocomplete adapter : bindView 04-29 18:07:42.365: D/com.example.library.adapter.ContactAutocompleteAdapter(2868): Horizontal is android.widget.LinearLayout{40d6abd0 V.E..... ......I. 0,0-0,0} 04-29 18:07:42.385: D/com.example.library.adapter.ContactAutocompleteAdapter(2868): horizontal child android.widget.TextView{40d5d598 V.ED.... ......I. 0,0-0,0 #1020014 android:id/text1} 04-29 18:07:42.625: D/com.example.library.adapter.ContactAutocompleteAdapter(2868): Contact autocomplete adapter : bindView 04-29 18:07:42.635: D/com.example.library.adapter.ContactAutocompleteAdapter(2868): Horizontal is android.widget.LinearLayout{40d6abd0 V.E..... ......I. 0,0-0,0} 04-29 18:07:42.665: D/com.example.library.adapter.ContactAutocompleteAdapter(2868): horizontal child android.widget.TextView{40d5d598 V.ED.... ......I. 0,0-0,0 #1020014 android:id/text1}
Bartosz KONIECZNY Formulaires

Une question ? Une remarque ?

*

*

Un conseil JavaScript

Comment supprimer un élément du tableau JavaScript ?

PHP a sa méthode unset() pour supprimer un élément du tableau. JavaScript n'est guère plus compliqué. Pour supprimer n'importe quel élément il suffit d'utiliser l'opérateur delete :

delete myArray[key];
On peut également utiliser la méthode pop() qui va automatiquement supprimer le dernier élément de notre Array(). On peut également enlever le premier élément du tableau en utilisant shift().