Commander un Arduino avec une tablette Android

- Etude de cas -


précédentsommairesuivant

X. Introduction au développement d'une application Android

Nous allons introduire quelques concepts d'Android au travers d'une application simple. Créons avec Eclipse un projet Android :

X-A. Les outils de développement

Les outils nécessaires pour développer une application Android sont décrits dans les annexes de [ref2], paragraphe 11.

X-B. Génération du projet

Image non disponible
  • en [1], on crée un projet de type [Android Application Project] ;Image non disponible
  • en [2], on remplit les champs d'identité de l'application ;
  • en [3], on garde les valeurs proposées par défaut sauf pour le champ [Minimum Required SDK] qui fixe la version la plus ancienne d'Android sur laquelle l'application peut être exécutée. On va utiliser des onglets. Ils ne sont supportés qu'à partir de la version 11 ;
  • on valide les valeurs par défaut de l'assistant jusqu'à la dernière page. Là il y a quelque chose à changer : en [4], choisir la navigation par onglets ;

Le projet créé est le suivant :

Image non disponible

X-C. Le manifeste de l'application

Image non disponible

Le fichier [AndroidManifest.xml] [1] fixe les caractéristiques de l'application Android. Son contenu est ici le suivant :

 
CacherSélectionnez
  • ligne 3 : le paquetage du projet Android. Un certain nombre de classes seront automatiquement générées dans ce paquetage [2] ;
  • ligne 8 : la version minimale d'Android pouvant exécuter l'application. Ici la version 11, une version récente est nécessaire pour disposer des onglets, des fragments [Fragment] et d'une activité de type [FragmentActivity] ;
  • ligne 9 : la version maximale d'Android. Mettre la dernière version de cet OS ;
  • ligne 13 : l'icône [3] de l'application ;
  • ligne 14 : le libellé de l'aplication. Il se trouve dans le fichier [strings.xml] [4] :
 
CacherSélectionnez

Le fichier [strings.xml] contient les chaînes de caractères utilisées par l'application.

  • ligne 15 : le style de l'interface visuelle. Elle est définie dans le fichier [styles.xml] [4] :
 
CacherSélectionnez
  • ligne 18 : une balise d'activité. Une application Android peut avoir plusieurs activités ;
  • ligne 17 : le nom complet de la classe de l'activité ;
  • ligne 18 : son libellé ;
  • ligne 20 : l'activité est désignée comme étant l'activité principale ;
  • ligne 22 : et elle doit apparaître dans la liste des applications qu'il est possible de lancer sur l'appareil Android.

X-D. L'activité principale

Image non disponible

La classe générée est la suivante :

 
CacherSélectionnez
  • ligne 4 : la classe [MainActivity] étend la classe [FragmentActivity] et implémente l'interface [TabListener] qui permet de gérer des onglets. Les méthodes de cette interface sont les méthodes des lignes 22, 33 et 37;
  • ligne 7 : la méthode [onCreate] est exécutée lorsque l'activité est créée. C'est avant l'affichage de la vue associée à l'activité ;
  • ligne 8 : la méthode [onCreate] de la classe parente est appelée ;
  • ligne 9 : le fichier [activity_main.xml] [2] est la vue associée à l'activité. La définition XML de cette vue est la suivante :

     
    CacherSélectionnez

    La vue ne contient qu'un unique composant, un conteneur de type [FrameLayout] (ligne 1) nommé [container] (ligne 3).

  • ligne 12 : on récupère la barre d'action de l'activités. C'est elle qui va contenir les onglets ;

  • ligne 13 : le mode de navigation est celui d'onglets qu'on clique ;

  • lignes 16-18 : trois onglets sont construits. Un onglet [Tab] est construit comme suit :

  • actionBar.newTab() : construit un onglet [Tab] et rend sa référence,

  • [Tab].setText(libellé) : fixe un libellé à l'onglet et rend [Tab]. Le libellé est défini dans le fichier [strings.xml] [3] :

     
    CacherSélectionnez
  • [Tab].setTabListener : fixe la classe qui gère les onglets et qui donc implémente l'interface [TabListener], ici this,

  • ligne 22 : la méthode exécutée lorsque l'utilisateur clique sur un onglet. Le 1er paramètre est l'onglet cliqué. Le second paramètre est une transaction qui permet de changer le fragment affiché dans la vue principale [activity_main.xml] ;

  • ligne 25 : on crée un fragment du type [DummySectionFragment] de la ligne 44 ;

  • ligne 26 : on va passer des arguments au fragment dans un type [Bundle] ;

  • ligne 27 : on met dans le bunble, une entrée de clé [section_number] et de valeur le n° de l'onglet plus 1 ;

  • ligne 28 : cet argument est passé au fragment ;

  • ligne 29 : le fragment est placé dans la vue principale [activity_main.xml] à la place du composant nommé [container]. Comme la vue principale n'avait que ce composant, le fragment remplace donc totalement la vue précédente ;

  • ligne 44 : la classe [DummyFragment] étend la classe [Fragment] ;

  • ligne 54 : la méthode exécutée juste avant l'affichage du fragment. Elle doit rendre l'objet [View] affiché par le fragment ;

  • ligne 57 : un objet [TextView] est créé. C'est un composant texte. Son paramètre est l'activité principale obtenue avec getActivity() ;

  • ligne 58 : le composant [TextView] s'affichera centré dans le fragment ;

  • ligne 59 : fixe le texte du composant [TextView]. Ce texte sera le n° de l'onglet qu'on a mis dans les arguments passés au fragment ;

  • ligne 60 : l'objet [TextView] est rendu. Le fragment se limite donc à ce composant.

X-E. Exécution de l'application

Pour exécuter une application Android, il nous faut créer une configuration d'exécution :

Image non disponible
  • en [1], sélectionnez l'icône [Run as...] ;
  • en [2], sélectionnez l'option [Run Configurations...] ;
  • en [3], sélectionnez le type [Android Application] puis l'icône [New launch configuration] ;
  • en [4], indiquez le projet qui sera exécuté par cette configuration ;
  • en [5], donnez un nom à cette configuration. Peut être quelconque ;Image non disponible
  • dans l'onglet [Target] [6], sélectionnez l'option [7]. Elle permet de choisir le mode d'exécution : en mode émulation avec une tablette logicielle ou en mode réel avec une tablette Android ;
  • en [8], validez cette configuration ;
  • en [9], exécutez-la ;Image non disponible
  • en [8], un émulateur de tablette ;
  • en [9], une tablette Android ;
  • sélectionnez l'émulateur de tablette et exécutez l'application ;

L'émulateur logiciel est alors lancé et affiche la vue suivante :

Image non disponible
  • en [1], les trois onglets générés par l'application. L'onglet [SECTION 1] est sélectionné ;
  • il affiche en [2] son composant [TextView] avec le n° de l'onglet. Cliquez sur les différents onglets : le n° affiché doit changer ;

Branchez maintenant une tablette Android sur un port USB du PC serveur et exécutez l'application sur celle-ci :

Image non disponible
  • en [1], sélectionnez la tablette Android et testez l'application.

X-F. Construire une vue

L'exemple précédent construisait avec du code la vue à afficher par le fragment :

 
CacherSélectionnez

Nous allons maintenant construire une vue avec l'éditeur graphique d'Eclipse ADT.

Image non disponible
  • en [1], créez un nouveau projet de type [Android XML Layout File] qui sert à décrire une vue à l'aide d'un fichier XML ;
  • en [2], nommez la vue ;
  • en [3], indiquez la balise racine de la vue. Ici, nous choisissons un conteneur [RelativeLayout]. Dans ce conteneur de composants, ceux-ci sont placés les uns par rapport aux autres : " à droite de ", " à gauche de ", " au-dessous de ", " au-dessus de " ;

Le fichier [vue1.xml] généré [4] est le suivant :

 
CacherSélectionnez
  • ligne 2 : un conteneur [RelativeLayout] vide qui occupera toute la largeur de la tablette (ligne 3) et toute sa hauteur (ligne 4) ;Image non disponible
  • en [1], sélectionnez l'onglet [Graphical Layout] ;
  • en [2], mettez-vous en mode tablette ;
  • en [3], mettez-vous à l'échelle 1 de la tablette ;Image non disponible
  • en [1], prendre un [TextView] et le tirer sur la vue [2] ;
  • en [3], fixer le texte du composant ;Image non disponible
  • en [4], on veut créer une nouvelle chaîne de caractères dans le fichier [strings.xml] ;
  • en [5], le texte de la chaîne de caractères créée ;
  • en [6], l'identifiant de la chaîne de caractères créée ;
  • en [7], l'interface visuelle se met à jour ;Image non disponible
  • en [8], modifier la taille du texte ;
  • en [9], mettre une taille, ici 50 pixels ;
  • en [10], la nouvelle vue ;Image non disponible
  • en [11] et [12], modifier lidentifiant du composant ;

Le fichier [vue1.xml] a évolué comme suit :

 
CacherSélectionnez
  • les modifications faites dans l'interface graphique sont aux lignes 7, 14 et 15. Les autres attributs du [TextView] sont des valeurs par défaut ou bien découlent du positionnement du composant dans la vue ;
  • lignes 8-9 : la taille du composant est celle du texte qu'elle contient (wrap_content) en hauteur et largeur ;
  • lignes 11, 13 : le haut du composant est aligné avec le haut de la vue (ligne 11), 77 pixels dessous (ligne 13) ;
  • lignes 10, 12 : le côté gauche du composant est aligné avec la gauche de la vue (ligne 10), 278 pixels à droite (ligne 12) ;

En général, les tailles exactes des marges gauche, droite, haute et basse seront fixées directement dans le XML.

En procédant de la même façon, créez la vue suivante [1] :

Image non disponible

Les composants sont les suivants :

Id

Type

Rôle

1

textView_titre

TextView

Titre de la vue

2

textView_nom

TextView

un texte

3

editText_Nom

EditText

saisie d'un nom

4

button_valider

Button

pour valider la saisie

5

button_vue2

Button

pour passer à la vue n° 2

Le fichier XML est le suivant :

 
CacherSélectionnez
  • lignes 22, 24 : le composant [textView_nom] est positionné dessous le composant [textView_titre] ;
  • lignes 32, 34 : le composant [editText_Nom] est positionné à droite du composant [textView_nom] à une distance de 87 pixels. Il a un attribut hint ligne 36. Cet attribut est obtenu de la façon suivante :Image non disponible
  • lignes 45-47 : le composant [button_valider] est positionné à droite du composant [editText_Nom] à une distance de 47 pixels ;
  • ligne 54 : le côté gauche du composant [button_vue2] est aligné avec le côté gauche du composant [textView_nom] ;
  • lignes 55-56 : le composant [button_vue2] est positionné à 53 pixels au-dessous du composant [editText_Nom] ;

Tous les textes proviennent du fichier [strings.xml] [6] suivant :

 
CacherSélectionnez

Maintenant, modifions l'activité [MainActivity] pour que cette vue corresponde à l'onglet n° 1 :

 
CacherSélectionnez
  • ligne 5 : on récupère la position de l'onglet cliqué ;
  • lignes 8-11 : si c'est l'onglet n° 0, on crée un fragment de type [vue1Fragment] ;
  • lignes 12-18 : pour les autres onglets ça ne change pas ;

Le fragment [Vue1Fragment] [1] est le suivant :

Image non disponible

Le code de la classe [Vue1Fragment] est le suivant :

 
CacherSélectionnez
  • ligne 9 : le fragment [Vue1Fragment] étend la classe Android [Fragment] ;
  • ligne 12 : la méthode [onCreateView] qui doit rendre une référence sur l'objet [View] à afficher ;
  • ligne 14 : cet objet [View] est la vue définie par le fichier XML [vue1.xml] [2] ;

X-G. Gestion des événements

Gérons maintenant le clic sur le bouton [Validez] de la vue [Vue1] :

Image non disponible

Le code de [MainActivity] évolue comme suit :

 
CacherSélectionnez
  • ligne 2 : la méthode exécutée lorsque l'activité est créée. On l'utilise souvent pour récupérer des références sur les composants de la vue qui va être affichée ;
  • ligne 4 : la méthode du parent est appelée. C'est obligatoire ;
  • ligne 6 : on récupère l'activité qui affiche les fragments ;
  • ligne 8 : on récupère la référence du composant d'id [editText_Nom] ;
  • ligne 9 : on récupère la référence du composant d'id [button_valider] ;
  • ligne 10 : on récupère la référence du composant d'id [button_vue2] ;
  • lignes 12-17 : on définit un gestionnaire pour l'événement clic sur le bouton [Valider] ;
  • ligne 34 : la méthode qui gère ce clic ;
  • ligne 36 : affiche le nom saisi :
  • Toast.makeText(...).show() : affiche un texte à l'écran,
  • le 1er paramètre de makeText est l'activité du fragment,
  • le second paramètre est le texte à afficher dans la boîte qui va être affichée par makeText,
  • le troisième paramètre est la durée de vie de la boîte affichée : Toast.LENGTH_LONG ou Toast.LENGTH_SHORT ;

Le clic sur le bouton [Vue numéro 2] pourrait être géré comme suit :

 
CacherSélectionnez
  • ligne 2 : le but est de sélectionner l'onglet n° 2 ce qui déclenchera l'exécution de la méthode [onTabSelected] de l'activité [MainActivity] ;

X-H. Conclusion

Nous en savons assez sur la façon de construire un projet Android. Nous pouvons revenir au TP.


précédentsommairesuivant

Vous avez aimé ce tutoriel ? Alors partagez-le en cliquant sur les boutons suivants : Viadeo Twitter Facebook Share on Google+   

  

Les sources présentées sur cette page sont libres de droits et vous pouvez les utiliser à votre convenance. Par contre, la page de présentation constitue une œuvre intellectuelle protégée par les droits d'auteur. Copyright © 2013 Serge Tahé. Aucune reproduction, même partielle, ne peut être faite de ce site ni de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.