Comment ajouter des boutons et du texte à votre projet JavaFX - des mannequins

En tant que programmeur Java débutant, vous voudrez ajouter des choses à votre projet JavaFX. Lorsque vous créez un programme graphique haute puissance, vous commencez par créer une fenêtre avec des boutons et d'autres widgets. Ensuite, vous ajoutez des méthodes pour répondre aux frappes, aux clics sur les boutons et autres choses du même genre.

Ici, vous utilisez un fichier XML pour décrire un bouton et un champ de texte:

1Ouvrez votre projet JavaFX.

Regardez dans l'explorateur de paquets d'Eclipse pour le nouveau projet.

2 Développez la branche du nouveau projet dans l'Explorateur de packages d'Eclipse.

Recherchez la branche de l'application, qui se trouve dans la branche src.

3Faites un clic droit (ou sur un Mac, en maintenant la touche Ctrl enfoncée) sur la branche de l'application. Dans le menu contextuel qui apparaît, choisissez Fichier → Nouveau → Autre.

La boîte de dialogue Sélectionner un assistant apparaît.

4Dans l'arborescence de la boîte de dialogue Sélectionner un assistant, développez la branche JavaFX. Dans la branche JavaFX, double-cliquez sur l'élément Nouveau document FXML.

Une boîte de dialogue Fichier FXML apparaît.

5Dans le champ Nom de la boîte de dialogue, tapez un nom pour votre nouveau fichier, puis cliquez sur Terminer.

Nommez le fichier Racine .

Vous tapez le nom Racine, mais e (fx) clipse crée un fichier dont le nom complet est Racine. fxml.

Cette nouvelle racine. Le fichier fxml décrit la disposition des boutons, des champs de texte et d'autres éléments dans votre nouvelle application JavaFX.

6Cliquez avec le bouton droit de la souris (ou sur un Mac, en maintenant la touche Ctrl enfoncée) la nouvelle racine. branche fxml dans l'explorateur de paquets d'Eclipse. Dans le menu contextuel qui apparaît, sélectionnez Ouvrir avec SceneBuilder.

La fenêtre de l'application Scene Builder apparaît.

La fenêtre Scene Builder contient plusieurs zones:

Le milieu de la fenêtre Scene Builder contient le panneau de contenu , où vous voyez un aperçu de votre nouvelle application. (Actuellement, il n'y a rien dans votre application à voir, donc le panneau Contenu est un grand espace vide.)

La partie supérieure gauche de la fenêtre contient un panneau Bibliothèque , qui contient une section Conteneurs, une section Controls et plusieurs autres sections.

Dans le monde GUI, des éléments tels que les boutons, les champs de texte, les libellés et les cases à cocher sont appelés contrôles . La section Contrôles du panneau Bibliothèque forme une palette. Pour créer une fenêtre graphique, faites glisser les contrôles de la palette et déposez-les dans le panneau Contenu.

La partie inférieure gauche de la fenêtre contient un panneau de document , qui contient une section Hiérarchie et une section Contrôleur. La section Hiérarchie contient un élément AnchorPane.

La section Hiérarchie contient une arborescence indiquant quels éléments de votre fenêtre sont à l'intérieur de quels autres éléments.La section Contrôleur vous aide à lier la fenêtre que vous concevez avec le code Java de l'application.

La partie la plus à droite de la fenêtre contient un panneau Inspecteur , qui contient une section Propriétés, une section Mise en page et une section Code.

Dans la section Propriétés, vous décrivez les caractéristiques des éléments de votre fenêtre. Dans la section Code, vous nommez les méthodes Java associées aux éléments de votre fenêtre.

Votre kilométrage peut varier! Ces instructions fonctionnent sur une version d'aperçu de Scene Builder 2. 0. Si vous avez une version différente de Scene Builder, vos étapes peuvent être un peu différentes.

7Sélectionnez l'élément AnchorPane dans la section Hiérarchie.

Un marqueur apparaît au milieu du panneau Contenu de Scene Builder.

8Déplacez le marqueur dans le panneau Contenu pour agrandir l'onglet AnchorPane.

L'AnchorPane va agrandir.

9Recherchez l'entrée TextField dans la section Contrôles du panneau Bibliothèque

Faites ensuite glisser un contrôle TextField dans AnchorPage dans le panneau Contenu.

10Trouvez l'entrée Button dans la section Controls du panneau Library.

Faites glisser un contrôle Button dans l'AnchorPage dans le panneau Contenu.

11Dans le menu principal, sélectionnez Fichier → Enregistrer.

Cela sauvegarde votre nouveau fichier FXML.

12Fermez l'application Scene Builder.

Lorsque vous revenez à l'atelier Eclipse, vous pouvez voir le nouveau code dans votre racine. fichier fxml.

Double-cliquez sur la racine. fxml branchez dans l'Explorateur de packages pour voir le code du fichier. Si vous ne voyez pas les mots TextField et Button dans le code, cliquez avec votre souris dans la fenêtre de l'éditeur. (Cliquez sur votre souris pour mettre à jour l'éditeur afin de refléter les modifications effectuées par Scene Builder.) Si le code de l'éditeur ne semble pas correctement mis en retrait, cliquez sur une zone vide dans l'éditeur et appuyez sur Ctrl-Maj-F.

Chaque fois que vous voulez formater le code dans l'éditeur d'Eclipse (pour rendre le code plus facile à lire et plus facile à comprendre), appuyez sur Ctrl-Maj-F.

13Modifiez le principal du projet. fichier java.

Commentez l'instruction racine BorderPane et ajoutez une instruction Racine parent, comme indiqué en gras dans l'extrait 20-3.

Les modifications dans l'extrait 20-3 connectent l'application à votre racine nouvellement créée. Disposition fxml.

14Lancez le projet.

Lorsque vous le faites, vous voyez une exécution de votre projet en utilisant la racine. fichier fxml.