Introduction au widgets de l'IDE Eclipse pour le développement d'application Android. Ici vous trouverez quelques notions pour mieux comprendre les TextView, EditText, Button. Et un petit TP pour vous mettre dans l'ambiance de la programmation mobile

1. Les Widgets
(Partie 1)
Préparé par: ING. David Joseph

2. Plan
EditText
TextView
Button
Calculus
TP

3. EditText
 Les EditText sont des widgets qui permettent aux
utilisateurs de d’attribuer ou modifier la valeur
d’une variable. Pour créer un EditText en mode
XML :
<EditText android:layout_width=« »
android:layout_height=« »
android:id=«@+id/edittext » >
</EditText>

4. TextView
 Les TextView sont des etiquettes qui permettent
l’affichage d’un text, le résultat d’un processus
ou autre. Pour créer un TextView en mode XML:
<TextView android:text=« »
android:id=«@+id/textview »
android:layout_width=« »
android:layout_height=« » >
</TextView>

5. Button
 Les Button sont des widgets qui permettent
l’exécution d’une action prédéfinie, le
déclenchement d’un processus ou autre. Pour
créer un Button en mode XML:
<Button android:id=«@+id/button1 »
android:text=« »
android:layout_width=« »
android:layout_height=« » >
</Button>

6. Calcul

7. Calculus
 Calculus est une calculatrice simple pour les
Smartphone Android qui permet d’effectuer des
calculs comme :Addition, Soustraction, Multiplication,
Division
 Nous allons créer Calculus de 0 à 100, ce qui nous
permettra de nous habituer avec les widgets tels que:
EditText, TextView, Button et quelques évènements
propres à la programmation mobile.
 Bonne programmation!

8. Lancer ADT (ou Eclipse)
Lancer votre AVD ou créer un nouveau (Voir Tutorial « Hello Droid »)
Créer un Nouveau Projet
a) Application Name : Calculus
b) Projet Name : calculus; Compile with 2.2 (Si le Sdk 2.2 n’est pas installer,
laisser l’option par défaut)
c) Target 2.2 (Si le Sdk 2.2 n’est pas installer, laisser l’option par défaut)
Place à la programmation
Les
etape
s

9. Une fois votre projet
créé, votre fenêtre
devrait ressembler à
cette fenêtre
Les fichiers de votre projet
Propriétés du Widgets
sélectionné
Les Widgets de votre projet
Le Widget Box
Votre layout

10. Les Widgets
 Maintenant ajoutons les widgets nécessaires pour la
réalisation de notre Calculus en mode XML:
a) 2 EditText
b) 3 TextView
c) 4 Button

11. Création d’un TextView
 Pour créer un TextView, premièrement il faut basculer en mode XML:
 Le code XML:
// identifiant de TextView
// Dimension du TextView
// alignement du TextView
// Size des caractères et texte a afficher

12. Création d’un EditView
 Le code XML :
// type variable, size caractère
// alignement EditView
// dimension EditView
// identifiant variable
// Pour ajouter focus

13. Création d’un Button
 Le code XML:
// dimension Button par rapport a layout
// Positionnement Button
// identifiant variable
// Texte a afficher

14. Création des autres éléments
 Pour les autres éléments, il suffit de répéter le processus en prenant
le soin de modifier le id, le texte a afficher, les positions.
1) Les EditText : number1, number2
2) Les TextView: lbl_number_1, lbl_number2, lbl_resultat
3) Les Button: addition, multiplication, soustraction, division
Remarque: Dans le fichier res/values/strings.xml, il faut ajouter les
variables string que vous comptiez utiliser comme texte pour les
TextView et Button. Sinon vous aurez droit a quelques notifications
pas trop grave mais mieux vaut corriger.
Exemple: <string name="nombre_2">Nombre 2</string>

15. Votre layout avec
les 9 widgets
Les éléments
Remarque il faut dragger
les éléments pour obtenir
ce résultat

16. Un peu de Java
Click sur MainActivity.java
pour basculer en mode
Java

17. // Le nom du package de votre app
// Les librairies ajoutées automatiquement
// La class principale de votre projet
/* Les évènements qui se déroulent quand
on fait appelle à l’application on
les utilise dans la méthode onCreate */
/* Pour ce qui a trait a votre menu on utilise la méthode onCreateOptionMenu.
On y reviendra un peu plus loin */

18. Travail à faire
 Pour la réalisation des calculs on va apprendre à: lire les valeurs dans les
EditText, a considérer l’opération de l’utilisateur, enfin afficher le résultat
correspondant.
 De ce fait nous allons créer des variables parallèles en Java correspondant
aux widgets; c’est-à-dire 2 EditText, 1 TextView pour le résultat et 4 Button.
Mais tout d’abord on va créer un Button pour l’addition a vous de faire le
reste du boulot .
 Pour créer un EditText, TextView, Button en Java il suffit de faire appelle aux
librairies correspondantes.

19. Abracadabra boom!
 Donc, on vient de créer 4 éléments correspondant aux Widget que l’on utilise
pour notre App; 2 EditText (numbre1 et numbre2), 1 Button (addition), et 1
TextView (lbl_resultat).
Astuce: Pour ajouter les import manquants en Java il suffit de presser
simultanément sur Ctrl, Shift et O (Ctrl + Shift + O).
 Maintenant il faut instancier les varibles.

20. Abracadabra boom!
 Dans la méthode onCreate, ou l’on doit ajouter tous les évènement qui doivent se
déclencher quand l’App est lancée on instancie nos variables.
 Décryptage de quelques éléments
1) Le TextView en parenthèse c’est un CAST qui permet de dire au compilateur que tel
objet peut remplir le rôle d’un autre, ou que tel objet de d’un type en particulier;
2) findViewById c’est une méthode qui permet en grosso modo de récupérer la valeur, l’
état ou autre propriété d’un Widget, c’est le pont entre la variable Java et le Widget ;
3) setOnClickListener c’est une méthode qui permet de prendre en compte une action
quand l’utilisateur click sur un Button, ou sur son écran.

21. Abracadabra boom!
 Il ne nous reste plus qu’a définir la méthode btnListener. C’est la méthode
qui nous permettra de calculer la somme des deux nombre fournis par
l’utilisateur.
 Marche à suivre, lire les valeurs des EditText avec findViewById, convertir les
valeurs saisies en Double, faire la somme et afficher le résultat dans le
TextView

22. On teste un peu le projet
 Pour tester le projet on click sur Ctrl + F11…et Voila!

23. A vous!
Maintenant a vous d’ajouter les lignes de code
nécessaire pour faire la soustraction, multication et
division. Apres vous pourriez modifier l’apparence
de votre Calculus. Changer la couleur de fond, la
taille des écritures, l’apparence des Button.

24. Préparé et présenté par: ING. David Joseph (ing.josephdavid@gmail.com)
Reference:
1) Beginning Android, Mark L. Murphy
2) Android Essentials, Chris Haseman
3) Multimobile developpement, Matthew Baxter-Reynolds
4) Curso de programacion en Android para principiantes
5) Android, a programmer guide, J. F. DiMarzio
6) Learning Android, Marko Gargenta