poo3 introduction aux ihm et à la réflexivité java vos premiers pas en swing audrey occello...

90
POO3 Introduction aux IHM et à la réflexivité Java Vos premiers pas en Swing Audrey Occello Cédric Joffroy Anne-Marie Dery

Upload: olympe-bonnet

Post on 03-Apr-2015

107 views

Category:

Documents


2 download

TRANSCRIPT

Page 1: POO3 Introduction aux IHM et à la réflexivité Java Vos premiers pas en Swing Audrey Occello Cédric Joffroy Anne-Marie Dery

POO3 Introduction aux IHM et à la

réflexivité Java

Vos premiers pas en Swing

Audrey OccelloCédric Joffroy

Anne-Marie Dery

Page 2: POO3 Introduction aux IHM et à la réflexivité Java Vos premiers pas en Swing Audrey Occello Cédric Joffroy Anne-Marie Dery

Retour sur MVC

Page 3: POO3 Introduction aux IHM et à la réflexivité Java Vos premiers pas en Swing Audrey Occello Cédric Joffroy Anne-Marie Dery

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 Audrey Occello Cédric Joffroy Anne-Marie Dery

Vous avez vu

la réflexivité sur un modèle !

On va voir la partie Vue

Page 5: POO3 Introduction aux IHM et à la réflexivité Java Vos premiers pas en Swing Audrey Occello Cédric Joffroy Anne-Marie Dery

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 Audrey Occello Cédric Joffroy Anne-Marie Dery

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 Audrey Occello Cédric Joffroy Anne-Marie Dery

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 Audrey Occello Cédric Joffroy Anne-Marie Dery

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 Audrey Occello Cédric Joffroy Anne-Marie Dery

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 Audrey Occello Cédric Joffroy Anne-Marie Dery

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 Audrey Occello Cédric Joffroy Anne-Marie Dery

{   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 Audrey Occello Cédric Joffroy Anne-Marie Dery

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 Audrey Occello Cédric Joffroy Anne-Marie Dery

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 Audrey Occello Cédric Joffroy Anne-Marie Dery

Exemple : ARBRE DE COMPOSANTS

14

Page 15: POO3 Introduction aux IHM et à la réflexivité Java Vos premiers pas en Swing Audrey Occello Cédric Joffroy Anne-Marie Dery

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 Audrey Occello Cédric Joffroy Anne-Marie Dery

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 Audrey Occello Cédric Joffroy Anne-Marie Dery

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 Audrey Occello Cédric Joffroy Anne-Marie Dery

JFRAME : ILLUSTRATION

18

Page 19: POO3 Introduction aux IHM et à la réflexivité Java Vos premiers pas en Swing Audrey Occello Cédric Joffroy Anne-Marie Dery

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 Audrey Occello Cédric Joffroy Anne-Marie Dery

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 Audrey Occello Cédric Joffroy Anne-Marie Dery

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 Audrey Occello Cédric Joffroy Anne-Marie Dery

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 Audrey Occello Cédric Joffroy Anne-Marie Dery
Page 24: POO3 Introduction aux IHM et à la réflexivité Java Vos premiers pas en Swing Audrey Occello Cédric Joffroy Anne-Marie Dery

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 Audrey Occello Cédric Joffroy Anne-Marie Dery

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 Audrey Occello Cédric Joffroy Anne-Marie Dery

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 Audrey Occello Cédric Joffroy Anne-Marie Dery

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 Audrey Occello Cédric Joffroy Anne-Marie Dery

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 Audrey Occello Cédric Joffroy Anne-Marie Dery

LA BALISE <APPLET>

29

<APPLET [CODEBASE = codebaseurl]CODE = FichierClassApplet[ARCHIVE = FichiersJar][ALT = TexteAlternatif][NAME = nomInstanceApplet]WIDTH = pixels HEIGHT = pixels [ALIGN = alignement][VSPACE = pixels][HSPACE = pixels]

>[<PARAM NAME = appletParam1 value = value > ][<PARAM NAME = appletParam2 value = value > ]</APPLET>

Page 30: POO3 Introduction aux IHM et à la réflexivité Java Vos premiers pas en Swing Audrey Occello Cédric Joffroy Anne-Marie Dery

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

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

Page 31: POO3 Introduction aux IHM et à la réflexivité Java Vos premiers pas en Swing Audrey Occello Cédric Joffroy Anne-Marie Dery

Hiérarchie de composants

Page 32: POO3 Introduction aux IHM et à la réflexivité Java Vos premiers pas en Swing Audrey Occello Cédric Joffroy Anne-Marie Dery

HIÉRARCHIE DES CLASSES

32

Page 33: POO3 Introduction aux IHM et à la réflexivité Java Vos premiers pas en Swing Audrey Occello Cédric Joffroy Anne-Marie Dery

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 34: POO3 Introduction aux IHM et à la réflexivité Java Vos premiers pas en Swing Audrey Occello Cédric Joffroy Anne-Marie Dery

La famille des panneaux

34

Page 35: POO3 Introduction aux IHM et à la réflexivité Java Vos premiers pas en Swing Audrey Occello Cédric Joffroy Anne-Marie Dery

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

35

Page 36: POO3 Introduction aux IHM et à la réflexivité Java Vos premiers pas en Swing Audrey Occello Cédric Joffroy Anne-Marie Dery

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

36

Page 37: POO3 Introduction aux IHM et à la réflexivité Java Vos premiers pas en Swing Audrey Occello Cédric Joffroy Anne-Marie Dery

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

37

Page 38: POO3 Introduction aux IHM et à la réflexivité Java Vos premiers pas en Swing Audrey Occello Cédric Joffroy Anne-Marie Dery

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)

38

Page 39: POO3 Introduction aux IHM et à la réflexivité Java Vos premiers pas en Swing Audrey Occello Cédric Joffroy Anne-Marie Dery

JTABBEDPANE• Permet d’avoir des onglets• Permet de mieux gérer l’espace de travail• Chaque onglet est créé avec sont 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)

39

Page 40: POO3 Introduction aux IHM et à la réflexivité Java Vos premiers pas en Swing Audrey Occello Cédric Joffroy Anne-Marie Dery

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 40

Page 41: POO3 Introduction aux IHM et à la réflexivité Java Vos premiers pas en Swing Audrey Occello Cédric Joffroy Anne-Marie Dery

Autres composants

41

Page 42: POO3 Introduction aux IHM et à la réflexivité Java Vos premiers pas en Swing Audrey Occello Cédric Joffroy Anne-Marie Dery

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,• … 42

Page 43: POO3 Introduction aux IHM et à la réflexivité Java Vos premiers pas en Swing Audrey Occello Cédric Joffroy Anne-Marie Dery

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

43

Page 44: POO3 Introduction aux IHM et à la réflexivité Java Vos premiers pas en Swing Audrey Occello Cédric Joffroy Anne-Marie Dery

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)

44

Page 45: POO3 Introduction aux IHM et à la réflexivité Java Vos premiers pas en Swing Audrey Occello Cédric Joffroy Anne-Marie Dery

ILLUSTRATION D’UN MENU

45

Remarque : Il est possible de coller un menu à droite, en utilisant une Glue :

Box.createHorizontalGlue()

Page 46: POO3 Introduction aux IHM et à la réflexivité Java Vos premiers pas en Swing Audrey Occello Cédric Joffroy Anne-Marie Dery

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

deux

46

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

Page 47: POO3 Introduction aux IHM et à la réflexivité Java Vos premiers pas en Swing Audrey Occello Cédric Joffroy Anne-Marie Dery

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

47

Page 48: POO3 Introduction aux IHM et à la réflexivité Java Vos premiers pas en Swing Audrey Occello Cédric Joffroy Anne-Marie Dery

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

48

Page 49: POO3 Introduction aux IHM et à la réflexivité Java Vos premiers pas en Swing Audrey Occello Cédric Joffroy Anne-Marie Dery

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 50: POO3 Introduction aux IHM et à la réflexivité Java Vos premiers pas en Swing Audrey Occello Cédric Joffroy Anne-Marie Dery

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 51: POO3 Introduction aux IHM et à la réflexivité Java Vos premiers pas en Swing Audrey Occello Cédric Joffroy Anne-Marie Dery

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 52: POO3 Introduction aux IHM et à la réflexivité Java Vos premiers pas en Swing Audrey Occello Cédric Joffroy Anne-Marie Dery

FlowLayout par défaut

Page 53: POO3 Introduction aux IHM et à la réflexivité Java Vos premiers pas en Swing Audrey Occello Cédric Joffroy Anne-Marie Dery

Afficheurs

53

Page 54: POO3 Introduction aux IHM et à la réflexivité Java Vos premiers pas en Swing Audrey Occello Cédric Joffroy Anne-Marie Dery

COMMENT POSITIONNER LES COMPOSANTS ?

54

Page 55: POO3 Introduction aux IHM et à la réflexivité Java Vos premiers pas en Swing Audrey Occello Cédric Joffroy Anne-Marie Dery

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

55

Page 56: POO3 Introduction aux IHM et à la réflexivité Java Vos premiers pas en Swing Audrey Occello Cédric Joffroy Anne-Marie Dery

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

56

Page 57: POO3 Introduction aux IHM et à la réflexivité Java Vos premiers pas en Swing Audrey Occello Cédric Joffroy Anne-Marie Dery

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

57

Page 58: POO3 Introduction aux IHM et à la réflexivité Java Vos premiers pas en Swing Audrey Occello Cédric Joffroy Anne-Marie Dery

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

Page 59: POO3 Introduction aux IHM et à la réflexivité Java Vos premiers pas en Swing Audrey Occello Cédric Joffroy Anne-Marie Dery

BORDERLAYOUT• Définit des zones dans lesquelles ajouter des

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

59

Page 60: POO3 Introduction aux IHM et à la réflexivité Java Vos premiers pas en Swing Audrey Occello Cédric Joffroy Anne-Marie Dery

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

60

Page 61: POO3 Introduction aux IHM et à la réflexivité Java Vos premiers pas en Swing Audrey Occello Cédric Joffroy Anne-Marie Dery

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

61

Page 62: POO3 Introduction aux IHM et à la réflexivité Java Vos premiers pas en Swing Audrey Occello Cédric Joffroy Anne-Marie Dery

CARDLAYOUT• Permet d’empiler des composants (suivant des

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

62

Page 63: POO3 Introduction aux IHM et à la réflexivité Java Vos premiers pas en Swing Audrey Occello Cédric Joffroy Anne-Marie Dery

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

63

Page 64: POO3 Introduction aux IHM et à la réflexivité Java Vos premiers pas en Swing Audrey Occello Cédric Joffroy Anne-Marie Dery

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

64

Page 65: POO3 Introduction aux IHM et à la réflexivité Java Vos premiers pas en Swing Audrey Occello Cédric Joffroy Anne-Marie Dery

GRIDBAGLAYOUT (2/2)

65

Page 66: POO3 Introduction aux IHM et à la réflexivité Java Vos premiers pas en Swing Audrey Occello Cédric Joffroy Anne-Marie Dery

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 67: POO3 Introduction aux IHM et à la réflexivité Java Vos premiers pas en Swing Audrey Occello Cédric Joffroy Anne-Marie Dery

Modèle & Vue

Page 68: POO3 Introduction aux IHM et à la réflexivité Java Vos premiers pas en Swing Audrey Occello Cédric Joffroy Anne-Marie Dery

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

68

Page 69: POO3 Introduction aux IHM et à la réflexivité Java Vos premiers pas en Swing Audrey Occello Cédric Joffroy Anne-Marie Dery

ILLUSTRATION

69

Page 70: POO3 Introduction aux IHM et à la réflexivité Java Vos premiers pas en Swing Audrey Occello Cédric Joffroy Anne-Marie Dery

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<…>) 70

Page 71: POO3 Introduction aux IHM et à la réflexivité Java Vos premiers pas en Swing Audrey Occello Cédric Joffroy Anne-Marie Dery

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

71

Page 72: POO3 Introduction aux IHM et à la réflexivité Java Vos premiers pas en Swing Audrey Occello Cédric Joffroy Anne-Marie Dery

JLIST

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

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

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

72

Page 73: POO3 Introduction aux IHM et à la réflexivité Java Vos premiers pas en Swing Audrey Occello Cédric Joffroy Anne-Marie Dery

JLIST• Exemple

73

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 74: POO3 Introduction aux IHM et à la réflexivité Java Vos premiers pas en Swing Audrey Occello Cédric Joffroy Anne-Marie Dery

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

Page 75: POO3 Introduction aux IHM et à la réflexivité Java Vos premiers pas en Swing Audrey Occello Cédric Joffroy Anne-Marie Dery

ILLUSTRATION

75

Page 76: POO3 Introduction aux IHM et à la réflexivité Java Vos premiers pas en Swing Audrey Occello Cédric Joffroy Anne-Marie Dery

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 : valueChanged76

Page 77: POO3 Introduction aux IHM et à la réflexivité Java Vos premiers pas en Swing Audrey Occello Cédric Joffroy Anne-Marie Dery

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)

77

l

Page 78: POO3 Introduction aux IHM et à la réflexivité Java Vos premiers pas en Swing Audrey Occello Cédric Joffroy Anne-Marie Dery

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

addListDataListener78

Page 79: POO3 Introduction aux IHM et à la réflexivité Java Vos premiers pas en Swing Audrey Occello Cédric Joffroy Anne-Marie Dery

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 :

79

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

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

Page 80: POO3 Introduction aux IHM et à la réflexivité Java Vos premiers pas en Swing Audrey Occello Cédric Joffroy Anne-Marie Dery

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)– … 80

Page 81: POO3 Introduction aux IHM et à la réflexivité Java Vos premiers pas en Swing Audrey Occello Cédric Joffroy Anne-Marie Dery

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

81

Page 82: POO3 Introduction aux IHM et à la réflexivité Java Vos premiers pas en Swing Audrey Occello Cédric Joffroy Anne-Marie Dery

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

82

Page 83: POO3 Introduction aux IHM et à la réflexivité Java Vos premiers pas en Swing Audrey Occello Cédric Joffroy Anne-Marie Dery

SYNTHESE

Page 84: POO3 Introduction aux IHM et à la réflexivité Java Vos premiers pas en Swing Audrey Occello Cédric Joffroy Anne-Marie Dery

Hiérarchie Swing

Page 85: POO3 Introduction aux IHM et à la réflexivité Java Vos premiers pas en Swing Audrey Occello Cédric Joffroy Anne-Marie Dery

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 86: POO3 Introduction aux IHM et à la réflexivité Java Vos premiers pas en Swing Audrey Occello Cédric Joffroy Anne-Marie Dery

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 87: POO3 Introduction aux IHM et à la réflexivité Java Vos premiers pas en Swing Audrey Occello Cédric Joffroy Anne-Marie Dery

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 88: POO3 Introduction aux IHM et à la réflexivité Java Vos premiers pas en Swing Audrey Occello Cédric Joffroy Anne-Marie Dery

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 89: POO3 Introduction aux IHM et à la réflexivité Java Vos premiers pas en Swing Audrey Occello Cédric Joffroy Anne-Marie Dery

Exemple de code

Page 90: POO3 Introduction aux IHM et à la réflexivité Java Vos premiers pas en Swing Audrey Occello Cédric Joffroy Anne-Marie Dery

EXEMPLE D’APPLICATION JAVA SWING

91

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