Les interfaces graphiques

Slides:



Advertisements
Présentations similaires
Votre logo à insérer ici
Advertisements

Nom de lintervenant Titre de lintervention. Tapez le titre de votre slide (si besoin) Tapez votre titre principal Tapez votre sous titre ou votre texte.
Agenda Les Share Add-in Le Ruban dOffice "12" DémonstrationRibbonX Programmer le Ruban dOffice "12" DémonstrationCustomTaskPaneDémonstrationDéploiement.
« Les Mercredis du développement » Nouveau format de fichier Template Solution Présenté par Pierre Lagarde Relation Développeurs.
DOM Document Object Model. Généralités Standard du W3C Parseur XML – Génération dun arbre dobjet – Construction totale de larbre DOM est spécifié en IDL.
Android View, onClick, Activity, Modèle Vue Contrôleur
Vocabulaire pour la passage du modèle conceptuel des données au modèle relationnel des données. MCDMRD EntitéTable PropriétésChamps, attribut IdentifiantClé
Formulaire HTML Introduction. Définition de formulaire.
PARcours Individualisé de Formation (PAR.I.F.) présentation de la messagerie ICASSO.
TP de mise en oeuvre d’une PKI avec Openssl
Introduction à RRDTool
Cours n°1 Présenté par : Aurélien Baillard Aboubacar Camara Sébastien Simon Jeremy Landre Brown Ebiémi.
Windows XP Professionnel
Windows XP Professionnel
© 2010 Agence Régionale de Santé 1/13 Messagerie Instantanée Support dauto-formation utilisateur.
Recherche d'un dossier patient
Petite introduction au logiciel de traitement statistique SPSS
PHOTOFILTRE (Prise en main) Cliquez pour continuer
Support.ebsco.com Tutoriel Rechercher des livres électroniques sous EBSCOhost.
LOGO Profile Enterprise Java Beans Réaliser par: HAMROUNI Aymen HOUIJI Manel WESLATI Yassine.
Mise en place dun ebook gratuit sur Edition999 Logiciels nécessaires : Acrobat Pro Photo Filtre Mobipocket Creator Calibre.
Mettre en place une stratégie de veille numérique en adéquation avec un projet professionnel.
Système de gestion des demandes Création et consultation des billets
Initiation et perfectionnement à lutilisation de la micro-informatique Initiation à Microsoft Word 2008 Troisième partie ©Yves Roger Cornil
Bienvenue sur le Wiki de domaines de compétences! Accédez au wiki sur la barre de navigation en appuyant sur longlet « Wiki de compéten- ces ».
TRAQUE SUR INTERNET. Recherche classique Ne pas perdre le fil de ses recherches Gérer les favoris Sites étrangers Recherche et enregistrement dimages.
Création des pièces d'un puzzle avec Photoshop
Formuler des hypothèses
AIDE WALLPASS-VNC Note : Les photos décran peuvent différer selon les versions et les systèmes. Vous pouvez quitter ce PPS par la touche « Echap » ou «
DIBA p r o g i c i e l. DIBA est un progiciel dédié à la gestion: des compagnies dassurance. des cabinets de courtage Il est entièrement paramétrable.
Injection de dépendances
Introduction au Développement d’Application Android
Développement Mobile : Android
Titre de votre session Prénom NOM Fonction ORGANISME Votre logo
Python Interfaces graphiques
Présentation de Windows Presentation Foundation Vers une nouvelle génération dinterfaces graphiques.
La programmation objet Illustration de la POO en Pascal
28 novembre 2012 Grégory Petit
Historique de SystemC Regroupe 4 courants didées: SCENIC Project : Synopsys+UC Irvine Philips System-Level Data Types, VSIA SLD DWG IMEC, Hardware-Software.
ADOBE FLEX 4. © Logica All rights reservedNo. 2 Introduction Flex en action Autour de Flex Logica Le programme.
JUnit Présentation complète de JUnit et « guide d’utilisation » en 13 transparents.
Formation Développeur Java Applet et interfaces graphiques avec AWT
Android UIThread, Thread, Handler et AsyncTask
Android View, onClick, Activity, Modèle Vue Contrôleur
Feuilles de styles CSS Syntaxe d'application d'un style à une balise HTML : Les différents types de style : Pourquoi utiliser un style ? Possibilité étendue.
31 octobre 2012 Grégory Petit
GWT - QuickStart V 1.0 / May. Mise en place de l’environnement Java : Version 1.4 minimum IDE Eclipse 3.3 Europa : lien (Eclipse J2EE recommandée)‏lien.
Première CTP le 4 décembre Nouvelle CTP depuis le 1 er février RTM milieu de cette année.
Le langage XHTML 420-S4W-GG Programmation Web Client
Créer son site web Chapitre II. Les caractères spéciaux Les navigateurs ne reconnaissent pas les caractères spéciaux. Heureusement chaque caractère possède.
Cliquez pour modifier le style du sous-titre Cliquez pour modifier le style du titre.
Exploration de la programmation android Formation Assurer par: Club FreeWays Réalisé par: BOUHJJA Lamia.
Introduction à Visual Studio C++ (VC++)
Création projet Android Didacticiel. Plan de leçon  Configurer la tablette pour le développement  Lancer un projet Android « Hello World » sous Eclipse.
Cliquez pour modifier le style du titre
Projet d’Année Lecteur MP3 pour musiciens sous Android
Titre de votre session Votre logo à insérer ici Prénom NOM Fonction ORGANISME.
Programmation mobile: Android
Apéro Tech’ ANDROID Damien Chaillou 1 / 25. Plan de la présentation : 1.Installation du poste de travail 2.Android SDK 3.Hello World 4.User Interface.
HTML Rappels des fondamentaux
Semaine 05 - Android - Partie 02 Le TweetListActivity.
Dreamweaver Séance 1.
Dreamweaver le retour Avec Les Formulaires Les Calques
Introduction au HTML Qu’est ce que le HTML ?
Ressources et fichiers XML O.Legrand G.Seront. Ressources et fichiers XML developer.android.com/guide/topics/resources/index.htmll Les ressources suivantes.
Les vues O.Legrand G.Seront. Les vues Dans Android, une ihm est composée de vues. Ces vues.
Accessibilité Android
Programmation Android Première application Android
Programmation Android GUI (widgets) et ressources
Programmation Android Les listes
Transcription de la présentation:

Les interfaces graphiques ANDROID Les interfaces graphiques Interface graphique = seule interaction avec l’utilisateur. Pas de souris, de clavier physique, de console. Doit être intuitive, pas trop chargée car peu de place Si possible, une chose à la fois Android fournit un API très riche pour construire des interfaces graphiques, auquel nous allons vous introduire INF6405 - 19 octobre 2011 Hassan Makke, Simon Marchi et Mohamed Taboubi Présentation disponible à http://nova.polymtl.ca/~simark/PresAndroidUI.pptx

Plan Concepts de base Layouts et View disponibles View, ViewGroup, Layouts Layouts et View disponibles Méthode déclarative (XML) Moi: concepts de base, comment créer l’interface la plus simple Hassan: présentation des view et layout disponibles dans la librairie d’Android Mohamed: linearlayout, le plus simple et le plus utilisé surtout quand on commence et méthode déclarative pour construire une interface.

Plan Concepts de base Layouts et View disponibles View, ViewGroup, Layouts Layouts et View disponibles Méthode déclarative (XML)

Concepts de base Patron de conception composite View: élément d’interface graphique de base (bouton, champ de texte, …) ViewGroup: élément d’interface graphique composite, contient d’autres View Patron de conception composite. C’est très similaire aux autres lib d’interface graphique, comme GTK ou QT. Structure de widgets en arbre. Hiérarchie d’éléments graphiques, certains widgets servent à regrouper d’autres widgets, ce sont les composites. Classe d’éléments de base View: objet qui peut être dessiné à l’écran. Chaque implémentation de View spécifie comment il se fait dessiner Classe ViewGroup hérite de View, mais a la particularité de contenir d’autres View. Les ViewGroup portent généralement le suffixe Layout

Concepts de base Mon bouton implémente la fonction draw en traçant un dessin de bouton. Les ViewGroup, comme le LinearLayout, ont une méthode permettant d’ajouter des View. Sa fonction draw est implémentée simplement en appelant les draw de ses enfantsé

Concepts de base Une interface par activité (Activity) Initialisation de l’interface graphique lors de la création de l’activité (méthode onCreate) Une vue racine (méthode setContentView) Dans Android, on a le concept d’activité. Une activité possède une seule interface. Un menu = une activité, la page suivante de mon application sera une autre activité. Chaque activité possède donc une View racine qui est initialisée lors de la création de l’activité. Pour dessiner l’interface, elle appelle la méthode draw de cette View. Généralement une View composite, parce qu’on veut plus qu’un widget.

Hello world Créer une classe dérivée de Activity Surcharger onCreate(Bundle) Attention, laisser l’appel à super.onCreate(Bundle) Créer une View, la donner à setContentView(View) Pour créer une activité avec une interface de base 1- Créer une classe dérivée d’Activity 2- Surcharger onCreate dans laquelle on crée la vue. On assigne la vue racine de l’activité avec setContentView

Hello world 1- Créer un nouveau projet Android 2- Lui donner un nom, package, spécifier la version d’Android qu’on utilise 3- Par défaut, Eclipse nous crée une activité de base On voit qu’elle hérite de Activity qu’elle surcharge onCreate qu’il y a l’appel à onCreate de la classe mère L’exemple utilise la méthode déclarative que Mohamed va décrire un peu plus tard, je donne un exemple de façon programmatique pour comprendre le fonctionnement On crée d’abord un LinearLayout, qui dispose simplement les objets de façon linéaire. On spécifie qu’on veut que les objets soient alignés de façon verticale. On crée deux View enfant simples, un TextView qui est un champ de texte statique et un EditText qui est un champ de texte éditable par l’utilisateur. On ajoute ces deux View au Layout. On spécifie que le Layout est le View racine de notre activité. L’activité va demander à layout de se dessiner, layout va demander à ses deux enfants de se dessiner. On voit le résultat, une étiquette Nom et un champ de texte.

Plan Concepts de base Layouts et View disponibles View, ViewGroup, Layouts Layouts et View disponibles Méthode déclarative (XML)

Les View disponibles TextView EditText CheckBox ToggleButton RadioGroup Button Spinner AutoCompleteTextView DatePicker TimePicker ImageView ImageButton ProgressBar AnalogClock DigitalClock RatingBar

TextView TextView: simple zone de texte Représentation: Couleur Police de caractères Dimensions Convertit automatiquement les adresses courriel, numéros de téléphones, URL en éléments cliquables. Documentation: http://developer.android.com/reference/android/widget/TextView.html

EditText EditText: champ d’entrée de texte Masques de saisie android:phoneNumber="true“ android:capitalize android:digits (caractère autorisés seulement) android:password="true" Documentation: http://developer.android.com/reference/android/widget/EditText.html

CheckBox CheckBox: case à cocher Style peut être appliqué sur le label du checkbox Documentation: http://developer.android.com/reference/android/widget/CheckBox.html

ToggleButton ToggleButton: boutton poussoir Deux états Attribut textuel pour chaque état Documentation: http://developer.android.com/reference/android/widget/ToggleButton.html

RadioGroup RadioGroup: ensemble d’options, une seule peut être choisie à la fois Une fois une nouvelle option choisie, l'ancienne valeur est désélectionnée Documentation: http://developer.android.com/reference/android/widget/RadioGroup.html

Button Button: bouton pour déclencher une action Hérite de TextView button.setOnClickListener ( new Button.OnClickListener() {     public void onClick(View v) {         //Action     } } ); android:onClick="maFonction" Documentation: http://developer.android.com/reference/android/widget/Button.html

Spinner Spinner: liste déroulante Liste de valeurs Une seule à choisir Une fois choisie, seule cette valeur reste et les autres disparaissent Documentation: http://developer.android.com/reference/android/widget/Spinner.html

AutoCompleteTextView AutoCompleteTextView: liste déroulante éditable Choisir de la liste ou ajouter une valeur La liste de choix apparait après avoir entré n lettres Documentation: http://developer.android.com/reference/android/widget/AutoCompleteTextView.html

DatePicker DatePicker: choisir une date Enregistrer un callback pour capter les changements des valeurs avec DatePicker.OnDateChangedListener Afficher une boîte de dialogue DatePicker avec DatePickerDialog Documentation: http://developer.android.com/reference/android/widget/DatePicker.html

TimePicker TimePicker: choisir une heure Classes AM/PM ou 24 heures DatePicker.OnTimeChangedListener TimePickerDialog AM/PM ou 24 heures Documentation: http://developer.android.com/reference/android/widget/TImePicker.html

ImageView ImageView: espace dont la représentation est une image Source d'image: Répertoire URI Fonctionnalités de transformation: Taille de l'image Documentation: http://developer.android.com/reference/android/widget/ImageView.html

ImageButton ImageButton: bouton dont la représentation est une image Hérite d'ImageView Action avec setOnClickListener Lors d'un clic, l'image sera entourée d'un cadre orange Documentation: http://developer.android.com/reference/android/widget/ImageButton.html

ProgressBar ProgressBar: rend compte de l’avancement d’une tâche qui dure un certain temps Documentation: http://developer.android.com/reference/android/widget/ProgressBar.html

AnalogClock AnalogClock: Horloge analogique Affiche l'heure courante Pas possible de régler l'horloge sur une autre heure Documentation: http://developer.android.com/reference/android/widget/AnalogClock.html

DigitalClock DigitalClock: Horloge numérique Affiche l'heure courante AM/PM ou 24 heures Pas possible de régler l'horloge sur une autre heure Documentation: http://developer.android.com/reference/android/widget/DigitalClock.html

RatingBar RatingBar: rendu visuel d’une note Pour choisir si le widget est éditable android:isIndicator Nombre d’étoiles dynamique Documentation: http://developer.android.com/reference/android/widget/RatingBar.html

Les layouts disponibles ListView FrameLayout LinearLayout TableLayout RelativeLayout Documentation: http://developer.android.com/guide/topics/ui/layout-objects.hrml

ListView ListView: place les widgets verticalement Visuellement séparés par une ligne Si (hauteurCumulée > taille de l'écran) La liste devient défilante Utilisée pour créer un menu http://www.androidpeople.com/wp-content/uploads/2010/01/listviewtextfilterexample.png Documentation: http://developer.android.com/reference/android/widget/ListView.html

FrameLayout FrameLayout: empile les widgets les un sur les autres Documentation: http://developer.android.com/reference/android/widget/FrameLayout.html

LinearLayout LinearLayout: aligne les widgets dans une seule direction Horizontal ou vertical Documentation: http://developer.android.com/reference/android/widget/LinearLayout.html

TableLayout TableLayout: agence les widgets sur un quadrillage http://developer.android.com/images/table_layout.png Documentation: http://developer.android.com/reference/android/widget/TableLayout.html

RelativeLayout RelativeLayout: place les widgets par rapports aux autres widgets http://developer.android.com/images/designing_ui_layout_example.png Documentation: http://developer.android.com/reference/android/widget/RelativeLayout.html

Plan Concepts de base Layouts et View disponibles View, ViewGroup, Layouts Layouts et View disponibles Méthode déclarative (XML) Moi: concepts de base, comment créer l’interface la plus simple Hassan: présentation des view et layout disponibles dans la librairie d’Android Mohamed: linearlayout, le plus simple et le plus utilisé surtout quand on commence et méthode déclarative pour construire une interface.

Méthode déclarative

Méthode déclarative

Méthode déclarative

LinearLayout Layouts : 2 Constructeurs : layout_width et layout_height WRAP_CONTENT FILL_PARENT ou MATCH_PARENT Des attributs : android:orientation android:background android:clickable android:id Etc. http://developer.android.com/reference/android/widget/LinearLayout.html

Avantages de la méthode déclararive Le fichier XML : Éditeur de texte ordinaire; Syntaxe relativement simple et sans rapport avec le JAVA; La visibilité de l’architecture de l’application; Un fichier ressource : On peut changer le fichier XML sans avoir besoin de recompiler le projet; Tout élément de java a son équivalent en XML portant aussi le même nom; API d’Android décrit à la fois les classes Java et le XML;

Programmatique ou déclarative ? Quoi utiliser ? Déclarative : déclarer tout élément statique dans l’interface user. Programmatique : gérer les intéractions.

Exemple

Conclusion Voir l’interface comme une arborescence Utiliser la méthode déclarative (XML) ! Aller voir les exemples sur le guide du développeur Android: http://developer.android.com/guide/topics/ui/

Questions / Discussion