Principes de réalisation
d'une interface graphique



Depuis les années 90 environs, avec l'apparition des écrans graphiques et de la souris, la majorité des applications possèdent une interface graphique.

Elle se présente sous la forme d'une ou plusieurs fenêtres sur laquelle apparaissent différents composants (boutons, menus, champs ou zone de texte, zone de liste, case à cocher, etc) sur lesquels l'utilisateur peut agir afin d'obtenir des informations ou bien d'en donner à l'ordinateur.

La conception de l'interface graphique d'une application est donc aujourd'hui une partie très importante du développement d'application.

Avec un E.D.I., la réalisation d'une interface graphique se décompose en deux parties:

Dans ce cours nous verrons plus précisemment comment utiliser les classes du package swing de Java en utilisant l'E.D.I Netbeans pour la partie design.

La classe Component

Nous allons étudier différentes classes représentant les composants d'une interface graphique. Toutes les classes que nous verrons ici héritent de la classe Component, qui possède (entre autres) les méthodes suivantes:

La mode design

Nous avons déjà vu comment réaliser des interfaces graphiques très simples avec NetBeans. Les explications à ce sujet se trouvent dans la notice d'utilisation de NetBeans vu lors du premier cours sur les bases de programmation en Java. Nous ne reprendrons pas toutes ces explications ici. Le lecteur est donc invité à la relire.

La création d'une application avec interface graphique passe par l'adjonction d'une fenêtre (via New JFrame Form). Netbeans génére automatiquement un fichier source java de même nom que la fenêtre contenant la définition d'une sous-classe de JFrame (la classe swing représentant les fenêtres) que nous avons appelée la classe fenêtre.

Une application peut comporter plusieurs fenêtres et donc plusieurs classes fenêtre.

Le fichier source représentant une classe fenêtre peut être visualisé en mode Source ou en mode Design. En mode source, l'interface graphique de Netbeans est adaptée à l'édition du code source. En mode Design, elle est adaptée au design de la fenêtre et de ses composants.

Fenêtres de NetBeans en mode Design

Voici l'aspect de l'interface graphique de NetBeans en mode Design:

Fenetres-Netbans-Mode-Design-Avec-Noms.jpg, 142kB

On y trouve:

Modification des propriétés d'un composant

Pour modifier les propriétés d'un composant, il faut d'abord le sélectionner, soit en cliquant sur ce composant dans la fenêtre de l'application, soit en cliquant sur son nom dans la fenêtre Navigator. La fenêtre Properties fait alors apparaitre les différentes propriétés de ce composant pouvant être modifiées.

Modification du nom d'un composant

Pour améliorer la lisibilité du code, il est préférable de ne pas garder les noms de composants générés automatiquement par NetBeans. Pour cela, faite un clic droit sur le composant et sélectionnez Change Variable Name.

Code généré automatiquement

Revenons un peu sur le code généré automatiquement par NetBeans pour représenter une fenêtre.

Composants d'une fenêtre

Reprenons le projet Addition pour illustrer nos propos. Cliquez ici pour voir la fenêtre et ses composants dans le cadre droit. Voici le code généré par NetBeans:

Code-Initial-Avec-Composants.jpg, 59kB

Ici sept composants ont été déposés sur la fenêtre par le développeur: un bouton, trois étiquettes et trois champs de texte. Nous avons déjà vu que les boutons sont représentés par la classe JButton, les étiquettes par la classe JLabel et les champs de texte, par la classe JTextField.

Dans la déclaration de la classe fenêtre, on voit que chacun de ces composants est représenté par un attribut. Dans le projet Addition par exemple, l'attribut jButton1 représente le bouton Additionner. Comme il s'agit d'un bouton, il est déclaré comme un attribut de type JButton.

Ainsi chaque fois que le développeur dépose un composant sur la fenêtre depuis la palette des composants, NetBeans génère la déclaration d'un nouvel attribut de la classe fenêtre qui représentera par la suite ce composant.

De plus, il est important de remarquer que ces attributs sont privés. Par conséquent, vous ne pouvez pas y accéder directement depuis une autre classe. Cela signifie que les instructions agissant sur les composants doivent obligatoirement figurer à l'intérieur de la classe fenêtre.

.
La méthode main

Tout programme (indépendamment du langage) possède un point d'entrée, c'est la première instruction qui sera exécutée. En Java, ce point d'entrée correspond à la méthode Main.

Vous constaterez que NetBeans génère automatiquement une déclaration de cette méthode dans la classe fenêtre ( Cliquez ici pour faire apparaitre, le code généré dans le cadre droit.)

Ce code utilise des notions avancées de Java qui n'ont pas encore été abordées dans ce cours. Pour l'instant, je me contenterais de porter votre attention sur l'instruction suivante:

   new Addition ().setVisible(true)

Cette instruction peut être décomposée en deux parties:

  1. Il y a tout d'abord un appel du constructeur de la classe fenêtre: c'est la partie new Addition(). Cette partie de l'instruction génére une nouvelle instance de la classe fenêtre.
  2. Ensuite, la fenêtre est rendue visible (ou affichée si vous préférée) en appliquant à cette instance la méthode setVisible.

Donc pour résumer, lorsque vous démarrer un projet contenant une fenêtre, il y aura tout d'abord un appel au constructeur de cette fenêtre, puis cette fenêtre sera affichée. La fenêtre est donc présente en mémoire avant d'être affichée.


Constructeur de la classe fenêtre

Le code du constructeur de la classe-feneêtre est également généré par NetBeans. On y trouve un appel de la méthode initComponents, dont le rôle est d'initialiser tous les attributs (position, dimension, couleur, police, etc ...) de la fenêtre et de ses composants. Le code de cette méthode est normalement masqué, mais vous pouvez le faire apparaitre en cliquant sur le + à gauche de Generated Code:

AfficherInitComponent.jpg, 24kB

En y jetant un oeil, vous constarez que initComponents, instancie les différents composants de la fenêtre. Ils n'existent donc pas avant que cette méthode soit exécutée.

Dans certains cas, il peut être utile de rajouter des instructions à l'intérieur du constructeur de la classe fenêtre. Nous verrons ceci en particulier dans l'initialisation d'une barre d'outils et aussi dans la réalisation de projet à plusieurs fenêtre. L'intéret de placer des instructions à cet endroit est qu'elles seront exécutées dès le démarrage du programme, avant même l'affichage de la fenêtre.

Programmation évènementielle

Les évènements

Au niveau du système d'exploitation un évènement est communiqué à une application lorsque l'une de ses fenêtres est active et que l'utilisateur agit sur la souris ou le clavier.

S'il s'agit d'une application écrite en Java, cet évènement sera ensuite traduit par la JVM en un évènement "conceptuel" représenté par la classe Event et ses nombreuses sous-classes. Un objet de cette classe décrit le composant sur lequel l'utilisateur a agit et quel type d'action il a réalisé.

A un type de composant donné sont associé une multitude de types d'évènements. Pour les retrouver sous NetBeans, sélectionnez un composant puis dans la fenetre Properties, sélectionnez l'onglet Events. Voici par exemple une partie des types d'évènements possibles pour un champ de texte:

TypeEvntCT_Mot.jpg, 67kB
Ecriture des gestionnaires d'évènements

Après l'étape de design, il y a la programmation évènementielle: c'est l'écriture des gestionnaires d'évènements ou procédures évènementielles pour les différents composants qui ont été mis en place. Dans le premier cours de programmation objet, nous avons vu que ces procédures sont des méthodes de la classe fenêtre.

Sous NetBeans, l'adjonction d'un gestionnaire d'évènement à un composant peut se faire de deux manières:

  1. en double-cliquant sur le composant: cela génère dans le code un gestionnaire pour le type d'évènement par défaut, ActionPerformed le plus souvent. Nous utilisons depuis longtemps cette méthode pour associer une procédure évènementielle à un clic sur un bouton. Nous verrons dans ce cours qu'elle peut également être utilisée pour d'autres types de composant.
  2. en sélectionnant le composant, puis le type d'évènement souhaité dans l'onglet Events de la fenêtre Properties. Nous utiliserons très peu cette méthode dans ce cours, car le type d'évènement ActionPerformed nous suffira à gèrer les actions sur la majorité des types de composants considérés.