Cours IHM 10 11

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.

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:


Illustration:
Systme Interactif
Programme Source
Interface Utilisateur

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.
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.
Systmes de fentrage (2)

Modles de fentrage:
Sans superposition
Avec superposition
Hirarchique
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.
11

Hirarchie des principaux objets graphiques:
12

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.
13

Hirarchie des composants AWT:
14

Hirarchie des composants SWING:
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

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.
18

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

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

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.
21

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

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

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

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

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( ); } }
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.
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.
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.
30

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

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.
32

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

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

Exemple -Fin:
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.
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.
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.
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).
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)
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.
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);
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
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)); }
45
La classe Color (10)

Exemple 1 -Fin:
46

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

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

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
49

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

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( ); } }
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.
53

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.
54

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.
55

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

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

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

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

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.
60

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

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

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

Exemple 2 Fin:
public class TestMainFrame { public static void main(String[ ] args) { JFrame fenetre = new MainFrame(200, 120, 400, 0); fenetre.show( ); } }
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.
66

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,
67

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

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().
69
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.
71

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
72

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
73

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
74

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

ContainerListener:
Ajout d'un composant dans un conteneur. Pour savoir si un lment a le "focus". Pour la gestion des vnements clavier.
FocusListener:
KeyListener:
76
Linterface ActionListener (1)

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

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. .
78

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( ); } }
79

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.
80

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( ); } }
81

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( )); } }
82

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

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

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.
86

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( ); } }
87

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( )); } }
88

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

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

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"); } }
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.
92

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

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".
94

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

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

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

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
98

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

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.
100

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

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

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

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

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
105

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

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
107

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
108

Version 2 -Fin:
public class Test { public static void main (String args[ ]) { Fenetre2 f2 = new Fenetre2( ); f2.pack( ); f2.setVisible(true); } } Fin du programme
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.
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.
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.
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.
114
Architecture MVC: Structure
Contrleurs: grent les Controller entres de lutilisateur Model
View
Vues: prsentent linformation lutilisateur
Modles: implmentent les fonctionnalits de lapplication

Architecture MVC: Communication (1)

1. Entre utilisateur
Controller
View
2. Modifier aspect 4. Mettre jour
Model
3. Modification interne
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.
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
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.
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.

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.
121

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

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; } }
123

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

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

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

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

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

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

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(); }
130

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(); }
131

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; }
132

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; }
133

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

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
135

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
136

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.
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.
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
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 .
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); }
142

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; */");
143

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 .
145

Cours IHM 10 11

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Cours IHM 10 11

Transféré par

Droits d'auteur :

Formats disponibles

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

Pr. Mohamed NAIMI

Pr. Mohamed NAIMI | Cours_IHM | ESTB

Introduction lIHM en Java

Introduction gnrale (1)

Pr. Mohamed NAIMI | Cours_IHM | ESTB

Introduction gnrale (2)

Interfaces versus Interactions:

Pr. Mohamed NAIMI | Cours_IHM | ESTB

Introduction gnrale (3)

Pr. Mohamed NAIMI | Cours_IHM | ESTB

Introduction gnrale (4)

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

Pr. Mohamed NAIMI | Cours_IHM | ESTB

Systmes de fentrage (1)

Pr. Mohamed NAIMI | Cours_IHM | ESTB

Systmes de fentrage (2)

Pr. Mohamed NAIMI | Cours_IHM | ESTB

Objets graphiques (1)

Paramtrage en pixel. Paramtrage en dimension relle.

Pr. Mohamed NAIMI | Cours_IHM | ESTB

Objets graphiques (2)

Pr. Mohamed NAIMI | Cours_IHM | ESTB

Objets graphiques (3)

Pr. Mohamed NAIMI | Cours_IHM | ESTB

Objets graphiques (4)

Pr. Mohamed NAIMI | Cours_IHM | ESTB

Objets graphiques (5)

Pr. Mohamed NAIMI | Cours_IHM | ESTB

Interfaces graphiques simples

La classe JFrame (1)

La classe JFrame (2)

Pr. Mohamed NAIMI | Cours_IHM | ESTB

La classe JFrame (3)

Pr. Mohamed NAIMI | Cours_IHM | ESTB

La classe JFrame (4)

Pr. Mohamed NAIMI | Cours_IHM | ESTB

La classe JFrame (5)

Pr. Mohamed NAIMI | Cours_IHM | ESTB

La classe JFrame (6)

Pr. Mohamed NAIMI | Cours_IHM | ESTB

La classe JFrame (7)

Pr. Mohamed NAIMI | Cours_IHM | ESTB

La classe JLabel (1)

La classe JLabel (2)

Pr. Mohamed NAIMI | Cours_IHM | ESTB

La classe JLabel (3)

Pr. Mohamed NAIMI | Cours_IHM | ESTB

La classe JLabel (4)

Pr. Mohamed NAIMI | Cours_IHM | ESTB

Classification des graphiques (1)

Pr. Mohamed NAIMI | Cours_IHM | ESTB

Classification des graphiques (2)

Pr. Mohamed NAIMI | Cours_IHM | ESTB

La classe JPanel (1)

Pr. Mohamed NAIMI | Cours_IHM | ESTB

La classe JPanel (2)

Pr. Mohamed NAIMI | Cours_IHM | ESTB

La classe JPanel (3)

Pr. Mohamed NAIMI | Cours_IHM | ESTB

La classe JPanel (4)

Pr. Mohamed NAIMI | Cours_IHM | ESTB

La classe JPanel (5)