Les Widgets

586 vues

Publié le

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

Publié dans : Formation
0 commentaire
0 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

Aucun téléchargement
Vues
Nombre de vues
586
Sur SlideShare
0
Issues des intégrations
0
Intégrations
2
Actions
Partages
0
Téléchargements
16
Commentaires
0
J’aime
0
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Les Widgets

  1. 1. Les Widgets (Partie 1) Préparé par: ING. David Joseph
  2. 2. Plan EditText TextView Button Calculus TP
  3. 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. 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. 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. 6. Calcul
  7. 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. 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. 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. 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. 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. 12. Création d’un EditView  Le code XML : // type variable, size caractère // alignement EditView // dimension EditView // identifiant variable // Pour ajouter focus
  13. 13. Création d’un Button  Le code XML: // dimension Button par rapport a layout // Positionnement Button // identifiant variable // Texte a afficher
  14. 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. 15. Votre layout avec les 9 widgets Les éléments Remarque il faut dragger les éléments pour obtenir ce résultat
  16. 16. Un peu de Java Click sur MainActivity.java pour basculer en mode Java
  17. 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. 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. 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. 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. 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. 22. On teste un peu le projet  Pour tester le projet on click sur Ctrl + F11…et Voila!
  23. 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. 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

×