Vous êtes sur la page 1sur 145

Interface Homme-Machine -IHM en JavaAnne universitaire : 2010-2011 Filire : GI / S4

Pr. Mohamed NAIMI


Universit Hassan 1er Ecole Suprieure de Technologie Berrechid

Plan du cours
Introduction lIHM en Java. Interfaces graphiques simples. Gestion des couleurs. Gestion de la prsentation. Gestion dvnements graphiques. Architecture dune application Java. Interface de bases de donnes JDBC.

Pr. Mohamed NAIMI | Cours_IHM | ESTB

Introduction lIHM en Java

Introduction gnrale (1)


Un systme interactif est un systme dont le fonctionnement dpend dinformations fournies par un environnement externe. Une interface est lensemble des dispositifs matriels et logiciels qui permettent un utilisateur de commander, contrler et superviser un systme interactif.

Pr. Mohamed NAIMI | Cours_IHM | ESTB

Introduction gnrale (2)


Interface et/ou systme interactif?

Linterface dsigne le vecteur (le mdia) par lequel deux lments communiquent. Le systme interactif est compos des deux lments en communication et du vecteur de communication. Interactions: Actions (mutuelles) entre acteurs. Interfaces: Dispositifs techniques ou mdias de communication.

Interfaces versus Interactions:


Pr. Mohamed NAIMI | Cours_IHM | ESTB

Introduction gnrale (3)


Illustration:

Systme Interactif

Programme Source

Interface Utilisateur

Pr. Mohamed NAIMI | Cours_IHM | ESTB

Introduction gnrale (4)


LInteraction Homme-Machine est une discipline consacre la conception, la mise en uvre et lvaluation de systmes informatiques interactifs destins des utilisateurs humains:

Etude des techniques de conception de systmes informatiques qui soient ergonomiques (efficaces et gnralement faciles utiliser). Etude des techniques permettant linteraction entre les humains et les ordinateurs (ou entre humains laide dordinateurs).

Enfin, labrviation IHM fait gnralement rfrence soit lInteraction Homme-Machine soit lInterface HommeMachine.
Pr. Mohamed NAIMI | Cours_IHM | ESTB 7

Botes outils
En Java, les IHM peuvent tre conues laide de botes outils (GUI Toolkits) 2D. Ces botes outils permettent de spcifier les deux composants principaux dun systme interactif Java:
1. 2. 3.

Systmes de fentrage. Objets graphiques. Gestion des vnements daffichage et dinteraction.

Pr. Mohamed NAIMI | Cours_IHM | ESTB

Systmes de fentrage (1)


Rles des systmes de fentrage:

Structuration de lespace daffichage. Partage de la ressource cran. Gestion de la communication entre les applications. Gestion des fentres: Modle de fentrage. Taille. Emplacement. Autonomie vis--vis de laffichage et des entres.

Pr. Mohamed NAIMI | Cours_IHM | ESTB

Systmes de fentrage (2)


Modles de fentrage:
Sans superposition

Avec superposition

Hirarchique

Pr. Mohamed NAIMI | Cours_IHM | ESTB

10

Objets graphiques (1)


En Java, les interfaces graphiques (fentres, botes de dialogue) sont considres comme des objets graphiques pouvant contenir dautres composants graphiques. Le dessin dobjets graphiques (au sein dune fentre) est ralis grce des mthodes qui prennent des paramtres pour fixer les dimensions de ces objets:

Paramtrage en pixel. Paramtrage en dimension relle.

Pr. Mohamed NAIMI | Cours_IHM | ESTB

11

Objets graphiques (2)


Hirarchie des principaux objets graphiques:

Pr. Mohamed NAIMI | Cours_IHM | ESTB

12

Objets graphiques (3)


Java propose deux botes outils graphiques:

AWT (Abstract Windowing Toolkit): Simple, petite et limite. SWING: Puissante, grosse et extensible.

La plupart de classes concernant ces deux botes outils se trouvent dans lun des deux paquetages javax.swing ou java.awt.

Pr. Mohamed NAIMI | Cours_IHM | ESTB

13

Objets graphiques (4)


Hirarchie des composants AWT:

Pr. Mohamed NAIMI | Cours_IHM | ESTB

14

Objets graphiques (5)


Hirarchie des composants SWING:

Pr. Mohamed NAIMI | Cours_IHM | ESTB

15

Interfaces graphiques simples

La classe JFrame (1)


La classe JFrame se trouve dans le paquetage javax.swing. Elle permet de crer des graphiques (fentres, boutons,). Cette classe hrite des fonctionnalits de ses classes mres dont la hirarchie est la suivante:
Object Component Container Window Frame JFrame Pr. Mohamed NAIMI | Cours_IHM | ESTB

17

La classe JFrame (2)


Exemple 1:

Le code suivant indique comment crer un programme graphique simple laide de la classe JFrame: La classe MainFrame est dfinie comme extension de la classe JFrame; elle permet de dfinir un objet graphique sous forme dune fentre avec un bouton de fermeture, un titre, une taille prcise et un emplacement prcis. La classe TestMainFrame permet de tester la classe MainFrame.

Pr. Mohamed NAIMI | Cours_IHM | ESTB

18

La classe JFrame (3)


Exemple 1 Suite:
import javax.swing.*; class MainFrame extends JFrame { MainFrame( ) { setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); setTitle("Cadre principal"); setSize(300, 200); setLocation(250, 150); } }

Pr. Mohamed NAIMI | Cours_IHM | ESTB

19

La classe JFrame (4)


Exemple 1 Fin:
public class TestMainFrame { public static void main(String[ ] args) { JFrame fenetre = new MainFrame( ); fenetre.show( ); } }

Pr. Mohamed NAIMI | Cours_IHM | ESTB

20

La classe JFrame (5)


Exemple 2:

Le programme suivant modifie celui de lexemple prcdent en plaant la fentre au centre de lcran et en dfinissant sa taille celle de lcran.

Pr. Mohamed NAIMI | Cours_IHM | ESTB

21

La classe JFrame (6)


Exemple 2 -Suite:
import java.awt.*; import javax.swing.*; class MainFrame extends JFrame { MainFrame(int largeur, int hauteur, int x, int y) { setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); setTitle ("Cadre principal"); setSize(largeur, hauteur); setLocation(x, y); } }

Pr. Mohamed NAIMI | Cours_IHM | ESTB

22

La classe JFrame (7)


Exemple 2 -Fin:
public class TestMainFrame { public static void main(String[ ] args) { Dimension screenSize = Toolkit.getDefaultToolkit( ).getScreenSize( ); int w = screenSize.width; int h = screenSize.height; JFrame fenetre = new MainFrame(w/2, h/2, w/4, h/4); fenetre.show( ); } }

Pr. Mohamed NAIMI | Cours_IHM | ESTB

23

La classe JLabel (1)


La classe JLabel est galement dfinie dans le paquetage javax.swing. Cette classe permet dafficher un texte dans une fentre. La hirarchie de la classe JLabel est la suivante:
Object Component Container JComponent JLabel Pr. Mohamed NAIMI | Cours_IHM | ESTB 24

La classe JLabel (2)


Exemple:

Le programme suivant modifie celui de lexemple 2 prcdent en modifiant la taille de la fentre et en y ajoutant un message textuel.

Pr. Mohamed NAIMI | Cours_IHM | ESTB

25

La classe JLabel (3)


Exemple -Suite:
import java.awt.*; import javax.swing.*; class MainFrame extends JFrame { MainFrame(int largeur, int hauteur, int x, int y) { setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); setTitle ("Cadre principal"); setSize(largeur, hauteur); setLocation(x, y); JLabel texte = new JLabel("Bonjour tout le monde!"); texte.setFont(new Font("Serif", Font.BOLD|Font.ITALIC, hauteur/2)); getContentPane( ).add(texte); } }

Pr. Mohamed NAIMI | Cours_IHM | ESTB

26

La classe JLabel (4)


Exemple Fin:
public class TestMainFrame { public static void main(String[ ] args) { Dimension screenSize = Toolkit.getDefaultToolkit( ).getScreenSize( ); int w = screenSize.width; JFrame fenetre = new MainFrame(w/5, 100, 2*w/5, 0); fenetre.show( ); } }

Pr. Mohamed NAIMI | Cours_IHM | ESTB

27

Classification des graphiques (1)


Types de graphiques:
1)

2)

Les composants: Objets susceptibles dtre affichs lcran et dinteragir avec lutilisateur. Par exemple, le bouton de fermeture est un composant. Les conteneurs: Composants qui contiennent dautres composants. Par exemple, une fentre est un conteneur tandis quun bouton ne lest pas.

Pr. Mohamed NAIMI | Cours_IHM | ESTB

28

Classification des graphiques (2)


Types de graphiques -Suite:
3)

4)

Les fentres: Conteneurs ayant des proprits spcifiques, notamment une bote outils facilitant la cration des composants. Les cadres: Fentres composes dune barre de titre, une barre de menus, une bordure, un curseur et une image dicne. Les cadres sont des objets standard lors de la cration des graphiques.

Pr. Mohamed NAIMI | Cours_IHM | ESTB

29

La classe JPanel (1)


On peut ajouter un composant (ex. un objet JLabel) une fentre graphique (ex. un cadre) de deux faons:
1)

2)

Le composant peut tre ajout directement au panneau de contenu de la fentre. Le composant peut tre ajout un conteneur intermdiaire qui est, lui-mme, ajout au panneau de contenu de la fentre.

Dans le deuxime cas, la classe JPanel peut servir comme conteneur intermdiaire.

Pr. Mohamed NAIMI | Cours_IHM | ESTB

30

La classe JPanel (2)


La classe JPanel est galement dfinie dans le paquetage javax.swing. Voici la hirarchie dhritage de cette classe:
Object Component Container JComponent JPanel

Pr. Mohamed NAIMI | Cours_IHM | ESTB

31

La classe JPanel (3)


Exemple:

Le programme suivant modifie celui de lexemple prcdent en ajoutant un objet JPanel destin contenir lobjet JLabel qui sert laffichage dun contenu textuel: La classe MainPanel est dfinie comme extension de la classe JPanel. Cette classe demande au constructeur dattribuer la couleur noir larrire plan du panneau, puis de crer un objet JLabel permettant dafficher un texte de couleur jaune. Ensuite, lobjet JLabel est ajout lobjet JPanel qui, son tour, est ajout lobjet JFrame.

Pr. Mohamed NAIMI | Cours_IHM | ESTB

32

La classe JPanel (4)


Exemple -Suite:
import java.awt.*; import javax.swing.*; class MainFrame extends JFrame { MainFrame(int largeur, int hauteur, int x, int y) { setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); setTitle ("Cadre principal"); setSize(largeur, hauteur); setLocation(x, y); JPanel panneau = new MainPanel( ); getContentPane( ).add(panneau); } }

Pr. Mohamed NAIMI | Cours_IHM | ESTB

33

La classe JPanel (5)


Exemple -Suite:
class MainPanel extends JPanel { MainPanel( ) { setBackground(Color.black); JLabel texte = new JLabel("Hello, World!"); texte.setFont(new Font(null, Font.BOLD, 40)); texte.setForeground(Color.yellow); add(texte); } }

Pr. Mohamed NAIMI | Cours_IHM | ESTB

34

La classe JPanel (6)


Exemple -Fin:
public class TestMainFrame { public static void main(String[ ] args) { Dimension screenSize = Toolkit.getDefaultToolkit( ).getScreenSize( ); int w = screenSize.width; JFrame fenetre = new MainFrame(w/5, 100, 2*w/5, 0); fenetre.show( ); } }

Pr. Mohamed NAIMI | Cours_IHM | ESTB

35

Gestion des couleurs

La classe Color (1)


La classe Color est dfinie dans le paquetage java.awt. Cette classe permet de grer les couleurs des objets graphiques. Cette classe hrite directement de la classe Object.

Pr. Mohamed NAIMI | Cours_IHM | ESTB

37

La classe Color (2)


La classe Component contient deux mthodes pour dfinir les couleurs darrire et davant plan des composants graphiques:

setBackground(Color. nomCouleur); setForeground(Color.nomCouleur);

La classe Color dfinit 13 champs (public static final) pour les couleurs: black, blue, cyan, darkGray, gray, green, lightGray, magenta, orange, pink, red, white, yellow.

Pr. Mohamed NAIMI | Cours_IHM | ESTB

38

La classe Color (3)


Le code RGB permet doffrir plus de possibilits pour la cration de couleurs. Pour cela, il suffit de passer les entiers r, g et b (pour red, green et blue) au constructeur:

public Color(int r, int g, int b)

Chacun des 3 entiers r, g et b est compris entre 0 et 255. Ces 3 nombres identifient respectivement la quantit de rouge, de vert et de bleu utilise pour crer la couleur.

Pr. Mohamed NAIMI | Cours_IHM | ESTB

39

La classe Color (4)


Remarque:

Plus les nombres sont bas, plus les couleurs sont sombres et plus ils sont levs, plus les couleurs sont claires: Le code RGB du noir est: (0, 0, 0). Le code RGB du blanc est: (255, 255, 255).

Pr. Mohamed NAIMI | Cours_IHM | ESTB

40

La classe Color (5)


Codes RGB des 13 constantes couleurs dfinies dans la classe Color:
Couleur Noir Bleu Bleu-ciel Gris-sombre Gris Vert Gris-clair Violet Orange Rose Rouge Jaune Blanc Code RGB (0, 0, 0) (0, 0, 255) (0, 255, 255) (64, 64, 64) (128, 128, 128) (0, 255, 0) (192, 192, 192) (255, 0, 255) (255, 200, 0) (255, 175, 175) (255, 0, 0) (255, 255, 0) (255, 255, 255)

Pr. Mohamed NAIMI | Cours_IHM | ESTB

41

La classe Color (6)


Exemple 1:

Le programme suivant modifie celui de lexemple prcdent en affichant une srie dobjets JPanel ayant, chacun, une couleur diffrente: La classe ColoredPanel permet de construire un panneau color avec, ventuellement, une tiquette (un texte) qui saffiche sur le panneau. Cette classe dfinit galement un objet Border qui permet dajouter une bordure noire au panneau.

Pr. Mohamed NAIMI | Cours_IHM | ESTB

42

La classe Color (7)


Exemple 1 -Suite:
import java.awt.*; import javax.swing.*; import javax.swing.border.Border; class MainFrame extends JFrame { MainFrame(int largeur, int hauteur, int x, int y) { setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); setTitle ("Couleurs"); setSize(largeur, hauteur); setLocation(x, y);

Pr. Mohamed NAIMI | Cours_IHM | ESTB

43

La classe Color (8)


Exemple 1 -Suite:
JPanel panneauPrincipal = new JPanel( ); panneauPrincipal.setBackground(Color.white); panneauPrincipal.add(new ColoredPanel(Color.cyan, "blue ciel")); panneauPrincipal.add(new ColoredPanel(Color.magenta, violet")); panneauPrincipal.add(new ColoredPanel(Color.green, "vert")); panneauPrincipal.add(new ColoredPanel(Color.orange, "orange")); panneauPrincipal.add(new ColoredPanel(Color.gray, "gris")); panneauPrincipal.add(new ColoredPanel(Color.pink, "rose")); getContentPane( ).add(panneauPrincipal); } } // Fin de la classe MainFrame

Pr. Mohamed NAIMI | Cours_IHM | ESTB

44

La classe Color (9)


Exemple 1 -Suite:
class ColoredPanel extends JPanel { Border ligneNoire = BorderFactory.createLineBorder(Color.black);

ColoredPanel(Color couleur, String texte) { setBackground(couleur); setBorder(ligneNoire); add(new JLabel(texte)); }

Pr. Mohamed NAIMI | Cours_IHM | ESTB

45

La classe Color (10)


Exemple 1 -Fin:
public class TestMainFrame { public static void main(String[ ] args) { Dimension screenSize = Toolkit.getDefaultToolkit( ).getScreenSize( ); int w = screenSize.width; JFrame fenetre = new MainFrame(w/5, 100, 2*w/5, 0); fenetre.show( ); } }

Pr. Mohamed NAIMI | Cours_IHM | ESTB

46

La classe Color (11)


Exemple 2:

Cet exemple cre une interface graphique simple place au coin suprieur droit de lcran et dont la taille est gale 1/9 celle de lcran. Elle contient galement un panneau principal darrireplan blanc qui contient, son tour, 3 panneaux secondaires dont les couleurs respectives des arrire-plans sont le dor, laigue-marine et le pourpre. Chacun de ces 3 panneaux secondaires contient un texte qui porte le nom de la couleur de son arrire-plan. Les couleurs sont dfinies en utilisant le code RGB: Dor: (255, 215, 0). Aigue-marine: (127, 255, 212). Pourpre: (160, 32, 240).

Pr. Mohamed NAIMI | Cours_IHM | ESTB

47

La classe Color (12)


Exemple 2 Suite:
import java.awt.*; import javax.swing.*; import javax.swing.border.Border; class MainFrame extends JFrame { MainFrame(int largeur, int hauteur, int x, int y) { setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); setTitle ("Couleurs"); setSize(largeur, hauteur); setLocation(x, y);

Pr. Mohamed NAIMI | Cours_IHM | ESTB

48

La classe Color (13)


Exemple 2 Suite:
JPanel panneauPrincipal = new JPanel( ); panneauPrincipal.setBackground(Color.white); panneauPrincipal.add(new ColoredPanel(255, 215, 0, "Dor")); panneauPrincipal.add(new ColoredPanel(127, 255, 212, "Aigue-Marine")); panneauPrincipal.add(new ColoredPanel(160, 32, 240, "Pourpre")); getContentPane( ).add(panneauPrincipal); } } // Fin de la classe MainFrame

Pr. Mohamed NAIMI | Cours_IHM | ESTB

49

La classe Color (14)


Exemple 2 Suite:
class ColoredPanel extends JPanel { Border ligneRouge = BorderFactory.createLineBorder(Color.red);

ColoredPanel(int r, int g, int b, String texte) { setBackground(new Color(r, g, b)); setBorder(ligneRouge); add(new JLabel(texte)); }

Pr. Mohamed NAIMI | Cours_IHM | ESTB

50

La classe Color (15)


Exemple 2 Fin:
public class TestMainFrame { public static void main(String[ ] args) { Dimension screenSize = Toolkit.getDefaultToolkit( ).getScreenSize( ); int w = screenSize.width; int h = screenSize.height; JFrame fenetre = new MainFrame(w/3, h/3, 2*w/3, 0); fenetre.show( ); } }

Pr. Mohamed NAIMI | Cours_IHM | ESTB

51

Gestion de la prsentation

Les gestionnaires de prsentation (1)


La prsentation fait rfrence la disposition de plusieurs composants dans un conteneur. Les classes principales permettant de grer la prsentation sont BorderLayout, FlowLayout et GridLayout. Ces trois classes implmentent linterface LayoutManager. La prsentation dun conteneur peut tre dfinie en passant un objet LayoutManager la mthode setLayout( ) du conteneur.

Pr. Mohamed NAIMI | Cours_IHM | ESTB

53

Les gestionnaires de prsentation (2)


Le gestionnaire FlowLayout organise les composants du conteneur de gauche droite et de haut en bas. La classe FlowLayout est le gestionnaire par dfaut des conteneurs JPanel. Le gestionnaire GridLayout organise les composants du conteneur de manire similaire celle de FlowLayout. De plus, il spcifie le nombre de lignes et de colonnes utiliser. Si la fentre qui contient la grille est redimensionne, GridLayout redimensionne les formes des composants proportionnellement.

Pr. Mohamed NAIMI | Cours_IHM | ESTB

54

Les gestionnaires de prsentation (3)


Exemple 1:

Le programme suivant spcifie la prsentation du panneau principal en utilisant le gestionnaire GridLayout: Le panneau principal est cr dans la classe MainFrame et est prsent sous forme dune grille de 4 lignes et 7 colonnes. Ensuite, 26 panneaux tiquets sont ajouts au panneau principal. Ces 26 panneaux et leurs tiquettes vont constituer les cellules de la grille.

Pr. Mohamed NAIMI | Cours_IHM | ESTB

55

Les gestionnaires de prsentation (4)


Exemple 1 Suite:
import java.awt.*; import javax.swing.*; import javax.swing.border.Border; class MainFrame extends JFrame { MainFrame(int largeur, int hauteur, int x, int y) { setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); setTitle ("Prsentation en grille"); setSize(largeur, hauteur); setLocation(x, y);

Pr. Mohamed NAIMI | Cours_IHM | ESTB

56

Les gestionnaires de prsentation (5)


Exemple 1 Suite:
JPanel panneau = new JPanel( ); panneau.setLayout(new GridLayout(4, 7)); for (int i=0; i<26; i++) { panneau.add(new LabeledPanel("" + (char)('A' + i))); } getContentPane( ).add(panneau); } }

Pr. Mohamed NAIMI | Cours_IHM | ESTB

57

Les gestionnaires de prsentation (6)


Exemple 1 Suite:
class LabeledPanel extends JPanel { Border ligneNoir = BorderFactory.createLineBorder(Color.black); LabeledPanel(String texte) { setBackground(Color.white); setBorder(ligneNoir); add(new JLabel(texte)); } }

Pr. Mohamed NAIMI | Cours_IHM | ESTB

58

Les gestionnaires de prsentation (7)


Exemple 1 Fin:
public class TestMainFrame { public static void main(String[ ] args) { JFrame fenetre = new MainFrame(300, 150, 400, 0); fenetre.show( ); } }

Pr. Mohamed NAIMI | Cours_IHM | ESTB

59

Les gestionnaires de prsentation (8)


Exemple 2:

Le programme suivant cre un panneau principal en utilisant le gestionnaire BorderLayout: Le gestionnaire BorderLayout divise le panneau principal en 5 panneaux tiquets. Les tiquettes sont centres horizontalement dans chacune des 5 sections. De plus, les largeurs des sections Ouest et Est sont ajustes la taille de leur contenu, tandis que celles des 3 autres sections sont tendues sur toute la largeur du panneau principal.

Pr. Mohamed NAIMI | Cours_IHM | ESTB

60

Les gestionnaires de prsentation (9)


Exemple 2 Suite:
import java.awt.*; import javax.swing.*; import javax.swing.border.Border; class MainFrame extends JFrame { MainFrame(int largeur, int hauteur, int x, int y) { setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); setTitle ("Prsentation en sections"); setSize(largeur, hauteur); setLocation(x, y);

Pr. Mohamed NAIMI | Cours_IHM | ESTB

61

Les gestionnaires de prsentation (10)


Exemple 2 Suite:
JPanel panneau = new JPanel( ); panneau.setLayout(new BorderLayout( )); panneau.add(new LabeledPanel("Nord"), BorderLayout.NORTH); panneau.add(new LabeledPanel("Ouest"), BorderLayout.WEST); panneau.add(new LabeledPanel("Centre"), BorderLayout.CENTER); panneau.add(new LabeledPanel("Est"), BorderLayout.EAST); panneau.add(new LabeledPanel("Sud"), BorderLayout.SOUTH); getContentPane( ).add(panneau); } }

Pr. Mohamed NAIMI | Cours_IHM | ESTB

62

Les gestionnaires de prsentation (11)


Exemple 2 Suite:
class LabeledPanel extends JPanel { Border ligneNoir = BorderFactory.createLineBorder(Color.black); LabeledPanel(String texte) { setBackground(Color.white); setBorder(ligneNoir); add(new JLabel(texte)); } }

Pr. Mohamed NAIMI | Cours_IHM | ESTB

63

Les gestionnaires de prsentation (12)


Exemple 2 Fin:
public class TestMainFrame { public static void main(String[ ] args) { JFrame fenetre = new MainFrame(200, 120, 400, 0); fenetre.show( ); } }

Pr. Mohamed NAIMI | Cours_IHM | ESTB

64

Gestion dvnements graphiques

Gestionnaires dvnements (1)


Lorsquun utilisateur effectue

une action au niveau de l'interface utilisateur (clic souris, slection d'un lment item-,).

Alors un vnement graphique est mis. Lorsqu'un vnement se produit,

il est reu par le composant avec lequel l'utilisateur interagit (par exemple, un bouton, un curseur, un champ de texte, etc.). Ce composant transmet cet vnement un autre objet; un couteur qui possde une mthode pour traiter lvnement: Cette mthode reoit lobjet vnement gnr de faon traiter l'interaction de l'utilisateur.

Pr. Mohamed NAIMI | Cours_IHM | ESTB

66

Gestionnaires dvnements (2)


La gestion des vnements passe par l'utilisation d'objets "couteurs d'vnements" (Listener) et d'objets sources d'vnements:

Un objet couteur est l'instance d'une classe implmentant l'interface EventListener (ou lune de ses sous-interfaces). Une source d'vnements est un objet pouvant recenser des objets couteurs et leur envoyer des objets vnements. la source d'vnements envoie un objet vnement correspondant tous ses couteurs. Les objets couteurs utilisent alors l'information contenue dans l'objet vnement pour dterminer leur rponse.

Lorsqu'un vnement se produit,

Pr. Mohamed NAIMI | Cours_IHM | ESTB

67

Gestionnaires dvnements (3)


Les couteurs sont des interfaces. Une mme classe peut implmenter plusieurs interfaces couteurs:

Par exemple, une classe hritant de Frame implmentera les interfaces MouseMotionListener (pour les dplacements souris) et MouseListener (pour les clics souris).

Chaque composant de lAWT est conu pour tre la source dun ou plusieurs types d'vnements particuliers:

Cela se voit notamment grce la prsence dans la classe de composant d'une mthode nomme addXXXListener().

Pr. Mohamed NAIMI | Cours_IHM | ESTB

68

Gestionnaires dvnements (4)


Lobjet vnement envoy aux couteurs peut contenir des informations sur les paramtres graphiques de lIHM:

Par exemple, getX() et getY() sur un MouseEvent retournent les coordonnes de la position du pointeur de la souris. Une information gnralement utile quelque soit le type dvnement est la source de cet vnement que lon obtient avec la mthode getSource().

Pr. Mohamed NAIMI | Cours_IHM | ESTB

69

Gestionnaires dvnements (5)

Pr. Mohamed NAIMI | Cours_IHM | ESTB

70

Catgories dvnements (1)


Plusieurs types d'vnements sont dfinis dans le package java.awt.event. Pour chaque catgorie d'vnements, il existe une interface qui doit tre implmente par toute classe souhaitant recevoir cette catgorie dvnements:

Cette interface exige qu'une ou plusieurs mthodes soient dfinies. Ces mthodes sont appeles lorsque des vnements particuliers surviennent.

Pr. Mohamed NAIMI | Cours_IHM | ESTB

71

Catgories dvnements (2)


Catgorie Action Item Mouse Mouse Nom de linterface ActionListener ItemListener MouseMotionListener MouseListener Mthodes actionPerformed (ActionEvent) itemStateChanged (ItemEvent) mouseDragged (MouseEvent) mouseMoved (MouseEvent) mousePressed (MouseEvent) mouseReleased (MouseEvent) mouseEntered (MouseEvent) (MouseEvent) mouseExited mouseClicked keyPressed (KeyEvent) keyReleased (KeyEvent) keyTyped (KeyEvent) focusGained (FocusEvent) focusLost (FocusEvent)

Key

KeyListener

Focus

FocusListener

Pr. Mohamed NAIMI | Cours_IHM | ESTB

72

Catgories dvnements (3)


Adjustment Component AdjustmentListener ComponentListener adjustmentValueChanged (AdjustmentEvent) componentMoved (ComponentEvent)componentHiddent (ComponentEvent)componentResize (ComponentEvent)componentShown (ComponentEvent) windowClosing (WindowEvent) windowOpened (WindowEvent) windowIconified (WindowEvent windowDeiconified (WindowEvent) windowClosed (WindowEvent) windowActivated (WindowEvent) windowDeactivated (WindowEvent) componentAdded (ContainerEvent) componentRemoved(ContainerEvent) textValueChanged (TextEvent)

Window

WindowListener

Container Text

ContainerListener TextListener

Pr. Mohamed NAIMI | Cours_IHM | ESTB

73

Catgories dvnements (4)


ActionListener:

Action (clic) sur un bouton, retour chariot dans une zone de texte, Fermeture, rduction,... Changement de valeur dans une zone de texte. Slection dun lment (item) dans une liste.

WindowListener:

TextListener:

ItemListener

Pr. Mohamed NAIMI | Cours_IHM | ESTB

74

Catgories dvnements (5)


MouseListener:

Clic, enfoncement/relchement des boutons de la souris, etc. Dplacement de la souris, drag&drop avec la souris, etc. Dplacement d'une chelle. Savoir si un composant a t cach, affich

MouseMotionListener:

AdjustmentListener:

ComponentListener:

Pr. Mohamed NAIMI | Cours_IHM | ESTB

75

Catgories dvnements (6)


ContainerListener:

Ajout d'un composant dans un conteneur. Pour savoir si un lment a le "focus". Pour la gestion des vnements clavier.

FocusListener:

KeyListener:

Pr. Mohamed NAIMI | Cours_IHM | ESTB

76

Linterface ActionListener (1)


Linterface ActionListener fait partie du paquetage java.awt.event. Cest une extension de linterface java.util.EventListener.

Pr. Mohamed NAIMI | Cours_IHM | ESTB

77

Linterface ActionListener (2)


Exemple 1:

Le programme de cet exemple cre un bouton simple portant le texte Cliquer-ici! . Le fait de cliquer sur ce bouton affichera le message Une action a eu lieu. .

Pr. Mohamed NAIMI | Cours_IHM | ESTB

78

Linterface ActionListener (3)


Exemple 1 Suite:
import java.awt.*; import java.awt.event.*; class MonAction implements ActionListener { public void actionPerformed(ActionEvent e) { System.out.println("Une action a eu lieu.") ; } } public class TestBouton { public TestBouton( ) { Frame f = new Frame("Bouton simple"); Button b = new Button("Cliquer-ici!"); f.add(b) ; f.pack( ); f.setVisible (true) ; b.addActionListener (new MonAction( )); } public static void main(String args[ ]) { TestBouton test = new TestBouton( ); } }

Pr. Mohamed NAIMI | Cours_IHM | ESTB

79

Linterface ActionListener (4)


Exemple 2:

Le programme suivant affiche une fentre qui occupe tout lcran et contient trois boutons tiquets Rouge, Bleu et Vert. Lorsque lutilisateur appuie sur lun de ces boutons, la couleur correspondante est applique la totalit de la fentre. La classe ButtonPanel cre trois objets JButton. Chaque bouton a son propre auditeur daction qui permet de dfinir sa couleur. Les trois auditeurs daction sont des instances de la classe interne ColorAction. Cette dernire dfinit la mthode actionPerformed() qui se contente de remplacer la couleur darrire-plan du panneau principal par celle spcifie comme argument du constructeur.

Pr. Mohamed NAIMI | Cours_IHM | ESTB

80

Linterface ActionListener (5)


Exemple 2 -Suite:
import java.awt.*; import java.awt.event.*; import javax.swing.*; public class Test { public static void main(String[ ] args) { Dimension screenSize = Toolkit.getDefaultToolkit( ).getScreenSize( ); int w = screenSize.width; int h = screenSize.height; JFrame fenetre = new MainFrame(w, h, 0, 0); fenetre.show( ); } }

Pr. Mohamed NAIMI | Cours_IHM | ESTB

81

Linterface ActionListener (6)


Exemple 2 -Suite:
class MainFrame extends JFrame { MainFrame(int largeur, int hauteur, int x, int y) { setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); setTitle("Boutons de coloration"); setSize(largeur, hauteur); setLocation(x, y); getContentPane( ).add(new ButtonPanel( )); } }

Pr. Mohamed NAIMI | Cours_IHM | ESTB

82

Linterface ActionListener (7)


Exemple 2 -Suite:
class ButtonPanel extends JPanel { ButtonPanel( ) { JButton BoutonRouge = new JButton("Rouge"); JButton BoutonVert = new JButton("Vert"); JButton BoutonBleu = new JButton("Bleu"); add(BoutonRouge, BorderLayout.WEST); add(BoutonVert, BorderLayout.CENTER); add(BoutonBleu, BorderLayout.EAST); BoutonRouge.addActionListener(new ColorAction(Color.red)); BoutonVert.addActionListener(new ColorAction(Color.green)); BoutonBleu.addActionListener(new ColorAction(Color.blue)); }

Pr. Mohamed NAIMI | Cours_IHM | ESTB

83

Linterface ActionListener (8)


Exemple 2 -Fin:
class ColorAction implements ActionListener { private Color couleur;

ColorAction(Color couleur) { this.couleur = couleur; }

public void actionPerformed(ActionEvent e) { setBackground(couleur); } } // Fin de la classe interne ColorAction } // Fin de la classe ButtonPanel

Pr. Mohamed NAIMI | Cours_IHM | ESTB

84

La classe JTextField (1)


La classe JTextField appartient au paquetage javax.swing. Cette classe permet dafficher un champ de texte modifiable:

Elle permet lutilisateur de saisir un contenu textuel. Le texte saisi peut tre manipul (copi, modifi, supprim).

Pr. Mohamed NAIMI | Cours_IHM | ESTB

85

La classe JTextField (2)


Exemple:

Le programme suivant lit un entier dans un champ de texte (objet de type JTextField), puis il laffiche sous forme de temprature exprime en Fahrenheit et en Celsius. La classe TemperaturePanel dfinit la mthode actionPerformed() qui permet de convertir la temprature Fahrenheit saisie dans le champ de texte en une temprature Celsius. Cette action a lieu au moment o lutilisateur appuie sur la touche Entre . Le panneau est dsign comme lauditeur daction du champ de texte. La temprature Fahrenheit est dabord lue grce la mthode getText(), puis convertie en temprature Celsius.

Pr. Mohamed NAIMI | Cours_IHM | ESTB

86

La classe JTextField (3)


Exemple -Suite:
import java.awt.*; import java.awt.event.*; import javax.swing.*; public class Test { public static void main(String[ ] args) { JFrame fenetre = new MainFrame(300, 100, 400, 0); fenetre.show( ); } }

Pr. Mohamed NAIMI | Cours_IHM | ESTB

87

La classe JTextField (4)


Exemple -Suite:
class MainFrame extends JFrame { MainFrame(int largeur, int hauteur, int x, int y) { setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); setTitle("Conversion Fahrenheit/Celsius"); setSize(largeur, hauteur); setLocation(x, y); getContentPane( ).add(new TemperaturePanel( )); } }

Pr. Mohamed NAIMI | Cours_IHM | ESTB

88

La classe JTextField (5)


Exemple -Suite:
class TemperaturePanel extends JPanel implements ActionListener { JLabel invite; JTextField fahrenheit; JLabel celsius;

Pr. Mohamed NAIMI | Cours_IHM | ESTB

89

La classe JTextField (6)


Exemple -Suite:
TemperaturePanel( ) { invite = new JLabel("Entrer la temprature en Fahrenheit :"); fahrenheit = new JTextField(3); fahrenheit.addActionListener(this); celsius = new JLabel( ); celsius.setFont(new Font(null, 0, 28)); add(invite); add(fahrenheit); add(celsius); }

Pr. Mohamed NAIMI | Cours_IHM | ESTB

90

La classe JTextField (7)


Exemple -Fin:
public void actionPerformed(ActionEvent e) { double f = Double.parseDouble(fahrenheit.getText( )); int c = (int)Math.round(5*(f-32)/9); fahrenheit.setText(""); celsius.setText(f + "\u00B0F = " + c + "C"); } }

Pr. Mohamed NAIMI | Cours_IHM | ESTB

91

Exercice rcapitulatif (1)


Cet exercice vise raliser une petite application possdant une interface graphique qui assure les fonctionnalits suivantes:

Permettre un utilisateur de saisir une suite de mots. Mettre la suite de mots saisie sous forme de lettres majuscules ds que lutilisateur clique sur un bouton. Arrter lexcution de lapplication lorsque lutilisateur clique sur un autre bouton.

Pr. Mohamed NAIMI | Cours_IHM | ESTB

92

Exercice rcapitulatif (2)


Pour satisfaire ces fonctionnalits, nous proposons de concevoir linterface graphique selon la maquette suivante:

Pr. Mohamed NAIMI | Cours_IHM | ESTB

93

Exercice rcapitulatif (3)


Nous proposons une premire version "incomplte" qui se contente de construire linterface graphique, sans donner le traitement informatique quil convient dassocier aux deux boutons "CONVERTIR" et "QUITTER".

Pr. Mohamed NAIMI | Cours_IHM | ESTB

94

Exercice rcapitulatif (4)


Version 1:
import java.awt.*; import javax.swing.*; class Fenetre1 extends JFrame { private JTextField champSaisie, champResultat; private JButton b_convertir, b_quitter;

Pr. Mohamed NAIMI | Cours_IHM | ESTB

95

Exercice rcapitulatif (5)


Version 1 -Suite:
public Fenetre1( ) { setTitle("Conversion en MAJUSCULES"); Container cf = this.getContentPane( ); JPanel p1 = new JPanel( ); p1.add(new JLabel("Donnez une suite de mots :")); champSaisie = new JTextField(20); p1.add(champSaisie); cf.add("North", p1);

Pr. Mohamed NAIMI | Cours_IHM | ESTB

96

Exercice rcapitulatif (6)


Version 1 -Suite:
JPanel p2 = new JPanel( ); p2.setLayout(new FlowLayout(FlowLayout.RIGHT)); p2.add(new JLabel("Rsultat de la conversion :")); champResultat = new JTextField(20); p2.add(champResultat); cf.add("Center", p2);

Pr. Mohamed NAIMI | Cours_IHM | ESTB

97

Exercice rcapitulatif (7)


Version 1 -Suite:
JPanel p3 = new JPanel( ); p3.setLayout(new FlowLayout(FlowLayout.RIGHT)); b_convertir = new JButton("CONVERTIR"); b_quitter = new JButton("QUITTER"); p3.add(b_convertir); p3.add(b_quitter); cf.add("South",p3); } } // Fin de la classe Fenetre1

Pr. Mohamed NAIMI | Cours_IHM | ESTB

98

Exercice rcapitulatif (8)


Version 1 -Fin:
public class Test { public static void main (String args[ ]) { Fenetre1 f1 = new Fenetre1( ); f1.pack( ); f1.setVisible(true); } } Fin du programme

Pr. Mohamed NAIMI | Cours_IHM | ESTB

99

Exercice rcapitulatif (9)


Nous proposons maintenant une deuxime version "complte" permettant linterface graphique de raliser toutes les fonctionnalits demandes:

Il sagit dabord dassocier au bouton "CONVERTIR" un traitement informatique adquat: Lorsque lutilisateur clique sur ce bouton, lapplication doit dabord transformer la suite de mots saisie dans le premier champ textuel en lettres majuscules, puis afficher le rsultat au sein du deuxime champ textuel. Il sagit ensuite dassocier au bouton "QUITTER" un traitement informatique adquat: Un clic sur ce bouton doit mettre fin lexcution de lapplication.

Pr. Mohamed NAIMI | Cours_IHM | ESTB

100

Exercice rcapitulatif (10)


Version 2:
import java.awt.*; import java.awt.event.*; import javax.swing.*; class Fenetre2 extends JFrame { protected JTextField champSaisie, champResultat; private JButton b_convertir, b_quitter;

Pr. Mohamed NAIMI | Cours_IHM | ESTB

101

Exercice rcapitulatif (11)


Version 2 -Suite:
public Fenetre2( ) { setTitle("Conversion en MAJUSCULES"); Container cf = this.getContentPane( ); JPanel p1 = new JPanel( ); p1.add(new JLabel("Donnez une suite de mots :")); champSaisie = new JTextField(20); p1.add(champSaisie); cf.add("North", p1);

Pr. Mohamed NAIMI | Cours_IHM | ESTB

102

Exercice rcapitulatif (12)


Version 2 -Suite:
JPanel p2 = new JPanel( ); p2.setLayout(new FlowLayout(FlowLayout.RIGHT)); p2.add(new JLabel("Rsultat de la conversion :")); champResultat = new JTextField(20); p2.add(champResultat); cf.add("Center", p2);

Pr. Mohamed NAIMI | Cours_IHM | ESTB

103

Exercice rcapitulatif (13)


Version 2 -Suite:
JPanel p3 = new JPanel( ); p3.setLayout(new FlowLayout(FlowLayout.RIGHT)); b_convertir = new JButton("CONVERTIR"); b_quitter = new JButton("QUITTER"); p3.add(b_convertir); p3.add(b_quitter); cf.add("South",p3);

Pr. Mohamed NAIMI | Cours_IHM | ESTB

104

Exercice rcapitulatif (14)


Version 2 -Suite:
Ecouteur1 ec1 = new Ecouteur1(this); Ecouteur2 ec2 = new Ecouteur2( ); b_convertir.addActionListener(ec1); b_quitter.addActionListener(ec2); } // Fin du constructeur de la classe Fenetre2

Pr. Mohamed NAIMI | Cours_IHM | ESTB

105

Exercice rcapitulatif (15)


Version 2 -Suite:
public void set_champResultat(String t) { champResultat.setText(t); } public String get_champSaisie( ) { return champSaisie.getText( ); } } // Fin de la classe Fenetre2

Pr. Mohamed NAIMI | Cours_IHM | ESTB

106

Exercice rcapitulatif (16)


Version 2 -Suite:
class Ecouteur1 implements ActionListener { private Fenetre2 ff; public Ecouteur1 (Fenetre2 f) { ff = f; } public void actionPerformed(ActionEvent e) { String res = ff.get_champSaisie( ); ff.set_champResultat(res.toUpperCase( )); } } // Fin de la classe Ecouteur1

Pr. Mohamed NAIMI | Cours_IHM | ESTB

107

Exercice rcapitulatif (17)


Version 2 -Suite:
class Ecouteur2 implements ActionListener { public void actionPerformed(ActionEvent e) { System.out.println("Fin par bouton QUITTER."); System.exit(0); } } // Fin de la classe Ecouteur2

Pr. Mohamed NAIMI | Cours_IHM | ESTB

108

Exercice rcapitulatif (18)


Version 2 -Fin:
public class Test { public static void main (String args[ ]) { Fenetre2 f2 = new Fenetre2( ); f2.pack( ); f2.setVisible(true); } } Fin du programme

Pr. Mohamed NAIMI | Cours_IHM | ESTB

109

Architecture des applications Java

Architecture MVC: Objectif


Larchitecture MVC (Model-View-Controller: ModleVue-Contrleur) a pour objectif dorganiser une application interactive en sparant:

Les donnes et leur manipulation. La reprsentation des donnes. La gestion des interactions utilisateur/application.

Pr. Mohamed NAIMI | Cours_IHM | ESTB

111

Architecture MVC: Modle


Modle:

Dfinition des donnes et de leurs structures ainsi que les oprations spcifiques sur ces donnes: Description des donnes manipules par l'application et dfinition des mthodes de traitement de ces donnes:

Interaction avec des fichiers ou des bases de donnes, etc.

Remarque:

Le modle regroupe toutes les classes qui dcrivent les objets du domaine tudi. Par exemple la classe Personne et ses drives sil sagit dtudier un ensemble de personnes.

Pr. Mohamed NAIMI | Cours_IHM | ESTB

112

Architecture MVC: Vue


Vue:

Forme de prsentation des donnes lutilisateur en vue de les exploiter: Affichage des donnes via une interface graphique:

Points dinteraction entre lutilisateur et lapplication (fentre principale et ses composants).

Remarque:

La vue n'effectue aucun traitement, elle se contente d'afficher les rsultats des traitements effectus par le modle, et de permettre l'utilisateur d'interagir avec elle.

Pr. Mohamed NAIMI | Cours_IHM | ESTB

113

Architecture MVC: Contrleur


Contrleur:

Traduction des interactions utilisateur/interface graphique par des appels de mthodes sur le modle: Slection de la vue approprie en se basant sur ltat du modle:

Gestion des vnements de synchronisation pour mettre jour la vue ou le modle.

Remarque:

Le contrleur n'effectue aucun traitement, ne modifie aucune donne, il analyse la requte du client et se contente d'appeler le modle adquat et de renvoyer la vue souhaite.

Pr. Mohamed NAIMI | Cours_IHM | ESTB

114

Architecture MVC: Structure

Contrleurs: grent les Controller entres de lutilisateur Model

View

Vues: prsentent linformation lutilisateur

Modles: implmentent les fonctionnalits de lapplication


Pr. Mohamed NAIMI | Cours_IHM | ESTB 115

Architecture MVC: Communication (1)


1. Entre utilisateur

Controller

View

2. Modifier aspect 4. Mettre jour

Model
3. Modification interne

Pr. Mohamed NAIMI | Cours_IHM | ESTB

116

Architecture MVC: Communication (2)


Lorsqu'un client envoie une requte l'application:

Le contrleur analyse dabord cette requte. Ensuite, ce contrleur demande au modle appropri d'effectuer les traitements requis. Puis, il renvoie la vue adapte.

Pr. Mohamed NAIMI | Cours_IHM | ESTB

117

Architecture MVC: Schma gnral


Classe de test: - Crer les instances de Vue, Modle et Contrle. - tablir les liens dcoute. Vue: - Dfinir une fentre et les composants. - Crer un objet de Modle et de Contrle.

Modle: - Les attributs et mthodes spcifique une application. - Produire un rsultat afficher la Vue.

Contrleur: - Un objet capable dcouter les vnements. - Traitements selon chaque vnement capt (appeler la mthode approprie de Vue pour le traiter).
118

Pr. Mohamed NAIMI | Cours_IHM | ESTB

Architecture MVC: Avantages


Diviser pour rgner: Les trois composantes peuvent tre conues sparment. Accrotre la cohsion: Les composantes ont une cohsion plus forte que si ces composantes taient combines. Accrotre la rutilisation: La vue et le contrleur se construisent avec des lments rutilisables. Accrotre la flexibilit: Il est habituellement ais dapporter des changements aux diffrentes composantes. Faciliter les tests: Il est possible de tester lapplication indpendamment de linterface graphique.
Pr. Mohamed NAIMI | Cours_IHM | ESTB 119

Architecture MVC: Application (1)


Soit linterface graphique prsente la figure suivante:

Cette interface graphique est celle dune application agenda qui regroupe lensemble des noms, adresses et numros de tlphone des personnes enregistres.
Pr. Mohamed NAIMI | Cours_IHM | ESTB 120

Architecture MVC: Application (2)


Linterface graphique prsente prcdemment est conue pour rpondre aux sollicitations suivantes:
i.

ii.

iii.

iv.

Une fois que lutilisateur a rempli les champs NOM , Adresse et Tlphone , il doit cliquer sur le bouton AJOUTER pour enregistrer ces valeurs au sein de lagenda. Lorsque lutilisateur clique sur le bouton << Prcdent , il obtient le nom, ladresse et le numro de tlphone de la personne prcdente enregistre dans lagenda. Lorsque lutilisateur clique sur le bouton Suivant >> , il obtient le nom, ladresse et le numro de tlphone de la personne suivante enregistre dans lagenda. Lorsque lutilisateur clique sur le bouton QUITTER , toutes les informations insres dans lagenda sont sauvegardes au sein dun fichier.

Pr. Mohamed NAIMI | Cours_IHM | ESTB

121

Architecture MVC: Application (3)


Lobjectif est dimplmenter le programme permettant de raliser cet agenda:

Ce programme doit tre construit selon larchitecture MVC en distinguant les trois parties: Modle, Vue et Contrleur. Il doit galement assurer la srialisation des donnes (sauvegarde des objets en tant quobjets en fin de session et restauration des objets en dbut de session).

Pr. Mohamed NAIMI | Cours_IHM | ESTB

122

Architecture MVC: Application (4)


Solution 1:
import java.io.*; import java.util.*; import java.awt.*; import java.awt.event.*; import javax.swing.*; class Personne implements Serializable { protected String nom,adresse,tel; public Personne(String n,String ad,String t) { nom=n; adresse=ad; tel=t; } }

Pr. Mohamed NAIMI | Cours_IHM | ESTB

123

Architecture MVC: Application (5)


Solution 1 -Suite:
class Gestion_Agenda implements Serializable { protected Vector<Personne> vpers; public Gestion_Agenda() { vpers = new Vector<Personne>(); } public void ajoute_personne(String nm,String add,String tt) { vpers.add(new Personne(nm,add,tt)); } public Personne recherche_pers(int i) { return(vpers.get(i)); } }

Pr. Mohamed NAIMI | Cours_IHM | ESTB

124

Architecture MVC: Application (6)


Solution 1 -Suite:
class Fenetre extends JFrame implements ActionListener { private JTextField nom,adresse,tel; private JButton b_ajout,b_affprec,b_affsuiv,b_quit; private Gestion_Agenda g; private int num_cour; public Fenetre(Gestion_Agenda gg) { setTitle("AGENDA"); Container cf = this.getContentPane(); cf.setLayout(new GridLayout(4,1));

Pr. Mohamed NAIMI | Cours_IHM | ESTB

125

Architecture MVC: Application (7)


Solution 1 -Suite:
JPanel p1 = new JPanel(); p1.add(new JLabel("NOM ")); nom=new JTextField(18); p1.add(nom); cf.add(p1); JPanel p2 = new JPanel(); p2.add(new JLabel("Adresse ")); adresse=new JTextField(18); p2.add(adresse); cf.add(p2);

Pr. Mohamed NAIMI | Cours_IHM | ESTB

126

Architecture MVC: Application (8)


Solution 1 -Suite:
JPanel p3 = new JPanel(); p3.add(new JLabel("Tlphone ")); tel=new JTextField(10); p3.add(tel); cf.add(p3);

Pr. Mohamed NAIMI | Cours_IHM | ESTB

127

Architecture MVC: Application (9)


Solution 1 -Suite:
JPanel p4 = new JPanel(); b_ajout = new JButton("AJOUTER"); p4.add(b_ajout); b_affprec = new JButton("<< Prcdent"); p4.add(b_affprec); b_affsuiv = new JButton("Suivant >>"); p4.add(b_affsuiv); b_quit = new JButton("QUITTER"); p4.add(b_quit); cf.add(p4);

Pr. Mohamed NAIMI | Cours_IHM | ESTB

128

Architecture MVC: Application (10)


Solution 1 -Suite:
b_ajout.addActionListener(this); b_affprec.addActionListener(this); b_affsuiv.addActionListener(this); b_quit.addActionListener(this); g=gg; num_cour=0; }

Pr. Mohamed NAIMI | Cours_IHM | ESTB

129

Architecture MVC: Application (11)


Solution 1 -Suite:
public void actionPerformed(ActionEvent e) { Object source=e.getSource(); if(source==b_ajout) ajoute_pers(); else if(source==b_affprec) affiche_prec(); else if(source==b_affsuiv) affiche_suiv(); else if(source==b_quit) sauvegarde(); }

Pr. Mohamed NAIMI | Cours_IHM | ESTB

130

Architecture MVC: Application (12)


Solution 1 -Suite:
public void ajoute_pers() { String n=nom.getText(); String a=adresse.getText(); String t=tel.getText(); g.ajoute_personne(n,a,t); num_cour=g.vpers.size(); }

Pr. Mohamed NAIMI | Cours_IHM | ESTB

131

Architecture MVC: Application (13)


Solution 1 -Suite:
public void affiche_prec() { int nn=num_cour-1; if(nn>=0 && nn<g.vpers.size()) {Personne p=g.recherche_pers(nn); nom.setText(p.nom); adresse.setText(p.adresse); tel.setText(p.tel); num_cour--;} else num_cour=0; }

Pr. Mohamed NAIMI | Cours_IHM | ESTB

132

Architecture MVC: Application (14)


Solution 1 -Suite:
public void affiche_suiv() { int nn=num_cour+1; if(nn>=0 && nn<g.vpers.size()) {Personne p=g.recherche_pers(nn); nom.setText(p.nom); adresse.setText(p.adresse); tel.setText(p.tel); num_cour++;} else num_cour=g.vpers.size()-1; }

Pr. Mohamed NAIMI | Cours_IHM | ESTB

133

Architecture MVC: Application (15)


Solution 1 -Suite:
public void sauvegarde() { try { FileOutputStream f = new FileOutputStream("agenda.obj"); ObjectOutputStream s = new ObjectOutputStream(f); s.writeObject(g);s.flush(); System.out.println("OK, sauvegarde dans agenda.obj"); } catch(IOException e) { System.out.println("PB lors de la sauvegarde"); } System.exit(0); }

Pr. Mohamed NAIMI | Cours_IHM | ESTB

134

Architecture MVC: Application (16)


Solution 1 -Suite:
public void restaure() { try { FileInputStream f = new FileInputStream("agenda.obj"); ObjectInputStream s = new ObjectInputStream(f); g = (Gestion_Agenda) s.readObject(); num_cour=1; } catch(IOException e) { System.out.println("Nouvel agenda"); } catch(ClassNotFoundException e) { e.getMessage(); } } } // Fin de la classe Fenetre

Pr. Mohamed NAIMI | Cours_IHM | ESTB

135

Architecture MVC: Application (17)


Solution 1 -Fin:
public class MVC { public static void main (String args[]) { Gestion_Agenda g1 = new Gestion_Agenda(); Fenetre f1 = new Fenetre(g1); f1.pack(); f1.setVisible(true); f1.restaure(); } } // Fin du programme

Pr. Mohamed NAIMI | Cours_IHM | ESTB

136

Architecture MVC: Application (18)


Remarque:

Dans le programme propos prcdemment (Solution 1), on peut remarquer que larchitecture MVC nest pas vraiment respecte 100%. En effet, la classe Fenetre qui sert la construction de linterface graphique joue aussi le rle de classe couteur. Cette classe joue donc la fois le rle de Vue et celui de Contrleur. Par ailleurs, le rle de Modle est jou par les classes Personne et Gestion_Agenda. Une solution respectant larchitecture MVC consiste dfinir une classe couteur ou des classes couteurs, indpendante(s) de la classe Fenetre, pour jouer le rle de Contrleur des interactions utilisateur/agenda.

Pr. Mohamed NAIMI | Cours_IHM | ESTB

137

Interface de base de donnes JDBC

Introduction
JDBC (Java DataBase Connectivity) est une collection de classes et dinterfaces permettant daccder une base de donnes depuis un programme Java. Un pilote est galement indispensable pour interprter les instructions JDBC, les traduire et les transmettre la base:

ODBC pour les bases de donnes de la plateforme MS Windows.

Le pont JDBC-ODBC permet une application Java daccder une base de donnes de la plateforme Windows.

Pr. Mohamed NAIMI | Cours_IHM | ESTB

139

Classes JDBC
Classe
DriverManager

Utilit
Permet de lier un programme Java une base de donnes.

Connection

Reprsente une connexion une base de donnes.

Statement

Permet de crer et denvoyer des commandes SQL la base de donnes. Permet de rcuprer et de traiter les donnes envoyes par la base de donnes.

ResultSet

Pr. Mohamed NAIMI | Cours_IHM | ESTB

140

Etape 1: Connexion avec pilote ODBC


1.

2.

3.

4. 5. 6.

7.

Ouvrir le panneau de configuration, ensuite Outils dadministration , puis Sources de donnes (ODBC) . Dans la fentre Administrateur de sources de donnes , slectionner MS Access Database , puis cliquer sur le bouton Ajouter de longlet Sources de donnes utilisateur . Dans la bote de dialogue Crer une nouvelle source de donnes , choisir le pilote Microsoft Access Driver (*.mdb) , puis cliquer sur Terminer . Donner un nom la nouvelle connexion. Cliquer sur le bouton Slectionner pour choisir la base de donnes. Il est galement possible de verrouiller la nouvelle connexion via un nom dutilisateur et un mot de passe en cliquant sur le bouton Avanc . Valider en cliquant sur le bouton OK .

Pr. Mohamed NAIMI | Cours_IHM | ESTB

141

Etape 2: Accs la base de donnes (1)


1.

Charger le pont JDBC-ODBC:


Class.forName("sun.jdbc.odbc.JdbcOdbcDriver");

2.

Etablir une connexion la base:


Connection connexion = null; try { connexion = DriverManager.getConnection( URL, // Nom de la connexion ODBC nomUtilisateur, motPasse); }

Pr. Mohamed NAIMI | Cours_IHM | ESTB

142

Etape 2: Accs la base de donnes (2)


3.

Crer un objet Statement pour pouvoir envoyer des commandes SQL la base:
Statement commande = null; try { commande = connexion.createStatement(); }

4.

Lire des donnes de la base:


ResultSet donnees; donnees = commande.executeQuery("/* Requte SQL; */");

Pr. Mohamed NAIMI | Cours_IHM | ESTB

143

Etape 2: Accs la base de donnes (3)


5.

Modifier des donnes de la base:


commande.executeUpdate("/* Requte de mise jour SQL; */");

6.

Afficher les donnes:


ResultSetMetaData resultats = donnees.getMetaData(); int nbreCols = resultats.getColumnCount(); while (donnees.next()) { // Parcours squentiel des donnes for (int i = 1; i <= nbreCols; i++) System.out.println(donnees.getString(i) + " "); }

7.

Fermer la connexion:
connexion.close(); Pr. Mohamed NAIMI | Cours_IHM | ESTB 144

Exemple rcapitulatif
Le programme correspondant cet exemple sera donn sous forme dun fichier source Java (ConnexionBDD.java). Ce programme tablit une connexion avec une petite base de donnes Access constitue dune seule table appele Rgions . Le programme permet aussi dajouter un enregistrement la table Rgions . Le programme permet galement de lire et dafficher les donnes de tous les champs de la table Rgions .

Pr. Mohamed NAIMI | Cours_IHM | ESTB

145