Les Widgets

Embed Size (px)

DESCRIPTION

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

Citation preview

  • 1. Les Widgets (Partie 1) Prpar par: ING. David Joseph

2. Plan EditText TextView Button Calculus TP 3. EditText Les EditText sont des widgets qui permettent aux utilisateurs de dattribuer ou modifier la valeur dune variable. Pour crer un EditText en mode XML : 4. TextView Les TextView sont des etiquettes qui permettent laffichage dun text, le rsultat dun processus ou autre. Pour crer un TextView en mode XML: 5. Button Les Button sont des widgets qui permettent lexcution dune action prdfinie, le dclenchement dun processus ou autre. Pour crer un Button en mode XML: 6. Calcul 7. Calculus Calculus est une calculatrice simple pour les Smartphone Android qui permet deffectuer des calculs comme :Addition, Soustraction, Multiplication, Division Nous allons crer Calculus de 0 100, ce qui nous permettra de nous habituer avec les widgets tels que: EditText, TextView, Button et quelques vnements propres la programmation mobile. Bonne programmation! 8. Lancer ADT (ou Eclipse) Lancer votre AVD ou crer un nouveau (Voir Tutorial Hello Droid ) Crer un Nouveau Projet a) Application Name : Calculus b) Projet Name : calculus; Compile with 2.2 (Si le Sdk 2.2 nest pas installer, laisser loption par dfaut) c) Target 2.2 (Si le Sdk 2.2 nest pas installer, laisser loption par dfaut) Place la programmation Les etape s 9. Une fois votre projet cr, votre fentre devrait ressembler cette fentre Les fichiers de votre projet Proprits du Widgets slectionn Les Widgets de votre projet Le Widget Box Votre layout 10. Les Widgets Maintenant ajoutons les widgets ncessaires pour la ralisation de notre Calculus en mode XML: a) 2 EditText b) 3 TextView c) 4 Button 11. Cration dun TextView Pour crer un TextView, premirement il faut basculer en mode XML: Le code XML: // identifiant de TextView // Dimension du TextView // alignement du TextView // Size des caractres et texte a afficher 12. Cration dun EditView Le code XML : // type variable, size caractre // alignement EditView // dimension EditView // identifiant variable // Pour ajouter focus 13. Cration dun Button Le code XML: // dimension Button par rapport a layout // Positionnement Button // identifiant variable // Texte a afficher 14. Cration des autres lments Pour les autres lments, il suffit de rpter 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: Nombre 2 15. Votre layout avec les 9 widgets Les lments Remarque il faut dragger les lments pour obtenir ce rsultat 16. Un peu de Java Click sur MainActivity.java pour basculer en mode Java 17. // Le nom du package de votre app // Les librairies ajoutes automatiquement // La class principale de votre projet /* Les vnements qui se droulent quand on fait appelle lapplication on les utilise dans la mthode onCreate */ /* Pour ce qui a trait a votre menu on utilise la mthode onCreateOptionMenu. On y reviendra un peu plus loin */ 18. Travail faire Pour la ralisation des calculs on va apprendre : lire les valeurs dans les EditText, a considrer lopration de lutilisateur, enfin afficher le rsultat correspondant. De ce fait nous allons crer des variables parallles en Java correspondant aux widgets; cest--dire 2 EditText, 1 TextView pour le rsultat et 4 Button. Mais tout dabord on va crer un Button pour laddition a vous de faire le reste du boulot . Pour crer un EditText, TextView, Button en Java il suffit de faire appelle aux librairies correspondantes. 19. Abracadabra boom! Donc, on vient de crer 4 lments correspondant aux Widget que lon 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 simultanment sur Ctrl, Shift et O (Ctrl + Shift + O). Maintenant il faut instancier les varibles. 20. Abracadabra boom! Dans la mthode onCreate, ou lon doit ajouter tous les vnement qui doivent se dclencher quand lApp est lance on instancie nos variables. Dcryptage de quelques lments 1) Le TextView en parenthse cest un CAST qui permet de dire au compilateur que tel objet peut remplir le rle dun autre, ou que tel objet de dun type en particulier; 2) findViewById cest une mthode qui permet en grosso modo de rcuprer la valeur, l tat ou autre proprit dun Widget, cest le pont entre la variable Java et le Widget ; 3) setOnClickListener cest une mthode qui permet de prendre en compte une action quand lutilisateur click sur un Button, ou sur son cran. 21. Abracadabra boom! Il ne nous reste plus qua dfinir la mthode btnListener. Cest la mthode qui nous permettra de calculer la somme des deux nombre fournis par lutilisateur. Marche suivre, lire les valeurs des EditText avec findViewById, convertir les valeurs saisies en Double, faire la somme et afficher le rsultat dans le TextView 22. On teste un peu le projet Pour tester le projet on click sur Ctrl + F11et Voila! 23. A vous! Maintenant a vous dajouter les lignes de code ncessaire pour faire la soustraction, multication et division. Apres vous pourriez modifier lapparence de votre Calculus. Changer la couleur de fond, la taille des critures, lapparence des Button. 24. Prpar et prsent par: ING. David Joseph ([email protected]) 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