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

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

Embed Size (px)

Citation preview

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

POO3 Introduction aux IHM et à la

réflexivité Java

Vos premiers pas en Swing

Page 2: POO3 Introduction aux IHM et à la réflexivité Java Vos premiers pas en Swing

Retour sur MVC

Page 3: POO3 Introduction aux IHM et à la réflexivité Java Vos premiers pas en Swing

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

Page 4: POO3 Introduction aux IHM et à la réflexivité Java Vos premiers pas en Swing

Vous avez vu comment écrire la partie Modèle

On va voir la partie Vue

Page 5: POO3 Introduction aux IHM et à la réflexivité Java Vos premiers pas en Swing

PARTIE 2 : LA VUE• Principes généraux

• Hiérarchies des composants– Des Containers spécifiques– La famille des panneaux– Les autres composants

• Les afficheurs (Layout)

5

Page 6: POO3 Introduction aux IHM et à la réflexivité Java Vos premiers pas en Swing

Des éléments graphiques : ComponentDéfinition d’un élément graphique avecune dimension, une positionDes Coordonnées(Origine coin supérieur gauche, x (width) vers la droite et y (height) vers le bas)

Des morceaux d’écrans : GraphicsContexte graphiquePermet de dessiner –Changer de crayon : couleur, formes géométriques, images, chaînes de caractères- Automatiquement redimensionnés, réaffichés

Que trouve-ton dans les librairies graphiques : RAPPEL

Des éléments graphiques Contenant Container : qui contiennent d’autres éléments graphiques organisés

Du Formattage  : LayoutManagerDéfinition de l’organisationEn ligne, en tableau, avec des contraintes,etc

Page 7: POO3 Introduction aux IHM et à la réflexivité Java Vos premiers pas en Swing

PRINCIPES GÉNÉRAUX

• Pour la création des composants :1. On choisit le container – on le

crée 2. On précise le panneau dans lequel

on dispose les composants (contenu)

3. On crée les événements sur les composants.

IL PEUT Y AVOIR PLUSIEURS PANNEAUX DANS UNE FENETRE

7

Page 8: POO3 Introduction aux IHM et à la réflexivité Java Vos premiers pas en Swing

PRINCIPES GÉNÉRAUX

Exemple pour la création des composants

1. Création d’un JFrame,2. Construction du contenu dans un panneau (JPanel) ajouté

au panneau de base : le contentPane3. Traitement des événements sur les composants par des

procédures appelées écouteurs (listener) d’événement

8

Page 9: POO3 Introduction aux IHM et à la réflexivité Java Vos premiers pas en Swing

PRINCIPES GÉNÉRAUX• Organiser l’affichage des composants

1. On crée un container (JPanel ou autre)2. Si on ne souhaite pas utiliser le layout par défaut, on

définit une mise en page des composants du container en lui associant un afficheur (LayoutManager = gestionnaire d’affichage)

3. On ajoute ensuite les composants primitifs au container

9

Page 10: POO3 Introduction aux IHM et à la réflexivité Java Vos premiers pas en Swing

CREATION D’UN PANNEAU

class ButtonPanel extends JPanel     implements ActionListener    // interface écouteur d'événements { private JButton Boutonjaune;    private JButton BoutonBleu;    private JButton BoutonRouge; 

PLACER DES COMPOSANTS DANS LE PANNEAU   public ButtonPanel() // constructeur de la classe ButtonPanel    {  Boutonjaune = new JButton("Jaune");       BoutonBleu = new JButton("Bleu");       BoutonRouge = new JButton("Rouge");       // Insertion des trois boutons dans l'objet ButtonPanel       add(Boutonjaune);       add(BoutonBleu);       add(BoutonRouge); ASSOCIER DES EVENEMENTS AUX COMPOSANTS      // Les sources d'événements sont déclarées à l'écouteur       Boutonjaune.addActionListener(this);        BoutonBleu.addActionListener(this);        BoutonRouge.addActionListener(this);     }   

Page 11: POO3 Introduction aux IHM et à la réflexivité Java Vos premiers pas en Swing

{   public void actionPerformed(ActionEvent evt)    // Permet de traiter l'événement en fonction de l'objet source    {  Object source = evt.getSource();       Color color = getBackground();       if (source == Boutonjaune) color = Color.yellow;       else if (source == BoutonBleu) color = Color.blue;       else if (source == BoutonRouge) color = Color.red;       setBackground(color);       repaint();    } }

TRAITEMENT DES EVENEMENTS

Page 12: POO3 Introduction aux IHM et à la réflexivité Java Vos premiers pas en Swing

CREATION DE LA FENETRE ET PLACEMENT DU PANNEAUclass ButtonFrame extends JFrame {  public ButtonFrame()    {  setTitle("ButtonTest");       setSize(300, 200);       addWindowListener(new WindowAdapter()          {  public void windowClosing(WindowEvent e)             {  System.exit(0);             }          } );       Container contentPane = getContentPane();       contentPane.add(new ButtonPanel());    } } public class ButtonTest {  public static void main(String[] args)    {  JFrame frame = new ButtonFrame();       frame.show();     }

Page 13: POO3 Introduction aux IHM et à la réflexivité Java Vos premiers pas en Swing

ARBRE DE COMPOSANTS • L’ajout d’un composant à un composant (container)

implique la construction d’un sous arbre - le composant ajouté est le fils

• Le parent contient les composants qui lui sont ajoutés• La méthode getParent() sur un composant retourne le

parent (de type Container)

13On a donc une arborescence des composants

Page 14: POO3 Introduction aux IHM et à la réflexivité Java Vos premiers pas en Swing

Exemple : ARBRE DE COMPOSANTS

14

Page 15: POO3 Introduction aux IHM et à la réflexivité Java Vos premiers pas en Swing

EXEMPLE D’APPLICATION JAVA SWING

15

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);/RVBgreenMenuBar.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);

Page 16: POO3 Introduction aux IHM et à la réflexivité Java Vos premiers pas en Swing

PARTIE 1 : LA VUE• Principes généraux• Hiérarchies des composants

– Des Containers spécifiques– La famille des panneaux– Les autres composants

• Les afficheurs (Layout)• Les Look’N’Feel• Petits conseils

16

Page 17: POO3 Introduction aux IHM et à la réflexivité Java Vos premiers pas en Swing

DES CONTAINERS SPÉCIFIQUES• JFrame : le cadre principal d'une application. Il peut

contenir des menus et d'autres composants.• JDialog : une fenêtre de dialogue avec l'utilisateur.

Son « parent » (argument requis par ses créateurs) sert essentiellement à la placer dans l'écran.

• JApplet : classe de base pour les applets Java 2. Les applets sont des applications Java pouvant tourner à l'intérieur d'un navigateur Web.

17

Page 18: POO3 Introduction aux IHM et à la réflexivité Java Vos premiers pas en Swing

JFRAME : ILLUSTRATION

18

Page 19: POO3 Introduction aux IHM et à la réflexivité Java Vos premiers pas en Swing

JFRAME PAR L’EXEMPLE

19

import javax.swing.*;public class TryWindow {

static JFrame myWindow = new JFrame (''ceci est un titre''); public static void main (String[] args) {

myWindow.setBounds (50, 100, 400, 150); myWindow.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);myWindow.setVisible(true);

}}(0,0) x

yh

w

X=50Y=100W=400H=150

Page 20: POO3 Introduction aux IHM et à la réflexivité Java Vos premiers pas en Swing

JFRAME PAR L’EXEMPLE

20

(0,0) x

yh

w

•setBounds définit la position et la taille•setVisible rend visible la fenêtre•setDefaultCloseOperation détermine ce qu'il se passe lorsque l'on ferme la fenêtre

DISPOSE_ON_CLOSE - détruit le JFrame et ses composants mais ne termine pas l'applicationDO_NOTHING_ON_CLOSEHIDE_ON_CLOSE

Page 21: POO3 Introduction aux IHM et à la réflexivité Java Vos premiers pas en Swing

AUTRES MÉTHODES• setTitle (String) : pour mettre le titre de la

fenêtre• setSize (int width, int height)• setLocation (int x, int y) : pour déplacer la fenêtre• dispose () : pour fermer la fenêtre• pack () : ajuste chaque composant à sa taille

optimale et retaille la fenêtre

21

Page 22: POO3 Introduction aux IHM et à la réflexivité Java Vos premiers pas en Swing

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ération22

Page 23: POO3 Introduction aux IHM et à la réflexivité Java Vos premiers pas en Swing
Page 24: POO3 Introduction aux IHM et à la réflexivité Java Vos premiers pas en Swing

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, …) 24question

information

avertissement

erreur

Page 25: POO3 Introduction aux IHM et à la réflexivité Java Vos premiers pas en Swing

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

25

Page 26: POO3 Introduction aux IHM et à la réflexivité Java Vos premiers pas en Swing

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)

26

Page 27: POO3 Introduction aux IHM et à la réflexivité Java Vos premiers pas en Swing

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

Page 28: POO3 Introduction aux IHM et à la réflexivité Java Vos premiers pas en Swing

EXEMPLE D’APPLET : CODE JAVA<HTML> <TITLE> Applet HelloWorldApplet

</TITLE> <APPLET

CODE=« HelloWorldApplet.class » WIDTH=200 HEIGHT=300><PARAM NAME=« Chaine » value =

« Hello World »></APPLET></HTML>

28

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); }}

Page 29: POO3 Introduction aux IHM et à la réflexivité Java Vos premiers pas en Swing

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

29Ces restrictions peuvent être levées par un certificat de sécurité (cf. jarsigner, policytool)

Page 30: POO3 Introduction aux IHM et à la réflexivité Java Vos premiers pas en Swing

Hiérarchie de composants

Page 31: POO3 Introduction aux IHM et à la réflexivité Java Vos premiers pas en Swing

HIÉRARCHIE DES CLASSES

31

Page 32: POO3 Introduction aux IHM et à la réflexivité Java Vos premiers pas en Swing

Aperçu de Swing Les Containers

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]

Page 33: POO3 Introduction aux IHM et à la réflexivité Java Vos premiers pas en Swing

La famille des panneaux

33

Page 34: POO3 Introduction aux IHM et à la réflexivité Java Vos premiers pas en Swing

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

34

Page 35: POO3 Introduction aux IHM et à la réflexivité Java Vos premiers pas en Swing

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

35

Page 36: POO3 Introduction aux IHM et à la réflexivité Java Vos premiers pas en Swing

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

36

Page 37: POO3 Introduction aux IHM et à la réflexivité Java Vos premiers pas en Swing

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)

37

Page 38: POO3 Introduction aux IHM et à la réflexivité Java Vos premiers pas en Swing

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)

38

Page 39: POO3 Introduction aux IHM et à la réflexivité Java Vos premiers pas en Swing

LES DIFFÉRENTS PANNEAUX D’UN JFRAME, JDIALOG, JAPPLET

• S’obtiennent par :– getRootPane () zone de la fenêtre sous le titre– getContentPane () zone où les éléments sont ajoutés– getGlassPane () zone transparente dessinée au-

dessus du JRootPane utilisé pour afficher des pop-up menus 39

Page 40: POO3 Introduction aux IHM et à la réflexivité Java Vos premiers pas en Swing

Autres composants

40

Page 41: POO3 Introduction aux IHM et à la réflexivité Java Vos premiers pas en Swing

LISTE NON EXHAUSTIVE DE COMPOSANTS SWING

• JButton,• JLabel,• JTextField : une ligne de texte,• JTextArea : une zone de texte,• JCheckBox : boîte à cocher,• JRadioButton : bouton pour sélection unique (associé à

ButtonGroup),• JMenu et JMenuItem : un menu et ses éléments (inclus dans une

JMenuBar)• JPopMenu : un menu flottant,• JToolTip : une bulle d’aide,• … 41

Page 42: POO3 Introduction aux IHM et à la réflexivité Java Vos premiers pas en Swing

CRÉATION D’UN MENU

• Pour créer un menu, il faut : – Une barre de menu (JMenuBar),– Un menu (JMenu),– Des éléments dans ce menu (JMenuItem),

• Sur le menu, il est possible d’ajouter un Mnemonic– Est associé à un caractère (setMnemonic(char))– Permet d’accéder au menu directement en faisant : Alt+Char– Fonctionne également pour les boutons

42

Page 43: POO3 Introduction aux IHM et à la réflexivité Java Vos premiers pas en Swing

CRÉATION D’UN MENU

• Sur les JMenuItem il est possible d’ajouter des accélérateurs : – Permet d’associer une combinaison du type Ctrl+Touche– Se définit pas : setAccelerator(KeyStroke.getKeyStroke

( KeyEvent.LA_TOUCHE, ActionEvent.LE_MASQUE)

43

Page 44: POO3 Introduction aux IHM et à la réflexivité Java Vos premiers pas en Swing

ILLUSTRATION D’UN MENU

44

Page 45: POO3 Introduction aux IHM et à la réflexivité Java Vos premiers pas en Swing

JLABEL• Permet de définir un label• Peut comporter : une icône, du texte ou les

deux

45

ImageIcon ii = new ImageIcon(‘‘icon.jpg’’);Jlabel jl = new JLabel(‘‘text + icône’’, ii, JLabel.CENTER);

Page 46: POO3 Introduction aux IHM et à la réflexivité Java Vos premiers pas en Swing

JLABEL• Méthodes intéressantes :

– setEnabled(boolean) : pour activer/désactiver la zone (permet de griser le label)

– setHorizontalAlignement(constante) pour contrôler l’alignement du texte

46

Page 47: POO3 Introduction aux IHM et à la réflexivité Java Vos premiers pas en Swing

LES BORDURES• Il est possible d’attribuer une bordure à un JComponent :

setBorder(border)• Pour obtenir la bordure, on utilise les méthodes statiques de

la classe BorderFactory : Border Factory.createEtchedBorder()

47

Page 48: POO3 Introduction aux IHM et à la réflexivité Java Vos premiers pas en Swing

Aperçu de SwingDes composants

JComponent Hérite de ContainerMéthodes de commoditégetSize retourne une DimensionsetSize : 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–Les champs textuels –JTextField/ JTextAreaEtc…

Page 49: POO3 Introduction aux IHM et à la réflexivité Java Vos premiers pas en Swing

Exemple• import javax.swing.*;

import java.awt.*;

public class FlowerPower { public static void main(String[] args) { JFrame fenetre = new JFrame(); JPanel panel = new JPanel();

JLabel etiquette = new JLabel("Aujourd'hui: "); JCheckBox premier = new JCheckBox("Lundi"); JCheckBox deuxieme = new JCheckBox("Mardi"); JCheckBox troisieme = new JCheckBox("Mercredi"); JCheckBox quatrieme = new JCheckBox("Jeudi"); JCheckBox cinquieme = new JCheckBox("Vendredi", true); JCheckBox sixieme = new JCheckBox("Samedi"); JCheckBox septieme = new JCheckBox("Dimanche");

Page 50: POO3 Introduction aux IHM et à la réflexivité Java Vos premiers pas en Swing

Exemple panel.add(etiquette);

panel.add(premier); panel.add(deuxieme); panel.add(troisieme); panel.add(quatrieme); panel.add(cinquieme); panel.add(sixieme); panel.add(septieme);

fenetre.setContentPane(panel); fenetre.setTitle("Wesh mate mon flow!"); fenetre.setBounds(100,100,200,200); fenetre.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); fenetre.setVisible(true); } }

Page 51: POO3 Introduction aux IHM et à la réflexivité Java Vos premiers pas en Swing

FlowLayout par défaut

Page 52: POO3 Introduction aux IHM et à la réflexivité Java Vos premiers pas en Swing

Afficheurs

52

Page 53: POO3 Introduction aux IHM et à la réflexivité Java Vos premiers pas en Swing

COMMENT POSITIONNER LES COMPOSANTS ?

53

Page 54: POO3 Introduction aux IHM et à la réflexivité Java Vos premiers pas en Swing

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

54

Page 55: POO3 Introduction aux IHM et à la réflexivité Java Vos premiers pas en Swing

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

55

Page 56: POO3 Introduction aux IHM et à la réflexivité Java Vos premiers pas en Swing

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

56

Page 57: POO3 Introduction aux IHM et à la réflexivité Java Vos premiers pas en Swing

UTILISATION D’UN LAYOUT1. 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) 57

Page 58: POO3 Introduction aux IHM et à la réflexivité Java Vos premiers pas en Swing

BORDERLAYOUT• Définit des zones dans lesquelles ajouter des

éléments• Intéressant pour le panneau principal

58

Page 59: POO3 Introduction aux IHM et à la réflexivité Java Vos premiers pas en Swing

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

59

Page 60: POO3 Introduction aux IHM et à la réflexivité Java Vos premiers pas en Swing

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

60

Page 61: POO3 Introduction aux IHM et à la réflexivité Java Vos premiers pas en Swing

CARDLAYOUT• Permet d’empiler des composants (suivant des

panneaux)• Le dernier ajouté ou celui spécifié est visible• Concept de la pile de cartes

61

http://java.sun.com/docs/books/tutorial/uiswing/layout/card.html

Page 62: POO3 Introduction aux IHM et à la réflexivité Java Vos premiers pas en Swing

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

62

Page 63: POO3 Introduction aux IHM et à la réflexivité Java Vos premiers pas en Swing

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

63

Page 64: POO3 Introduction aux IHM et à la réflexivité Java Vos premiers pas en Swing

GRIDBAGLAYOUT (2/2)

64

Page 65: POO3 Introduction aux IHM et à la réflexivité Java Vos premiers pas en Swing

Aperçu de Swinget 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.

Page 66: POO3 Introduction aux IHM et à la réflexivité Java Vos premiers pas en Swing

Modèle & Vue

Page 67: POO3 Introduction aux IHM et à la réflexivité Java Vos premiers pas en Swing

MODÈLE/VUE AVEC LES JLIST ET LES JTABLE

• Il est possible de partager le modèle de données d’une JTable ou d’une JList à d’autres composants considérés comme d’autres vues de l’objet JTable ou JList

• Par exemple : une liste de noms affichée dans une JList. La JList est une vue (interactive) de la liste de noms permettant la sélection d’élément.

• Une représentation tabulaire de la même liste est une autre vue

• Un texte qui indique le nombre d’éléments de la liste est une autre vue du modèle

67

Page 68: POO3 Introduction aux IHM et à la réflexivité Java Vos premiers pas en Swing

ILLUSTRATION

68

Page 69: POO3 Introduction aux IHM et à la réflexivité Java Vos premiers pas en Swing

Définition du modèle associé

• Si le modèle est décrit par une interface ListModel / TableModel prédéfinie, • L’interface permet d’expliciter comment gérer les données du

modèle et d’ajouter des vues (écouteurs de changements sur le modèle)

Rem : il existe généralement une classe Adapter nommée Default<X>Model avec <X>=List ou Table

• Si le modèle change, il génère un événement et notifie les vues (via des méthodes en fire<…>) 69

Page 70: POO3 Introduction aux IHM et à la réflexivité Java Vos premiers pas en Swing

Définition d’une nouvelle vue

• Pour qu’un autre composant soit considéré comme une vue, il doit : – Implémenter l’interface adéquate pour être écouteur de

l’événement de changement de modèle– Se faire ajouter à la liste des écouteurs du modèle

70

Page 71: POO3 Introduction aux IHM et à la réflexivité Java Vos premiers pas en Swing

JLIST

• Possède différents constructeurs : – Données fixes :

• JList (Vector listData)• JList (Object[] listData)

– Données modifiables :• JList (ListModel dm)

71

Page 72: POO3 Introduction aux IHM et à la réflexivité Java Vos premiers pas en Swing

JLIST• Exemple

72

String listData[]= {…,« Carlos »,…, « Ramier»};DefaultListModel model = new DefaultListModel();for (int i=0; i<listData.length; i++) model.addElement(listData[i]);

JList dataList = new JList(model);

JScrollPane listeScroll = new JScrollPane(dataList);

Page 73: POO3 Introduction aux IHM et à la réflexivité Java Vos premiers pas en Swing

JLIST : LE MODÈLE ASSOCIÉ• Pour le modèle, utiliser la classe DefaultListModel. Ce modèle

stocke les objets sous forme de vecteur et fournit les méthodes suivantes : – addElement (Object),– boolean contains(Object), – boolean removeElement(Object)– Object get(index), Object remove(index), int size()– addListDataListener (ListDataListener l), remove…– fireContentsChanged,fireIntervalAdded,

fireIntervalRemoved (Object source, int index0, int index1)73

Page 74: POO3 Introduction aux IHM et à la réflexivité Java Vos premiers pas en Swing

ILLUSTRATION

74

Page 75: POO3 Introduction aux IHM et à la réflexivité Java Vos premiers pas en Swing

JLIST• Possède une méthode qui permet de spécifier le mode de

sélection : setSelectionMode (int mode). mode peut valoir : – SINGLE_SELECTION– SINGLE_INTERVAL_SELECTION– MULTIPLE_INTERVAL_SELECTION

• Possède une méthode addListSelectionListener () qui écoute un ListSelectionEvent e qui est émis à chaque fois qu’une sélection change

et implémente une méthode : valueChanged75

Page 76: POO3 Introduction aux IHM et à la réflexivité Java Vos premiers pas en Swing

JLIST : LA VUE

• Une vue d’une JList implémente l’interface ListDataListener. Il y a trois méthodes : – void contentsChanged(ListDataEvent e) : contenu de la liste

a changé– void intervalAdded(ListDataEvent e) – void intervalRemoved(ListDataEvent e)

76

l

Page 77: POO3 Introduction aux IHM et à la réflexivité Java Vos premiers pas en Swing

JLIST : PLUSIEURS VUES ?!

• Créer un modèle instance de DefaultListModel et le mémoriser. Créer ensuite la liste avec ce modèle.

• Pour chaque composant désirant être informé des changements ( = d’autres vues ou le contrôleur) :– Mémoriser le modèle ( = le stocker dans un membre)– Implémenter ListDataListener– Enregistrer le composant dans le modèle avec

addListDataListener77

Page 78: POO3 Introduction aux IHM et à la réflexivité Java Vos premiers pas en Swing

JTABLE• Un constructeur possible de JTable :

– JTable (Object[][] rowData, Object[] columnNames)– On peut accéder au modèle sous-jacent avec la méthode :

• TableModel getModel()• Un autre constructeur avec directement le modèle :

78

String nomsCol[]={«Prenom», «Nom»};String rows[][] = { {«Dinah»,«Cohen»}, … ,

{«Said», «Kharrazen»}};DefaultTableModel model = new DefaultTableModel(rows, nomsCol);JTable table = new JTable(model);

Page 79: POO3 Introduction aux IHM et à la réflexivité Java Vos premiers pas en Swing

JTABLE : LE MODÈLE ASSOCIÉ• Il existe 3 différents éléments pour créer un modèle :

– L’interface TableModel– La classe AbstractTableModel qui implémente TableModel– La classe DefaultTableModel

• DefaultTableModel est le plus simple à utiliser, quelques constructeurs associés : – DefaultTableModel(int row, int col)– DefaultTableModel(Object[][] data, Object[]

columnNames)– DefaultTableModel(Vector data, Vector columnNames)– … 79

Page 80: POO3 Introduction aux IHM et à la réflexivité Java Vos premiers pas en Swing

JTABLE : LA VUE• Une vue implémente l’interface TableDataListener• Il y a une méthode :

– void tableChanged(TableModelEvent e)• L’événement associé TableModelEvent :

– int getType() : INSERT, UPDATE, DELETE– int getColumn()– int getFirstRow()– int getLastRow()

80

Page 81: POO3 Introduction aux IHM et à la réflexivité Java Vos premiers pas en Swing

JTABLE : PLUSIEURS VUES ?!• Créer un modèle, par exemple une instance de

DefaultTableModel et le mémoriser• Pour chaque composant désirant être informé des

changements (les vues et/ou le contrôleur) : – Mémoriser le modèle– Implémenter TableModelListener– Enregistrer le composant dans le modèle avec :

addTableModelListener

81

Page 82: POO3 Introduction aux IHM et à la réflexivité Java Vos premiers pas en Swing

SYNTHESE

Page 83: POO3 Introduction aux IHM et à la réflexivité Java Vos premiers pas en Swing

Hiérarchie Swing

Page 84: POO3 Introduction aux IHM et à la réflexivité Java Vos premiers pas en Swing

Aperçu de Swing Les Containers

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]

Page 85: POO3 Introduction aux IHM et à la réflexivité Java Vos premiers pas en Swing

Aperçu de SwingDes composants

JComponent Hérite de ContainerMéthodes de commoditégetSize retourne une DimensionsetSize : 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/ JTextAreaEtc…

Page 86: POO3 Introduction aux IHM et à la réflexivité Java Vos premiers pas en Swing

Aperçu de Swinget 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.

Page 87: POO3 Introduction aux IHM et à la réflexivité Java Vos premiers pas en Swing

Aperçu de Swing Les Containers

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]

Page 88: POO3 Introduction aux IHM et à la réflexivité Java Vos premiers pas en Swing

Exemple de code

Page 89: POO3 Introduction aux IHM et à la réflexivité Java Vos premiers pas en Swing

EXEMPLE D’APPLICATION JAVA SWING

90

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);/RVBgreenMenuBar.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);