Introduction Intro Développement Interface Graphique ...deptinfo.unice.fr/~renevier/POO/cours/01 -...

Introduction

Intro – Développement Interface Graphique (Swing)– Android –

– Processus –

Intervenants : Éric Valade, Philippe Renevier Gonin

http://deptinfo.unice.fr/~renevier/POO


Philippe Renevier Gonin - L3 Informatique Parcours Miage - POO - UI/Swing/Event - Semestre 6, 2017-2018 02 / 126

• Programmation orientée objet par la pratique

• GUI – Swing– (G)UI = (Graphical) User Interface

– Interface et concepts classiques

– événements

• Android– Interface graphique

– événements

• (Introduction aux) Processus (thread)

Présentation Générale Introduction Evénements Layout Images Events Graphiques Bilan


• 1 séances / 3h sur un éditeur (créateur) d’image– Concepts généraux d’une UI

• Sur le même sujet : – 1 séance / 3h sur la prise en main Android

– 1 séance / 3h sur une « application » Android (client d’un chat)

• 2 séances / 6h sur Android et Thread (jeu des allumettes)

• 1 séance en réserve (nouveau sujet ou pour finir)

• Calendrier propre à chaque groupe



• Note de tp (30%) :

– présence,

– comportement,

– avancement

• Note de contrôle intermédiaire (30%)

– 1 ou 2 QCM

• Un contrôle terminal sur papier (40%)



Un premier tour d’horizon Composant Graphique, Layout, Event



• awt =1ère boite à outil de java• Éléments de base

– Component (et Graphics)– Container– Layout (LayoutManager)

• swing = extension (d’abord JFC puis intégrer depuis jdk 1.2)• swing : faire que tout fonctionne de manière identique partout• Technologie vieillissante, mais les concepts sont là

– JavaFX



• Comparaison SWING / HTML (puis android)• Component / Container

– HTML : des balises qui peuvent en contenir d’autres (DTD)– SWING : des container et des components, les container étant des

components– Dans les deux cas : une arborescences

• Layout– HTML : Utilisation de CSS pour changer l’organisation « statiques » (par

défaut, ordre linéaire vertical selon l’écriture du code html)– SWING : délégation par le container à un LayoutManager qui définit le

placement et la taille de chaque components contenu



• Élément de base• Définit un élément graphique (qui sera affiché dans…) avec des propriétés (et

des getters / setters)– Une Size (class Dimension avec .width et .height)– Une Location (Position) (class Point avec .x et .y)– Coordonnées

• Origine au coin supérieur gauche• x (width) vers la droite et y (height) vers le bas

– Visible (boolean) ; Opaque (boolean) – Une couleur de fond (background) et une couleur d’écriture (foreground)– Etc.

• Méthode public void paint(Graphics g)

(0,0)

x

y



• Contexte graphique (« morceau d’écran »)• Permet de dessiner

– Changer de crayon : setColor– drawRect, drawOval, drawPolygon, drawString, fillRect, fillOval– drawImage(img, x, y, ImageObserver)

• Obtenu automatiquement (repaint(), redimensionnement, etc.)• Graphics2D : vue plus « complète »

– Transformation géométrique (translate, rotate)– Effets graphiques

• g.setRenderingHint(RenderingHints.KEY_ANTIALIASING, RenderingHints.VALUE_ANTIALIAS_ON);

• g.setStroke(new BasicStroke(epaisseur));



• Couleur additive

• 4 octets (0-255)

– Rouge (getRed)

– Vert (getGreen)

– Bleu (getBlue)

– Transparence (getAlpha)

• .darker() ; .brighter()



• Hérite de Component

• Pattern Composite

– Porte d’autres Component (y compris des Container)

Component

Containter



Exemple : paint(g)



• Hérite de Component• Pattern Composite

– Porte d’autres Component (y compris des Container)

• Organisation – LayoutManager

• Liaison dynamique (affectation possible), une délégation

– add / remove d’un Component• Différent type d’add, en fonction du Layout

– getComponents retourne un tableau de tous ceux inclus– Unicité de lieu (un add ailleurs => déplacement)– Indice des components

Component

Containter


Layout


• Définit l’organisation• Défini par une classe (≠ du css)• Basé sur une des tailles (preferred, minum,

maximum) 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.



• Organisation

– Vertical : container.setLayout(new BoxLayout(container, BoxLayout.PAGE_AXIS));

– Horizontal : ligne. setLayout(new BoxLayout(ligne, BoxLayout.LINE_AXIS));

– Généralement basé sur la taille maximum (dépend du component)

• Alignement des bords :

– setAlignmentX(Component.LEFT_ALIGNMENT); pour aligner les bords gauches

• Insertion de « blancs » pour remplir (séparation)

– container.add(Box.createVerticalGlue());

– ligne.add(Box.createHorizontalGlue());

• Insertion de “blancs” pour combler

– zoneOutils.add(Box.createVerticalBox());

• Insertion de « blancs » pour espacer…

– container.add(Box.createRigidArea(new Dimension(5,5)));



• setLayout(null)

• Pas d’intelligence au placement / dimensionnement

• Chaque component doit

– Avoir une taille (setSize)

– Avoir une position (setLocation)

• Positionnement au pixel…



Fenêtre en BorderLayout




Un JPanelsans

Layout(Layout

null)



Colonne (Jpanel) en BoxLayout


Un JPanelsans

Layout(Layout

null)



Colonne (Jpanel) en BoxLayout

Sous élément

en BoxLayout


Un JPanelsans

Layout(Layout

null)



fenêtre

contentPane

...



fenêtre

contentPane

...

zoneOutils

Bouton « Aucune »

Bouton « Rectangle »

Bouton « Ellipse »

« West »

1

2

3



fenêtre

contentPane

...

zoneOutils

Bouton « Aucune »

Bouton « Rectangle »

Bouton « Ellipse »

« West »

1

2

3

Ellipse

zoneDessin

Ellipse

Rectangle

Rectangle

Rectangle

« Center »

1

2

3

4

5



• repaint() : pour demander à redessiner le component• validate() : pour demander de valider (et redessiner) le component et ce qu’il

contient• 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]

• Certaines sont de JComponent…



• JFrame (Frame, Window Container)– getRootPane () zone de la fenêtre sous le titre

– getLayeredPane() zone où sont cachés les panneaux non visibles

– getContentPane () zone où les éléments sont ajoutés

– getGlassPane () zone transparente dessinée au-dessus du JRootPane utilisé pourafficher des pop-up menus

Forward de méthode sur le contentPane

contentPane avec un BorderLayout par défaut

basé sur un transparent d’Audrey Occello



• setVisible( boolean )

• Une position sur l’écran

– setLocation

• Besoin d’une taille

– Méthode pack( ) : calcul de la taille optimale (basée sur les layouts)

– Ou setSize

• WindowListener ou setDefaultCloseOperation

– Par défaut, fermer la fenêtre revient à la cacher


http://docs.oracle.com/javase/7/docs/api/javax/swing/JFrame.html


basé sur un transparent

d’Audrey Occello

…

Comme toutes les bibliothèques graphiques, il y a des objets de « bas niveau » (JPanel) et d’autre de plus haut niveau (JTable), etc.



• Hérite de Container– Prolongement du pattern COMPOSITE– Traitement « sans connaitre explicitement la classe réelle» des composants

• Méthodes de commodité– setPreferredSize, setMaximumSize, setMinimumSize– setDoubleBuffered(true/false) / isDoubleBuffered()– setOpaque(true / false)

• Dessin à l’écran : paint (méthode template) appelle– paintComponent– paintBorder– paintChildren– Surcharge en général de paintComponent et appel au « super.paintComponent » pour

profiter de l’implémentation initiale



• setBorder(Border border)• BorderFactory pour obtenir les bords existants

– Pattern Factory– CompoundBorder– createDashedBorder– createEmptyBorder– createEtchedBorder– createLineBorder– createMatteBorder – Etc. – http://docs.oracle.com/javase/8/docs/api/javax/swing/BorderFactory.html


http://docs.oracle.com/javase/8/docs/api/javax/swing/border/Border.html

http://docs.oracle.com/javase/8/docs/api/javax/swing/BorderFactory.html


• les boutons– JButton /JToggleButton / JCheckBox / JRadioButton

– java.awt.ButtonGroup (méthode add)

• Les îcones : javax.swing.ImageIcon créer avec le nom d’un fichier image par exemple

• Les champs textuels – JTextField/ JTextArea

• Menus : les JMenuBar, JMenu, JMenuItem

• Etc…

• http://docs.oracle.com/javase/tutorial/uiswing/


http://docs.oracle.com/javase/tutorial/uiswing/


• JColorChooser– Pattern Factory pour obtenir

– JColorChooser.showDialog(Component élément de référence, String message du choix, Color couleur initiale)

• JDialogPattern Factory pour obtenir le type de dialogue

– Exemple : String name = JOptionPane.showInputDialog("entrez le nom de l'image (format png)");

• JTable

• etc.



• Choix à faire

– Cas de la JFrame par exemple :

• extends

• Attribut de la classe

• Extension de la boite à outils

– « Petites » modifications

• Graphiques

• Ou comportementales

– Objet qui n’existe pas



• Chaque élément graphique subit des événements

• Principe du CallBack

– Interface pour l’écouteur

– add et remove pour l’écouté

– Appel aux écouteurs par l’écouté lorsque l’événement se produit

• Parcours des composants à l’écran du dessus vers le dessous) jusqu’au premier « écoutable »



• processEvent : transmettre un événement

• Même processus que pour l’affichage

• Les objets Event

– package java.awt.event et javax.swing.event

– getSource() : savoir d’où il vient

– Spécialisés : MouseEvent, ActionEvent, etc.



• Réalisation d’une JFrame

– Lancement du thread graphique (setVisible)

– Fin du programme (setDefaultCloseOperation)

• Ajout d’un bouton (JButton) et d’un label (JLabel)

– Position dans le BorderLayout

– Raccourcit (f.getContentPane().add() vs f.add() )

– Placement du f.setVisible(true) (le plus tard possible)

• Ajout d’un écouteur des clics sur le bouton (ActionListener)

– Compte le nombre de clic et change le texte du bouton

– Evolution 1 : peut changer plusieurs textes

– Evolution 2 : écoute aussi les événements souris (MouseListener) [sur un des labels]

• Les possibilités :

– 1 classe pour ActionListener + MouseListener, 1 seule instance pour écouter le bouton et le label

– 1 classe pour ActionListener + MouseListener, 2 instances : une pour le bouton, une autre pour le label

– autre possibilité : 2 classes, une pour ActionListener, 1 pour MouseListener

– autre possibilité : des listeners pour modifier un seul label… une instance de listener par label modifié



Swing ; événement, classe interne





Les événements et leurs utilisations en java



• Exécution non linaire du code– Établissement de liens

– Appel (utilisation des liens) lors qu’un événement se produit

– Nécessite un thread

• Etablissement des liens– Interface E implémentée par l’écouteur (observer)

– add et remove de E pour l’écouté (observable)

– Appel aux écouteurs par l’écouté via l’interface E lorsque l’événement se produit



void aMethod()boolean anotherMethod()

List<E> listeners

void add(E)void remove(E)

void fireEvent()

Observable

<<interface>> Observer


ConcreteObserver


AnotherConcreteObserver



Système (ou initialisation…)

Observableo = new Obsevable()

AnotherConcreteObserverobs = new Observer()

o.add(obs)

listeners.add(obs)



ObserverSystème (ou thread ou acteur…)

Observable Observer

o.fireEvent()

obs.aMethod()

loop [ Observer obs : listeners]



• Actions non séquentielles– Besoin d’événement déclencheur– Chaque élément graphique subit des événements

• Principe du CallBack– Interface pour l’écouteur– add et remove pour l’écouté– Appel aux écouteurs par l’écouté lorsque l’événement se produit

• Parcours des composants à l’écran du dessus vers le dessous) jusqu’au premier « écoutable »

• Les étapes :– Il se passe quelque chose sur un objet– Ceux qui observent l’objet s’en rendent compte– Ils réagissent

• Pas vraiment de l’observation, mais de l’abonnement…



• L’objet qui est source de l’événement

– méthode add<Truc>Listener (on peut s’abonner)

• Ceux qui observent

– implements <Truc>Listener

– ils sont ajoutés à la liste des oberservateurs (appel de add<Truc>Listener)

• Quand l’événément Truc se produit

– L’objet appelle tous ceux qui l’observe



• Pour réagir aux clics sur les boutons (par exemple)

• addActionListener – java.awt.Button / java.awt.List / java.awt.MenuItem /

java.awt.TextField / java.awt.TrayIcon /

– javax.swing.AbstractButton / javax.swing.ButtonModel / javax.swing.ComboBoxEditor / javax.swing.DefaultButtonModel / javax.swing.JComboBox / javax.swing.JFileChooser / javax.swing.JTextField / javax.swing.plaf.basic.BasicComboBoxEditor / javax.swing.Timer



• Constructeurs– Object source, int id, String command

– Object source, int id, String command, int modifiers

– Object source, int id, String command, long when, int modifiers

• Méthodes spécifiques– String getActionCommand() nom de l’action

– int getModifiers() savoir si une touche est pressée

– long getWhen() quand ?

– String paramString()

• Méthodes générales (ObjectEvent)– Object getSource() objet à l’origine de l’événement



• void actionPerformed(ActionEvent e)

• Appelé par l’objet source de l’action (sur lequel l’utilisateur a cliqué)



// création d’une fenêtre

JFrame f = new JFrame("2 boutons");

f.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);

// création d’un panel (FlowLayout) comme contenu

JPanel p = new JPanel();

// création de l’écouteur (c.f. plus loin)

MonEcouteurDAction ecouteur = new MonEcouteurDAction(f);

// un bouton

JButton b = new JButton("un bouton");

b.setActionCommand("vous avez cliquez sur un bouton");

b.addActionListener(ecouteur);



// un menu déroulant

JComboBox j = new JComboBox();

j.addItem("Bonjour");

j.addItem("Au revoir");

j.setActionCommand("vous avez choisi une option du menu d\u00e9roulant");

j.addActionListener(ecouteur);

// on ajoute le tout dans la fenêtre qui devient visible

p.add(b);

p.add(j);

f.setContentPane(p);

f.pack();

f.setVisible(true);



• implements ActionListener

// un fenêtre nécessaire pour la popup de dialogue

private JFrame parent ;

// le constructeur

public MonEcouteurDAction(JFrame fen)

{

parent = fen;

}

44



// l’action est affichée (console ou popup)

public void actionPerformed(ActionEvent e)

{

if (parent == null)

{

System.out.println("Action sur "+e.getSource()+" :

"+e.getActionCommand());

}

else

{

JOptionPane.showMessageDialog(parent, e.getActionCommand(),

"Action", JOptionPane.INFORMATION_MESSAGE);

}

}



• Pour écouter les événements liés à la souris

– Clic (mousePressed / mouseReleased / mouseClicked)

– Survol (mouseEntered / mouseExited)

– Déplacement (mouseMoved)

– Glisser/Drag (mouseDragged)

• Quasiment tout composant graphique

• Réunion de java.awt.event.MouseListener et de java.awt.event.MouseMotionListener



• Constructeurs– Object source, int id, long when, int modifiers, int x, int y, int clickCount, boolean popupTrigger, int button

– Modifiers : masques qui permet de caractériser l’événement

– + 2 autres constructeurs

• Méthodes spécifiques– int getButton() sur quel bouton de la souris

– int getClickCount() nombre de clic (double clic)

– Point getLocationOnScreen() position à l’écran Returns the absolute x, y position of the event.

– static String getMouseModifiersText(int modifiers)

– Point getPoint() position dans l’objet source

– int getX() abscisse dans l’objet source

– int getXOnScreen()

– int getY()

– Int getYOnScreen()

– boolean isPopupTrigger()

– String paramString()

– void translatePoint(int x, int

• Méthodes générales (ObjectEvent)

– Object getSource() objet à l’origine de l’événement

47



Point p;

/*

** MouseListener : on mémorise le début du glisser

*/

public void mousePressed(MouseEvent e)

{

p = e.getPoint();

}

public void mouseReleased(MouseEvent e) {}

public void mouseClicked(MouseEvent e) {}

public void mouseEntered(MouseEvent e) {}

public void mouseExited(MouseEvent e) {}



/*

** MouseMotionListener

*/

public void mouseDragged(MouseEvent e)

{

Point newP = e.getPoint();

source.setLocation(source.getX()+newP.x-p.x,

source.getY()+newP.y-p.y);

}

public void mouseMoved(MouseEvent e) {}public void



• Observable : – Sur qui l’événement se produit

– Liste de ceux qui s’abonne (les observers)• Liaison dynamique : add / remove

– Rappel des observers quand « cela » se produit• Appel via une méthode définie dans l’interface que doivent implémenter les

observers

• Observer : – Celui qui écoute, qui s’abonne

– Appelé quand cela se produit



• processEvent : retransmettre un événement

– Ou alors appeler directement les listeners

• Même processus que pour l’affichage

– Attention au blocage !!

• Les objets Event

– package java.awt.event et javax.swing.event

– getSource() : savoir d’où il vient

– Spécialisés : MouseEvent, ActionEvent, etc.



• Un (unique) thread graphique (rafraichissement et file des événements)• Observable : les objets graphiques• Observer : interface proposée par l’API

– Classe à part entière– Classe interne (encapsulation) – Classe interne anonyme (encapsulation et masquage)

• Liaison : – add ou set (un seul listener)

• Choix : – Un objet qui en écoutent plusieurs du même type– Un objet qui peut écouter plusieurs types d’objets– Un objet écouté par un seul objet spécifique– Etc.



Des classes internes et anonymes

Souvent utiliser avec les listeners



• Définition

– Dans une classe

– Dans une méthode, entre { }

– En paramètre (anonyme)

• Observable :

– ClassePrincipe.class

– ClassePrincipe$1NomInterne.class

– ClassePrincipe$2.class



• Outil supplémentaire

• Héritage supplémentaire (sans être un objet du type)

• Masquage de l’implémentation (y compris au package)

• Définition de « callback » à la volée

• Utile pour la programmation événementielle



• L’inner a accès aux éléments de la classe qui l’inclus

• Accès à l’instance de la classe avec <NomDeClasse>.this

• Création d’une instance d’une inner classe – <Instance de NomDeClasse>.new <Inner>( )

– Ex : Bebete.Etat result = bebete.new Etat();• Bebete est une classe contenant une classe interne Etat ; bebete est une

instance de la classe Bebete



• Ne peuvent pas être utiliser en dehors de la méthode

• Utile pour personnaliser des objets sans créer de classe (masquer l’implémentation).

import java.awt.Point;

public class InnerMeth {

Point getP(int x, int y) {

class MyPoint extends Point {

MyPoint(int x, int y) {

super(); this.x = x; this.y = y;

}

public String toString() { return "ceci est un point différent "+super.toString(); }

}

return new MyPoint(x,y);

}

public static void main(String [] args) {

InnerMeth i = new InnerMeth();

System.out.println(new Point(4, 10));

System.out.println(i.getP(4, 10));

}

}



• Une classe sans nom, définit par un new <NomDeClasse>(…) { <du code> }

• On peut ainsi « étendre » n’importe classe classe, interface ou classe abstraite

• Si on a besoin d’une référence extérieure, il faut que l’élément soit « final »

• Autre possibilité avec les lambda : button.addActionListener(e ->

/* ce qu’il faut faire… */);



Layout ; menu ; bouton

Ressource (images) : http://docs.oracle.com/javase/tutorial/index.html


http://docs.oracle.com/javase/tutorial/index.html


Les différentes « mises en page » internes aux composants graphiques



• Définit l’organisation– Proche du pattern strategy

• Basé sur une des tailles (preferred, minum, maximum) ou une maximisation de l’élément

• BorderLayout– par défaut dans une fenêtre– ajout en précisant la zone– add("North" , comp)– North ou South : hauteur garantie

(préférée)– Center : redimensionne au reste– East ou West : largeur garantie (préférée)– 1 seul composant par emplacement



• Organisation

– Vertical : container.setLayout(new BoxLayout(container, BoxLayout.PAGE_AXIS));

– Horizontal : ligne. setLayout(new BoxLayout(ligne, BoxLayout.LINE_AXIS));

– Généralement basé sur la taille maximum (dépend du component)

• Alignement des bords :

– setAlignmentX(Component.LEFT_ALIGNMENT); pour aligner les bords gauches

– Sur les composants ajoutés

• Insertion de « blancs » pour remplir (séparation)

– colonne.add(Box.createVerticalGlue());

– ligne.add(Box.createHorizontalGlue());

• Insertion de “blancs” pour combler

– zoneOutils.add(Box.createVerticalBox());

• Insertion de « blancs » pour espacer…

– container.add(Box.createRigidArea(new Dimension(5,5)));



• setLayout(null)

• Pas d’intelligence au placement / dimensionnement

• Chaque component doit

– Avoir une taille (setSize)

– Avoir une position (setLocation)

• Positionnement au pixel…



• Composants « alignés » sur une ligne

• Si cela ne tient pas on commence une nouvelle ligne

• Possibilité de spécifier l’alignement (centré par défaut) sur lelayout :

– Paramètre du constructeur ou setAlignement(int)

– FlowLayout.LEFT ; RIGHT ; CENTER ; LEADING ; TRAILING

• Gestionnaire d’affichage par défaut des JPanel

70

basé sur un transparent d’Audrey Occello



• Permet d’empiler des panneaux (= composants )• Association clef (String) / panneau• Ajout dans le container :

– Méthode add( Component, "Une clef – chaine de caractère")

• Montrer un « panneau » (méthode de CardLayout) :– Navigation : first(Container parent) ; last(Container parent) ; next(Container parent) ;

previous(Container parent)– Désignation : show(Container parent, String name)

71



• JPanel avec CardLaout et intégration des boutons de navigation

• Méthodes : – addTab (Nom, (Icône,)

Component (, Tips) )

– insertTab / removeTab

– setSelectedIndex / setSelectedComponent / get-

• Apparences– setTabPlacement(int) avec JTabbedPane.TOP ; BOTTOM ; LEFT ou RIGHT

– Modification des boutons (setIconAt ; setBackgroundAt ; setEnabledAt ; etc.)

– setTabComponentAt : personnalisation des boutons• indexOfTabComponent : retrouver l’indice d’un bouton



• Grille (tableau)

• Ordre : équilibrage des lignes

• Taille : tous les composants ont la même taille

• On déclare le layout de la manière suivante :– new GridLayout(int rows, int cols)

– (0 , 1) : une colonne

– (1, 0) : une ligne

• Modification de la grille

– setColumns(int cols) / getColumns()

– setRows(int rows) / getRows()73



• GroupLayout

– Groupage {parallèle ; séquentiel} x {vertical, horizontal}

– Allignement vertical, horizontal, les deux

• GridBagLayout

– Expression de contrainte

– Grille avec des poids pour chaque case



• Choix des containers

• Choix des layouts

• Arbre

– Structure hierachique Contenant / Contenu

– (Graphe de scène)



Illustration de l’héritage : partage de méthodes, spécialisations, etc.



AbstractButton

JButton

JComponent

JMenuItemJToogleButton

JCheckBoxMenuItem

JMenu

JRadioButtonMenuItem

JCheckBox JRadioButton



• Plusieurs icônes– setIcon ; setPressedIcon ; setRolloverIcon ; setSelectedIcon ;

setRolloverSelectedIcon ; setDisabledIcon ; setDisabledSelectedIcon– ImageIcon (String fileName) ou ImageIcon(URL imageLocation)

• Méthode de positionnement du texte (et donc le l’îcone) – setVerticalTextPosition(SwingConstants.RIGHT ou SwingConstants.LEFT ou

SwingConstants.CENTER ou SwingConstants.LEADING ouSwingConstants.TRAILING (the default) );

– setHorizontalTextPosition(SwingConstants.CENTER (the default) ouSwingConstants.TOP ou SwingConstants.BOTTOM);

• addActionListener• doClic( ) : fait comme si on avait cliqué (event)



• Un « Bouton » peut contenir du texte en html

• "<html>ligne1<br />ligne2</html>"

• JButton, JLabel, JMenuItem, JMenu, JRadioButtonMenuItem, JCheckBoxMenuItem, JTabbedPane, JToolTip, JToggleButton, JCheckBox and JRadioButton



• Bouton à état

– isSelected( )

– setSelected( boolean) : ne provoque pas d’event

• ActionEvent : en sélection uniquement

• ItemEvent : en changement (sélection et sélection)

– addItemListener

– ItemListener : public void itemStateChanged(ItemEvent e)



Pour en sélectionner un seul parmi n : ButtonGroupCe n’est pas un objet graphique

new ButtonGroup()

add(<boutton avec état>) : avec JRadioButton ou JToggleButton ou JRadioButtonMenuItem

getSelectedButtonModel (ce n’est pas le bouton lui-même mais un objet encapsulé) - fournit getActionCommand

getElementsRetourne une Enumeration<AbstractButton>

pattern iterator

Changement de comportement Les boutons ne peuvent plus être désélectionnés autrement que pas la sélection d’un autre

Pour reset :

Enumeration<AbstractButton> enumeration = group.getElements(); // liste des éléments du ButtonGroup

while (enumeration.hasMoreElements( ) ) // tant qu’il y a des élts

{

AbstractButton ab =enumeration.nextElement(); // on prend le premier disponible

group.remove(ab); // on l’enlève du ButtonGroup

ab.setSelected(false); // on le déselectionne

group.add(ab); // on le remet dans le groupe

}



• Container détâchable

– setFloatable( boolean ) // true par défaut

• Ajout de component par simple add

– Éléments collés

– Méthode addSeparator()

• Activation des « infobulles »

– setRollover( boolean ) // false par défaut



• Interface Action • Classe Abstraite AbstractAction• Version « améliorée » des ActionListener

• Partage plus facile• Communication par message : méthode putValue(String key , Object value) • Action. NAME : un texte (qui s’affiche sur les boutons ou les menus)• Action. LARGE_ICON_KEY ou Action. SMALL_ICON : une icône• Action. ACTION_COMMAND_KEY : un texte « actionCommand »• Action.MNEMONIC_KEY : un mnémonique• Action.ACCELERATOR_KEY un raccourci clavier• Action. SHORT_DESCRIPTION ou Action. LONG_DESCRIPTION : un texte qui décrit l’action (version

longue ou courte utilisée par les bulles d’aide)

• Partage : setEnabled qui impactera tout les éléments gérés • Partage : réaction via la méthode actionPerformed



• A passer en paramètre au constructeur ou avec la méthode setAction

– Utilisable par AbstractButton

• Différents constructeurs de AbstractAction (à étendre)

• http://docs.oracle.com/javase/tutorial/uiswing/examples/misc/ActionDemoProject/src/misc/ActionDemo.java


http://docs.oracle.com/javase/tutorial/uiswing/examples/misc/ActionDemoProject/src/misc/ActionDemo.java


Illustration de l’héritage : partage de méthodes, spécialisations, etc.

Illustration d’une agrégation (le menu et ses items)



• JMenuBar qui porte les JMenu

• Les JMenu portent :

– JMenuItem

– JRadioButtonMenuItem, etc.

– JSeparator (pour séparer)

• JFrame.setJMenuBar



• C’est un AbstractButton– Texte, icône…

• Ajout de raccourci (Alt+Q)– Quand le menu est ouvert :

item.setMnemonic(KeyEvent.VK_Q);(souligne la lettre)

– Quand le menu n’est pas forcément ouvertitem.setAccelerator(KeyStroke.getKeyStroke(

KeyEvent.VK_Q,InputEvent.ALT_DOWN_MASK));

• JMenu porte des JMenuItem• Héritage… donc même fonctonnalités



• JMenuItem

– C’est un AbstractButton

– ActionEvent

• JRadioButtonMenuItem / JCheckBoxMenuItem

– ItemEvent possible



• Généralement par clic droit (Windows)

• Un JPopupMenu porte des – JMenuItem

– JRadioButtonMenuItem, etc. (ButtonGroup)

– JSeparator

• MouseListener sur les élèments avec le menu contextuel (mousePressed et mouseReleased) avec le code suivant :

if (e.isPopupTrigger()) {

popup.show(e.getComponent(), e.getX(), e.getY());

}



Image, Graphics 2D





• Objet représentant les images– getSource : obtenir le « producer »– getHeight( imageObserver ) / getWidth ( imageObserver ) – ImageObserver : pour être rappeler en cas de modification de l’image (chargement)

• Peut être null

• Pour les obtenir :– javax.swing.ImageIcon

• Constructeur avec le nom du fichier• Méthode getImage

– java.awt.Toolkit• Pas de constructeur, mais une méthode statique (singleton) java.awt.Toolkit.getDefaultToolkit() • méthode getImage("nomdufichier");

– Méthode de Componentpublic Image createImage(ImageProducer producer)



• Les sous-classes de la classe abstraite Toolkit implantent la partie de AWT qui est en contact avec le système d’exploitation hôte

• Quelques méthodes publiques :• getScreenSize, getScreenResolution,

• getImage,

• createImage

• getDefaultToolkit fournit une instance de la classe qui implante Toolkit

basé sur un transparent de Richard Grin



• Plusieurs constructeurs : – un nom de fichier absolu ou relatif– URL (adresse Internet ; objet de type URL)– une image (Image)– un tableau de byte (byte[])

• Diverses méthodes– getImageLoadStatus() : image chargée ?

• MediaTracker.ABORTED, MediaTracker.ERRORED,MediaTracker.COMPLETE, MediaTracker.LOADING

– getIconWidth() et getIconHeight() : les dimensions– getImage( ) : la « source »



• Si on indique un chemin : depuis là où est exécuter le programme java

– Sous eclipse : racine du projet

• Problème en cas de distribution sous forme de jar

• getResource de la classe Class

– nomFichier : chemin par rapport au .class

URL url = getClass().getResource(nomFichier);

ImageIcon icone = new ImageIcon(url);



• Intégré dans ImageIcon• Pour attendre la « construction d’une image »• Utilise pour le bon foncionnement// ajout d’image à « synchroniser »tracker.addImage(changedImg, 1); // choix du “canal”try

{ tracker.waitForID(1); // attente de toutes les images du canal}

catch(Exception e) {System.out.println("errors while loading images" + e.getMessage());}



• Avec un Jcomponent

– JLabel

– JButton, etc.

• Par un dessin « explicite »

– Méthodes drawImage de Graphics



• Contexte graphique (« morceau d’écran »)

• Permet de dessiner

– Changer de crayon : setColor

– drawRect, drawOval, drawPolygon, drawString, fillRect, fillOval

• Obtenu automatiquement (repaint(), redimensionnement, etc.)



Dessin telle quelle (avec une éventuelle couleur de fond)drawImage(Image img, int x, int y, Color bgcolor, ImageObserver observer)drawImage(Image img, int x, int y, ImageObserver observer)

Dessin avec redimensionnementdrawImage(Image img, int x, int y, int width, int height, Color bgcolor, ImageObserver observer)drawImage(Image img, int x, int y, int width, int height, ImageObserver observer)

Dessin d’une sous partie de l’image avec redimensionnementdrawImage(Image img, int dx1, int dy1, int dx2, int dy2, int sx1, int sy1, int sx2, int sy2, Color bgcolor, ImageObserver observer)drawImage(Image img, int dx1, int dy1, int dx2, int dy2, int sx1, int sy1, int sx2, int sy2, ImageObserver observer)



Surface d’affichage du Composant

(insets : pour laisser la place pour les bordures)

(0,0) = ( getX(), getY() )

Insets insets = getInsets();

insets.top

insets.bottom

insets.left insets.right

getWidth( )

getHeight( )

x

y




• Class Font– Méthodes d’accès aux caractéristiques

• getSize( ) / getSize2D( )• isBold( ) / isItalic( ) / isPlain( )

– Construction : • Font(String name, int style, int size)• Méthode static Font.getFont(String name)• Méthode getFont( ) de Component

• Méthodes de Font deriveFont– Taille (float), style (Font.PLAIN ; Font.BOLD ; Font.ITALIC ,

Font.BOLD | Font.ITALIC ), (AffineTransformation)– Exemple pour grossir la taille d’un component :

component.setFont( component.getFont().deriveFont(72f) ) ;



• Connaitre en pixel la taille d’une chaine– Placer dans le Graphics– Découper en « lignes »– Couper (…)

• Méthode getFontMetrics– De component : public FontMetrics getFontMetrics(Font font)– De Graphics : public FontMetrics getFontMetrics()

• FontMetrics– Permets de connaitre les dimensions de la font– Largeur (int) : charWidth(char ch) / stringWidth(String str)– Espace occupé dans un graphics (Rectangle2D) :

getStringBounds(String str, Graphics context) – Hauteur d’une ligne (int) : getHeight( )



• (Calculs avec les FontMetrics)

– Peut être assez complexe pour gérer tous les cas

• drawString(String str, int x, int y)



• En fait, la méthode paintComponent reçoit une instance de la classe Graphics2D, sousclasse de Graphics

• Graphics2D offre beaucoup plus de possibilités que Graphics– rotations, – les mises à l’échelle, – le choix de la largeur de trait,

• g.setStroke(new BasicStroke(epaisseur)) ;

– Antialiasing, • g.setRenderingHint(RenderingHints.KEY_ANTIALIASING,

RenderingHints.VALUE_ANTIALIAS_ON);

– le tracé de rectangle 3D

• Graphics2D g2 = (Graphics2D) g;




• C’est une java.awt.Image• Création simpleBufferedImage(int width, int height, int imageType)

– Largeur, hauteur– TYPE_3BYTE_BGR, TYPE_4BYTE_ABGR...

• Pour dessiner dedans public Graphics2D createGraphics()

• Manipulation d’image– getRGB(x,y) // coordonnées pixel

// retourne un int « rgb »// rgb : sur 3 ou 4 octet (alpha, red, green, blue)

– setRGB(x, y, rgb) Traitement par zone



public class Cloning extends JComponent {BufferedImage img ;

public Cloning(JComponent cpt){

img = new BufferedImage(cpt.getWidth(), cpt.getHeight(), BufferedImage.TYPE_4BYTE_ABGR);Graphics2D g = img.createGraphics();cpt.paint(g);

setSize(cpt.getSize());setPreferredSize(getSize());setMaximumSize(getSize());setMinimumSize(getSize());

}

public void paintComponent(Graphics g){

if (img != null) g.drawImage(img, 0, 0, null);}

}

On prend les dimensions du copié

On prend une photo du copié

On dessine la photo



• java.awt.image.BufferedImage– buffImg = new BufferedImage(width, height, type); – type : BufferedImage.TYPE_4BYTE_ABGR par exemple

• Dans paint(Graphics g) :– Graphics grph = buffImg.createGraphics();– // on dessine dans grph– g.drawImage(buffImg, 0, 0, null)

• setDoubleBuffered pour SWING• Optimisation toujours possible

– Dessin par tranche, pour ne pas « tout » redessiner



• Paquetage javax.imageio ; class ImageIO• Ce paquetage permet de charger et sauvegarder facilement n’importe quel type

d’image• Il utilise la notion de plugin pour supporter les différents types d’image• Méthodes static read pour lire depuis un fichier local (File), un flot ou un URL

(lecture directe sans utilisation d’un thread en parallèle)• Méthodes write pour écrire un BufferedImage dans un fichier ou un flot, en

choisissant le codage d’écriture• Format par défaut : gif, png, jpg

– des paquetages sur le Web pour ajouter d’autres formats– public static void scanForPlugins()

• Scans for plug-ins on the application class path

– String[] formatNames = ImageIO.getReaderFormatNames();



BufferedImage image ; // après construction…Graphics g = image.getGraphics();

// on peut dessiner dans g, par exemple avec// component.paint(g) ;

File imageFile = new File(filename); try {

ImageIO.write(image, "png", imageFile); } catch (IOException e) {

System.err.println("echec dans la sauvegarde"); }



Input, KeyListener & Focus, Evénements liés aux composants…





Saisie de Texte / Comment entrez des valeurs



• Jlabel : texte (et icone) non modifiable

• JTextField : entrer du texte (sur une ligne)– Touche « entrée » provoque un

actionListener

• JTextArea : quelques lignes de texte– Édition « texte brut »

• JEditorPane : édition « formatée »– StyledDocument (structure hiérarchique)

• addDocumentListener / addUndoableEditListener

• undo / redo

– JTextPane (découpage en paragraphe)




JTextComponent

JTextField

JComponent

JEditorPaneJTextArea

JTextPane

JLabel

JPasswordField JFormattedTextField

Manipule des StyledDocument

Utilise des formats comme : amountFormat = NumberFormat.getNumberInstance( );



• Modèle = Document / Vue / Contrôleur• Contient les méthodes de base pour traiter une zone de saisie

ou/et d’affichage de texte :– {get/set}Text pour obtenir ou mettre le texte (ou une partie du texte)

contenu dans le composant• addInputMethodListener

– setEditable() pour indiquer si l’utilisateur peut modifier le texte– copier/couper/coller avec le clipboard du système– utilisation et gestion du point d’insertion (caret)

• addCaretListener

– etc.




Interagir avec le clavier, savoir sur quel composant cela se passe,



• KeyListener

– Méthodes keyPressed puis keyTyped puis keyReleased

• KeyEvent

– Constante VK_xxx pour le code de la touche

– Hérite de InputEvent : donc getModifiers() et isAltDown(), etc.

– getKeyChar() et getKeyCode() (code de la touche)



• Les événements claviers vont sur le composant qui a le focus– Un seul composant peut « avoir le focus » à un moment donné

– La fenêtre qui « a le focus » est celle qui contient ce composant

• 2 autres façons pour obtenir le focus– Le plus souvent un composant obtient le focus quand l’utilisateur

clique sur lui

– Il peut aussi l’obtenir par programmation avec les méthodesrequestFocus() ou requestFocusInWindow() de la classe Component

• Attention au retour d’une fenêtre (de dialogue)



• Dans la classe Component– la méthode boolean isFocusable() permet de savoir si un composant

peut l’avoir

– void setFocusable(boolean) permet de modifier cette propriété

• Dans la classe Component, 2 méthodes pour passer au composant suivant ou précédent : transfertFocus et transfertFocusBackward– les fenêtres sont des composants

• FocusListener : méthodes focusGained et focusLost




• Raccourcit des boutons / menus– Alt (mouseless modifier) + touche– Dans la class AbstractButton

• setMnemonic(code) avec un code de touche (KeyEvent.VK_xxx)• Pour les menus : il faut que le menu soit ouvert

– Dans la class JTabbedPane• setMnemonicAt(int tabIndex, int code) avec pour la tabIndex un indice d’un onglet

• Accelerateur pour les JMenuItem– Raccourcit clavier– KeyStroke.getKeyStroke(int keyCode, int modifiers)

• C.f . KeyEvent et InputEvent pour les modifiers




• On peut ajouter une bulle d’aide ou de description à n’importe quel composant :

– composant.setToolTipText("Texte");

• Cette bulle s’affiche lorsque le pointeur de la souris est positionné depuis un certain temps sur le composant




• Réagir à des changements sur le component• ComponentListener

– componentHidden(ComponentEvent)• Called after the listened-to component is hidden as the result of the setVisible method being called.

– componentMoved(ComponentEvent)• Called after the listened-to component moves, relative to its container. For example, if a window is moved,

the window fires a component-moved event, but the components it contains do not.

– componentResized(ComponentEvent)• Called after the listened-to component's size (rectangular bounds) changes.

– componentShown(ComponentEvent)• Called after the listened-to component becomes visible as the result of the setVisible method being called.

• All of these methods are also in the adapter class, ComponentAdapter.

• Il existe aussi ContainerListener (add / remove)



• ComponentEvent

– Component getComponent()

• Returns the component that fired the event. You can use this instead of the getSource method.

– public String paramString()

• Returns a parameter string identifying this event. This method is useful for event-logging and for debugging.



• JInternalFrame : Jcomponent à placer à l’intérieur d’une fenêtre et qui se comporte comme une fenêtre

– Iconifier, Agrandir, Déplacer, etc.

• Va de paire avec JDesktopPane (ou un layout null)

• http://docs.oracle.com/javase/tutorial/uiswing/components/internalframe.html


http://docs.oracle.com/javase/tutorial/uiswing/components/internalframe.html


• Design Pattern Decorator– Ajoute un « plus », ici graphique

• http://docs.oracle.com/javase/tutorial/uiswing/misc/jlayer.html– class WaitLayerUI extends LayerUI<JPanel>

implements ActionListener• Avec une méthode

public void paint (Graphics g, JComponent c)

– Création du panel à décorer

– JLayer<JPanel> jlayer = new JLayer<JPanel>(panel, layerUI);

– Ajout du jlayer à la fenêtre (et non pas du panel)

• Le JLayer est le décorateur, le LayerUI est la « stratégie » de décoration – Délagation de la décoration à la classe LayerUI

– on ne refait que le LayerUI, on redessine ce qu’on veut


http://docs.oracle.com/javase/tutorial/uiswing/misc/jlayer.html


• Comportement des boutons (feedback)

• JComboBox (menu déroulant)

• Etc.

• Modification avec ButtonGroup

• Comportement interne– Gestion de la taille

– Gestion de l’alignement



Un bilan sous forme de questions



• Une question : l’objet doit-il « être un » (un composant graphique) ?

• Héritage quand : – Modification du comportement

• Lourd

• ou systématique

• Délégation sinon– Décoration possible (pour ajout de fonctionnalité mineur)

• C.f. JScrollPane, JLayer, etc.



• Généralement plus simple de plusieurs instances

– Autant que d’objet écoutés

– Évite des tests sur la source (et donc de la dépendance dans le code)

• Cas particulier des Action

• Eventuellement (rare) une seule instance si

– Besoin de « synchroniser » des sources d’événement

– Besoin d’économiser



• À nouveau la question : l’objet doit-il « être un » (listener) ?

• Variation dans la réutilisation, le dynamisme :

– Classe : listener réutilisable, choix à faire lors des instanciation

– Classe interne : rattachement à la classe « écoutée », réutilisation plus compliquée

– Classe interne anonyme : comportement interne à la classe « principale », pas d’exportation de ce comportement



• Édition à la main – Parfois « rédhibitoire »

– Maitrise totale

• Editeur Graphique d’Interface – Facile et rapide

– Code plutôt laid : nom des variables, listener qui appel des méthodes privées, etc.

– code « non modifiable » dans l’éditeur

– Utilisation de layout complexe (GroupLayout ou GridBagLayout) et de classe propre à l’éditeur


Introduction Intro Développement Interface Graphique ...deptinfo.unice.fr/~renevier/POO/cours/01 -...

Documents

Transcript of Introduction Intro Développement Interface Graphique ...deptinfo.unice.fr/~renevier/POO/cours/01 -...