Interface graphique avec Java - kamrablog.files.wordpress.com · Pour créer des fenêtres, Java...

57
Interface graphique avec Java S. RITAL

Transcript of Interface graphique avec Java - kamrablog.files.wordpress.com · Pour créer des fenêtres, Java...

Page 1: Interface graphique avec Java - kamrablog.files.wordpress.com · Pour créer des fenêtres, Java fournit les composants swing (dans javax.swing) et awt (dans java.awt). Une JFrame

Interface graphique avec Java

S. RITAL

Page 2: Interface graphique avec Java - kamrablog.files.wordpress.com · Pour créer des fenêtres, Java fournit les composants swing (dans javax.swing) et awt (dans java.awt). Une JFrame

Plan

● Ma première fenêtre● Animation● Les boutons● Multi-threading● Menu, Barre d'outils, ● Le Pattern MVC● Les interfaces Observer / Observable● Calculatrice

Page 3: Interface graphique avec Java - kamrablog.files.wordpress.com · Pour créer des fenêtres, Java fournit les composants swing (dans javax.swing) et awt (dans java.awt). Une JFrame

Les boîtes à outils graphiques

● Java propose deux boîtes à outils graphiques :– AWT (Abstract Window Toolkit)

● depuis la version 1.0● Dépend d'OS● Lourde

– SWING ● depuis la version 1.2● Ne dépend pas d'OS● Légére

Page 4: Interface graphique avec Java - kamrablog.files.wordpress.com · Pour créer des fenêtres, Java fournit les composants swing (dans javax.swing) et awt (dans java.awt). Une JFrame

Swing

● Swing est une extension des AWT– nombreux nouveaux composants

– nombreuses facilités

– séparation entre● modèle (données)● aspect visuel (UI)● contrôle

● Les composants sont légers, sauf JApplet, JWindow, JFrame, JDialog

J C h e c k B o x

J R a d i o B u t t o n

J T o g g l e B u t t o n

J B u t t o n

J M e n u

J R a d i o B u t t o n M e n u I t e m

J C h e c k B u t t o n M e n u I t e m

J M e n u B u t t o n

A b s t r a c t B u t t o n

J C o l o r C h o o s e r

J C o m b o B o x

J I n t e r n a l F r a m e

J L a b e l

J L i s t

J M e n u B a r

J O p t i o n P a n e

J P a n e l

J P o p u p M e n u

J P r o g r e s s B a r

. . .

J C o m p o n e n t

C o n t a i n e r

J C o m p o n e n t

J A p p l e t

A p p l e t

P a n e l

J W i n d o w

J F r a m e

F r a m e

J D i a l o g

D i a l o g

W i n d o w

C o n t a i n e r

C o m p o n e n t

O b j e c t

Page 5: Interface graphique avec Java - kamrablog.files.wordpress.com · Pour créer des fenêtres, Java fournit les composants swing (dans javax.swing) et awt (dans java.awt). Une JFrame

Ma première fenêtre

✗ JFrame✗ JPanel✗ Graphics & Graphics 2D

Page 6: Interface graphique avec Java - kamrablog.files.wordpress.com · Pour créer des fenêtres, Java fournit les composants swing (dans javax.swing) et awt (dans java.awt). Une JFrame

Ma première fenêtre

Page 7: Interface graphique avec Java - kamrablog.files.wordpress.com · Pour créer des fenêtres, Java fournit les composants swing (dans javax.swing) et awt (dans java.awt). Une JFrame

Ma première fenêtre

Page 8: Interface graphique avec Java - kamrablog.files.wordpress.com · Pour créer des fenêtres, Java fournit les composants swing (dans javax.swing) et awt (dans java.awt). Une JFrame

Ma première fenêtre

Page 9: Interface graphique avec Java - kamrablog.files.wordpress.com · Pour créer des fenêtres, Java fournit les composants swing (dans javax.swing) et awt (dans java.awt). Une JFrame

JFrame

Une JFrame contient une fille unique, de la classe JRootPane

Cette fille contient deux filles, glassPane (JPanel) et layeredPane (JLayeredPane)

La layeredPane a deux filles, contentPane (JPanel) et menuBar (null JMenuBar)

On travaille dans contentPane.JApplet, JWindow et JDialog sont semblables.

g l a s s P a n e

c o n t e n t P a n e m e n u B a r

l a y e r e d P a n e

J R o o t P a n e

J F r a m e

class Tout extends JFrame { Tout() { JPanel panel; getContentPane().add(panel); ... }...}

Page 10: Interface graphique avec Java - kamrablog.files.wordpress.com · Pour créer des fenêtres, Java fournit les composants swing (dans javax.swing) et awt (dans java.awt). Une JFrame

Objet JFrame

● JFrame

● RootPane conteneur principal qui contient les autres composants ;

● le LayeredPane (en violet), qui forme juste un panneau composé du conteneur global et de la barre de menu (MenuBar) ;

● La menuBar (orange)

● le content pane (en rose) : c'est dans celui-ci que nous placerons nos composants ;

● le GlassPane (en transparence), couche utilisée pour intercepter les actions de l'utilisateur avant qu'elles ne parviennent aux composants.

Il existe d'autres types de fenêtre : la JWindow, une JFrame sans bordure et non draggable (déplaçable), et la JDialog, une fenêtre non redimensionnable.

Page 11: Interface graphique avec Java - kamrablog.files.wordpress.com · Pour créer des fenêtres, Java fournit les composants swing (dans javax.swing) et awt (dans java.awt). Une JFrame

Look and fel

Trois “look and feel” existent, de noms"com.sun.java.swing.plaf.windows.WindowsLookAndFeel"

"com.sun.java.swing.plaf.motif.MotifLookAndFeel"

"javax.swing.plaf.metal.MetalLookAndFeel”

On essaye de l’utiliser parUIManager.setLookAndFeel(lf);

et de l’appliquer à la racine de l’arbre parSwingUtilities.updateComponentTreeUI(

SwingUtilities.getRoot(this));

Page 12: Interface graphique avec Java - kamrablog.files.wordpress.com · Pour créer des fenêtres, Java fournit les composants swing (dans javax.swing) et awt (dans java.awt). Une JFrame

Objet JPanel

● Voici le marche à suivre :

– Importer la classe javax.swing.JPanel dans notre classe héritée de JFrame.

– Instancier un JPanel puis lui spécifier une couleur de fond pour mieux le distinguer.

– Avertir notre JFrame que ce sera notre JPanel qui constituera son content pane.

Page 13: Interface graphique avec Java - kamrablog.files.wordpress.com · Pour créer des fenêtres, Java fournit les composants swing (dans javax.swing) et awt (dans java.awt). Une JFrame

Graphics & Graphics2D

● La classe Graphics2D est une classe dérivée de Graphics

Page 14: Interface graphique avec Java - kamrablog.files.wordpress.com · Pour créer des fenêtres, Java fournit les composants swing (dans javax.swing) et awt (dans java.awt). Une JFrame

Objet Graphics

Page 15: Interface graphique avec Java - kamrablog.files.wordpress.com · Pour créer des fenêtres, Java fournit les composants swing (dans javax.swing) et awt (dans java.awt). Une JFrame

Objet Graphics

Page 16: Interface graphique avec Java - kamrablog.files.wordpress.com · Pour créer des fenêtres, Java fournit les composants swing (dans javax.swing) et awt (dans java.awt). Une JFrame

Résumé.

●Pour créer des fenêtres, Java fournit les composants swing (dans javax.swing) et awt (dans java.awt).

●Une JFrame est constituée de plusieurs composants.

●Par défaut, une fenêtre a une taille minimale et n'est pas visible.

●Un composant doit être bien paramétré pour qu'il fonctionne à votre convenance.

●L'objet JPanel se trouve dans le package javax.swing.

●Un JPanel peut contenir des composants ou d'autres conteneurs.

●Lorsque vous ajoutez un JPanel principal à votre fenêtre, n'oubliez pas d'indiquer à votre fenêtre qu'il constituera son content pane.

●Pour redéfinir la façon dont l'objet est dessiné sur votre fenêtre, vous devez utiliser la méthode paintComponent() en créant une classe héritée.

●Cette méthode prend en paramètre un objet Graphics.

●Cet objet doit vous être fourni par le système.

●C'est lui que vous allez utiliser pour dessiner dans votre conteneur.

●Pour des dessins plus évolués, vous devez utiliser l'objet Graphics2D qui s'obtient en effectuant un cast sur l'objet Graphics

Page 17: Interface graphique avec Java - kamrablog.files.wordpress.com · Pour créer des fenêtres, Java fournit les composants swing (dans javax.swing) et awt (dans java.awt). Une JFrame

Animation

✗ Travaux pratiques

Page 18: Interface graphique avec Java - kamrablog.files.wordpress.com · Pour créer des fenêtres, Java fournit les composants swing (dans javax.swing) et awt (dans java.awt). Une JFrame

TP.

Page 19: Interface graphique avec Java - kamrablog.files.wordpress.com · Pour créer des fenêtres, Java fournit les composants swing (dans javax.swing) et awt (dans java.awt). Une JFrame

Les Boutons

✗ Objet JButton✗ Positionner✗ Interagir✗ Classes interne et anonymouse✗ Travaux pratiques : Calculatrice✗ Importer vos applications en JAR

Page 20: Interface graphique avec Java - kamrablog.files.wordpress.com · Pour créer des fenêtres, Java fournit les composants swing (dans javax.swing) et awt (dans java.awt). Une JFrame

Objet JButton

Page 21: Interface graphique avec Java - kamrablog.files.wordpress.com · Pour créer des fenêtres, Java fournit les composants swing (dans javax.swing) et awt (dans java.awt). Une JFrame

Objet JButton

Page 22: Interface graphique avec Java - kamrablog.files.wordpress.com · Pour créer des fenêtres, Java fournit les composants swing (dans javax.swing) et awt (dans java.awt). Une JFrame

Positionner

BorderLayout

Page 23: Interface graphique avec Java - kamrablog.files.wordpress.com · Pour créer des fenêtres, Java fournit les composants swing (dans javax.swing) et awt (dans java.awt). Une JFrame

Positionner

GridLayout

Page 24: Interface graphique avec Java - kamrablog.files.wordpress.com · Pour créer des fenêtres, Java fournit les composants swing (dans javax.swing) et awt (dans java.awt). Une JFrame

Positionner

BoxLayout

Page 25: Interface graphique avec Java - kamrablog.files.wordpress.com · Pour créer des fenêtres, Java fournit les composants swing (dans javax.swing) et awt (dans java.awt). Une JFrame

Interagir

MouseListener

Page 26: Interface graphique avec Java - kamrablog.files.wordpress.com · Pour créer des fenêtres, Java fournit les composants swing (dans javax.swing) et awt (dans java.awt). Une JFrame

Interagir

ActionListener

Page 27: Interface graphique avec Java - kamrablog.files.wordpress.com · Pour créer des fenêtres, Java fournit les composants swing (dans javax.swing) et awt (dans java.awt). Une JFrame

Interagir

Page 28: Interface graphique avec Java - kamrablog.files.wordpress.com · Pour créer des fenêtres, Java fournit les composants swing (dans javax.swing) et awt (dans java.awt). Une JFrame
Page 29: Interface graphique avec Java - kamrablog.files.wordpress.com · Pour créer des fenêtres, Java fournit les composants swing (dans javax.swing) et awt (dans java.awt). Une JFrame

Classes internes

Page 30: Interface graphique avec Java - kamrablog.files.wordpress.com · Pour créer des fenêtres, Java fournit les composants swing (dans javax.swing) et awt (dans java.awt). Une JFrame

Classes anonymes

Page 31: Interface graphique avec Java - kamrablog.files.wordpress.com · Pour créer des fenêtres, Java fournit les composants swing (dans javax.swing) et awt (dans java.awt). Une JFrame

TP.

Notre propre calculatrice !

Page 32: Interface graphique avec Java - kamrablog.files.wordpress.com · Pour créer des fenêtres, Java fournit les composants swing (dans javax.swing) et awt (dans java.awt). Une JFrame

Importer votre application en .JAR

Page 33: Interface graphique avec Java - kamrablog.files.wordpress.com · Pour créer des fenêtres, Java fournit les composants swing (dans javax.swing) et awt (dans java.awt). Une JFrame

Multi-Threading

●Pourquoi ?●

Page 34: Interface graphique avec Java - kamrablog.files.wordpress.com · Pour créer des fenêtres, Java fournit les composants swing (dans javax.swing) et awt (dans java.awt). Une JFrame

Multi - threading

En cas de problème, la fenêtre...

Page 35: Interface graphique avec Java - kamrablog.files.wordpress.com · Pour créer des fenêtres, Java fournit les composants swing (dans javax.swing) et awt (dans java.awt). Une JFrame

Multi - threading

Thread principal

Deuxième Thread

Page 36: Interface graphique avec Java - kamrablog.files.wordpress.com · Pour créer des fenêtres, Java fournit les composants swing (dans javax.swing) et awt (dans java.awt). Une JFrame

Multi-Threading par héritage

Java utilise un ordonnanceur

Page 37: Interface graphique avec Java - kamrablog.files.wordpress.com · Pour créer des fenêtres, Java fournit les composants swing (dans javax.swing) et awt (dans java.awt). Une JFrame

Multi – Threading par héritage

Un thread peut présenter plusieurs états :

– NEW : lors de sa création

– RNNABLE : lorsqu'on invoque la méthode start(), le thread est prêt à travailler.

– TERMINATED : lorsque le thread a effectué toutes ses tâches ; on dit aussi qu'il est « mort ». Vous ne pouvez alors plus le relancer par la méthode start().

– TIMED_WAITING : lorsque le thread est en pause (quand vous utilisez la méthode sleep(), par exemple).

– WAITING : lorsque le thread est en attente indéfinie.

– BLOCKED : lorsque l'ordonnanceur place un thread en sommeil pour en utiliser un autre, il lui impose cet état.

Page 38: Interface graphique avec Java - kamrablog.files.wordpress.com · Pour créer des fenêtres, Java fournit les composants swing (dans javax.swing) et awt (dans java.awt). Une JFrame

Multi-threading par héritage

Page 39: Interface graphique avec Java - kamrablog.files.wordpress.com · Pour créer des fenêtres, Java fournit les composants swing (dans javax.swing) et awt (dans java.awt). Une JFrame

Mutli-threading par héritage

Page 40: Interface graphique avec Java - kamrablog.files.wordpress.com · Pour créer des fenêtres, Java fournit les composants swing (dans javax.swing) et awt (dans java.awt). Une JFrame

Multi-threading par Runnable

Page 41: Interface graphique avec Java - kamrablog.files.wordpress.com · Pour créer des fenêtres, Java fournit les composants swing (dans javax.swing) et awt (dans java.awt). Une JFrame

Multi-threading par Runnable

Page 42: Interface graphique avec Java - kamrablog.files.wordpress.com · Pour créer des fenêtres, Java fournit les composants swing (dans javax.swing) et awt (dans java.awt). Une JFrame

Multi-threading par Runnable

Page 43: Interface graphique avec Java - kamrablog.files.wordpress.com · Pour créer des fenêtres, Java fournit les composants swing (dans javax.swing) et awt (dans java.awt). Une JFrame

Autres objets Swing

Page 44: Interface graphique avec Java - kamrablog.files.wordpress.com · Pour créer des fenêtres, Java fournit les composants swing (dans javax.swing) et awt (dans java.awt). Une JFrame

Résumé

● Un nouveau thread permet de créer une nouvelle pile d'exécution.

● La classe Thread et l'interface Runnable se trouvent dans le package java.lang, aucun import spécifique n'est donc nécessaire pour leur utilisation.

● Un thread se lance lorsqu'on invoque la méthode start().

● Cette dernière invoque automatiquement la méthode run().

● Les opérations que vous souhaitez effectuer dans une autre pile d'exécution sont à placer dans la méthode run(), qu'il s'agisse d'une classe héritant de Thread ou d'une implémentation de Runnable.

● Pour protéger l'intégrité des données accessibles à plusieurs threads, utilisez le mot clé synchronized dans la déclaration de vos méthodes.

● Un thread est déclaré mort lorsqu'il a dépilé la méthode run() de sa pile d'exécution.

● Les threads peuvent présenter plusieurs états : NEW, RUNNABLE, BLOCKED, WAITING, TIMED_WAITING et TERMINATED.

Page 45: Interface graphique avec Java - kamrablog.files.wordpress.com · Pour créer des fenêtres, Java fournit les composants swing (dans javax.swing) et awt (dans java.awt). Une JFrame

Pattern MVC

● MVC va vous apprendre à découper vos codes en trois parties : modèle, vue et contrôleur.

Page 46: Interface graphique avec Java - kamrablog.files.wordpress.com · Pour créer des fenêtres, Java fournit les composants swing (dans javax.swing) et awt (dans java.awt). Une JFrame

Vue

● Ce que l'on nomme « la vue » est en fait une IHM. Elle représente ce que l'utilisateur a sous les yeux. La vue peut donc être :– une application graphique Swing, AWT, SWT pour

Java (Form pour C#…) ;

– une page web ;

– un terminal Linux ou une console Windows ;

– etc.

Page 47: Interface graphique avec Java - kamrablog.files.wordpress.com · Pour créer des fenêtres, Java fournit les composants swing (dans javax.swing) et awt (dans java.awt). Une JFrame

Vue

Page 48: Interface graphique avec Java - kamrablog.files.wordpress.com · Pour créer des fenêtres, Java fournit les composants swing (dans javax.swing) et awt (dans java.awt). Une JFrame

Modèle

● Le modèle peut être divers et varié. C'est là que se trouvent les données. Il s'agit en général d'un ou plusieurs objets Java. Ces objets s'apparentent généralement à ce qu'on appelle souvent « la couche métier » de l'application et effectuent des traitements absolument transparents pour l'utilisateur. Par exemple, on peut citer des objets dont le rôle est de gérer une ou plusieurs tables d'une base de données. En trois mots, il s'agit du cœur du programme !

Page 49: Interface graphique avec Java - kamrablog.files.wordpress.com · Pour créer des fenêtres, Java fournit les composants swing (dans javax.swing) et awt (dans java.awt). Une JFrame

Contrôleur

● Cet objet - car il s'agit aussi d'un objet - permet de faire le lien entre la vue et le modèle lorsqu'une action utilisateur est intervenue sur la vue.

● C'est cet objet qui aura pour rôle de contrôler les données.

Page 50: Interface graphique avec Java - kamrablog.files.wordpress.com · Pour créer des fenêtres, Java fournit les composants swing (dans javax.swing) et awt (dans java.awt). Une JFrame

Scénario

● Dans une application structurée en MVC, voici ce qu'il peut se passer :

– l'utilisateur effectue une action sur votre vue ;

– l'action est captée par le contrôleur, qui va vérifier la cohérence des données et éventuellement les transformer afin que le modèle les comprenne. Le contrôleur peut aussi demander à la vue de changer ;

– le modèle reçoit les données et change d'état (une variable qui change, par exemple) ;

– le modèle notifie la vue (ou les vues) qu'il faut se mettre à jour ;

– l'affichage dans la vue (ou les vues) est modifié en conséquence en allant chercher l'état du modèle.

Page 51: Interface graphique avec Java - kamrablog.files.wordpress.com · Pour créer des fenêtres, Java fournit les composants swing (dans javax.swing) et awt (dans java.awt). Une JFrame

MVC 1 & MVC 2

● MVC 1, Chaque modèle possède son propre contrôleur.

● MVC 2, Présence d'un super contrôleur.

Page 52: Interface graphique avec Java - kamrablog.files.wordpress.com · Pour créer des fenêtres, Java fournit les composants swing (dans javax.swing) et awt (dans java.awt). Une JFrame

Des objets qui parlent et qui écoutent : le pattern observer

Il fait communiquer des objets entre eux ;c'est un bon moyen d'éviter le couplage d'objets.

Page 53: Interface graphique avec Java - kamrablog.files.wordpress.com · Pour créer des fenêtres, Java fournit les composants swing (dans javax.swing) et awt (dans java.awt). Une JFrame

Le pattern Observer

● La vue implémente l'interface Observer

● Le modèle implémente l'interface Observable

Page 54: Interface graphique avec Java - kamrablog.files.wordpress.com · Pour créer des fenêtres, Java fournit les composants swing (dans javax.swing) et awt (dans java.awt). Une JFrame

Calculatrice.

Fenêtre

JFrame

CalculetteContrôleur

AbstractContrôleur

Calculette

AbstractModelObserver

Observable

héritage

implémente

use

héritage

héritage

implémente

use

JPanelJButton

Page 55: Interface graphique avec Java - kamrablog.files.wordpress.com · Pour créer des fenêtres, Java fournit les composants swing (dans javax.swing) et awt (dans java.awt). Une JFrame

Découpage en packages

Fenêtre

JFrame

CalculetteContrôleur

AbstractContrôleur

Calculette

AbstractModelObserver

Observable

héritage

implémente

use

héritage

héritage

implémente

use

JPanelJButton

Page 56: Interface graphique avec Java - kamrablog.files.wordpress.com · Pour créer des fenêtres, Java fournit les composants swing (dans javax.swing) et awt (dans java.awt). Une JFrame

Résultats

Page 57: Interface graphique avec Java - kamrablog.files.wordpress.com · Pour créer des fenêtres, Java fournit les composants swing (dans javax.swing) et awt (dans java.awt). Une JFrame

Découpage en packages