SlideShare une entreprise Scribd logo
Éléments Graphiques
Interface graphique de base, éléments de sélection…
Formation Mobile
27 Aout au 1 Septembre 2015
Dr. Lilia SFAXI
www.liliasfaxi.wix.com/liliasfaxi
Slide 1
ÉLÉMENTS GRAPHIQUES DE BASE
Éléments Graphiques Android
Dr. Lilia SFAXI
www.liliasfaxi.wix.com/liliasfaxi
Slide 2
Les Composants View et ViewGroup
•  View:
•  Classe de base pour la création d’une interface graphique en
Android
•  Classe mère de tous les widgets (éléments graphiques)
•  Une vue peut être ajoutée à une application :
•  Soit statiquement, dans le fichier de description de l’interface (Layout
XML)
•  Soit dynamiquement, dans le code Java de l’application
•  ViewGroup:
•  Classe de base de tous les layouts (dispositions)
•  Layouts: Conteneurs invisibles rassemblant plusieurs View ou
ViewGroup
•  Permet de définir l’emplacement de ses fils dans l’écran
Dr. Lilia SFAXI
www.liliasfaxi.wix.com/liliasfaxi
Slide 3
Éléments Graphiques de Base
Layout XML
•  Ensemble de fichiers XML de spécification des différents composants
graphiques d’une application (widgets) et de leurs relations entre eux
et avec leurs conteneurs (layouts)
•  Placés dans le répertoire res/layout de l’arborescence du projet
•  Possibilité de visualiser le contenu du fichier:
•  Sous forme de code XML (onglet Text)
•  Sous forme graphique (onglet Design) : mise à disposition d’une palette de
composants graphiques à glisser-déplacer vers l’emplacement désiré
•  Chaque composant graphique est représenté par un élément XML, dont
les attributs décrivent l’aspect ou le comportement.
Dr. Lilia SFAXI
www.liliasfaxi.wix.com/liliasfaxi
Slide 4
Éléments Graphiques de Base
Dr. Lilia SFAXI
www.liliasfaxi.wix.com/liliasfaxi
Slide 5
XML Layout: Design
Dr. Lilia SFAXI
www.liliasfaxi.wix.com/liliasfaxi
Slide 6
XML Layout: XML Code
Layouts
•  ViewGroup qui regroupe un ensemble de widgets ou d’autres layouts
•  Plusieurs types de layouts (on citera les plus utilisés)
Dr. Lilia SFAXI
www.liliasfaxi.wix.com/liliasfaxi
Slide 7
Éléments Graphiques de Base
Linear Layout Relative Layout Web View
Organise ses enfants dans une
ligne unique verticale ou
horizontale.
Spécifie les emplacements des
objets fils relativement les uns
aux autres.
Affiche des pages web.
<html>
<!–– web page ––>
</html>
Exemple de Layouts
Dr. Lilia SFAXI
www.liliasfaxi.wix.com/liliasfaxi
Slide 8
Éléments Graphiques de Base
UTILISATION DES COMPOSANTS GRAPHIQUES
Éléments Graphiques Android
Dr. Lilia SFAXI
www.liliasfaxi.wix.com/liliasfaxi
Slide 9
1.  Environnement de Développement Android
2.  Architecture Android
3.  Conduite d’un Projet d’App. Android
4.  Structure d’une Application Android
5.  Cycle de Vie d’une Application Android
6.  Éléments de Base d’une Application Android
7.  Services Android
Identifiant et Fichier R.java
•  Pour pouvoir utiliser un composant graphique, il faut lui
associer un id
•  Représenté dans le layout XML par l’attribut android:id
•  En général sous la forme: @+id/nom_id
•  @ : variable particulière, doit être parsée par le parseur XML
•  + : un identifiant avec la valeur nom_id sera généré, et ajouté automatiquement
à la classe R
•  Fichier R.java
•  Contient un ensemble de classes générées automatiquement à partir du
répertoire res.
•  Chaque classe représente un ensemble de propriétés utilisables dans le
code Java
•  Fichier généré, ne doit donc pas être modifié à la main!
Dr. Lilia SFAXI
www.liliasfaxi.wix.com/liliasfaxi
Slide 10
Utilisation des Composants Graphiques
Dr. Lilia SFAXI
www.liliasfaxi.wix.com/liliasfaxi
Slide 11
R.java
Code des Activités
•  Les fichiers sources représentant le comportement de
l’application sont définis dans le répertoire src, dans une
arborescence de packages
•  Chaque activité doit :
•  Être définie dans un fichiers .java à part
•  Hériter (directement ou indirectement) de la classe android.app.Activity
•  Implémenter la méthode onCreate() pour définir le comportement de
l’activité à sa création
•  Appeler la méthode setContentView() dans le code de onCreate pour définir
le layout de cette activité (fichier Layout XML associé)
•  L’implémentation des autres méthodes de transition (onPause,
onDestroy…) est optionnelle
Dr. Lilia SFAXI
www.liliasfaxi.wix.com/liliasfaxi
Slide 12
Utilisation des Composants Graphiques
Dr. Lilia SFAXI
www.liliasfaxi.wix.com/liliasfaxi
Slide 13
HelloworldActivity.java
Comportement d’un Élément Graphique
•  Considérons l’objet de type Button défini précédemment
•  Objectif:
•  Afficher: Hello <nom> en cliquant sur le bouton (<nom> étant la chaîne
saisie dans le EditText)
Dr. Lilia SFAXI
www.liliasfaxi.wix.com/liliasfaxi
Slide 14
Utilisation des Composants Graphiques
Comportement d’un Élément Graphique
•  Il existe trois manières pour définir le comportement du bouton button
Façon 1:
1.  Définir un objet Java de type android.widget.Button
2.  Initialiser cet objet en l‘associant à son équivalent dans le fichier XML
3.  Définir le comportement de ce bouton
Dr. Lilia SFAXI
www.liliasfaxi.wix.com/liliasfaxi
Slide 15
Utilisation des Composants Graphiques
Dr. Lilia SFAXI
www.liliasfaxi.wix.com/liliasfaxi
Slide 16
Façon 1
Comportement d’un Élément Graphique
Façon 2:
1.  Définir un objet Java de type android.widget.Button
2.  Initialiser cet objet en l‘associant à son équivalent dans le fichier XML
3.  Implémenter l‘interface android.view.View.OnClickListener
4.  Surcharger la méthode onClick
Attention, cette méthode sera commune à tous les éléments cliquables, il faut donc
distinguer le comportement selon l‘identifiant de l‘élément cliqué
5.  Définir la classe en cours comme étant le Listener du bouton myBytton
Dr. Lilia SFAXI
www.liliasfaxi.wix.com/liliasfaxi
Slide 17
Utilisation des Composants Graphiques
Dr. Lilia SFAXI
www.liliasfaxi.wix.com/liliasfaxi
Slide 18
Façon 2
Comportement d’un Élément Graphique
Façon 3:
1.  Dans le fichier layout XML, associer au bouton le nom d‘une méthode
qui définira son comportement au clic
2.  Dans la classe Java de l‘activité, créer et implémenter cette méthode
en respectant les contraintes suivantes:
1.  Elle doit retourner void
2.  Elle doit porter le nom défini dans le fichier layout XML
3.  Elle doit définir un paramètre de type android.view.View
Dr. Lilia SFAXI
www.liliasfaxi.wix.com/liliasfaxi
Slide 19
Utilisation des Composants Graphiques
Dr. Lilia SFAXI
www.liliasfaxi.wix.com/liliasfaxi
Slide 20
Façon 3
HelloworldActivity.java
activity_helloworld.xml
Atelier
Ma première application, Cycle de vie, Comportement
Dr. Lilia SFAXI
www.liliasfaxi.wix.com/liliasfaxi
Slide 21
Ma Première Application
Nous allons utiliser l’environnement de développement Android Studio, et
la version 5.0.1 d’Android (API 21)
•  Créer votre première application Android appelée HelloworldApplication
avec une activité de type Blank Activity
•  Explorer le code de votre activité ainsi que le layout XML
•  Configurer votre émulateur avec ces paramètres : Nexus One, 3.7"
480*800 hdpi
•  Lancer l’émulateur.
•  Il est conseillé de le démarrer une seule fois, et de le laisser actif, puis
configurer votre application pour se lancer automatiquement sur lui.
Dr. Lilia SFAXI
www.liliasfaxi.wix.com/liliasfaxi
Slide 22
Atelier 1
Cycle de Vie
Nous désirons spécifier un comportement pour chacun des évènements dans le cycle de vie de
notre activité principale HelloworldActivity. Pour cela, nous devons redéfinir les méthodes
correspondantes à chaque événement.
Dans le fichier HelloworldActivity.java, nous remarquons que la méthode onCreate est déjà
générée : c’est la seule méthode obligatoire.
Pour générer les autres méthodes de transition, commencer à taper le nom de la méthode dans
le fichier de code, puis cliquer sur Ctrl-Espace.
1.  Générer les méthodes correspondant à chacun des évènements listés dans le cycle de
vie.
2.  Nous désirons voir le comportement de l’activité pour chacun de ces évènements.
Pour cela, chaque méthode va afficher son nom dans un Toast.
3.  Exécuter votre application. Que constatez-vous ? A quels moments sont appelés les
différentes méthodes que vous avez ré-implémenté ?
Dr. Lilia SFAXI
www.liliasfaxi.wix.com/liliasfaxi
Slide 23
Atelier 2
Greeting Personnalisé
Nous nous proposons de créer une application intitulée Greeting afin de
correspondre à l’interface et comportement suivants:
Dr. Lilia SFAXI
www.liliasfaxi.wix.com/liliasfaxi
Slide 24
Atelier 3

Contenu connexe

Tendances

Cours design pattern m youssfi partie 7 facade bridge flyweight
Cours design pattern m youssfi partie 7 facade bridge flyweightCours design pattern m youssfi partie 7 facade bridge flyweight
Cours design pattern m youssfi partie 7 facade bridge flyweight
ENSET, Université Hassan II Casablanca
 
A la découverte de vue.js
A la découverte de vue.jsA la découverte de vue.js
A la découverte de vue.js
Bruno Bonnin
 
Python avancé : Classe et objet
Python avancé : Classe et objetPython avancé : Classe et objet
Python avancé : Classe et objet
ECAM Brussels Engineering School
 
Big data: NoSQL comme solution
Big data: NoSQL comme solutionBig data: NoSQL comme solution
Big data: NoSQL comme solutionJEMLI Fathi
 
Cours design pattern m youssfi partie 2 observer
Cours design pattern m youssfi partie 2 observerCours design pattern m youssfi partie 2 observer
Cours design pattern m youssfi partie 2 observer
ENSET, Université Hassan II Casablanca
 
softCours design pattern m youssfi partie 9 creation des objets abstract fact...
softCours design pattern m youssfi partie 9 creation des objets abstract fact...softCours design pattern m youssfi partie 9 creation des objets abstract fact...
softCours design pattern m youssfi partie 9 creation des objets abstract fact...
ENSET, Université Hassan II Casablanca
 
Initiation à Android
Initiation à AndroidInitiation à Android
Initiation à Android
Lilia Sfaxi
 
Cours design pattern m youssfi partie 3 decorateur
Cours design pattern m youssfi partie 3 decorateurCours design pattern m youssfi partie 3 decorateur
Cours design pattern m youssfi partie 3 decorateur
ENSET, Université Hassan II Casablanca
 
Design patterns
Design patternsDesign patterns
Design patterns
Eric Toguem
 
Support de cours technologie et application m.youssfi
Support de cours technologie et application m.youssfiSupport de cours technologie et application m.youssfi
Support de cours technologie et application m.youssfi
ENSET, Université Hassan II Casablanca
 
Chp3 - Les Services Web
Chp3 - Les Services WebChp3 - Les Services Web
Chp3 - Les Services Web
Lilia Sfaxi
 
Développement d'un site web jee de e commerce basé sur spring (m.youssfi)
Développement d'un site web jee de e commerce basé sur spring (m.youssfi)Développement d'un site web jee de e commerce basé sur spring (m.youssfi)
Développement d'un site web jee de e commerce basé sur spring (m.youssfi)
ENSET, Université Hassan II Casablanca
 
Cours design pattern m youssfi partie 5 adapter
Cours design pattern m youssfi partie 5 adapterCours design pattern m youssfi partie 5 adapter
Cours design pattern m youssfi partie 5 adapter
ENSET, Université Hassan II Casablanca
 
Cours design pattern m youssfi partie 8 stat, template method, command , medi...
Cours design pattern m youssfi partie 8 stat, template method, command , medi...Cours design pattern m youssfi partie 8 stat, template method, command , medi...
Cours design pattern m youssfi partie 8 stat, template method, command , medi...
ENSET, Université Hassan II Casablanca
 
Formation JAVA/J2EE
Formation JAVA/J2EEFormation JAVA/J2EE
Formation JAVA/J2EE
Ines Ouaz
 
Systèmes d'Exploitation - chp2-gestion des processus
Systèmes d'Exploitation - chp2-gestion des processusSystèmes d'Exploitation - chp2-gestion des processus
Systèmes d'Exploitation - chp2-gestion des processus
Lilia Sfaxi
 
Mise en oeuvre des Frameworks de Machines et Deep Learning pour les Applicati...
Mise en oeuvre des Frameworks de Machines et Deep Learning pour les Applicati...Mise en oeuvre des Frameworks de Machines et Deep Learning pour les Applicati...
Mise en oeuvre des Frameworks de Machines et Deep Learning pour les Applicati...
ENSET, Université Hassan II Casablanca
 
Introduction à React JS
Introduction à React JSIntroduction à React JS
Introduction à React JS
Abdoulaye Dieng
 
Securite des Web Services (SOAP vs REST) / OWASP Geneva dec. 2012
Securite des Web Services (SOAP vs REST) / OWASP Geneva dec. 2012Securite des Web Services (SOAP vs REST) / OWASP Geneva dec. 2012
Securite des Web Services (SOAP vs REST) / OWASP Geneva dec. 2012Sylvain Maret
 
Introduction à Angular
Introduction à AngularIntroduction à Angular
Introduction à Angular
Abdoulaye Dieng
 

Tendances (20)

Cours design pattern m youssfi partie 7 facade bridge flyweight
Cours design pattern m youssfi partie 7 facade bridge flyweightCours design pattern m youssfi partie 7 facade bridge flyweight
Cours design pattern m youssfi partie 7 facade bridge flyweight
 
A la découverte de vue.js
A la découverte de vue.jsA la découverte de vue.js
A la découverte de vue.js
 
Python avancé : Classe et objet
Python avancé : Classe et objetPython avancé : Classe et objet
Python avancé : Classe et objet
 
Big data: NoSQL comme solution
Big data: NoSQL comme solutionBig data: NoSQL comme solution
Big data: NoSQL comme solution
 
Cours design pattern m youssfi partie 2 observer
Cours design pattern m youssfi partie 2 observerCours design pattern m youssfi partie 2 observer
Cours design pattern m youssfi partie 2 observer
 
softCours design pattern m youssfi partie 9 creation des objets abstract fact...
softCours design pattern m youssfi partie 9 creation des objets abstract fact...softCours design pattern m youssfi partie 9 creation des objets abstract fact...
softCours design pattern m youssfi partie 9 creation des objets abstract fact...
 
Initiation à Android
Initiation à AndroidInitiation à Android
Initiation à Android
 
Cours design pattern m youssfi partie 3 decorateur
Cours design pattern m youssfi partie 3 decorateurCours design pattern m youssfi partie 3 decorateur
Cours design pattern m youssfi partie 3 decorateur
 
Design patterns
Design patternsDesign patterns
Design patterns
 
Support de cours technologie et application m.youssfi
Support de cours technologie et application m.youssfiSupport de cours technologie et application m.youssfi
Support de cours technologie et application m.youssfi
 
Chp3 - Les Services Web
Chp3 - Les Services WebChp3 - Les Services Web
Chp3 - Les Services Web
 
Développement d'un site web jee de e commerce basé sur spring (m.youssfi)
Développement d'un site web jee de e commerce basé sur spring (m.youssfi)Développement d'un site web jee de e commerce basé sur spring (m.youssfi)
Développement d'un site web jee de e commerce basé sur spring (m.youssfi)
 
Cours design pattern m youssfi partie 5 adapter
Cours design pattern m youssfi partie 5 adapterCours design pattern m youssfi partie 5 adapter
Cours design pattern m youssfi partie 5 adapter
 
Cours design pattern m youssfi partie 8 stat, template method, command , medi...
Cours design pattern m youssfi partie 8 stat, template method, command , medi...Cours design pattern m youssfi partie 8 stat, template method, command , medi...
Cours design pattern m youssfi partie 8 stat, template method, command , medi...
 
Formation JAVA/J2EE
Formation JAVA/J2EEFormation JAVA/J2EE
Formation JAVA/J2EE
 
Systèmes d'Exploitation - chp2-gestion des processus
Systèmes d'Exploitation - chp2-gestion des processusSystèmes d'Exploitation - chp2-gestion des processus
Systèmes d'Exploitation - chp2-gestion des processus
 
Mise en oeuvre des Frameworks de Machines et Deep Learning pour les Applicati...
Mise en oeuvre des Frameworks de Machines et Deep Learning pour les Applicati...Mise en oeuvre des Frameworks de Machines et Deep Learning pour les Applicati...
Mise en oeuvre des Frameworks de Machines et Deep Learning pour les Applicati...
 
Introduction à React JS
Introduction à React JSIntroduction à React JS
Introduction à React JS
 
Securite des Web Services (SOAP vs REST) / OWASP Geneva dec. 2012
Securite des Web Services (SOAP vs REST) / OWASP Geneva dec. 2012Securite des Web Services (SOAP vs REST) / OWASP Geneva dec. 2012
Securite des Web Services (SOAP vs REST) / OWASP Geneva dec. 2012
 
Introduction à Angular
Introduction à AngularIntroduction à Angular
Introduction à Angular
 

Similaire à P2 éléments graphiques android

Framework Hibernate
Framework HibernateFramework Hibernate
Framework Hibernate
Ines Ouaz
 
Formation iPhone ENSI by (Orange Tunisie)
Formation iPhone ENSI by (Orange Tunisie)Formation iPhone ENSI by (Orange Tunisie)
Formation iPhone ENSI by (Orange Tunisie)Farouk Mezghich
 
Chapitre 4 android
Chapitre 4 androidChapitre 4 android
Introduction à Android
Introduction à AndroidIntroduction à Android
Introduction à Android
Yoann Gotthilf
 
La mobilité dans Drupal
La mobilité dans DrupalLa mobilité dans Drupal
La mobilité dans Drupal
Adyax
 
react-slides.ppx (2) (1).pptx react presentation basic
react-slides.ppx (2) (1).pptx react presentation basicreact-slides.ppx (2) (1).pptx react presentation basic
react-slides.ppx (2) (1).pptx react presentation basic
zineblahib2
 
#J2Code2018 - Mettez du feu à vos applications avec CodeIgniter
#J2Code2018 - Mettez du feu à vos applications avec CodeIgniter#J2Code2018 - Mettez du feu à vos applications avec CodeIgniter
#J2Code2018 - Mettez du feu à vos applications avec CodeIgniter
Atsé François-Xavier KOBON
 
Introduction à Hibernate p.1
Introduction à Hibernate p.1Introduction à Hibernate p.1
Introduction à Hibernate p.1
ATHMAN HAJ-HAMOU
 
Introduction module IHM Polytech Sophia Dept Info SI3
Introduction module IHM Polytech Sophia Dept Info SI3Introduction module IHM Polytech Sophia Dept Info SI3
Introduction module IHM Polytech Sophia Dept Info SI3
Anne-Marie Pinna-Dery
 
Android201710 avrilcours3
Android201710 avrilcours3Android201710 avrilcours3
Android201710 avrilcours3
Anne-Marie Pinna-Dery
 
MVVM de A à Z
MVVM de A à ZMVVM de A à Z
MVVM de A à Z
Microsoft
 
HTML5, ARIA et accessibilité du Web: où en est-on?
HTML5, ARIA et accessibilité du Web: où en est-on?HTML5, ARIA et accessibilité du Web: où en est-on?
HTML5, ARIA et accessibilité du Web: où en est-on?
Qelios
 
Cours_Dev_mobile_3eB_chap31254_23_24.pdf
Cours_Dev_mobile_3eB_chap31254_23_24.pdfCours_Dev_mobile_3eB_chap31254_23_24.pdf
Cours_Dev_mobile_3eB_chap31254_23_24.pdf
RimBenameur
 
Introduction aux RIA (Rich Internet Applications)
Introduction aux RIA (Rich Internet Applications)Introduction aux RIA (Rich Internet Applications)
Introduction aux RIA (Rich Internet Applications)
Tugdual Grall
 
Silverlight 4
Silverlight 4Silverlight 4
Silverlight 4
Frédéric Queudret
 
Ionic, AngularJS,Cordova,NodeJS,Sass
Ionic, AngularJS,Cordova,NodeJS,SassIonic, AngularJS,Cordova,NodeJS,Sass
Ionic, AngularJS,Cordova,NodeJS,Sass
marwa baich
 
Jquery
JqueryJquery
Jquery
krymo
 

Similaire à P2 éléments graphiques android (20)

Framework Hibernate
Framework HibernateFramework Hibernate
Framework Hibernate
 
Formation iPhone ENSI by (Orange Tunisie)
Formation iPhone ENSI by (Orange Tunisie)Formation iPhone ENSI by (Orange Tunisie)
Formation iPhone ENSI by (Orange Tunisie)
 
Chapitre 4 android
Chapitre 4 androidChapitre 4 android
Chapitre 4 android
 
Développement Sous Android
Développement Sous AndroidDéveloppement Sous Android
Développement Sous Android
 
Introduction à Android
Introduction à AndroidIntroduction à Android
Introduction à Android
 
La mobilité dans Drupal
La mobilité dans DrupalLa mobilité dans Drupal
La mobilité dans Drupal
 
react-slides.ppx (2) (1).pptx react presentation basic
react-slides.ppx (2) (1).pptx react presentation basicreact-slides.ppx (2) (1).pptx react presentation basic
react-slides.ppx (2) (1).pptx react presentation basic
 
Hibernate et jsf
Hibernate et jsfHibernate et jsf
Hibernate et jsf
 
#J2Code2018 - Mettez du feu à vos applications avec CodeIgniter
#J2Code2018 - Mettez du feu à vos applications avec CodeIgniter#J2Code2018 - Mettez du feu à vos applications avec CodeIgniter
#J2Code2018 - Mettez du feu à vos applications avec CodeIgniter
 
Introduction à Hibernate p.1
Introduction à Hibernate p.1Introduction à Hibernate p.1
Introduction à Hibernate p.1
 
Introduction module IHM Polytech Sophia Dept Info SI3
Introduction module IHM Polytech Sophia Dept Info SI3Introduction module IHM Polytech Sophia Dept Info SI3
Introduction module IHM Polytech Sophia Dept Info SI3
 
Android201710 avrilcours3
Android201710 avrilcours3Android201710 avrilcours3
Android201710 avrilcours3
 
Cours 1 Android
Cours 1 AndroidCours 1 Android
Cours 1 Android
 
MVVM de A à Z
MVVM de A à ZMVVM de A à Z
MVVM de A à Z
 
HTML5, ARIA et accessibilité du Web: où en est-on?
HTML5, ARIA et accessibilité du Web: où en est-on?HTML5, ARIA et accessibilité du Web: où en est-on?
HTML5, ARIA et accessibilité du Web: où en est-on?
 
Cours_Dev_mobile_3eB_chap31254_23_24.pdf
Cours_Dev_mobile_3eB_chap31254_23_24.pdfCours_Dev_mobile_3eB_chap31254_23_24.pdf
Cours_Dev_mobile_3eB_chap31254_23_24.pdf
 
Introduction aux RIA (Rich Internet Applications)
Introduction aux RIA (Rich Internet Applications)Introduction aux RIA (Rich Internet Applications)
Introduction aux RIA (Rich Internet Applications)
 
Silverlight 4
Silverlight 4Silverlight 4
Silverlight 4
 
Ionic, AngularJS,Cordova,NodeJS,Sass
Ionic, AngularJS,Cordova,NodeJS,SassIonic, AngularJS,Cordova,NodeJS,Sass
Ionic, AngularJS,Cordova,NodeJS,Sass
 
Jquery
JqueryJquery
Jquery
 

Plus de Lilia Sfaxi

chp1-Intro à l'urbanisation des SI.pdf
chp1-Intro à l'urbanisation des SI.pdfchp1-Intro à l'urbanisation des SI.pdf
chp1-Intro à l'urbanisation des SI.pdf
Lilia Sfaxi
 
Plan d'études_INSAT_2022_2023.pdf
Plan d'études_INSAT_2022_2023.pdfPlan d'études_INSAT_2022_2023.pdf
Plan d'études_INSAT_2022_2023.pdf
Lilia Sfaxi
 
Lab3-DB_Neo4j
Lab3-DB_Neo4jLab3-DB_Neo4j
Lab3-DB_Neo4j
Lilia Sfaxi
 
Lab2-DB-Mongodb
Lab2-DB-MongodbLab2-DB-Mongodb
Lab2-DB-Mongodb
Lilia Sfaxi
 
Lab1-DB-Cassandra
Lab1-DB-CassandraLab1-DB-Cassandra
Lab1-DB-Cassandra
Lilia Sfaxi
 
TP2-UML-Correction
TP2-UML-CorrectionTP2-UML-Correction
TP2-UML-Correction
Lilia Sfaxi
 
TP1-UML-Correction
TP1-UML-CorrectionTP1-UML-Correction
TP1-UML-Correction
Lilia Sfaxi
 
TP0-UML-Correction
TP0-UML-CorrectionTP0-UML-Correction
TP0-UML-Correction
Lilia Sfaxi
 
TD4-UML
TD4-UMLTD4-UML
TD4-UML
Lilia Sfaxi
 
TD4-UML-Correction
TD4-UML-CorrectionTD4-UML-Correction
TD4-UML-Correction
Lilia Sfaxi
 
TD3-UML-Séquences
TD3-UML-SéquencesTD3-UML-Séquences
TD3-UML-Séquences
Lilia Sfaxi
 
TD3-UML-Correction
TD3-UML-CorrectionTD3-UML-Correction
TD3-UML-Correction
Lilia Sfaxi
 
TD2 - UML - Correction
TD2 - UML - CorrectionTD2 - UML - Correction
TD2 - UML - Correction
Lilia Sfaxi
 
TD1 - UML - DCU
TD1 - UML - DCUTD1 - UML - DCU
TD1 - UML - DCU
Lilia Sfaxi
 
TD1-UML-correction
TD1-UML-correctionTD1-UML-correction
TD1-UML-correction
Lilia Sfaxi
 
Android - Tp1 - installation et démarrage
Android - Tp1 -   installation et démarrageAndroid - Tp1 -   installation et démarrage
Android - Tp1 - installation et démarrage
Lilia Sfaxi
 
Android - Tp2 - Elements graphiques
Android - Tp2 - Elements graphiques Android - Tp2 - Elements graphiques
Android - Tp2 - Elements graphiques
Lilia Sfaxi
 
Android - Tp3 - intents
Android - Tp3 -  intentsAndroid - Tp3 -  intents
Android - Tp3 - intents
Lilia Sfaxi
 
Android - TPBonus - web services
Android - TPBonus - web servicesAndroid - TPBonus - web services
Android - TPBonus - web services
Lilia Sfaxi
 
Android - Tp4 - graphiques avancés
Android - Tp4 - graphiques avancésAndroid - Tp4 - graphiques avancés
Android - Tp4 - graphiques avancés
Lilia Sfaxi
 

Plus de Lilia Sfaxi (20)

chp1-Intro à l'urbanisation des SI.pdf
chp1-Intro à l'urbanisation des SI.pdfchp1-Intro à l'urbanisation des SI.pdf
chp1-Intro à l'urbanisation des SI.pdf
 
Plan d'études_INSAT_2022_2023.pdf
Plan d'études_INSAT_2022_2023.pdfPlan d'études_INSAT_2022_2023.pdf
Plan d'études_INSAT_2022_2023.pdf
 
Lab3-DB_Neo4j
Lab3-DB_Neo4jLab3-DB_Neo4j
Lab3-DB_Neo4j
 
Lab2-DB-Mongodb
Lab2-DB-MongodbLab2-DB-Mongodb
Lab2-DB-Mongodb
 
Lab1-DB-Cassandra
Lab1-DB-CassandraLab1-DB-Cassandra
Lab1-DB-Cassandra
 
TP2-UML-Correction
TP2-UML-CorrectionTP2-UML-Correction
TP2-UML-Correction
 
TP1-UML-Correction
TP1-UML-CorrectionTP1-UML-Correction
TP1-UML-Correction
 
TP0-UML-Correction
TP0-UML-CorrectionTP0-UML-Correction
TP0-UML-Correction
 
TD4-UML
TD4-UMLTD4-UML
TD4-UML
 
TD4-UML-Correction
TD4-UML-CorrectionTD4-UML-Correction
TD4-UML-Correction
 
TD3-UML-Séquences
TD3-UML-SéquencesTD3-UML-Séquences
TD3-UML-Séquences
 
TD3-UML-Correction
TD3-UML-CorrectionTD3-UML-Correction
TD3-UML-Correction
 
TD2 - UML - Correction
TD2 - UML - CorrectionTD2 - UML - Correction
TD2 - UML - Correction
 
TD1 - UML - DCU
TD1 - UML - DCUTD1 - UML - DCU
TD1 - UML - DCU
 
TD1-UML-correction
TD1-UML-correctionTD1-UML-correction
TD1-UML-correction
 
Android - Tp1 - installation et démarrage
Android - Tp1 -   installation et démarrageAndroid - Tp1 -   installation et démarrage
Android - Tp1 - installation et démarrage
 
Android - Tp2 - Elements graphiques
Android - Tp2 - Elements graphiques Android - Tp2 - Elements graphiques
Android - Tp2 - Elements graphiques
 
Android - Tp3 - intents
Android - Tp3 -  intentsAndroid - Tp3 -  intents
Android - Tp3 - intents
 
Android - TPBonus - web services
Android - TPBonus - web servicesAndroid - TPBonus - web services
Android - TPBonus - web services
 
Android - Tp4 - graphiques avancés
Android - Tp4 - graphiques avancésAndroid - Tp4 - graphiques avancés
Android - Tp4 - graphiques avancés
 

Dernier

De l'IA comme plagiat à la rédaction d'une « charte IA » à l'université
De l'IA comme plagiat à la rédaction d'une « charte IA » à l'universitéDe l'IA comme plagiat à la rédaction d'une « charte IA » à l'université
De l'IA comme plagiat à la rédaction d'une « charte IA » à l'université
Université de Franche-Comté
 
OCTO TALKS : 4 Tech Trends du Software Engineering.pdf
OCTO TALKS : 4 Tech Trends du Software Engineering.pdfOCTO TALKS : 4 Tech Trends du Software Engineering.pdf
OCTO TALKS : 4 Tech Trends du Software Engineering.pdf
OCTO Technology
 
Le Comptoir OCTO - Équipes infra et prod, ne ratez pas l'embarquement pour l'...
Le Comptoir OCTO - Équipes infra et prod, ne ratez pas l'embarquement pour l'...Le Comptoir OCTO - Équipes infra et prod, ne ratez pas l'embarquement pour l'...
Le Comptoir OCTO - Équipes infra et prod, ne ratez pas l'embarquement pour l'...
OCTO Technology
 
Ouvrez la porte ou prenez un mur (Agile Tour Genève 2024)
Ouvrez la porte ou prenez un mur (Agile Tour Genève 2024)Ouvrez la porte ou prenez un mur (Agile Tour Genève 2024)
Ouvrez la porte ou prenez un mur (Agile Tour Genève 2024)
Laurent Speyser
 
Le Comptoir OCTO - Qu’apporte l’analyse de cycle de vie lors d’un audit d’éco...
Le Comptoir OCTO - Qu’apporte l’analyse de cycle de vie lors d’un audit d’éco...Le Comptoir OCTO - Qu’apporte l’analyse de cycle de vie lors d’un audit d’éco...
Le Comptoir OCTO - Qu’apporte l’analyse de cycle de vie lors d’un audit d’éco...
OCTO Technology
 
Le support de présentation des Signaux 2024
Le support de présentation des Signaux 2024Le support de présentation des Signaux 2024
Le support de présentation des Signaux 2024
UNITECBordeaux
 

Dernier (6)

De l'IA comme plagiat à la rédaction d'une « charte IA » à l'université
De l'IA comme plagiat à la rédaction d'une « charte IA » à l'universitéDe l'IA comme plagiat à la rédaction d'une « charte IA » à l'université
De l'IA comme plagiat à la rédaction d'une « charte IA » à l'université
 
OCTO TALKS : 4 Tech Trends du Software Engineering.pdf
OCTO TALKS : 4 Tech Trends du Software Engineering.pdfOCTO TALKS : 4 Tech Trends du Software Engineering.pdf
OCTO TALKS : 4 Tech Trends du Software Engineering.pdf
 
Le Comptoir OCTO - Équipes infra et prod, ne ratez pas l'embarquement pour l'...
Le Comptoir OCTO - Équipes infra et prod, ne ratez pas l'embarquement pour l'...Le Comptoir OCTO - Équipes infra et prod, ne ratez pas l'embarquement pour l'...
Le Comptoir OCTO - Équipes infra et prod, ne ratez pas l'embarquement pour l'...
 
Ouvrez la porte ou prenez un mur (Agile Tour Genève 2024)
Ouvrez la porte ou prenez un mur (Agile Tour Genève 2024)Ouvrez la porte ou prenez un mur (Agile Tour Genève 2024)
Ouvrez la porte ou prenez un mur (Agile Tour Genève 2024)
 
Le Comptoir OCTO - Qu’apporte l’analyse de cycle de vie lors d’un audit d’éco...
Le Comptoir OCTO - Qu’apporte l’analyse de cycle de vie lors d’un audit d’éco...Le Comptoir OCTO - Qu’apporte l’analyse de cycle de vie lors d’un audit d’éco...
Le Comptoir OCTO - Qu’apporte l’analyse de cycle de vie lors d’un audit d’éco...
 
Le support de présentation des Signaux 2024
Le support de présentation des Signaux 2024Le support de présentation des Signaux 2024
Le support de présentation des Signaux 2024
 

P2 éléments graphiques android

  • 1. Éléments Graphiques Interface graphique de base, éléments de sélection… Formation Mobile 27 Aout au 1 Septembre 2015 Dr. Lilia SFAXI www.liliasfaxi.wix.com/liliasfaxi Slide 1
  • 2. ÉLÉMENTS GRAPHIQUES DE BASE Éléments Graphiques Android Dr. Lilia SFAXI www.liliasfaxi.wix.com/liliasfaxi Slide 2
  • 3. Les Composants View et ViewGroup •  View: •  Classe de base pour la création d’une interface graphique en Android •  Classe mère de tous les widgets (éléments graphiques) •  Une vue peut être ajoutée à une application : •  Soit statiquement, dans le fichier de description de l’interface (Layout XML) •  Soit dynamiquement, dans le code Java de l’application •  ViewGroup: •  Classe de base de tous les layouts (dispositions) •  Layouts: Conteneurs invisibles rassemblant plusieurs View ou ViewGroup •  Permet de définir l’emplacement de ses fils dans l’écran Dr. Lilia SFAXI www.liliasfaxi.wix.com/liliasfaxi Slide 3 Éléments Graphiques de Base
  • 4. Layout XML •  Ensemble de fichiers XML de spécification des différents composants graphiques d’une application (widgets) et de leurs relations entre eux et avec leurs conteneurs (layouts) •  Placés dans le répertoire res/layout de l’arborescence du projet •  Possibilité de visualiser le contenu du fichier: •  Sous forme de code XML (onglet Text) •  Sous forme graphique (onglet Design) : mise à disposition d’une palette de composants graphiques à glisser-déplacer vers l’emplacement désiré •  Chaque composant graphique est représenté par un élément XML, dont les attributs décrivent l’aspect ou le comportement. Dr. Lilia SFAXI www.liliasfaxi.wix.com/liliasfaxi Slide 4 Éléments Graphiques de Base
  • 7. Layouts •  ViewGroup qui regroupe un ensemble de widgets ou d’autres layouts •  Plusieurs types de layouts (on citera les plus utilisés) Dr. Lilia SFAXI www.liliasfaxi.wix.com/liliasfaxi Slide 7 Éléments Graphiques de Base Linear Layout Relative Layout Web View Organise ses enfants dans une ligne unique verticale ou horizontale. Spécifie les emplacements des objets fils relativement les uns aux autres. Affiche des pages web. <html> <!–– web page ––> </html>
  • 8. Exemple de Layouts Dr. Lilia SFAXI www.liliasfaxi.wix.com/liliasfaxi Slide 8 Éléments Graphiques de Base
  • 9. UTILISATION DES COMPOSANTS GRAPHIQUES Éléments Graphiques Android Dr. Lilia SFAXI www.liliasfaxi.wix.com/liliasfaxi Slide 9 1.  Environnement de Développement Android 2.  Architecture Android 3.  Conduite d’un Projet d’App. Android 4.  Structure d’une Application Android 5.  Cycle de Vie d’une Application Android 6.  Éléments de Base d’une Application Android 7.  Services Android
  • 10. Identifiant et Fichier R.java •  Pour pouvoir utiliser un composant graphique, il faut lui associer un id •  Représenté dans le layout XML par l’attribut android:id •  En général sous la forme: @+id/nom_id •  @ : variable particulière, doit être parsée par le parseur XML •  + : un identifiant avec la valeur nom_id sera généré, et ajouté automatiquement à la classe R •  Fichier R.java •  Contient un ensemble de classes générées automatiquement à partir du répertoire res. •  Chaque classe représente un ensemble de propriétés utilisables dans le code Java •  Fichier généré, ne doit donc pas être modifié à la main! Dr. Lilia SFAXI www.liliasfaxi.wix.com/liliasfaxi Slide 10 Utilisation des Composants Graphiques
  • 12. Code des Activités •  Les fichiers sources représentant le comportement de l’application sont définis dans le répertoire src, dans une arborescence de packages •  Chaque activité doit : •  Être définie dans un fichiers .java à part •  Hériter (directement ou indirectement) de la classe android.app.Activity •  Implémenter la méthode onCreate() pour définir le comportement de l’activité à sa création •  Appeler la méthode setContentView() dans le code de onCreate pour définir le layout de cette activité (fichier Layout XML associé) •  L’implémentation des autres méthodes de transition (onPause, onDestroy…) est optionnelle Dr. Lilia SFAXI www.liliasfaxi.wix.com/liliasfaxi Slide 12 Utilisation des Composants Graphiques
  • 14. Comportement d’un Élément Graphique •  Considérons l’objet de type Button défini précédemment •  Objectif: •  Afficher: Hello <nom> en cliquant sur le bouton (<nom> étant la chaîne saisie dans le EditText) Dr. Lilia SFAXI www.liliasfaxi.wix.com/liliasfaxi Slide 14 Utilisation des Composants Graphiques
  • 15. Comportement d’un Élément Graphique •  Il existe trois manières pour définir le comportement du bouton button Façon 1: 1.  Définir un objet Java de type android.widget.Button 2.  Initialiser cet objet en l‘associant à son équivalent dans le fichier XML 3.  Définir le comportement de ce bouton Dr. Lilia SFAXI www.liliasfaxi.wix.com/liliasfaxi Slide 15 Utilisation des Composants Graphiques
  • 17. Comportement d’un Élément Graphique Façon 2: 1.  Définir un objet Java de type android.widget.Button 2.  Initialiser cet objet en l‘associant à son équivalent dans le fichier XML 3.  Implémenter l‘interface android.view.View.OnClickListener 4.  Surcharger la méthode onClick Attention, cette méthode sera commune à tous les éléments cliquables, il faut donc distinguer le comportement selon l‘identifiant de l‘élément cliqué 5.  Définir la classe en cours comme étant le Listener du bouton myBytton Dr. Lilia SFAXI www.liliasfaxi.wix.com/liliasfaxi Slide 17 Utilisation des Composants Graphiques
  • 19. Comportement d’un Élément Graphique Façon 3: 1.  Dans le fichier layout XML, associer au bouton le nom d‘une méthode qui définira son comportement au clic 2.  Dans la classe Java de l‘activité, créer et implémenter cette méthode en respectant les contraintes suivantes: 1.  Elle doit retourner void 2.  Elle doit porter le nom défini dans le fichier layout XML 3.  Elle doit définir un paramètre de type android.view.View Dr. Lilia SFAXI www.liliasfaxi.wix.com/liliasfaxi Slide 19 Utilisation des Composants Graphiques
  • 20. Dr. Lilia SFAXI www.liliasfaxi.wix.com/liliasfaxi Slide 20 Façon 3 HelloworldActivity.java activity_helloworld.xml
  • 21. Atelier Ma première application, Cycle de vie, Comportement Dr. Lilia SFAXI www.liliasfaxi.wix.com/liliasfaxi Slide 21
  • 22. Ma Première Application Nous allons utiliser l’environnement de développement Android Studio, et la version 5.0.1 d’Android (API 21) •  Créer votre première application Android appelée HelloworldApplication avec une activité de type Blank Activity •  Explorer le code de votre activité ainsi que le layout XML •  Configurer votre émulateur avec ces paramètres : Nexus One, 3.7" 480*800 hdpi •  Lancer l’émulateur. •  Il est conseillé de le démarrer une seule fois, et de le laisser actif, puis configurer votre application pour se lancer automatiquement sur lui. Dr. Lilia SFAXI www.liliasfaxi.wix.com/liliasfaxi Slide 22 Atelier 1
  • 23. Cycle de Vie Nous désirons spécifier un comportement pour chacun des évènements dans le cycle de vie de notre activité principale HelloworldActivity. Pour cela, nous devons redéfinir les méthodes correspondantes à chaque événement. Dans le fichier HelloworldActivity.java, nous remarquons que la méthode onCreate est déjà générée : c’est la seule méthode obligatoire. Pour générer les autres méthodes de transition, commencer à taper le nom de la méthode dans le fichier de code, puis cliquer sur Ctrl-Espace. 1.  Générer les méthodes correspondant à chacun des évènements listés dans le cycle de vie. 2.  Nous désirons voir le comportement de l’activité pour chacun de ces évènements. Pour cela, chaque méthode va afficher son nom dans un Toast. 3.  Exécuter votre application. Que constatez-vous ? A quels moments sont appelés les différentes méthodes que vous avez ré-implémenté ? Dr. Lilia SFAXI www.liliasfaxi.wix.com/liliasfaxi Slide 23 Atelier 2
  • 24. Greeting Personnalisé Nous nous proposons de créer une application intitulée Greeting afin de correspondre à l’interface et comportement suivants: Dr. Lilia SFAXI www.liliasfaxi.wix.com/liliasfaxi Slide 24 Atelier 3