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 7 Fig. 8: Boîte de dialogue pour nom et mot de passe.