Structure des fichiers d'application JavaFX (FXML, CSS, propriétés)

Affichage terrestre du système de coordonnées équatoriales avec JavaFX 3D (2) -Structure de fichier de l'application JavaFX-

Cet article est le 13e jour du Calendrier de l'Avent JavaFX 2017. Le 12ème jour, HASUNUMA Kenji [À propos de la prise en charge WebGL de JavaFX 9 WebView](http://www.coppermine.jp/docs/notepad/2017/12/ javafx-9-webview-webgl.html).

Cet article est la suite du 11ème jour du calendrier de l'Avent JavaFX 2017 Affichage de la Terre du système de coordonnées équatoriales dans JavaFX 3D (1).

introduction

Lorsque vous commencerez à travailler sur JavaFX, vous rencontrerez probablement divers obstacles.

Dans le programme d'affichage de la Terre dans le système de coordonnées équatorial créé avec JavaFX introduit la dernière fois, la disposition de l'écran est créée à l'aide de l'outil Scene Builder, un fichier FXML est généré, la couleur à afficher à l'écran est décrite dans le fichier CSS et la ressource de chaîne de caractères est Il est décrit dans le fichier de propriétés (anglais, japonais).

La structure de classe est consciente de MVC (Model View Controller), le fichier FXML qui définit la disposition de l'écran est la vue et la classe Java associée au fichier FXML est le contrôleur. Les modèles seront ajoutés à une date ultérieure.

Quand j'ai touché JavaFX pour la première fois, j'utilisais Swing, donc je trouvais gênant et pénible de me souvenir et d'écrire dans un autre langage (FXML, CSS) que je pouvais écrire en code Java. .. Cependant, une fois que j'ai compris comment l'utiliser et que j'ai commencé à créer des écrans à l'aide d'un outil appelé Scene Builder, il est devenu très facile de créer des programmes GUI.

Structure du programme

Lorsque vous créez un projet pour une application qui utilise FXML dans JavaFX, la plupart des outils de construction (environnements de développement) génèrent des classes qui héritent de la classe javafx.application.Application, des fichiers FXML et des classes de contrôleur qui s'associent à FXML.

Dans le premier modèle du programme d'affichage de la Terre dans le système de coordonnées équatoriales, la structure de fichier suivante a été utilisée.

Lorsque vous créez un nouveau projet d'application JavaFX FXML pour NetBeans 8.2, les fichiers source FXML et Java sont générés dans le même répertoire. Dans un autre outil de construction (Maven), le fichier FXML est placé dans un répertoire différent du code source Java en raison de la politique de répertoire de Maven. Cependant, comme le fichier FXML devient une vue et est étroitement lié au contrôleur, il est préférable d'être au même emplacement que le contrôleur.

À propos de la dénomination des noms de fichiers JavaFX

Dans NetBeans, le nom du fichier FXML donné par défaut est FXMLDocument.fxml et le nom du fichier source de la classe de contrôleur couplée est FXMLDocumentController.java. Par conséquent, j'ai donné les noms suivants pour que je puisse comprendre la relation entre MVC.

type appellation
Nom de l'application SatelliteOrbits
Nom du fichier de classe d'application SatelliteOrbitsApp.java
Afficher le nom du fichier SatelliteOrbitsView.fxml
Nom du fichier de classe de contrôleur SatelliteOrbitsController.java
Nom de fichier CSS SatelliteOrbitsView.css
Nom du fichier de propriété SatelliteOrbitsView.properties

Le nom de l'application est plus proche du nom du projet que le nom de la classe spécifique. Le nom de chaque fichier est décidé en fonction du nom de l'application donné ici.

Le fichier CSS et la ressource de chaîne utilisée pour l'écran sont nommés d'après la vue afin qu'elle soit clairement liée à la vue.

Vous pouvez trouver ennuyeux d'avoir un grand nombre de fichiers, mais chaque fichier est simple.

Utilisez Scene Builder pour créer des vues

La création d'une vue est plus facile avec Scene Builder au lieu d'éditer FXML de manière solide.

Voici l'écran qui ouvre SatelliteOrbitsView.fxml dans Scene Builder.

image.png

Sur le côté gauche de Scene Builer se trouve une palette avec chaque contrôle (parties de l'interface graphique) alignés, la configuration de la disposition de l'écran (arborescence), sur le côté droit se trouvent des informations détaillées sur le contrôle sélectionné, et au milieu se trouve l'écran de disposition.

Affichage de l'écran de prévisualisation depuis Scene Builder

Sélectionnez le menu Aperçu de Scene Builder> Afficher l'aperçu dans la fenêtre pour ouvrir la disposition d'écran en tant que programme distinct.

image.png

Même s'il n'y a pas de code source Java, vous pouvez exécuter l'écran présenté uniquement avec FXML et y faire fonctionner les parties de l'interface utilisateur.

Spécifiez le CSS et les propriétés de Scene Builder

Le menu [Aperçu] de Scene Builder comprend [Feuilles de style de scène] et [Internationaization], et vous pouvez spécifier un fichier CSS et un fichier de propriétés pour les refléter dans la disposition de l'écran.

Spécification du fichier de propriétés

L'écran illustré ci-dessus utilise des ressources de chaîne de caractères japonais avec SatelliteOrbits_ja.properties spécifié dans le fichier de propriétés. Dans le menu Aperçu de Scene Builder> Internationalisation> Définir la ressource ..., vous pouvez spécifier le fichier de propriétés anglais SatelliteOrbits.properties pour changer l'affichage en anglais comme suit:

image.png

L'écran affiché dans l'aperçu reflète également les propriétés anglaises spécifiées comme suit.

image.png

Pour utiliser la ressource chaîne définie dans le fichier de propriétés, préfixez la propriété Text du contrôle avec le symbole% et décrivez le nom de clé de l'élément défini dans le fichier de propriétés. L'exemple suivant montre comment spécifier une ressource de chaîne dans la propriété Text du contrôle Text sur Scene Builder.

image.png

Le fichier de propriétés a la description suivante.

Pour charger le fichier de propriétés dans l'application JavaFX réelle au lieu de Scene Builder, spécifiez les éléments suivants dans la classe d'application:

SatelliteOrbitsApp.java


    public void start(Stage stage) throws Exception {
        ResourceBundle bundle = ResourceBundle.getBundle("com.torutk.satorbit.SatelliteOrbitsView");
        Parent root = FXMLLoader.load(getClass().getResource("SatelliteOrbitsView.fxml"), bundle);

Utilisez java.util.ResourceBundle pour spécifier le fichier de propriétés (spécifiez par nom de package + nom de base du fichier, pas par chemin de fichier). Passez ensuite le ResourceBundle généré à partir du fichier de propriétés lors du chargement du fichier FXML.

Spécification du fichier CSS

Dans l'écran illustré ci-dessus, SatelliteOrbits.css est spécifié dans le fichier CSS et la couleur du texte du texte (axe X, axe Y, axe Z) dans la colonne Légende est définie à partir du fichier CSS.

Dans Scene Builder, définissez la définition (classe de style ou id) qui peut être spécifiée avec le sélecteur CSS pour le contrôle que vous souhaitez spécifier avec CSS, et décrivez le sélecteur et les propriétés dans le fichier CSS. L'exemple suivant montre le nom du sélecteur x_axis spécifié dans la propriété Id du contrôle Text.

image.png

Le fichier CSS a la description suivante.

#x_axis {
    -fx-fill: red;
}

Lorsque vous spécifiez la propriété Id avec le sélecteur CSS, spécifiez-la avec #.

Mise en garde Si vous spécifiez un fichier CSS dans le menu [Aperçu] de Scene Builder> [Feuilles de style de scène], il ne sera reflété que sur Scene Builder. Lors de l'exécution en tant que programme Java, il est nécessaire de configurer la lecture du fichier CSS séparément. Voici deux méthodes de réglage.

--Lisez le fichier CSS avec le code source Java (classe d'application) et définissez-le dans Scene --Définir le fichier CSS dans la propriété Feuilles de style du conteneur de niveau supérieur dans Scene Builder

Voici un exemple d'utilisation de la deuxième méthode pour spécifier un fichier CSS pour la propriété Feuilles de style du conteneur de niveau supérieur (BorderPane) sur Scene Builder.

image.png

Résumé du générateur de scènes

Avec Scene Builder,

Il y a des mérites tels que.

Recommended Posts

Structure des fichiers d'application JavaFX (FXML, CSS, propriétés)
JavaFX-Spécifiez l'emplacement du fichier CSS par rapport au fichier fxml
Écriture de fichier JavaFX8 (TextArea)
Écriture de fichier JavaFX8 (TextField)