In01 - Programmation Android - 03 - HMI

download In01 - Programmation Android - 03 - HMI

of 97

  • date post

    22-May-2015
  • Category

    Mobile

  • view

    10.115
  • download

    5

Embed Size (px)

description

Voici la suite du cours que je donnerai au CNAM Léman. Cette présentation porte sur les interface utilisateurs et les design pattern associés. Bonne lecture :)

Transcript of In01 - Programmation Android - 03 - HMI

  • 1. session sept 2014 Yann Caron (c) 2014 1 IN01 Programmation Android 03 IHM bases Yann Caron Avec l'aide de Jean-Marc Farinone

2. session sept 2014 Yann Caron (c) 2014 2 Sommaire - Sance 03 Principes et patrons Combinaison ou XML vnements Standard views Menus Intents et chanage des activities Toast 3. session sept 2014 Yann Caron (c) 2014 3 IN01 Sance 03 Principes et patrons 4. session sept 2014 Yann Caron (c) 2014 4 Les IHM des smartphones Pas seulement clavier cran souris Mais cran tactile, clavier virtuel Acclromtre GPS Enregistrement de messages audio (notes audio) Prendre des photos, des vidos, les envoyer par le rseau (MMS) SMS Tlphone Etc. Slide original (c) JMF 5. session sept 2014 Yann Caron (c) 2014 5 Les IHM Android Bibliothque propre Pas d'AWT, ni Swing, ni Java ME/LCDUI Dcrit par fichier XML ou par composition crans grs par des activities, des fragments et des views Slide original (c) JMF 6. session sept 2014 Yann Caron (c) 2014 6 Principes Deux grands principes == Deux arborescences Par combinaison Les IHM sont construites en mettant les composants graphiques les uns l'intrieur des autres Placement des composants Par hritage Les composants graphiques sont obtenus par spcialisation En gnral fournis par le concepteur de la bibliothque Utile pour crer des composants personnaliss (IDE Algoid) Slide original (c) JMF 7. session sept 2014 Yann Caron (c) 2014 7 1er principe : combinaison Slide original (c) JMF 8. session sept 2014 Yann Caron (c) 2014 8 1er principe : combinaison Slide original (c) JMF Activity / Fragment Label1 FishText Label2 FamillyText Linear Layout Linear Layout ButtonSave ButtonCancel 9. session sept 2014 Yann Caron (c) 2014 9 1er principe : combinaison Principe : mettre les composants les uns l'intrieur des autres (hirarchiser, combiner) Components et Containers On obtient un arbre : tre contenu par == tre fils de Deux patrons : composite et decorator 10. session sept 2014 Yann Caron (c) 2014 10 Patron - Composite Agrgation 0..n 11. session sept 2014 Yann Caron (c) 2014 11 Patron - Composite Motivation : manipuler un groupe d'objets/une hirarchie Un composant peut tre : Une feuille (un item : un composant unique) Un Composite (un node : un composant compos d'autres composants) public abstract class Component { public abstract void doStuff(); } public class Composite extends Component{ private final List children = new ArrayList(); public void addChild(Component child) { children.add(child); } @Override public void doStuff() {} } public class Leaf extends Component { @Override public void doStuff() {} } Agrgation 1..* 12. session sept 2014 Yann Caron (c) 2014 12 Patron - Decorator Agrgation 1..1 1 1 13. session sept 2014 Yann Caron (c) 2014 13 Patron - Decorator Motivation : Ajouter dynamiquement une nouvelle responsabilit un objet Un composant peut tre : Une feuille (un item : un composant unique) Un dcorateur (un composant qui encapsule un et un seul autre) Le dcor est gnralement pass dans le constructeur (immutable) public class Decorator extends Component { private Component decored; public Decorator(Component decored) { this.decored = decored; } @Override public void doStuff() { // alter before decored.doStuff(); // alter after } } Altre le comportement 14. session sept 2014 Yann Caron (c) 2014 14 Rsum Le patron composite, permet de crer des vues composes : les layouts en gnral (qui hritent de l'objet ViewGroup) Le patron decorator, permet d'altrer une vue : ScrollView C'est un composite dguis, qu'un seul enfant 15. session sept 2014 Yann Caron (c) 2014 15 2e principe Hritage de classes Spcialisation des classes par hritages successifs Par exemple : MultiAutoCompleteTextView 16. session sept 2014 Yann Caron (c) 2014 16 Patron - MVC Mediator Observer/Observable 17. session sept 2014 Yann Caron (c) 2014 17 Patron - MVC POSA : Pattern-Oriented Software Architecture Motivation : sparer les responsabilits d'un composant graphique Le modle : c'est la donne La vue : c'est la reprsentation visuelle Le contrleur : c'est le chef d'orchestre (spcialisation du mediator) Un excellent article : http://www.infres.enst.fr/~hudry/coursJava/interSwing/boutons5.h tml 18. session sept 2014 Yann Caron (c) 2014 18 MVC - Android Comme vu prcdemment MVC=Model/Vue/Controler L'ide est de sparer les donnes, la prsentation et les traitements Les composants graphiques Android sont en partie bass sur ce principe 19. session sept 2014 Yann Caron (c) 2014 19 Patron Observer/Observable 20. session sept 2014 Yann Caron (c) 2014 20 Patron Observer/Observable Motivation : gestion des vnements L'observateur est une interface qui possde une mthode L'observateur s'abonne l'observable (ce dernier stocke la rfrence des observateurs dans une collection) Lorsque l'observable dclenche son vnement, il boucle sur les rfrences et invoque les mthodes de celles-ci Principe du callback Sur Android, ce sont parfois des observateurs multirfrences ou monorfrences (un seul observateur) 21. session sept 2014 Yann Caron (c) 2014 21 Patron Observer/Observable public interface Observer { void callBack(); } public class Observable { private final List observers = new ArrayList(); public void addObserver(Observer observer) { observers.add(observer); } private void fireEvent() { for (Observer ob : observers) { ob.callBack(); } } } Agrgation Multi-callback Interface Multi-callbacks 22. session sept 2014 Yann Caron (c) 2014 22 Patron Observer/Observable public interface Observer { void callBack(); } public class Observable { private Observer observer; public void setObserver(Observer observer) { this.observer = observer; } private void fireEvent() { observer.callBack(); } } Agrgation Mono-callback Interface Mono-callbacks 23. session sept 2014 Yann Caron (c) 2014 23 Patron Observer/Observable LinearLayout container = (LinearLayout) findViewById(R.id.container); Button button = new Button(this); button.setOnClickListener(new OnClickListener() { @Override public void onClick(View v) { Log.i(this.getClass().getName(), "Button clicked !"); } }); container.addView(button); Classe anonyme Exemple 24. session sept 2014 Yann Caron (c) 2014 24 IN01 Sance 03 Combinaison ou XML 25. session sept 2014 Yann Caron (c) 2014 25 IHM : types de constructions Deux faons de construire une IHM dans Android : En combinant les composants par programmation Comme JavaSE Swing, AWT, JavaME En dclarant les composants dans un fichier XML Comme JavaFX (FXML), WPF (XAML) 26. session sept 2014 Yann Caron (c) 2014 26 Par combinaison @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); // create main layout LinearLayout content = new LinearLayout(this); content.setLayoutParams( new LinearLayout.LayoutParams( LinearLayout.LayoutParams.MATCH_PARENT, LinearLayout.LayoutParams.MATCH_PARENT)); content.setOrientation(LinearLayout.VERTICAL); // add main layout to activity this.setContentView(content); // add controls TextView label1 = new TextView(this); label1.setText(getText(R.string.fish_name)); content.addView(label1); EditText textFish = new EditText(this); textFish.setLayoutParams( new LinearLayout.LayoutParams( LinearLayout.LayoutParams.MATCH_PARENT, LinearLayout.LayoutParams.WRAP_CONTENT)); content.addView(textFish); // etc. } Layout Content layout Ajout des contrles onCreate de l'activity 27. session sept 2014 Yann Caron (c) 2014 27 Par combinaison Comment ? Comme en Swing ! On instancie des objets On les paramtre l'aide des proprits On les hirarchise grce un patron composite () View ViewGroup 1 0..* 28. session sept 2014 Yann Caron (c) 2014 28 Par combinaison Redite : L'IHM est dcrite par programmation en surchargeant la mthode onCreate de l'activity (ou du fragment) On instancie des composants graphiques (LinearLayout, TextView, Button, etc.) On les paramtre (setText, setOrientation, setLayout) On hirarchise (content.addView) Content est le layout auquel on ajoute une vue 29. session sept 2014 Yann Caron (c) 2014 29 Par combinaison Avantages : Dynamique (construction de vues par programmation) Peut tre factoris Inconvnients : Verbeux ! Fastidieux WYSIWYG difficile mettre en uvre 30. session sept 2014 Yann Caron (c) 2014 30 Dclaration par XML Imbrication 31. session sept 2014 Yann Caron (c) 2014 31 Dclaration par XML Le placer dans /res/layout (cf. Cours 02 pour la gestion multirsolution, orientation, etc.) La description d'une activity doit commencer par un Layout Les composants graphiques sont ensuite hirarchiss par encapsulation dans les nuds XML Les composants sont paramtrs avec des attributs XML 32. session sept 2014 Yann Caron (c) 2014 32 Dclaration par XML Avantages : WYSIWYG plus simple mettre en place Plus lisible Inconvnients : Limitations / bogues du WYSIWYG En mode text, autocompletion pas toujours prsente Verbeux 33. session sept 2014 Yann Caron (c) 2014 33 Post-Scriptum - @+id vs. @id Dans le fichier XML, on utilise parfois @+id et parfois @id @+id indique qu'il faut crer une nouvelle entre dans R.java (et sa classe interne id) @id repre simplement l'identificateur id et il n'y a pas de cration dans R.java Slide original (c) JMF 34. session sept 2014 Yann Caron (c) 2014 34 Correspondance XML-Java Comme vu prcdemment, il est possible de dcrire les vues de deux faons Toutes les mthodes Java ont un quivalent sous forme d'un attribut XML La rfrence ce trouve ici : http://developer.android.com/reference/androi d/view/View.html 35. session sept 2014 Yann Caron (c) 2014 35 Correspondance XML-Java Dont voici un extrait 36. session sept 2014 Yann Caron (c) 2014 36 Activity et XML public class BaitActivity extends Activity { private AutoCompleteTextView textName, textBrand; private Button buttonSave; @Override protected void onCreate(Bund