Premier JavaFX ~ Introduction facile Bonjour création d'interface graphique universelle ~

Le faites-vous en été? Calendrier de l'Avent Partie 5

introduction

Merci d'avoir lu cet article. Dans cet article, l'auteur d'un programmeur poussin qui a touché JavaFX pendant environ six mois a décrit l'introduction de JavaFX et SceneBuilder et la création de Hellowa. Étant donné que certains articles écrits par quelqu'un dans le passé sont plus faciles à comprendre, j'espère que vous pourrez les lire à titre de référence uniquement.

introduction

En principe, veuillez installer Eclipse par vous-même.

L'environnement de l'auteur est le suivant. -macOS Sierra 10.12.6 -Eclipse Oxygen 4.7.3a

Les éléments à présenter cette fois sont les suivants. -e (fx) clipse: Plugin pour développer des effets dans Eclipse -Scene Builder: FX GUI peut être créé avec GUI (vaut-il mieux l'essayer que des mots)

Faisons-le réellement.

Introduction de e (fx) clipse

Ouvrez Eclipse et sélectionnez "Aide-> Installer un nouveau logiciel" dans la barre d'état en haut de l'écran.

Dans la liste déroulante intitulée "Travailler avec", sélectionnez l'élément intitulé "Oxygen-http: //download.eclipse.org/releases/oxygen".

Après avoir lu pendant un moment, la table centrale sera mise à jour, alors entrez "fx" où "Filter input" est écrit.

Après le rechargement, la section qui dit "e (fx) clipse --IDE" apparaîtra sous les outils généraux. Sélectionnez-la et sélectionnez "Suivant>" en bas de la fenêtre.

install_efxclipse.png

Si vous sélectionnez "Suivant>" et que vous continuez, l'écran de confirmation des conditions d'utilisation apparaîtra. Après avoir accepté, sélectionnez «Terminer» pour démarrer l'installation.

Une fois l'installation terminée, redémarrez Eclipse.

Introduction de Scene Builder

Téléchargez Scene Builder depuis le site Web d'Oracle.

Accédez au lien here et sous Télécharger "Scene Builder Binaries (1.x, 2.0) ) (Les archives).

À partir de "Téléchargements associés à Java FX Scene Builder 2.0" au bas de la page de destination, après avoir accepté les conditions d'utilisation (Accepter le contrat de licence), téléchargez le fichier compressé adapté à votre système d'exploitation. (Dans mon cas, javafx_scenebuilder-2_0-macosx-universal.dmg)

Ouvrez le fichier téléchargé et installez l'application à l'intérieur. install_Scenebuilder.png Pour macOS, faites glisser et déposez l'icône à gauche vers Applications à droite.

Lier Eclipse et Scene Builder

Dans Eclipse, ouvrez les Préférences. Sélectionnez l'élément Java FX et entrez le chemin d'accès au générateur de scène que vous venez d'introduire dans la zone de texte à côté de l'exécutable de Scene Builder. Il est facile et fiable de sélectionner le fichier d'application directement à partir de "Parcourir". Après avoir entré le chemin, fermez la fenêtre en cliquant sur «Appliquer et fermer» en bas à droite.

Ceci termine la préparation de l'introduction. Vive le bon travail.

En fait, faire un programme

Cette fois, je voudrais créer une application GUI qui a une zone de texte pour entrer un nom et un message "Bonjour ○○ !!" apparaît lorsque le bouton est enfoncé après avoir entré le nom.

Création de projet

Depuis Eclipse, sélectionnez Nouveau et sélectionnez "Projet JavaFX" dans la section JavaFX. Appelons ce projet "Hello FX".

Après avoir entré le nom du projet, sélectionnez «Suivant>» en bas à deux reprises. makeProject1.png

Après la transition vers la fenêtre ci-dessus, changez la section de langue de la liste déroulante en "FXML". Le type d'itinéraire est la partie qui sélectionne le volet de base, et cette fois, sélectionnez "javafx.scene.layout.AnchorPane". Modifiez le nom de fichier et le nom du contrôleur de Sample à Form et de SampleController à FormController. Lorsque les étapes jusqu'à ce point sont terminées et que vous voyez la figure ci-dessous, sélectionnez "Terminer" pour créer le projet. makeProject2.png

Fonctionnement dans Scene Builder

Cliquez avec le bouton droit sur Form.fxml dans le package d'application dans le projet créé et sélectionnez Ouvrir dans Scene Builder.

Scene Builder démarrera et vous verrez un écran comme celui ci-dessous. scenebuilder1.png
Rendez visible le volet d'ancrage que vous avez défini précédemment. Sélectionnez Volet d'ancrage en bas à gauche de l'écran, puis sélectionnez Disposition à droite de l'écran. Remplacez les termes Largeur et Hauteur de préférence par 400. Ensuite, un carré apparaîtra au centre de l'écran. scenebiolder2.png

Placement des pièces

Ensuite, placez un champ de texte pour saisir un nom. Dans la liste des Contorolls sur le côté gauche de l'écran, faites glisser et déposez "Champ de texte" dans le volet d'ancrage au centre de l'écran à la position souhaitée. À titre d'exemple, j'ai placé le champ de texte de sorte que le bord droit soit au centre.

Ensuite, arrangez les boutons. Comme pour le champ de texte, faites glisser et déposez le «bouton» dans les contrôles. Je l'ai placé de manière à ce qu'il colle au bord droit du champ de texte.

Ensuite, placez la partie de sortie de caractères. Comme précédemment, faites glisser et déposez le "Label" dans Controlls. Étant donné que la taille immédiatement après le placement est un peu petite, modifiez la taille de la même manière que lorsque le volet d'ancrage est apparu. Sélectionnez l'étiquette placée et modifiez la largeur préférée à 370 et la hauteur préférée à 40 dans la disposition sur le côté droit de l'écran. Après cela, veuillez ajuster l'arrangement au fur et à mesure qu'il s'agrandit.

Jusqu'à ce point, vous devriez voir la figure ci-dessous. scenebuilder3.png

Écrasons et sauvegardons (commande + s) une fois par ici. Les modifications dans Scene Builder sont liées à Form.fxml dans le projet, et si vous ouvrez Form.fxml dans Eclipse, vous pouvez voir le code tel que TextField et Label.

Fonctionne avec FormContraller.java

Préparez-vous à utiliser le TextField, etc. placé dans la section précédente du programme java actuel.

Tout d'abord, en tant qu'opération commune à TextField, Button et Label, entrez "fx: id" à partir du code sur le côté droit de l'écran après avoir sélectionné chacun. fx: id agit comme un identifiant pour une manipulation ultérieure avec FormController. Il est recommandé que le premier caractère commence par une minuscule, comme une déclaration de variable. Cette fois, définissons chaque fx: id comme suit. -TextField「field_Name」 -Button「button_Enter」 -Label「label_Output」 scenebuilder4.png


Si vous définissez fx: id, vous recevrez un avertissement jaune dans Scene Builder. En termes simples, le contenu est "Il n'y a pas d'objet correspondant à fx: id dans FormController!", Et ne vous inquiétez pas, il disparaîtra par l'opération décrite plus loin.

Ensuite, effectuez l'opération pour créer la méthode "lorsque le bouton est cliqué" uniquement pour Button. Entrez l'élément "On Acction" sous fx: id du bouton comme fx: id. Cette fois, disons "onButtonClicked". scenebuilder5.png

C'est la fin de l'opération dans Scene Builder. Écrasons, sauvegardons et retournons à Eclipse.

Fonctionnement dans Eclipse

Sélectionnez FormController.java et entrez comme indiqué ci-dessous.

FormController.java


package application;

import javafx.fxml.FXML;
import javafx.scene.control.Button;
import javafx.scene.control.Label;
import javafx.scene.control.TextField;

public class FormController {
	@FXML private TextField field_Name;
	@FXML private Button button_Enter;
	@FXML private Label label_Output;

	@FXML public void onButtonClicked() {
		label_Output.setText("Hello "+ field_Name.getText()+ " !!");
	}
}

Lors de la déclaration de la pièce liée dans SceneBuilder (et Form.fxml), ajoutez @FXML. Assurez-vous que chaque nom d'objet est le même que celui entré avec fx: id. De même, assurez-vous que le nom de la méthode est le même que celui entré dans Sur action du code du bouton.

Le contenu de cette méthode est que lorsque le bouton est enfoncé, les caractères du champ de texte sont supprimés et le libellé est mis à jour en "Hello ○○ !!".

Après avoir rempli le FormController, exécutez Main.java et une fenêtre carrée apparaîtra. En entrant un nom dans le champ de texte et en appuyant sur le bouton, "Hello ○○ !!" sera affiché. Main1.png
Ceci complète pour le moment l'interface graphique de type Hello World dans JavaFX. Cela fait longtemps, mais merci d'avoir lu.

Préparez un peu

On dit que c'est terminé ci-dessus, mais c'est un bonus d'ajouter une petite opération pour améliorer l'apparence.

Cette fois,

  1. Supprimez "Label" immédiatement après avoir démarré Label
  2. Réglez le bouton "Button" sur "Enter"
  3. Changer la taille de la police de Label Je vais faire trois choses.

Ouvrons Form.fxml dans Eclipse. Pour "Label" en 1., changez simplement text = "Label" dans \