Retour sur MVC. Introduction aux IHM et à la réflexivité Java Vos premiers pas en Swing.

Présentation au sujet: "Retour sur MVC. Introduction aux IHM et à la réflexivité Java Vos premiers pas en Swing."— Transcription de la présentation:

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

2 Retour sur MVC

3 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

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

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

6 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

7 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

8 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

9 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 ?

10 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) ?

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

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

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

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

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

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

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

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

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

20 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

21

22 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

23 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

24 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

25 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

26 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

27 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)

28 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

29 La famille des panneaux
29

30 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

31 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

32 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

33 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

34 Afficheurs 34

35 COMMENT POSITIONNER LES COMPOSANTS ?
35

36 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

37 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

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

39 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

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

41 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

42 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

43 CARDLAYOUT Permet d’empiler des composants (suivant des panneaux)
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

44 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

45 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

46 GRIDBAGLAYOUT (2/2) 46

47 SYNTHESE

48 Hiérarchie Swing

49 Aperçu de Swing swing_palettes.html Arch

50 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]

51 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…

52 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.

53 Exemple de code

54 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