E-vidence

Lors du dernier tutoriel nous avons vu quel chemin faisait un « Hello World » avec Android. Aujourd’hui, nous allons faire un pas de plus en détaillant les bases de la construction d’une véritable application avec une interface graphique et des vrais morceaux de code Java dedans.

Ce que vous allez apprendre :

• Comment décrire une interface graphique simple à l’aide des fichiers XML.
• Ce qu’est une « Activité » et les éléments de départ pour s’en servir.
• Comment organiser ces deux éléments pour qu’ils travaillent ensembles, et notamment l’usage de la classe « R ».

Les pré requis :

• Avoir fait le tuto précédent.
• Comprendre en Java les notions de membres statiques et d’inner class.
• Avoir déjà mis les mains dans un fichier XML est un plus.

Temps nécessaire : 1h30.

Le projet

Nous allons créer une application toute simple qui possède un champ texte avec une invite « Entrez ici votre nom » et un bouton OK . Si on clique sur OK, un dialogue affiche « Hello, xxx »; où xxx est votre nom, saisi dans la boîte de dialogue.

Un projet très simple donc, mais qui va nous permettre de mettre en avant plusieurs concepts clés d’Android. À la fin de l’article, vous aurez enfin une vision claire de ce qu’est un programme sous cette plateforme.

Décrire l’interface graphique à l’aide de XML

Il y a deux manières de créer des IHM sous Android :

• Directement en Java, comme on pourrait le faire avec SWING ou AWT (qui bien sûr, ne sont pas disponibles dans notre cas). Cette méthode utilise les classes du SDK d’Android au fil du code, et permet de faire des réglages très évolués.
• En XML, à l’image d’un code HTML. On décrit l’interface dans un format spécial, et Android le converti automatiquement pour vous en objets Java. Ces objets sont ensuite disponibles comme n’importe quels autre dans votre code. Cette manière de faire est beaucoup plus souple, elle sépare bien la présentation du comportement et vous autorise à modifier beaucoup plus facilement et rapidement l’apparence du programme sans avoir peur de tout casser. De plus pour l’internationalisation, les XML permettent des facilités, notamment dans la traduction des chaînes de caractère. C’est donc avec les XML que nous travaillerons majoritairement pour l’IHM.

Reprenez notre précédent « Hello, Word ». Nous avions constaté que le projet contient un dossier « res ». Il renferme toutes les ressources de votre projet, notamment les images et les XML de configuration. Le sous-dossier qui nous intéresse particulièrement est « layout ». Il rassemble toutes les descriptions d’interface que l’on peut faire sous forme de XML. Elles doivent toutes être ici, Android ne les reconnaitrait pas ailleurs.

Pour le moment le dossier ne contient qu’un fichier « main.xml ». Le nom n’a pas d’importance, mais par convention l’interface principale s’appelle ainsi. On peut y voir l’écran suivant :

Eclipse contient en effet un éditeur WYSIWYG pour les IHM, mais nous n’allons pas l’utiliser car il vous faut comprendre le fonctionnement des fichiers de configuration avant d’utiliser de tels outils. En bas à gauche (flèche rouge) se trouve des onglets, le plus à droite permettant d’accéder directement au code XML. Vous pouvez y lire :

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    >
<TextView  
    android:layout_width="fill_parent" 
    android:layout_height="wrap_content" 
    android:text="@string/hello"
    />
</LinearLayout>

La première ligne est l’en-tête XML standard et doit être présente, inchangée; au début de les fichiers pour qu’ils soient valides. Vous noterez au passage que tout est encodé en UTF-8. Si n’avez aucune idée de ce qu’est UTF-8, Unicode ou un encodage en général, vous pouvez ignorer cette donnée car vous n’avez rien à faire pour que ça marche. Rappelez vous seulement de ne pas modifier ces fichiers en dehors d’Eclipse. Si vous êtes curieux, lisez la meilleure introduction aux encodages qui existe en français.

Les lignes suivantes décrivent des imbrications de vues. Une vue est un objet java qui permet soit de créer un objet graphique (boutons, horloge, zone de saisir, etc), soit d’organiser ce objets à l’écran.

Les vues, composant de base d’une interface Android

Initialement, votre application Android tient dans la zone que j’ai entouré d’un carré rouge :

Dans cette zone, on commence par décrire des vues de mise en page, les Layout, qui définissent où et dans quel sens les objets sont disposés. Ensuite, on rempli ces Layouts avec les objets dont on a besoin. Dans le XML, il doit y avoir un seul Layout à la racine. Il peut en contenir autant qu’il veut, mais il doit être le seul après l’en-tête du XML. Graphiquement, on peut donc représenter une interface Android comme une suite de vues imbriquées :

C’est ce que fait le LineraLayout. Ici, il englobe tout le reste :

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    >
 
<!-- Ici on peut mettre une infinité de vues -->
 
</LinearLayout>

En résumé, on décrit une vue ainsi :

<NomDeLavue>
	<VueEnfant1>
      </VueEnfant>
	<VueEnfant2>
      </VueEnfant2>
</NomDeLavue>

Ou, si il n’y a pas d’enfant, en suivant la syntaxe XML courte :

<NomDeLavue />

Ensuite on rajoute des paramètres à la vue à l’aide des attributs XML, en préfixant chaque attribut par

<NomDeLavue
android:attribut1="valeur1"
android:attribut2="valeur2"
/>

Tout cela suit les conventions du format XML, donc les espaces sont séparateurs, les noms sont sensibles à la casse, le retour à la ligne compte comme un espace, etc.

Plus tard dans le code Java, vous aurez accès à tous les attributs de l’objet que vous avez décrit ici, avec les valeurs que vous avez donné ou celles par défaut si vous n’avez rien modifié.

Pourquoi préfixe-t-on par « android » ? C’est une question d’organisation par namespace. Si le terme ne vous est pas familier, vous pouvez prendre la réponse longue et lire un tuto sur le sujet, ou la réponse courte :

Ce préfixe est obligatoire. De plus, pour pouvoir l’utiliser, il faut que le premier attribut de la première balise XML contienne la définition suivant :

xmlns:android="http://schemas.android.com/apk/res/android"

D’où le fameux :

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:orientation="vertical"
              android:layout_width="fill_parent"
              android:layout_height="fill_parent"
>

On y coupe pas, c’est obligatoire, l’oublier c’est tout faire planter.

Mise en page de base : le LinearLayout

LineraLayout est une vue qui se comporte comme un cadre invisible contenant les autres vues, et les dispose en ligne, d’où le « linear ». Voyons cela plus en détails :

<LinearLayout 
 
    <!-- on commence par la déclaration de l'espace de nommage , à ne faire qu'une fois en tout début de balisage -->
 
    xmlns:android="http://schemas.android.com/apk/res/android"
 
<!-- on déclare si le cadre mettra ce qu'il contient sur la même ligne (horizontal) ou sur la même colonne (vertical) -->
 
    android:orientation="vertical"
 
<!-- on choisit comment le cadre occupe l'espace (plus de détails dans le prochain tuto -->
 
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
>

Le LinearLayout peut contenir autant de vues que vous le souhaitez, y compris d’autres LinearLayout. Graphiquement, voilà ce qu’il fait :

Les vues utilitaires : texte, saisie, bouton…

Une interface ne sert pas à grand chose si il n’y a pas d’interaction, et pour cela il nous faut de quoi cliquer ou écrire. Les objets qui permettent cela sont aussi des vues, décrites en XML.

Vous en avez déjà croisé une, la TextView, dont le rôle est d’afficher du texte :

<TextView  
    android:layout_width="fill_parent" 
    android:layout_height="wrap_content" 
    android:text="@string/hello"
/>

C’est une vue que nous allons garder puisqu’il nous faut une invite. Le contenu du texte sera juste changé de :

android:text="@string/hello"

à

android:text="Entrez votre nom :"

L’attribut « text » contient en effet la valeur du texte de la TextView. Elle peut aussi contenir une référence, ce que nous verrons dans le prochain tuto. Nous verrons également les autres attributs intéressant qu’on peut définir pour cette vue. Pour le moment, essayons d’avoir un programme qui marche.

Il faut ensuite rajouter une zone de saisie, qui sera une autre vue de type EditText :

<EditText android:layout_width="fill_parent"
          android:layout_height="wrap_content"
/>

Il suffit de le mettre à la suite de la TextView, le LinearLayout les fera s’afficher les uns à la suite des autres.

Et enfin ajouter le bouton OK :

<Button android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="OK"
/>

Ici encore, c’est «  android:text » qui contient le texte affiché par le bouton.

Au final votre XML doit maintenant ressembler à ceci (avec l’indentation qui va bien pour le rendre propre et lisible) :

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:orientation="vertical"
              android:layout_width="fill_parent"
              android:layout_height="fill_parent"
>
 
	<TextView  android:layout_width="fill_parent" 
	           android:layout_height="wrap_content" 
	           android:text="Entrez votre nom :"
	/>
 
	<EditText android:layout_width="fill_parent"
	          android:layout_height="wrap_content"
	/>
 
	<Button android:layout_width="fill_parent"
	        android:layout_height="wrap_content"
	        android:text="OK"
	/>
 
</LinearLayout>

A l’exécution, on obtient ceci :

Votre interface est terminée ! On peut déjà entrer du texte, appuyer sur le bouton, etc. Mais évidement il ne se passe rien. Il faut rajouter de l’interactivité, et cela va se faire en Java.

Votre première activité Android

Le code Java de toute votre application Android se trouve dans le dossier « src », organisé par package comme il est classique de le faire avec ce langage. Pour le moment, nous n’avons qu’une seule classe, « HelloWorld.java », qui se borne à appeler la vue que nous venons de définir. Regardons le code de plus près :

// mise en package Java classique
// si cela vous est inconnu, il faudra d'abord commencer par apprendre un peu de Java puis
// revenir au tuto
package world.hello; 
 
// les imports minimum de tout programme Android : une Activity pour 
// pour démarrer, et un Bundle pour charger l'Activity
import android.app.Activity;
import android.os.Bundle;
 
// la brique de base de tout programme Android : une Activité
public class HelloWorld extends Activity {
 
   // équivalent d'un void main pour Android, que l'on va détailler plus bas
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
    }
 
}

Mais qu’est-ce qu’une Activity ? C’est un concept qui généralement perd un peu les débutants car il est flou. Une Activity c’est à la fois tout, et ça ne fait pas grand chose. Il s’agit du socle de tout code pour Android. Un programme doit avoir au moins une Activity, mais peut en faire tourner plusieurs. C’est une classe qui contient simplement le code gérant le comportement de votre application : qui fait quoi et quand.

Mais alors, pourquoi ne pas avoir choisit une classe normale avec un « void main » classique ? Et bien c’est que l’Activity gère beaucoup de choses automatiquement pour vous, comme l’accès aux ressources, la mise en pause ou en veille d’une application (ce qui arrive tout le temps sur un téléphone), etc. Bref, quand vous voulez coder quelque chose sur Android, ça se fait dans une Activity.

Les activités ont un cycle de vie, gérer par le système automatiquement, et vous n’avez aucun contrôle dessus. Elle peut être lancée à tout moment, mise en pause à tout moment, détruite à tout moment. Nous apprendrons à prendre en compte cela plus tard. Pour le moment, sachez que quand une activité démarre, sa méthode « onCreate » est automatiquement appelée, et que c’est donc là qu’on va mettre notre code, comme si c’était un « void main »

A la découverte de onCreate()

onCreate est la méthode de base d’Activity, ce qui dans son plus simple appareil, donne ceci :

// la brique de base de tout programme Android : une Activité
public class HelloWorld extends Activity {
 
   // équivalent d'un void main pour Android, que l'on va détailler plus bas
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
    }
 
}

Tout le code est assez évidant pour qui a fait du Java, à part la dernière ligne. « setContentView » est une méthode qui permet de dire à l’activité quelle vue on souhaite afficher, parmi celles que l’on a définit dans le XML. Pourtant ici il n’est fait nul part mention de XML, mais vous pouvez lire « main », cela devrait vous mettre la puce à l’oreille. Pour avoir accès au contenu du dossier « res », donc à toutes les ressource (images, XML, etc), Android fournit une facilité : la classe « R ».

Découvrez la classe « R »

Je vous avait dit que dans le dossier « gen » se trouvait les fichiers créés automatiquement par Eclipse et son plugin ADT. On peut y voir le fichier R.java contenant la classe éponyme qui est entièrement statique. Chaque personne a un fichier différent, le mien ressemble à :

package world.hello;
 
public final class R {
    public static final class attr {
    }
    public static final class drawable {
        public static final int icon=0x7f020000;
    }
    public static final class layout {
        public static final int main=0x7f030000;
    }
    public static final class string {
        public static final int app_name=0x7f040001;
        public static final int hello=0x7f040000;
    }
}

« R » n’est qu’une grosse boîte, un conteneur qui référence toutes les ressources de manière statique. Quand vous avez besoin de mentionner une image ou un code XML dans le code Java, vous pouvez utiliser « R » qui, grâce à Eclipse, est toujours à jour et contient toujours les références vers vos derniers ajouts.

Ne modifiez jamais cette classe. Vous l’utilisez en revanche très souvent, avec la syntaxe suivante :

R.type_de_ressource.nom_de_la_ressource

Sachant que le type de ressource est généralement le nom du dossier contenant la ressource, cela donne ceci pour le fichier main.xml situé dans le dossier layout :

R.layout.main

Sans le « .xml » à la fin. On ne mentionne pas l’extension.

Affichons du texte

Android fournit mille moyens d’afficher du texte. Le plus simple est d’utiliser un Toast, une classe qui créé une petit Pop Up affichant un message et disparaissant. Ajoutez après « setContentView » :

// le toast attend comme premier paramètre un contexte, l'activité courante
 
Toast my_message = Toast.makeText(this,  // contexte
		   			           "Hello", // le message a faire apparaitre
               			                   1); // le temps d'apparition du message
 
my_message.show(); // on affiche le toast immédiatement

Pas besoin de définir l’apparence d’un Toast, tout est automatique si on l’utilise sans plus de paramètres.

Tout au début du fichier, vous devrez rajouter l’import suivant :

import android.widget.Toast;

Un raccourci INDISPENSABLE sous Eclipse : Ctrl + Shirt + O (la lettre, pas le zéro). Eclipse résoudra alors tous les imports automatiquement pour vous. En clair, vous pouvez tapez tous les codes que je vous donne sans les imports, puis utilisez ce raccourcis pour voir toutes les erreurs de dépendance signalées en rouge disparaître comme par magie.

Relancez, vous devriez voir une fenêtre surgissant pour vous saluer :

Attachement d’un événement à un bouton

L’intérêt de déclencher un Toast au démarrage est limité, nous voulons qu’il ne se déclenche que lorsque l’on appui sur le bouton « OK ». Pour ce faire, nous allons utiliser la programmation par événement, c’est à dire que l’événement « appuyer sur le bouton » va déclencher l’exécution du code « afficher le Toast ».

Les événements se gèrent en utilisant des Listener, ce sont des classes qui surveillent l’activité d’un élément et déclenche une réponse dès qu’un événement survient. Pour les mordus des design pattern, il s’agit qu’une variante du pattern Observer. Le Listenerr fait le pont entre un élément activateur, un événement sur cet élément et l’action à déclencher si cet événement survient. Un petit dessin valant mieux qu’un long discours :

Dans notre cas, on souhaite écouter le clic d’un bouton, on va donc utiliser OnClickListerner. D’abord, importer le package correspondant :

import android.view.View;
import android.view.View.OnClickListener;

Ou Ctrl + Shift + O

On créé écrit ensuite le Listener autour de notre Toast :

// OnClickListerner est une inner class
 
OnClickListener my_listener = new OnClickListener() {
 
     //  onClick() sera appelée au déclenchement de l'événement
 
     public void onClick(View v) {
 
          // on met donc ici tout ce qu'on veut qui doit survenir
	  // au clic, ici notre Toast
 
          Toast my_message = Toast.makeText(HelloWorld.this,  
		     		            "Hello", 
		                            1); 
	  my_message.show(); 
	}
};

Notez que l’on a remplacé « Toast.makeText(this » par « Toast.makeText(HelloWorld.this ». En effet, le Toast est maintenant dans l’inner class OnClikListener, et « this » pointe alors sur le Listener. Cette syntaxe étrange est le seul moyen de faire référence à la classe supérieure, HelloWorld, qui est notre activité et le contexte donc le Toast à besoin en premier paramètre.

Pour la touche finale, il faut dire à notre Listener sur quel bouton écouter. Mais comment récupérer le bouton ? C’est là qu’un nouvel attribut XML entre en jeu : l’ID.

On peut donner un petit nom à chaque vue dans le XML, un identifiant unique grâce à la propriété « id ». Sa syntaxe est la suivante :

android:id="@+id/identifiant_de_votre_choix"

« @+id/ » est obligatoire, c’est un opérateur que nous détaillerons une autre fois.

Changer votre code XML pour le bouton en :

<Button android:layout_width="fill_parent"
	    android:layout_height="wrap_content"
	    android:text="OK"
	    android:id="@+id/my_button"
/>

Maintenant on peut récupérer l’objet bouton à l’aide de cet ID et de la méthode « findViewById » disponible dans toute Activity.

Un petit import :

import android.widget.Button;

Puis en fin de code :

Button my_button = (Button) findViewById(R.id.my_button);

Deux points à noter ici :

Le cast de la vue récupérée en « Button ». Par defaut findViewById retourne un objet vue générique.
L’utilisation de notre fameuse classe « R ». Mais cette fois comme on utilise un ID, on ne fait pas « R.layout » mais « R.id », suivi de l’identifiant.

Il ne reste qu’à lier le Listener au bouton :

my_button.setOnClickListener(my_listener);

Votre code complet doit maintenant ressembler à cela :

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.Toast;
 
public class HelloWorld extends Activity {
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
 
        OnClickListener my_listener = new OnClickListener() {
			public void onClick(View v) {
				Toast my_message = Toast.makeText(HelloWorld.this,  
						 			     		  "Hello", 
						     			           1); 
				my_message.show(); 
			}
	   };
 
	   Button my_button = (Button) findViewById(R.id.my_button);
	   my_button.setOnClickListener(my_listener);
    }
}

En cliquant sur « OK », le téléphone vous dit bonjour ! Cela fonctionne autant de fois que vous le voulez, évidement.

Dernier raffinement, récupérer la valeur du champ de saisie. Pour que le téléphone vous appelle par votre prénom.

Pour cela, on procède de la même manière que précédemment en ajoutant un ID à la vue EditText :

<EditText android:layout_width="fill_parent"
	          android:layout_height="wrap_content"
	          android:id="@+id/my_edit_text"
/>

Puis :

import android.widget.EditText;

Et enfin on récupère la vue avec findViewById dans le code événementiel du Listener, on en extrait la chaine et on la glisse dans le Toast :

// récupération de la vue
 
EditText my_edit_view = (EditText) findViewById(R.id.my_edit_text);
 
// récupération de son contenu textuel
// getText retourne un Editable, on utilise toString 
// pour obtenir la chaine directement
 
String my_name = my_edit_view.getText().toString();
 
Toast my_message = Toast.makeText(HelloWorld.this,
                                  "Hello, "+ my_name, // on concatène le nom
			                1); 
my_message.show();

Le programme est maintenant complet, vous pouvez savourer un bien bel écran :

Et en conclusion, le code complet :

Java :

package world.hello;
 
import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.EditText;
import android.widget.Toast;
 
public class HelloWorld extends Activity {
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
 
        OnClickListener my_listener = new OnClickListener() {
			public void onClick(View v) {
 
		            EditText my_edit_view = (EditText) findViewById(R.id.my_edit_text);
				String my_name = my_edit_view.getText().toString();
 
				Toast my_message = Toast.makeText(HelloWorld.this,  
						 			     		  "Hello, "+ my_name, 
						     			           1); 
				my_message.show(); 
			}
		};
 
		Button my_button = (Button) findViewById(R.id.my_button);
		my_button.setOnClickListener(my_listener);
    }
}

Et XML :

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    >
 
	<TextView  
	    android:layout_width="fill_parent" 
	    android:layout_height="wrap_content" 
	    android:text="Entrez votre nom :"
	/>
 
	<EditText android:layout_width="fill_parent"
	          android:layout_height="wrap_content"
	          android:id="@+id/my_edit_text"
	/>
 
	<Button android:layout_width="fill_parent"
	        android:layout_height="wrap_content"
	        android:text="OK"
	        android:id="@+id/my_button"
	/>
 
</LinearLayout>

La suite ?

Pfiouuuuu, voilà un article bien épais, avec beaucoup de notions nouvelles, pour un résultat encore très simple. On avance par petits pas, mais déjà vous devez commencez à sentir le potentiel de la plateforme.

Maintenant que nous avons vu les bases, nous allons raffiner un peu l’application en ajoutant des vérifications (la zone de saisie est-elle pleine ?), une gestion des événements plus propre, un peu de travail sur le graphisme, etc. Reposez votre cerveau pendant que je repose mes doigts, et à la prochaine.

Cet article a été publié le 27/07/2009 à 14:17 et classé dans la catégorie Android. Les commentaires sont actuellement fermés, mais vous pouvez effectuer un trackback depuis votre propre site.