La présentation est en train de télécharger. S'il vous plaît, attendez

La présentation est en train de télécharger. S'il vous plaît, attendez

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

Présentations similaires


Présentation au sujet: "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), linterface homme- machine (V) et la logique de contrôle (C) Impose une séparation en 3 couches : –M : représente les données de lapplication. Définit interaction avec la base de données et le traitement des données –V : représente linterface utilisateur. Effectue aucun traitement, ne fait que laffichage des données (fournies par M). Possibilité davoir plusieurs vues pour un même M –C : gère linterface 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 Lexemple du login 2 vues parmi dautres IHM en Anglais IHM en français

5 Un modèle 3 variables dinstances – log, password, check Des méthodes – logCheck – passwordCheck – connect

6 Cas dinteraction 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 jusquau moment de lutilisation du bouton Action : connexion ou un message derreur

7 Cas dinteraction 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 jusquau moment de leur validation par un retour charriot Actions : connexion ou un message derreur Les champs de saisie sont bloqués après retour charriot

8 Cas dinteraction 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 derreur connexion au moment par click sur le bouton

9 Questions Avez-vous dautres exemples dinteractions ? Un autre modèle pourrait-il être implémenté ? Avez-vous dautres exemples dIHM (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 dinteragir sans modifier une vue (ou le modèle) ? Peut on changer de modèle sans modifier la vue (ou le modèle) ?

11 Cas dinteraction no 1 Le Modèle 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 dinteraction 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 dinteraction no 3 Le Modèle 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 dune 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, derreurs, … Est modifiable (boutons, icônes, …) 22 question information avertissement erreur

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 dencodage 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 louverture (showOpenDialog), – Pour la sauvegarde (showSaveDialog ) 24

25 APPLET JAVA ÉTEND APPLET OU JAPPLET Sexécute dans une machine virtuelle (celle du navigateur web) et nécessite un fichier html Na 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 lon revient sur la page – stop () : quand on quitte la page html (on interrompt les méthodes lancées dans start) – destroy () : quand lapplet est terminée (on libère toutes les ressources) 25

26 EXEMPLE DAPPLET : CODE JAVA Applet HelloWorldApplet 26 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); }

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 lhôte sur lequel elle sexécute Elle ne peut pas effectuer de connexions réseaux sauf sur lhôte dont elle provient Elle ne peut lancer aucun programme de lhôte sur lequel elle sexé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 dobtenir des ascenseurs – Le JSplitPane : qui permet de diviser en 2 (seulement 2) – Le JTabbedPane : qui permet davoir 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 linterface Ne possède pas de réelles contraintes (la gestion de lorganisation des éléments est déléguée à un Layout) Peut contenir des sous-panneaux 30

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

32 JSPLITPANE Permet de diviser en deux lespace 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 davoir des onglets Permet de mieux gérer lespace de travail Chaque onglet est créé avec son panel associé Longlet peut posséder une icône en plus ainsi quun raccourci clavier (Mnemonic) Peut-être fait de manière équivalente avec un CardLayout (à ce moment, il ny a pas donglet ) 33

34 Afficheurs 34

35 COMMENT POSITIONNER LES COMPOSANTS ? 35

36 DEUX MANIÈRES Positionner de manière absolue, revient à : – Retirer tout gestionnaire daffichage (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 daffichage 36

37 MISE EN PAGE DES COMPOSANTS La mise en page des éléments seffectue à laide dun gestionnaire daffichage (Layout), Tous les containers possèdent une méthode setLayout qui permet de spécifier le type de gestionnaire daffichage On peut ajouter des contraintes lorsquon ajoute un composant 37

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

39 UTILISATION DUN LAYOUT 1.Création du layout Exemple : BorderLayout bl = new BorderLayout()) 2. Association au container : panel.setLayout(bl) 3.Ajout de composants au container, avec ou sans contrainte Exemple : 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 Lajout 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 quon 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 daffichage par défaut des JPanel Possibilité de spécifier lalignement 42

43 CARDLAYOUT Permet dempiler 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 daffichage 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 Arch swing_palettes.html

50 Aperçu de Swing Les Containers Les containers Ont un LayoutManager –add / remove dun 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 dun 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 DAPPLICATION JAVA SWING 54 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);


Télécharger ppt "Introduction aux IHM et à la réflexivité Java Vos premiers pas en Swing."

Présentations similaires


Annonces Google