Exercice de conception d`interfaces graphiques pour application

Exercice de conception d’interfaces graphiques pour
application bancaire
Université Paris Sud
Exercice 1
Conception d’une interface pour application
bancaire simple
L’objet de cet exercice est de concevoir une application graphique à l’aide d’un concepteur d’interfaces graphiques. Le concepteur retenu est celui fourni avec le plugin Jigloo
d’Eclipse.
Il s’agit plus précisément de réaliser une interface graphique pour l’application de
gestion de banque simple. L’interface une fois réalisée sera constituée des éléments suivants
(voir Figure 1) :
– Quatre JLabel contenant du texte : Nom, Mot de passe, Montant et Historique.
– Quatre JLabel intialement remplis de blancs : un en face des trois premiers de
l’item précédent (les JLabel nommés Nom, Mot de passe et Montant) et un,
invisible, situé au dessus du JLabel Nom, contenant des messages à afficher selon l’opération réalisée (par exemple Compte ouvert, ou bien somme de XXX
pièces déposées, etc.).
– Deux JMenu contenant le texte Fichier et Operations.
– Un JTextField contenant l’affichage de l’historique des opérations, lorsqu’il est
demandé.
– Un JButton contenant le texte Quitter pour quitter l’application.
Afin de fixer les idées, l’application contiendra les différents fichiers java suivants (correspondant à au moins une classe, publique, de même nom) :
– GUIBanqueFrame.java, la classe GUIBanqueFrame contenant l’interface graphique principale (celle reproduite sur la figure ci-dessus) ainsi que la méthode
main()
– GUIBankLocalServer.java, la classe GUIBankLocalServer contenant les méthodes de gestion de banque simple (openAccount(), closeAccount(), deposit(),
withdraw(), getTransactionsHistory(), verify())
– NomMotPasseDialog.java, la classe NomMotPasseDialog contenant une fenêtre où l’utilisateur entre le nom, le mot de passe d’un compte et éventuellement
le montant d’une opération.
– GUIBankingException.java, la classe GUIBankingException représentant
une exception avec affichage d’une fenêtre (de type BankingExceptionDialog)
contenant un message d’erreur en cas d’opération illicite.
1
2
Exercice de conception d’interfaces graphiques pour application bancaire
Fig. 1: L’application une fois terminée.
– BankingExceptionDialog.java, la classe BankingExceptionDialog représentant une fenêtre affichant un message d’erreur transmis par un objet de type
GUIBankingException.
Interface graphique
On commencera par créer la classe GUIBanqueFrame contenant la méthode main()
et l’interface graphique principale. Créer pour cela un projet, puis une Frame (Menu
File-> New-> Other... puis GUI Forms -> JFrame) nommée GUIBanqueFrame
(voir Figure 2)
Fig. 2: Création d’une JFrame.
Créer ensuite, au sein de cette JFrame une barre de menus (JmenuBar, accessible
dans l’onglet Menu de la barre d’onglets Jigloo) et, au sein de cette barre de menus, les
menus (JMenu) Fichier et Operations. Le menu Fichier ne contiendra qu’un item
Exercice 1 – Conception d’une interface pour application bancaire simple
3
Quitter qui permettra de quitter l’application, tout comme le bouton Quitter en bas
à gauche. Le menu Operations contiendra les diverses opérations de gestion de banque
simpleă(voir Figure 3)
Fig. 3: Menus Fichier et Operations.
L’aspect du concepteur d’interface sera alors comme suit (voir Figure 4). Noter les menus Fichier (nommé ici jMenuFichier) et Operations (nommé ici jMenuOperations)
ainsi que leurs items dans la vue Outline.
Fig. 4: Menus Fichier et Operations au sein du concepteur.
Au sein de la fenêtre (en dessous de la barre des menus), créer un JPanel (onglet Containers) ; changer le gestionnaire de positionnement (ou “Layout manager”)
en Absolute (soit dans la fenêtre en bas GUI Properties, soit avec un clic droit de la
souris à l’intérieur du conteneur, sélectionner Set Layout -> Absolute Layout).
4
Exercice de conception d’interfaces graphiques pour application bancaire
La hiérarchie des composants graphiques à créer est la suivante (voir la sous-fenêtre
Outline, à gauche au sein de la Figure 5). On créera les objets suivants à l’aide du
Fig. 5: Composants au sein du concepteur.
concepteur d’interfaces graphiques :
– jLabelStrMontant : étiquette contenant la chaîne “Montant”
– jLabelStrMotPasse : étiquette contenant la chaîne “Mot de passe”
– jLabelStrNom : étiquette contenant la chaîne “Nom”
– jLabelMotPasse : étiquette servant à contenir la valeur du mot de passe (zone
encadrée dans la figure 5)
– jLabelMontant : étiquette servant à contenir la valeur d’un montant (zone encadrée dans la figure 5)
– jLabelNom : étiquette servant à contenir la valeur du nom (zone encadrée dans la
figure 5)
– jLabelInfo : étiquette servant à contenir la valeur d’une information d’opération
(transparent dans la figure 5)
– jLabelStrHistorique : étiquette contenant la chaîne “Historique”
– jTextAreaHistory : zone de texte contenant l’affichage de l’historique des transactions
– jButtonQuitter : bouton pour quitter l’application
Noter que chaque objet comporte dans la première partie de son nom son type. Ainsi :
– jLabelStrMontant, jLabelStrMotPasse, jLabelStrNom, jLabelMotPasse,
jLabelMontant, jLabelNom, jLabelInfo, jLabelStrHistorique sont des
étiquettes (JLabel)
– jTextAreaHistory : zone de texte (JTextArea)
– jButtonQuitter : bouton (JButton)
Exercice 1 – Conception d’une interface pour application bancaire simple
5
Créer les différents composants de l’interface graphique. Puis, attacher à chaque item
de menu un gestionnaire d’événement. Pour attacher un tel gestionnaire d’événement, on
utilise la colonne Event Name de l’onglet GUI Properties. Par exemple, sélectionner dans la fenêtre de code la création de l’item de menu référencé par la variable
jMenuOperationsItemOuvrir, c.à.d. La ligne
jMenuOperationsItemOuvrir = new JMenuItem();
et cliquer sur l’onglet GUI Properties. Sélectionner l’écouteur ActionListener, ce
qui ouvre une ligne avec une boîte à cocher en face de actionPerformed. La cocher,
puis passer en fenêtre source afin de fournir le corps (les instructions) de la méthode (voir
la Figure 6) Fournir le code pour les différentes méthodes associées aux méthodes serveur
Fig. 6: Action associée à un item de menu.
openAccount(), closeAccount(), getBalance(), withdraw(), deposit() et
history(). On pourra se servir de la méthode setText() de la classe JLabel. Au
sein du constructeur de GUIBanqueFrame, on doit créer un GUIBankLocalServer,
puis un NomMotPasseDialog (voir ci-dessous), qui formeront deux champs de la classe
GUIBanqueFrame.
Créer la classe GUIBankLocalServer. Reprendre pour cela le code de l’application de Banque Locale ; et mettre les différentes méthodes de gestion de compte bancaire dans GUIBankLocalServer ; elles seront appellées au sein des méthodes de type
actionPerformed() de GUIBanqueFrame.
Fenêtres de dialogue
Créer une classe de type JDialog, nommée NomMotPasseDialog contenant une
fenêtre où l’utilisateur entre le nom, le mot de passe d’un compte et éventuellement le
montant d’une opération.
Pour cela, créer un nouveau JDialog (menu File -> New -> Other... -> Swing
- Jdialog) nommé NomMotPasseDialog et y inclure un JPanel que l’on nommera
6
Exercice de conception d’interfaces graphiques pour application bancaire
jPanelNomMotPasseDialog. Changer le gestionnaire de positionnement de ce JPanel
en Absolute. Inclure dedans 3 JLabel, 3 JTextField et un JButton (voir Figure
7). La classe doit contenir les champs nom, password et montant. La méthode de type
actionPerformed() associée au bouton doit affecter aux différents champs ce qui est
entré par l’utilisateur dans les JTextField. Prévoir des méthodes d’accès getName(),
getPassword() et getAmount() renvoyant les valeurs des différents champs. Au sein
du constructeur de GUIBanqueFrame, on crée un GUIBankLocalServer, puis un
NomMotPasseDialog avec comme dernier argument true : la fenêtre de dialogue est
dite modale ; on attend donc que l’utilisateur ait cliqué sur le bouton OK pour continuer le
programme (dans le cas contraire, le programme continue, et les champs nom, password
et montant.ne sont pas mis aux valeurs escomptées).
Fig. 7: Boîte de dialogue pour nom et mot de passe.
Créer la classe BankingExceptionDialog représentant une fenêtre affichant un
message d’erreur transmis par un objet de type GUIBankingException. Créer pour ce
faire un nouveau JDialog contenant un JLabel (le message d’erreur à afficher) et un
bouton indiquant que l’utilisateur a bien lu le message (voir Figure 8).
Créer la classe GUIBankingException, représentant une exception et provoquant
l’affichage d’une fenêtre (de type BankingExceptionDialog) contenant un message
d’erreur en cas d’opération illicite. La fenêtre sera également un JDialog modal (dernier
argument de son constructeur à true).
Exercice 1 – Conception d’une interface pour application bancaire simple
Fig. 8: Boîte de dialogue pour nom et mot de passe.
7