Codage d'une interface utilisateur graphique Java simple

Une interface utilisateur graphique (GUI) construite à l'aide du Plateforme Java NetBeans est composé de plusieurs couches de conteneurs. La première couche est la fenêtre utilisée pour déplacer l'application sur l'écran de votre ordinateur. C'est ce qu'on appelle le conteneur de niveau supérieur, et son travail consiste à donner à tous les autres conteneurs et composants graphiques un endroit où travailler. Généralement, pour une application de bureau, ce conteneur de niveau supérieur sera créé à l'aide du

classe.

Vous pouvez ajouter un nombre quelconque de couches à votre conception d'interface graphique, en fonction de sa complexité. Vous pouvez placer des composants graphiques (par exemple, des zones de texte, des étiquettes, des boutons) directement dans le

ou vous pouvez les regrouper dans d'autres conteneurs.

Les couches de l'interface graphique sont connues sous le nom de hiérarchie de confinement et peuvent être considérées comme un arbre généalogique. Si la

est le grand-père assis en haut, alors le conteneur suivant peut être considéré comme le père et les composants qu'il contient comme les enfants.

instagram viewer

Pour cet exemple, nous allons créer une interface graphique avec un

contenant deux

et un

. La première

tiendra un

. La deuxième

tiendra un

et un

. Seulement un

(et donc les composants graphiques qu'il contient) seront visibles à la fois. Le bouton sera utilisé pour changer la visibilité des deux

Il existe deux façons de créer cette interface graphique à l'aide de NetBeans. La première consiste à taper manuellement le code Java qui représente l'interface graphique, qui est abordé dans cet article. La seconde consiste à utiliser l'outil de création d'interface graphique NetBeans pour créer des interfaces graphiques Swing.

Pour plus d'informations sur l'utilisation de JavaFX plutôt que Swing pour créer une interface graphique, consultez Qu'est-ce que JavaFX?

Remarque: Le code complet de ce projet est à Exemple de code Java pour la création d'une application graphique simple.

Configuration du projet NetBeans

Créer un nouveau Java Projet d'application dans NetBeans avec une classe principale Nous appellerons le projet

Point de contrôle: Dans la fenêtre Projets de NetBeans doit se trouver un dossier GuiApp1 de niveau supérieur (si le nom n'est pas en gras, cliquez avec le bouton droit sur le dossier et choisissez

). Sous la

Le dossier doit être un dossier Packages source avec

appelé GuiApp1. Ce dossier contient la classe principale appelée

.Java.

Avant d'ajouter du code Java, ajoutez les importations suivantes en haut de la

classe, entre le

ligne et la

Ces importations signifient que toutes les classes dont nous avons besoin pour créer cette application graphique seront disponibles pour nous.

Dans la méthode principale, ajoutez cette ligne de code:

Cela signifie que la première chose à faire est de créer un nouveau

objet. C'est un bon raccourci pour les programmes d'exemple, car nous n'avons besoin que d'une seule classe. Pour que cela fonctionne, nous avons besoin d'un constructeur pour le

classe, ajoutez donc une nouvelle méthode:

Dans cette méthode, nous mettrons tout le code Java nécessaire pour créer l'interface graphique, ce qui signifie que chaque ligne sera désormais à l'intérieur du

méthode.

Note de conception: Vous avez peut-être vu du code Java publié qui montre la classe (c'est-à-dire,

) étendu d'un

. Cette classe est ensuite utilisée comme fenêtre d'interface graphique principale pour une application. Il n'y a vraiment pas besoin de le faire pour une application GUI normale. La seule fois où vous voudriez étendre la

la classe est si vous avez besoin de faire un type plus spécifique de

(jeter un coup d'œil à

pour plus d'informations sur la création d'une sous-classe).

Comme mentionné précédemment, la première couche du GUI est une fenêtre d'application faite à partir d'un

. Créer un

objet, appelez le

constructeur:

Ensuite, nous allons définir le comportement de notre fenêtre d'application GUI, en utilisant ces quatre étapes:

1. Assurez-vous que l'application se ferme lorsque l'utilisateur ferme la fenêtre afin qu'elle ne continue pas à s'exécuter inconnue en arrière-plan:

2. Définissez un titre pour la fenêtre afin qu'elle ne comporte pas de barre de titre vide. Ajoutez cette ligne:

3. Définissez la taille de la fenêtre, de sorte que la fenêtre soit dimensionnée pour accueillir les composants graphiques que vous y placez.

Note de conception: Une autre option pour définir la taille de la fenêtre consiste à appeler

méthode du

classe. Cette méthode calcule la taille de la fenêtre en fonction des composants graphiques qu'elle contient. Étant donné que cet exemple d'application n'a pas besoin de modifier la taille de sa fenêtre, nous allons simplement utiliser le

méthode.

4. Centrez la fenêtre pour qu'elle apparaisse au milieu de l'écran de l'ordinateur afin qu'elle n'apparaisse pas dans le coin supérieur gauche de l'écran:

Ajout des deux JPanels

Les deux lignes ici créent valeurs pour le

objets que nous allons créer sous peu, en utilisant deux

tableaux. Cela facilite le remplissage de quelques exemples d'entrées pour ces composants:

Créer le premier objet JPanel

Maintenant, créons le premier

objet. Il contiendra un

et un

. Les trois sont créés via leurs méthodes constructeurs:

Remarques sur les trois lignes ci-dessus:

le
```
JPanel
```
la variable est déclarée final. Cela signifie que la variable ne peut contenir que le
```
JPanel
```
qui est créé dans cette ligne. Le résultat est que nous pouvons utiliser la variable dans une classe interne. Il deviendra évident pourquoi nous voulons plus tard dans le code.
le
```
JLabel
```
et
```
JComboBox
```
ont des valeurs qui leur sont transmises pour définir leurs propriétés graphiques. L'étiquette apparaîtra comme "Fruits:" et la zone de liste déroulante aura maintenant les valeurs contenues dans le
```
fruitOptions
```
tableau déclaré plus tôt.
le
```
ajouter()
```
méthode du
```
JPanel
```
y place des composants graphiques. UNE
```
JPanel
```
utilise FlowLayout par défaut gestionnaire de mise en page. C'est très bien pour cette application car nous voulons que l'étiquette se trouve à côté de la zone de liste déroulante. Tant que nous ajoutons le
```
JLabel
```
D'abord, ça ira bien:

Créer le deuxième objet JPanel

La deuxième

suit le même schéma. Nous ajouterons un

et un

et définissez les valeurs de ces composants sur "Légumes:" et le second

tableau

. La seule autre différence est l'utilisation du

méthode pour masquer le

. N'oubliez pas qu'il y aura un

contrôler la visibilité des deux

. Pour que cela fonctionne, il faut être invisible au début. Ajoutez ces lignes pour configurer la seconde

Une ligne à noter dans le code ci-dessus est l'utilisation du

méthode du

. le

La valeur affiche la liste des éléments qu'elle contient dans deux colonnes. C'est ce qu'on appelle un "style journal" et c'est une bonne façon d'afficher une liste d'articles plutôt qu'une colonne verticale plus traditionnelle.

Ajout de touches de finition

Le dernier composant nécessaire est le

pour contrôler la visibilité de la

s. La valeur passée dans le

constructeur définit le libellé du bouton:

Il s'agit du seul composant pour lequel un écouteur d'événements sera défini. Un "événement" se produit lorsqu'un utilisateur interagit avec un composant graphique. Par exemple, si un utilisateur clique sur un bouton ou écrit du texte dans une zone de texte, un événement se produit.

Un écouteur d'événements indique à l'application ce qu'il doit faire lorsque l'événement se produit.

utilise la classe ActionListener pour «écouter» un clic de bouton par l'utilisateur.

Créer l'écouteur d'événements

Parce que cette application effectue une tâche simple lorsque le bouton est cliqué, nous pouvons utiliser une classe interne anonyme pour définir l'écouteur d'événements:

Cela peut ressembler à du code effrayant, mais il vous suffit de le décomposer pour voir ce qui se passe:

Tout d'abord, nous appelons
```
addActionListener
```
méthode du
```
JButton
```
. Cette méthode attend une instance de la
```
ActionListener
```
classe, qui est la classe qui écoute l'événement.
Ensuite, nous créons l'instance de la
```
ActionListener
```
classe en déclarant un nouvel objet à l'aide
```
new ActionListener ()
```
puis fournir une classe interne anonyme - qui est tout le code à l'intérieur des accolades.
A l'intérieur de la classe interne anonyme, ajoutez une méthode appelée
```
actionPerformed ()
```
. Il s'agit de la méthode appelée lorsque vous cliquez sur le bouton. Tout ce qui est nécessaire dans cette méthode est d'utiliser
```
setVisible ()
```
pour changer la visibilité de la
```
JPanel
```
s.

Ajouter les JPanels au JFrame

Enfin, nous devons ajouter les deux

le sable

à la

. Par défaut, un

utilise le gestionnaire de disposition BorderLayout. Cela signifie qu'il y a cinq zones (sur trois rangées)

qui peut contenir une composante graphique (NORD, {OUEST, CENTRE, EST}, SUD). Spécifiez cette zone à l'aide du

méthode:

Définissez le JFrame pour qu'il soit visible

Enfin, tout le code ci-dessus n'aura servi à rien si nous ne définissons pas le

être visible:

Nous sommes maintenant prêts à exécuter le projet NetBeans pour afficher la fenêtre de l'application. Cliquez sur le bouton pour basculer entre l'affichage de la liste déroulante ou de la liste.