Unit 8 (Partie 1)

Interface Graphique avec Swing

(Graphical User Interface - GUI)

Redouane EZZAHIR
red.ezzahir@gmail.com

Interface graphique (GUI)

Les GUI permet aux

utilisateurs d'interagir
avec des appareils
lectroniques travers
des icnes graphiques
et des indicateurs
visuels, par opposition
aux interfaces bases
sur le texte qui exigent
de taper des
commandes sur un
clavier.

Source de limage:
http://www.titou.net/tendance-ux-trop-interfacestue-interface-utilisateur/

Comment fonctionne une interface graphique?

Chaque composant, et l'interface elle-mme, est associ

une ou plusieurs routines utilisateur connue par callbacks

(rappels). L'excution de chaque callback est dclenche par
une action de l'utilisateur, comme par exemple un clic de
souris, la slection d'un lment de menu, ou le curseur
passe sur un composant.

Vous, en tant que crateur de l'interface graphique, vous

devez fournir ces callbacks.

Ce type de programmation est souvent dsign par la

programmation conduite par les vnements event-drivenprogramming.

L'auteur d'un callback n'a aucun contrle sur la squence des

vnements qui ont conduit son excution ou, lorsque le

callback est excut.

programmation conduite par les vnements

Sorte de programmation impos par les GUI
Les actions de lutilisateur (dplacement, clic

de souris, frappe de touche du clavier,)

engendrent des vnements qui sont mis
dans une file dattente.
le programme rcupre un un ces

vnements et les traite en excutant leurs

callbacks associs

vnements dune GUI

App1
mouse
click

OK
Cancel

App2
OK

App2 code:

Cancel

App1
event
loop

Window
System
input
device

event
loop

Quelle
app?

App2
event
loop

quel
callback?

OKbtn_click()
{
do stuff;
}
OKbtn_mouseover()
{
do more stuff;
}
CancelBtn_click()
{
do different stuff;
}

Botes outils graphiques

Les botes outils graphiques offrent des

facilits pour utiliser et grer la file

dattente des vnements
En particulier pour associer les

vnements avec les traitements

(callbacks) quils doivent dclencher

La solution Java : les couteurs

Swing utilise un Pattern de type

observateur - observ
Les composants graphiques (boutons,
listes, menus,) sont les observs
chaque composant graphique a ses
observateurs (ou couteurs, listeners) qui
senregistrent auprs de lui comme
couteur (ou observateur) dun certain
type dvnement

Rle dun couteur

Lcouteur est prvenu par le composant

graphique ds quun vnement qui le

concerne sest produit sur ce composant
Il excute alors le callback associ

lvnement
Par exemple lcouteur du bouton Exit

demande une confirmation lutilisateur et

termine lapplication

Exemple dcouteur Java

Enregistrer lcouteur auprs dune composante
source dvnement

1.

Donner la composante une rfrence de lobjet d'coute

JButton1.addMouseListener (new myMouseListener())

Recevoir des vnements de la composante

2.

La composante appelle le callback sur lobjet Listener

myMouseListener.mouseClicked(event)

1. addMouseListener( )
click

myMouseListener

JButton1
2. mouseClicked( )

Gestion d'vnements en Swing

Les vnements pour les fentre

Un listener dvnement Window permet par exemple de fermer
lapplication lorsque lon ferme la fentre principale.
Ex :
public Monlistener implements java.awt.event.WindowListener {
public void windowClosing(java.awt.event.WindowEvent e) {
System.exit(0);
}
}

Pour les boutons

Sur les boutons les vnement permettent l'excution dun
traitement si un click a eu lieux.
Ex :
public MonListener implements java.awt.event.ActionListener {
public void actionPerformed(ActionEvent e) {
System.out.println( le bouton a t click );
}
public MonListener() {
}
}
Dans le programme :
JButton b = new JButton( Click Me ! );
b.addActionListener(new MonListener());

API utilises pour les interfaces

graphiques en Java
AWT
Swing

Deux API
AWT(Abstract Window Toolkit, JDK 1.1)
Swing(JDK 1.2)
Swing et AWT font partie de JFC(Java

Foundation Classes) qui offre des facilits

pour construire des interfaces graphiques
Swing est construit au-dessus de AWT
La mme gestion des vnements
Les classes de Swing hritent des classes de AWT

Lapproche de lAWT
Le plus petit dnominateur Commun
Si non disponible en natif sur lune des plate-forme

Java, alors non disponible sur toutes les plateforme Java

Ensemble de Composant Simple

La Plate-forme contrle lapparence des

composants
Inconsistances dans les implmentations
Interfaage avec la plate-forme native => erreur

Ce qui tait Mauvais

AWT pas assez efficace
Chacun cre de nouveaux Composants
IFC Netscape
AFC, WFC Microsoft, ...
Temps de chargement de lApplet trop long
Les dveloppeurs voulaient leur ensemble de
composants, incorpors dans les browsers

Lapproche de Swing
Ensemble plus Riche de Composants
Remplace lAWT
Ajoute des composants plus complexes

Composants Swing sont bass sur Java

Si des problmes, les mme problmes partout

100% Pure Java

Java 1.1.2+ ncessaire
Uniquement le modle d'vnements de Java 1.1

Deux points de vue de Swing

Alternative aux composants AWT Java 1.1
Quelques nouveaux composants.
Look-and-feel, skins
Le drag and drop : glisser-dposer entre application

quelconque (pas forcment Java) sur une plate-forme.

Modle-Vue-Contrleur
Sparation claire entre les donnes du programme et

la partie graphique affichant les donnes.

Le modle montre les donnes la vue.
La vue est le composant graphique.

Architecture Swing
Une application est compose de plusieurs Swing :

Un composant top-level

Plusieurs composants conteneur intermdiaire, ils contiennent

dautre composants

Des composants atomiques

Composant de GUI
En Java:
Composant de GUI = class

Proprits
Mthodes
Evnements

JButton

Le composant JComponent
Tous les composants Swing hritent de

JComponent
Les composants ont des Tool Tips
Les composants ont des bordures
Entit graphique la plus abstraite

Top-Level
Swing propose 3 composants top-level:
JFrame, JDialog et JApplet
JWindow est aussi top-level mais il nest pas utilis
JInternalFrame ressemble un top-level mais il nen est pas un
Une application graphique doit avoir un composant
top-level comme composant racine (composant qui inclus tous les
autres composants)

Top-Level

Les composants top-level possdent un content pane qui contient tous les
composants visibles dun top-level
Un composant top-level peut contenir une barre de menu

JFrame
Une JFrame est une fentre avec un titre
et une bordure

Quelques mthodes :
public JFrame();
public JFrame(String name);
public Container getContentPane();
public void setJMenuBar(JMenuBar menu);
public void setTitle(String title);
public void setIconImage(Image image);

JDialog
Un JDialog est une fentre qui a pour but un change dinformation

Un JDialog dpend dune fentre, si celle-ci est dtruite, le JDialog lest aussi
Un JDilaog peut aussi tre modal, il bloque tout les inputs sur lui

Conteneur Intermdiaire
Les conteneur intermdiaire sont utiliss

pour structurer lapplication graphique

Le composant top-level contient des
composants conteneur intermdiaire
Un conteneur intermdiaire peut contenir
dautre conteneurs intermdiaire

Conteneur Intermdiaire
Swing propose plusieurs conteneurs intermdiaire:

JPanel
JScrollPane
JSplitPane
JTabbedPane
JToolBar
...

JPanel
Le JPanel est le conteneur intermdiaire le plus neutre
On ne peut que choisir la couleur de fond

Quelques mthodes de JPanel:

public JPanel();
public Component add(Component comp);
public void setLayout(LayoutManager lm);

JScrollPane
Un JScrollPane est un conteneur qui offre des ascenseurs, il
permet de visionner un composant plus grand que lui

Quelques mthodes:
public JScrollPane(Component comp);
public void setCorner(String key,Component comp);

JSplitPane
Un JSplitPane est un panel coup en deux par une barre de
sparation. Un JSplitPane accueil deux composants.

Quelques Mthodes :
public JSplitPane(int ori, Component comp, Component c);
public void setDividerLocation(double pourc);

JTabbedPane
Un JTabbedPane permet davoir des onglets

Quelques mthodes :
public JTabbedPane();
public void addTab(String s, Icon i, Component c, String s);
public Component getSelectedComponent();

JToolBar
Une JToolBar est une barre de menu

Quelques Mthodes :
public JToolBar();
public Component add(Component c);
public void addSeparator();

Conteneur Intermdiaire Spcialis

(rappel)
Les conteneur Intermdiaire spcialis

sont des conteneurs qui offrent des

proprits particulires aux composants
quils accueillent
JRootPane
JLayeredPane
JInternalFrame

JRootPane
En principe, un JRootPane est obtenu partir dun top-level ou dune
JInternalFrame

Un JRootPane est compos de

glass pane
layered pane
content pane
menu bar

JLayeredPane
Un JLayeredPane permet de positionner les composants
dans un espace trois dimensions

Pour ajouter un Composant:

add(Component c, Integer i);

JInternaleFrame
Un JInternaleFrame permet davoir des petites fentres
dans une fentre.
Une JInternaleFrame ressemble trs fortement une
JFrame mais ce nest pas un container Top-Level

Les composants atomiques

Un composant atomique est considr

comme tant une entit unique.

Java propose beaucoup de composants
atomiques:

boutons, CheckBox, Radio

Combo box
List, menu
TextField, TextArea, Label
FileChooser, ColorChooser,
...

Les boutons
Java propose diffrent type de boutons:
Le bouton classique est un JBouton.
JCheckBox pour les case cocher
JRadioBouton pour un ensemble de bouton
JMenutItem pour un bouton dans un menu
JCheckBoxMenuItem
JRadioButtonMenuItem
JToggleButton Super Classe de CheckBox et Radio

JComboBox
Un JComboBox est un composant permettant de faire un
choix parmi plusieurs propositions.

Quelques mthodes:
public JComboBox(Vector v);
public JComboBox(ComboBoxModel c);
Object getSelectedItem();
void addItem(Object o);

JList
Une JList propose plusieurs lments rangs en colonne.
Une JList peut proposer une slection simple ou multiple
Les JList sont souvent contenues dans un srolled pane

Quelques mthodes:
public JList(Vector v);
public JList( ListModel l);
Object[] getSelectedValues();

JSlider
Les JSlider permettent la saisie graphique dun nombre
Un JSlider doit contenir les bornes max et min

Quelques mthodes:
public JSlider(int min ,int max, int value);
public void setLabelTable(Dictionary d);

JTextField
Un JTextField est un composant qui permet dcrire du
texte.
Un JTextField a une seul ligne contrairement au JTextArea
Le JPasswordField permet de cacher ce qui est crit

Quelques mthodes:
public JTextField(String s);
public String getText();

JLabel
Un JLabel permet dafficher du texte ou une image.
Un JLabel peut contenir plusieurs lignes et il comprend les
tag HTML.

Quelques mthodes:
public JLabel(String s);
public JLabel(Icon i);

Les menu
Si on a une barre de menu JMenuBar, on ajoute des JMenu dans la
barre.
Les JMenu et le JPopupMenu ont le mme mode de fonctionnement,
crer des JMenuItem et les ajouter.

Ex:

menuBar = new JMenuBar();

setJMenuBar(menuBar);
menu = new JMenu("A Menu");
menuBar.add(menu);
menuItem = new JMenuItem("menu item");
menu.add(menuItem);

JTree
Un JTree permet dafficher des informations sous forme darbre. Les nuds
de larbre sont des objets qui doivent implanter linterface MutableTreeNode.
Une classe de base est propose pour les nuds : DefaultMutableTreeNode.
Pour construire un arbre il est conseill de passer par la classe TreeModel qui est la
reprsentation abstraite de larbre.

Pour construire un arbre:

rootNode = new DefaultMutableTreeNode("Root");
treeModel = new DefaultTreeModel(rootNode);
tree = new JTree(treeModel);
childNode = new DefaultMutableTreeNode ("Child");
rootNode.add(childNode);

JFileChooser
Un JFileChooser permet de slectionner un fichier en parcourant
larborescence du systme de fichier.

Ex :
JFileChooser fc = new JFileChooser();
int returnVal = fc.showOpenDialog(aFrame);
if (returnVal == JFileChooser.APPROVE_OPTION) {
File file = fc.getSelectedFile();
}

JColorChooser
Un JColoChooser permet de choisir une couleur

Une mthode :
public static Color showDialog(Component c , String title , Color initialColor);

JProgressBar
Un JProgressBar permet dafficher une barre de
progression.

Quelques mthodes :
public JProgressBar();
public JProgressBar(int min, int max);
public void setValue(int i);

Utilisation dun composant de GUI

Cration
Instancier un objet: b = new JButton(press me);

Configuration
Proprits:
Methods:

b.text = press me; [vit en java]

b.setText(press me);

Lajout un panneau
panel.add(b);

Lobservation (coute-lui)
Evnements: couteurs (Listeners)

JButton

Lensemble des composants Swing

J2sdk/demo/jfc/SwingSet2

Composants prfrs pour les GUI

http://www.cs.duke.edu/csl/docs/java/demo/jfc/SwingSet2/
http://www-igm.univ-mlv.fr/~paumier/IG/GuiExampleViewer.jar

Anatomie dune application avec GUI

GUI

Structure interne

JFrame

JFrame

JPanel

conteneurs
JButton

JLabel

JPanel

JButton

JLabel

Utilisation dun composant de GUI (2)

Cre-le

Lordre est
important

Configure-le
Ajoute-lui ses fils (si conteneur)
Ajoute-le son parent (si pas JFrame)
coute-lui

Construire du bas en haut (bottom up)

Listener

1. La cration:
1. Fentre (Frame)
2. Panneau (Panel)

JLabel

JButton

3. composants (Components)
4. couteurs (Listeners)

2. Lajout: (bottom up)

JPanel

1. couteurs aux composants

2. composants au panneau
3. panneau au fentre

JFrame

Code
JFrame f = new JFrame("title");
JPanel p = new JPanel( );
JButton b = new JButton(press me);
p.add(b);
f.setContentPane(p);
f.show();

// add button to panel

// add panel to frame

Code de lApplication
public class hello {
public static void main(String[] args){
JFrame f = new JFrame("title");
JPanel p = new JPanel();
JButton b = new JButton("press me");
p.add(b);// add button to panel
f.setContentPane(p);
// add panel to frame
f.show();
}
}

Positionnement des
composants
Les layout manager

Architecture de Layout (rappel)

Pour placer des composants dans un container, Java

propose une technique de Layout.

Un layout est une entit Java qui place les composants les

uns par rapport aux autres.

Le layout soccupe aussi de rorganiser les composants

lorsque la taille du container varie.

Il y a plusieurs layout : BorderLayout, BoxLayout,

CardLayout, FlowLayout, GridLayout, GridBagLayout.

Un layout nest pas contenu dans un container, il gre le

positionnement.

Heuristiques du gestionnaire de disposition

null

FlowLayout

none,
programmer
sets x,y,w,h

Left to right,
Top to bottom

BorderLayout
n
w

c
s

CardLayout

Un seul la fois

GridLayout

GridBagLayout

JButton

BorderLayout
Le BorderLayout spare un container en cinq zones: NORTH,
SOUTH, EAST, WEST et CENTER
Lorsque lon agrandit le container, le centre s'agrandit. Les autres zone
prennent uniquement lespace qui leur est ncessaire.

Ex :
Container contentPane = getContentPane();
contentPane.setLayout(new BorderLayout());
contentPane.add(new JButton("Button 1 (NORTH)"), BorderLayout.NORTH);

BoxLayout
Un BoxLayout permet dempiler les composants du container (soit de
verticalement, soit horizontalement)
Ce layout essaye de donner chaque composant la place quil
demande
Il est possible de rajouter des blocs invisible.
Il est possible de spcifier lalignement des composants (centre,
gauche, droite)

CardLayout
Un CardLayout permet davoir plusieurs conteneurs ; les
uns au dessus des autres (comme un jeux de cartes).

Ex :
JPanel cards;
final static String BUTTONPANEL = "JPanel with JButtons";
final static String TEXTPANEL = "JPanel with JTextField";
cards = new JPanel();
cards.setLayout(new CardLayout());
cards.add(p1,BUTTONPANEL);
cards.add(p2,TEXTPANEL);

FlowLayout
Un FlowLayout permet de ranger les composants dans une
ligne. Si lespace est trop petit, une autre ligne est cre.
Le FlowLayout est le layout par dfaut des JPanel
Ex :
Container contentPane = getContentPane();
contentPane.setLayout(new FlowLayout());
contentPane.add(new JButton("Button 1"));
contentPane.add(new JButton("2"));
contentPane.add(new JButton("Button 3"));
contentPane.add(new JButton("Long-Named Button 4"));
contentPane.add(new JButton("Button 5"));

GridLayout
Un GridLayout permet de positionner les composants sur
une grille.

Ex:
Container contentPane = getContentPane();
contentPane.setLayout(new GridLayout(0,2));
contentPane.add(new JButton("Button 1"));
contentPane.add(new JButton("2"));
contentPane.add(new JButton("Button 3"));
contentPane.add(new JButton("Long-Named Button 4"));
contentPane.add(new JButton("Button 5"));

GridBagLayout
Le GridBagLayout est le layout le plus complexe. Il place les composants sur une grille,
mais des composants peuvent tre contenus dans plusieurs cases.
Pour exprimer les proprits des composants dans la grille, on utilise un
GridBagConstraints.
Un GridBasConstraints possde :
gridx, gridy pour spcifier la position
gridwidth, gridheight pour spcifier la place
fill pour savoir comment se fait le remplissage

Ex :
GridBagLayout gridbag = new GridBagLayout();
GridBagConstraints c = new GridBagConstraints();
JPanel pane = new JPanel();
pane.setLayout(gridbag);
gridbag.setConstraints(theComponent, c);
pane.add(theComponent);

Cration de Layout
Il est possible de construire son propre

Layout
Un layout doit implanter linterface
java.awt.LayoutManager ou
java.awt.LayoutManager2

Combinaisons
JButton JButton

JTextArea

Combinaisons
JButton

n
JFrame

JButton

JPanel: FlowLayout

JPanel: BorderLayout

c
JTextArea

Code: null layout

JFrame f = new JFrame("title");
JPanel p = new JPanel();
JButton b = new JButton("press me");
b.setBounds(new Rectangle(10,10, 100,50));
p.setLayout(null);
p.add(b);
// add button to panel
f.setContentPane(p);
// add panel to frame
f.show();

press me

Code: FlowLayout
Affecter le layout managerr avant lajout

des components
JFrame f = new JFrame("title");
JPanel p = new JPanel();
JButton b = new JButton("press me");
FlowLayout L = new FlowLayout( );
JButton b1 = new JButton("press me");
JButton b2 = new JButton("then me");
p.setLayout(L);
p.add(b1);
p.add(b2);
f.setContentPane(p);

vous de jouer !

Look and Feel (1)

Dfirent types de L&F

Look and Feel (2)

Par dfaut, le L&F utilis est mtal
Si l'on souhaite changer le look au dmarrage de

l'application, il faut le faire avant l'appel aux

constructeurs des composants
UIManager.setLookAndFeel(String className)
UIManager.setLookAndFeel(LookAndFeel laf)

Si l'on souhaite changer dynamiquement de L&F,

il faut un recalcule pour chaque composant

SwingUtilities.updateComponentTreeUI(frame);

Applets
les applets sont charges partir d'une page

HTML contenant la balise :

<APPLET ...>

</APPLET>

Exemple :
<applet code="MyApplet.class" width=100 height=140>
</applet>

Applets
JApplet est comme un JFrame

JApplet

Dispose dj d'un panneau d'accs

JApplet.getContentPane ()

import javax.swing.*;
public class monApplet extends JApplet {
public void init(){
JButton b = new JButton("press me");
getContentPane().add(b);
}
}

contentPane

JButton

Applet Methods
Appeles par le browser:
init( ) - initialisation (lance au moment o

l'applet est charge par le browser)

start( ) - reprendre le traitement(i.e animations)
stop( )
- pause
paint( )
- redessine (exposer lvnement)
destroy( ) - nettoyage lance lorsque le
browser "dcharge l'applet (ou que
l'excution du browser se termine).

Application + Applet
public class helloApplet extends
JApplet {
public void init(){
// put my mainPanel in the Applet
mainPanel p = new mainPanel();
getContentPane().add(p);
}
}
// my main GUI is in here:
class mainPanel extends JPanel {
mainPanel(){
setLayout(new FlowLayout());
JButton b = new JButton("press me");
add(b);
}
}

Command line

Browser

JFrame ou

JApplet

contentPane

JPanel
JButton

Scurit des applets

Pour des soucis de scurit une applet

java est interdite :

D'excuter des programmes sur l'ordinateur

client
De crer une connexion vers un ordinateur
autre que celui d'o vient l'applet
Dcouter, accepter des connexions d'un port
du systme local.
de crer une fentre "top-level" sans indique
qu'elle provient d'une applet.

 la pratique
Ouf !
Par quoi vais-je commencer ?