Android : Hello world ! - Feuilleton de l'été 2009 épisode 2

Suite de notre série de l’été consacrée à Android. Après la présentation générale de cet OS pour mobile et la description de ses principaux concepts (Activity, Intent, notion de composant, etc.), voici comment écrire un Hello World grâce au plugin Eclipse et au SDK Android. Ce petit programme nous permettra de faire le tour des principaux aspects du développement sous Android.

Voir également : Introduction à Android – Feuilleton de l’été 2009 épisode 1

Développer sous Eclipse avec ADT (Android Development Tool)

Le plugin ADT pour Eclipse vous permet de créer et de déboguer facilement et rapidement les applications.

Il vous fournit un nouveau gestionnaire de projet, qui vous aide à initialiser tous les fichiers de base dont vous avez besoin pour une nouvelle application Android.
Il vous fournit un éditeur Android qui vous aide à écrire des fichiers XML valide pour Android.
Il vous permet aussi d’exporter votre projet dans un fichier APK signé. Il est important de noter que pour être installé sur un système Android, tout package APK doit être préalablement signé.

Nous supposons à présent que vous avez Eclipse installé. Si tel n’est pas le cas, rendez-vous sur www.eclipse.org pour les instructions de téléchargement et d’installation de l’IDE Eclipse. Les instructions que nous donnons dans la suite concernent Eclipse 3.4 (Ganymede).

Préparation de l’installation

Android requiert une version 5 ou supérieure du JDK.

Après avoir télécharger le SDK d’Android, extrayez l’archive dans un répertoire de votre choix. Notons Rep_Android ce répertoire. Nous en aurons besoin lors de l’installation du plugin. Vous pouvez télécharger le SDK sur http://developer.android.com/sdk/.

Installation du plugin

Le processus d’installation du plugin est le suivant :

Démarrez Eclipse, sélectionnez Help/Software Updates…
Dans la boite de dialogue qui apparaît, cliquez l’onglet Available Software, puis sur Add site…
Entrez l’URL : https://dl-ssl.google.com/android/eclipse/
Cliquez sur OK.
De retour dans la vue Available Sofware, vous verrez le plugin listé par son URL, avec «Developer Tools » en dessous. Sélectionnez la case à cocher à côté de Developer Tools et cliquez sur Install…
Dans l’écran d’installation suivant, « Android DDMS » et « Android Development Tools » doivent être tous cochés. Cliquez sur suivant.
Lisez et acceptez le contrat de licence, puis cliquez sur Finish.
Redémarrer Eclipse.

Modifiez à présent vos préférences pour pointer sur le répertoire d’installation du SDK d’Android, le répertoire Rep_Android. Pour cela suivez les étapes suivantes :

Sélectionnez Windows > Preferences… (Mac: Eclipse > Preferences).
Sélectionnez Android depuis le panel de gauche.
Pour l’entrée SDK Location du panel principal, cliquez sur Browse… et localiser le répertoire du SDK
Cliquez sur Apply, puis Ok.

Bien ! Si vous n’avez rencontré aucun problème, alors votre environnement est prêt pour le développement d’applications Android.

Mise en place de l’émulateur Android

Au cours de ce tutoriel, vous lancerez l’application dans l’émulateur d’Android. Afin de démarrer l’émulateur, vous devez créer un équipement virtuel Android (AVD – Android Virtual Device). L’AVD définit une image du système Android et les paramètres de l’équipement utilisé par l’émulateur.
Pour créer un AVD, utilisez l’outil « Android » fourni dans le SDK d’Android. Ouvrez l’invite de commande (ou un terminal), déplacez vous dans le répertoire tools/ du dossier contenant le SDK (Rep_Android) et exécutez la commande suivante (substituez à oxiane_avd le nom qui vous convient) :
android create avd –target 2 –name oxiane_avd

L’outil vous demande si vous souhaitez créer un profil matériel personnalisé. Appuyez sur la touche Entrée de votre clavier pour sauter cette étape (la réponse par défaut est « Non »). L’outil va alors configurer un AVD nommé oxiane_avd qui utilise la plateforme Android 1.5.

Maintenant que notre équipement virtuel est disponible, nous pouvons procéder à la création de notre projet. Nous entrons là dans la phase concrète du développement de notre application. Respirez un bon coup! C’est fait ? Très bien, rassurez vous avec Eclipse développer les applications Android est simple.

Créer un projet Android

Suivez les instructions suivantes pour créer votre nouveau projet Android.

Depuis Eclipse, sélectionnez File > New > Project. Si le plugin ADT pour Eclipse a été installé avec succès, la boîte de dialogue résultante doit avoir une entrée « Android » qui présente l’entrée « Android Project ».
Sélectionnez « Android Project » et cliquez sur Next.
Renseigner les valeurs suivantes pour le projet
- Project name : CatalogueOxiane. Il s’agit du nom du projet Eclipse – le nom du répertoire qui hébergera les fichiers du projet.
- Application name: Catalogue Oxiane. Il s’agit du titre de l’application – le nom qui apparaîtra sur l’équipement Android
- Package name: com.oxiane.catalogueoxiane. Il s’agit ici de l’espace de nom du package que nous souhaitons utiliser pour nos fichiers sources. Ce paramètre définit aussi le nom du package sous lequel l’activité squelette sera générée.
- CreateActivity: CatalogueOxiane. Ceci est le nom de la classe qui sera généré par le plugin. Cette classe héritera de la classe Activity d’Android. Comme la liste à cocher l’indique, créer une activité à la création du projet est facultative. Cependant, une activité est presque toujours à la base d’une application Android.
- Min SDK Version: 2. Cette valeur spécifie le niveau de l’API minimum requis par notre application. Nous rentrons la valeur 2 afin de cibler les équipements Android 1.1. Si une application requiert un niveau de l’API qui est supérieur au niveau supporter par le téléphone Android, alors l’application ne sera pas installée.
Le fait que nous ayons choisi la cible Android 1.1 signifie que notre application sera compilée avec la librairie de la plateforme Android 1.1. Rappelez vous que l’AVD créée plus tôt tourne sur la plateforme Android 1.5. Les applications Android sont forward-compatible, i.e. une application développée pour une version spécifique du système, fonctionnera aussi sur une version future, par contre l’inverse n’est pas vrai.
Cliquez sur Finish

Votre projet Android est prêt. Il doit être visible dans l’explorateur de packages (Package Explorer) à gauche. Ouvrez le fichier CatalogueOxiane.java, localisé sous CatalogueOxiane > src > com.example.CatalogueOxiane. Ce fichier ressemble à ceci :

[listing 1]


package com.example.catalogueoxiane ;

import android.app.Activity;
import android.os.Bundle; 

public class CatalogueOxiane extends Activity {

    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
    }
}

Remarquez que cette classe hérite de la classe Activity. La méthode onCreate() sera appelée par le système Android au démarrage de l’activité – c’est l’endroit où vous devriez faire toutes les initialisations, ainsi que le lancement de l’interface utilisateur.

A présent modifions ce code.

Construire l’interface utilisateur

Inspectez le code modifié en listing 2 et appliquez les mêmes changements à votre classe CatalogueOxiane. Les lignes en gras sont celles qui ont été ajoutées.

[listing2]


package com.example.catalogueoxiane ; 

import android.app.Activity;
import android.os.Bundle;
import android.widget.TextView; 

public class CatalogueOxiane extends Activity {

    /** Called when the activity is first created. */
   @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        TextView tv = new TextView(this);
        tv.setText("Oxiane, Bonjour");
        setContentView(tv);
    }
}

Une interface utilisateur Android est composée d’hiérarchies d’objets appélés vues (View). Une vue est un objet drawable (i.e. affichable à l’écran) utilisée comme un élément de votre interface, tel que les boutons, les images, ou un label de texte (comme dans notre exemple – TextView). Chacun de ces objets est une classe fille de la classe View. La sous/classe qui se charge des textes est TextView.

Dans le [listing 2] vous avez créé un TextView à l’aide du constructeur de la classe, qui accepte un contexte Android en paramètre.

Ensuite vous fixez le texte en appelant la méthode setText(CharSequence).

Finalement, vous passez la vue TextView à la méthode setContentView() afin de l’afficher comme interface de l’activité en cours de création. Si votre activité n’avait pas appelé cette méthode, alors aucune interface ne serait présente et le système afficherait un écran vide.

Nous y sommes – notre première application android est prête. Il ne nous reste plus qu’à l’exécuter.

Exécutons l’application

Le plugin ADT pour Eclipse simplifie l’exécution d’applications Android. Vous n’avez que deux étapes à accomplir

Sélectionner Run > Run (ou ctrl + F11)
Sélectionner “Android Application”

L’émulateur Android va se lancer automatiquement et votre application apparaîtra après un court moment. Vous verrez alors un écran comme celui-ci :

Le texte “Catalogue Oxiane ” que vous voyez dans la barre grise est le titre de l’application. Le plugin Eclipse l’a créé automatiquement. Cette chaîne de caractère est dans le fichier res/values/string.xml (Catalogue Oxiane) et est référencée par votre fichier AndroidManifest.xml ().

Le texte sous le titre est celui que vous avez créé dans l’objet TextView.

Dans l’exemple introductif que nous venons de voir, nous avons construit l’interface de l’application directement depuis le code source. L’expérience de la programmation des interfaces montre combien une telle approche est fragile : un petit changement au niveau de la disposition des calques (composants d’interface — layout) peut entraîner de véritables casse-tête au niveau du source. Il est aussi facile d’oublier de connecter correctement les différentes vues, ce qui peut entraîner des erreurs et des pertes de temps dues au débogage.

C’est pourquoi Android fournit un model alternatif de construction d’interface : fichiers calque au format XML (XML-based layout files). Voici un exemple de fichier de définition d’interface identique en terme de comportement à l’écran que nous avons programmé précédemment.

La structure générale d’un fichier d’interface Android est simple: c’est un arbre d’éléments XML dans lequel chaque nœud est le nom d’une classe qui hérite de la classe View. Cette structure permet de créer rapidement les UIs (UI – User Interface). Ce modèle est inspiré par le modèle de développement web, où vous pouvez séparer la présentation du métier.

L’exemple XML ci-dessus contient uniquement un élément View : l’élément TextView qui comprend les quatre attributs suivants :

xmlns :android. Il s’agit de la déclaration d’espace de noms qui informe les outils Android que vous vous apprêtez à faire référence à des attributs définis dans l’espace de noms Android. La balise racine de tout fichier de layout Android doit avoir cet attribut.
android:layout_width. Cet attribut définit la proportion de l’écran que cette vue doit consommer. Dans ce cas c’est la seule vue, par conséquent nous souhaitons qu’elle occupe tout l’écran. C’est la signification de la valeur «fill_parent » qui lui est associée.
android :layout_height. Similaire à android :layout_width, sauf qu’il fait référence à la hauteur de l’écran.
android :text. Cet attribut fixe le texte que la vue (TextView) doit afficher. Dans cet exemple nous optons pour l’utilisation d’une ressource de type texte plutôt que de coder le texte en « dur ». La chaine « hello » est définie dans le fichier res/values/strings.xml et prend la valeur « Oxiane, Bonjour » (<string name= »hello »>Oxiane, Bonjour</string>).Le fichier layout doit être stocké sous le répertoire res/layout/ du projet. Le mot « res » est un diminutif pour « resources » et ce répertoire contient toutes les ressources non codées dont l’application a besoin. En complément des fichiers de layout, les ressources incluent aussi les images, les sons, et les textes.

Le plugin Eclipse a automatiquement crée un fichier layout pour notre application : main.xml. Cependant, nous avons ignoré ce fichier et codé en « dur » notre interface. Notez que nous devons presque toujours définir nos interfaces en XML, plutôt que par code. La procédure suivante nous montre comment modifier notre application et utiliser le fichier de layout.

Ouvrez le fichier main.xml du dossier /res/layout de l’application. Remplacer son contenu par le contenu xml suivant :
Enregistrer le fichier !
2. Ouvrez à présent le fichier strings.xml du même dossier. Modifier le pour avoir le résultat suivant :
```
    Oxiane, Bonjour
    Catalogue, Oxiane
```

A présent ouvrez et modifiez la classe CatalogueOxiane afin d’utiliser le fichier de layout main.xml. Editez le code source de sorte à obtenir ceci :



public class CatalogueOxiane extends Activity {   

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
    }
}

Au lieu de passer à la méthode setContentView() un objet View, nous lui avons passé la référence à une ressource layout. La ressource est identifiée comme R.layout.main. C’est une représentation objet du layout défini dans /res/layout/main.xml. Le plugin Eclipse a automatiquement créé cette référence dans la classe R.java du projet.

Relancer l’application, vous obtenez le même résultat à l’écran. C’est ce que nous voulions, non ? Montrer que les deux approches produisent les résultats identiques.

A propos de la classe R.java

Un fichier de projet R.java est un index pour toutes les ressources définies dans le fichier. L’on utilise cette classe dans le code source comme raccourci vers les ressources incluses dans le projet.

Récapitulons

Nous avons décrit ce que s’est que le framework Android. Nous avons passer en revue ses différents composants et préciser le modèle de communication de ces composants. Il est connu que le meilleur moyen d’apprendre un langage (ou un framework) est de pratiquer. C’est dans cet esprit que nous avons développé notre première application « Oxiane, Bonjour ». Nous allons poursuivre notre voyage Android en complétant notre code afin de récupérer le fichier de catalogue Oxiane et de le présenter à l’utilisateur.

Auteur : Majirus Fansi

Voir également

Retrouvez l’ensemble des épisodes de notre tutoriel Android, le feuiileton de l’été: