Introduction aux IHM et à la réflexivité Java Vos premiers pas en Swing

Retour sur MVC

Rappel sur le patron MVC MVC pour Modèle-Vue-Contrôleur permet de séparer les données (M), l’interface homme-machine (V) et la logique de contrôle (C) Impose une séparation en 3 couches : M : représente les données de l’application. Définit interaction avec la base de données et le traitement des données V : représente l’interface utilisateur. Effectue aucun traitement, ne fait que l’affichage des données (fournies par M). Possibilité d’avoir plusieurs vues pour un même M C : gère l’interface entre le modèle et le client. Interprète la requête de ce dernier pour lui envoyer la vue correspondante. Effectue la synchronisation entre le modèle et les vues 3

L’exemple du login 2 vues parmi d’autres IHM en Anglais IHM en français

Un modèle 3 variables d’instances Des méthodes log, password, check logCheck passwordCheck connect

Cas d’interaction Cas no 1 le bouton Log in implique la vérification login et password à partir des données saisies. Les données peuvent être modifiées jusqu’au moment de l’utilisation du bouton Action : connexion ou un message d’erreur

Cas d’interaction Cas no 2 le bouton Log in implique la vérification login password à partir des données saisies. Les données peuvent être modifiées jusqu’au moment de leur validation par un retour charriot Actions : connexion ou un message d’erreur Les champs de saisie sont bloqués après retour charriot

Cas d’interaction Cas no 3 : La saisie des données est validée au premier retour chariot Actions : vérification des données faite au fur et à mesure pour le login puis pour le password ce qui peut entrainer un message d’erreur connexion au moment par click sur le bouton

Questions Avez-vous d’autres exemples d’interactions ? Un autre modèle pourrait-il être implémenté ? Avez-vous d’autres exemples d’IHM (Vues) ? Quelle est la différence entre vue et interaction ? Quid de IHM ?

Questions Plusieurs IHM (Vues) peuvent elles interagir de la même façon ? Plusieurs IHM (Vues) peuvent elles interagir différemment ? Peut on changer la façon d’interagir sans modifier une vue (ou le modèle) ? Peut on changer de modèle sans modifier la vue (ou le modèle) ?

Cas d’interaction no 1 Le Modèle Contrôleur no 1 IHM Anglais IHM français Contrôleur no 1

Notifications Où placer les notifications et lesquelles ? dans le modèle? dans la vue ? dans le contrôleur ? 12

Notifications Où gérer les événements et lesquels ? dans le modèle? dans la vue ? dans le contrôleur ? 13

Cas d’interaction no 2 Le Modèle IHM Anglais IHM français Contrôleur no 2

Notifications Où placer les notifications et lesquelles ? dans le modèle? dans la vue ? dans le contrôleur ? 15

Notifications Où gérer les événements et lesquels ? dans le modèle? dans la vue ? dans le contrôleur ? 16

Cas d’interaction no 3 Le Modèle Contrôleur no 3 IHM Anglais IHM français Contrôleur no 3

Notifications Où placer les notifications et lesquelles ? dans le modèle? dans la vue ? dans le contrôleur ? 18

Notifications Où gérer les événements et lesquels ? dans le modèle? dans la vue ? dans le contrôleur ? 19

JDIALOG : CLASSES et BOÎTES DE DIALOGUES Il existe différentes classes pour créer des boîtes de dialogue : JOptionPane : pour créer des boîtes de dialogue standards JColorChooser : pour choisir une couleur JFileChooser : pour permettre de sélectionner un fichier ProgressMonitor : pour afficher la progression d’une opération 20

JOPTIONPANE Permet de créer des boîtes de dialogue standards Permet de faire des avertissements Possède des éléments standardisés : Réponse oui/non, Icônes de danger, d’erreurs, … Est modifiable (boutons, icônes, …) avertissement erreur information 22 question

JCOLORCHOOSER Permet de créer une boîte de dialogue pour choisir une couleur Possède différents onglets correspond aux différents types d’encodage de couleurs 23

JFILECHOOSER Définit une boîte de dialogue pour permettre sélectionner un fichier Possède des boîtes de dialogue par défaut : Pour l’ouverture (showOpenDialog), Pour la sauvegarde (showSaveDialog) 24

APPLET JAVA ÉTEND APPLET OU JAPPLET S’exécute dans une machine virtuelle (celle du navigateur web) et nécessite un fichier html N’a pas de fonction main mais vit un cycle (run) Les principales méthodes sont : init () : quand la page html est chargée la 1ère fois start () : après init et chaque fois que l’on revient sur la page stop () : quand on quitte la page html (on interrompt les méthodes lancées dans start) destroy () : quand l’applet est terminée (on libère toutes les ressources) 25

EXEMPLE D’APPLET : CODE JAVA import java.awt.*; Import java.applet.*; public class HelloWorldApplet extends Applet { Font f = new Font ( « Serif », Font.BOLD, 36); public void paint (Graphics g) { g.setFont(f); g.setColor(Color.red); g.drawString(getParameter (« Chaine »), 10, 30); } <HTML> <TITLE> Applet HelloWorldApplet </TITLE> <APPLET CODE=« HelloWorldApplet.class » WIDTH=200 HEIGHT=300> <PARAM NAME=« Chaine » value = « Hello World »> </APPLET> </HTML> 26

SÉCURITÉ ET APPLET Une applet ne peut pas charger de librairies ou utiliser des méthodes natives Elle ne peut normalement pas lire ou écrire dans des fichiers de l’hôte sur lequel elle s’exécute Elle ne peut pas effectuer de connexions réseaux sauf sur l’hôte dont elle provient Elle ne peut lancer aucun programme de l’hôte sur lequel elle s’exécute 27 Ces restrictions peuvent être levées par un certificat de sécurité (cf. jarsigner, policytool)

TYPES DE PANNEAUX Pour structurer les différents éléments graphiques, on utilise des containers qui font partis de la famille des panneaux. On retrouve : Le JPanel : panneau de base, Le JScrollPane : qui permet d’obtenir des ascenseurs Le JSplitPane : qui permet de diviser en 2 (seulement 2) Le JTabbedPane : qui permet d’avoir différents onglets pour les différents sous-contenus 28

La famille des panneaux 29

JPANEL Le container le plus utilisé pour structurer l’interface Ne possède pas de réelles contraintes (la gestion de l’organisation des éléments est déléguée à un Layout) Peut contenir des sous-panneaux 30

JSCROLLPANE Permet d’obtenir des ascenseurs de manière automatique, Est créé en lui associant le composant que l’on souhaite pouvoir scroller Le composant inclus dans le JScrollPane doit implémenter l’interface Scrollable Quelques éléments qui implémentent cette interface : JTextField, JTextArea, JTree, JTable 31

JSPLITPANE Permet de diviser en deux l’espace zone Peut se construire avec les deux composants contenus dans chacune des zones Possède une orientation (HORIZONTAL_SPLIT ou VERTICAL_SPLIT) 32

JTABBEDPANE Permet d’avoir des onglets Permet de mieux gérer l’espace de travail Chaque onglet est créé avec son panel associé L’onglet peut posséder une icône en plus ainsi qu’un raccourci clavier (Mnemonic) Peut-être fait de manière équivalente avec un CardLayout (à ce moment, il n’y a pas d’onglet) 33

Afficheurs 34

COMMENT POSITIONNER LES COMPOSANTS ? 35

DEUX MANIÈRES Positionner de manière absolue, revient à : Retirer tout gestionnaire d’affichage (setLayout(null)) Placer un par un les éléments en leur donnant leur position dans la fenêtre (méthode setBounds) Positionner en utilisant des gestionnaires d’affichage 36

MISE EN PAGE DES COMPOSANTS La mise en page des éléments s’effectue à l’aide d’un gestionnaire d’affichage (Layout), Tous les containers possèdent une méthode setLayout qui permet de spécifier le type de gestionnaire d’affichage On peut ajouter des contraintes lorsqu’on ajoute un composant 37

LES DIFFÉRENTS TYPE DE LAYOUT BorderLayout, GridLayout, FlowLayout, CardLayout, BoxLayout, GridBagLayout 38

UTILISATION D’UN LAYOUT Création du layout Exemple : BorderLayout bl = new BorderLayout()) 2. Association au container : panel.setLayout(bl) Ajout de composants au container, avec ou sans contrainte panel.add(button, BorderLayout. EAST) 39

BORDERLAYOUT Définit des zones dans lesquelles ajouter des éléments Intéressant pour le panneau principal 40

GRIDLAYOUT Définit une grille où ajouter les composants L’ajout des composants se fait sans préciser de contraintes On déclare le layout de la manière suivante : new GridLayout(0,2) // row, column 0 signifie autant qu’on veut 41

FLOWLAYOUT On ajoute au fur et à mesure les composants, si cela ne tient pas dans la ligne, on commence une nouvelle ligne Gestionnaire d’affichage par défaut des JPanel Possibilité de spécifier l’alignement 42

CARDLAYOUT Permet d’empiler des composants (suivant des panneaux) http://java.sun.com/docs/books/tutorial/uiswing/layout/card.html CARDLAYOUT Permet d’empiler des composants (suivant des panneaux) Le dernier ajouté ou celui spécifié est visible Concept de la pile de cartes 43

BOXLAYOUT Définit une boîte dans laquelle seront ajoutés les différents composants Cette boîte peut-être : Horizontale : X_AXIS Verticale : Y_AXIS On ajoute les éléments au fur et à mesure 44

GRIDBAGLAYOUT (1/2) Gestionnaire d’affichage relativement compliqué à mettre en place Demande de définir toutes les contraintes des différents composants à placer Place les composants au-travers une grille modulaire 45

GRIDBAGLAYOUT (2/2) 46

SYNTHESE

Hiérarchie Swing

Aperçu de Swing http://download.instantiations.com/DesignerDoc/integration/latest/docs/html/palettes/ swing_palettes.html Arch

Aperçu de Swing Les Containers Ont un LayoutManager –add / remove d’un Component –Unicité de lieu –Indice des components Méthodes à connaître •repaint() ! validate() ! •setEnabled(true / false) : activé / désactivé •(Rectangle) getBounds / setBounds(x,y, w, h) : positionne et dimensionne •getWidth() : largeur / getHeight() : hauteur •getX() et getY() : obtenir une coordonnée •setVisible(true / false) •getBackground et setBackground [objet Color, définition RGB]

Aperçu de Swing Des composants JComponent Hérite de Container Méthodes de commodité getSize retourne une Dimension setSize : une Dimension ou deux entiers –Une position •getLocation retourne un Point •setLocation avec un Point ou deux entiers –Coordonnées •Origine au coin supérieur gauche •x (width) vers la droite et y (height) vers le bas –Méthode public void paint(Graphicsg) –setPreferredSize –setDoubleBuffered(true/false) / isDoubleBuffered() –setOpaque(true / false) •Dessin à l’écran : paint appelle –paintComponent –paintBorder –paintChildren Les boutons –JButton /JToggleButton / JCheckBox / JRadioButton –java.awt.ButtonGroup (méthode add) Les champs textuels –JTextField/ JTextArea Etc…

Aperçu de Swing et aussi… Les îcones : javax.swing.ImageIcon créer avec le nom d’un fichier image par exemple Menus : les JMenuBar, JMenu, JMenuItem Les Layout :Basé sur PreferredSize ou une maximisation de l’élément •BorderLayout –par défaut dans une fenêtre –ajout en précisant la zone –add("North", comp) •FlowLayout : en ligne •GridLayout : en tableau •GridBagLayout : avec des contraintes •etc.

Exemple de code

EXEMPLE D’APPLICATION JAVA SWING JFrame frame = new JFrame("TopLevelDemo"); frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); //Create the menu bar. Make it have a green background. JMenuBar greenMenuBar = new JMenuBar(); greenMenuBar.setOpaque(true); /RVB greenMenuBar.setBackground(new Color(154, 165, 127)); greenMenuBar.setPreferredSize(new Dimension(200, 20)); //Create a yellow label to put in the content pane. JLabel yellowLabel = new JLabel(); yellowLabel.setOpaque(true); yellowLabel.setBackground(new Color(248, 213, 131)); yellowLabel.setPreferredSize(new Dimension(200, 180)); //Set the menu bar and add the label to the content pane. frame.setJMenuBar(greenMenuBar); frame.getContentPane().add(yellowLabel,BorderLayout.CENTER); 54