Struktur der JavaFX-Anwendungsdatei (FXML, CSS, Eigenschaften)

Erdanzeige des äquatorialen Koordinatensystems mit JavaFX 3D (2) - Dateistruktur der JavaFX-Anwendung -

Dieser Artikel ist der 13. Tag von JavaFX Adventskalender 2017. Am 12. Tag HASUNUMA Kenjis Informationen zur WebGL-Unterstützung für JavaFX 9 WebView javafx-9-webview-webgl.html).

Dieser Artikel ist eine Fortsetzung des 11. Tages des JavaFX-Adventskalenders 2017 Erdanzeige des äquatorialen Koordinatensystems in JavaFX 3D (1).

Einführung

Wenn Sie anfangen, an JavaFX zu arbeiten, werden Sie wahrscheinlich auf verschiedene Hindernisse stoßen.

--Was ist besser, schreiben Sie nur Java-Code, schreiben Sie FXML oder schreiben Sie CSS? ――Das Schreiben von XML mit dem Namen FXML scheint schwierig und mühsam zu sein

In dem mit JavaFX zuletzt eingeführten Erdanzeigeprogramm im äquatorialen Koordinatensystem wird das Bildschirmlayout mit dem Scene Builder-Tool erstellt, eine FXML-Datei generiert, die auf dem Bildschirm anzuzeigende Farbe in der CSS-Datei beschrieben und die Zeichenkettenressource lautet Es wird in der Eigenschaftendatei (Englisch, Japanisch) beschrieben.

Die Klassenstruktur kennt MVC (Model View Controller), die FXML-Datei, die das Bildschirmlayout definiert, ist die Ansicht, und die Java-Klasse, die mit der FXML-Datei gepaart ist, ist der Controller. Modelle werden zu einem späteren Zeitpunkt hinzugefügt.

Als ich JavaFX zum ersten Mal berührte, benutzte ich Swing, daher fand ich es lästig und schmerzhaft, mich zu erinnern und in einer anderen Sprache (FXML, CSS) zu schreiben, die ich in Java-Code schreiben konnte. .. Nachdem ich jedoch verstanden hatte, wie man es verwendet, und anfing, Bildschirme mit einem Tool namens Scene Builder zu erstellen, wurde es sehr einfach, GUI-Programme zu erstellen.

Programmstruktur

Wenn Sie ein Projekt für eine Anwendung erstellen, die FXML in JavaFX verwendet, generieren die meisten Build-Tools (Entwicklungsumgebungen) Klassen, die von der Klasse javafx.application.Application, FXML-Dateien und Controller-Klassen erben, die mit FXML gekoppelt sind.

In der ersten Vorlage des Erdanzeigeprogramms im äquatorialen Koordinatensystem wurde die folgende Dateistruktur verwendet.

Wenn Sie ein neues JavaFX FXML-Anwendungsprojekt für NetBeans 8.2 erstellen, werden die FXML- und Java-Quelldateien im selben Verzeichnis generiert. In einem anderen Build-Tool (Maven) werden FXML-Dateien aufgrund der Verzeichnisrichtlinie von Maven in einem anderen Verzeichnis als der Java-Quellcode abgelegt. Da die FXML-Datei jedoch zu einer Ansicht wird und eng mit dem Controller verbunden ist, ist es besser, sich am selben Speicherort wie der Controller zu befinden.

Informationen zur Benennung von JavaFX-Dateinamen

In NetBeans lautet der Name der standardmäßig angegebenen FXML-Datei FXMLDocument.fxml, und der Name der Quelldatei der gepaarten Controller-Klasse lautet FXMLDocumentController.java. Daher habe ich die folgenden Namen angegeben, damit ich die Beziehung zwischen MVC verstehen kann.

Art Benennung
Anwendungsname SatelliteOrbits
Dateiname der Anwendungsklasse SatelliteOrbitsApp.java
Dateinamen anzeigen SatelliteOrbitsView.fxml
Name der Controller-Klassendatei SatelliteOrbitsController.java
CSS-Dateiname SatelliteOrbitsView.css
Name der Eigenschaftendatei SatelliteOrbitsView.properties

Der Anwendungsname liegt näher am Projektnamen als der spezifische Klassenname. Der Name jeder Datei wird anhand des hier angegebenen Anwendungsnamens festgelegt.

Die CSS-Datei und die für den Bildschirm verwendete Zeichenfolgenressource sind nach der Ansicht benannt, sodass sie eindeutig mit der Ansicht verknüpft sind.

Es mag ärgerlich sein, eine große Anzahl von Dateien zu haben, aber jede Datei ist einfach.

Verwenden Sie den Szenen-Generator, um Ansichten zu erstellen

Es ist einfacher, eine Ansicht mit Scene Builder zu erstellen, als FXML auf solide Weise zu bearbeiten.

Hier ist der Bildschirm, auf dem SatelliteOrbitsView.fxml in Scene Builder geöffnet wird.

image.png

Auf der linken Seite des Scene Builers befindet sich eine Palette mit jedem Steuerelement (GUI-Teile), die Bildschirmlayoutkonfiguration (Baum), auf der rechten Seite detaillierte Informationen zum ausgewählten Steuerelement und in der Mitte der Layoutbildschirm.

Anzeigen des Vorschaubildschirms in Scene Builder

Wählen Sie das Vorschau-Menü von Scene Builder> Vorschau im Fenster anzeigen, um das Bildschirmlayout als separates Programm zu öffnen.

image.png

Auch wenn kein Java-Quellcode vorhanden ist, können Sie den nur mit FXML angelegten Bildschirm ausführen und die UI-Teile darauf bedienen.

Geben Sie CSS und Eigenschaften für Scene Builder an

Das Menü [Vorschau] von Scene Builder enthält [Scene Style Sheets] und [Internationaization]. Sie können eine CSS-Datei und eine Eigenschaftendatei angeben, um sie im Bildschirmlayout wiederzugeben.

Angeben der Eigenschaftendatei

Der oben gezeigte Bildschirm verwendet japanische Zeichenfolgenressourcen mit SatelliteOrbits_ja.properties, die in der Eigenschaftendatei angegeben sind. Im Menü "Szenenvorschau"> "Internationalisierung"> "Ressource festlegen ..." können Sie die englische Eigenschaftendatei SatelliteOrbits.properties angeben, um die Anzeige wie folgt in Englisch zu ändern:

image.png

Der in der Vorschau angezeigte Bildschirm spiegelt auch die angegebenen englischen Eigenschaften wie folgt wider.

image.png

Um die in der Eigenschaftendatei definierte Zeichenfolgenressource zu verwenden, stellen Sie der Text-Eigenschaft des Steuerelements das% -Symbol voran und beschreiben Sie den Schlüsselnamen des in der Eigenschaftendatei definierten Elements. Das folgende Beispiel zeigt, wie Sie eine Zeichenfolgenressource in der Text-Eigenschaft des Text-Steuerelements in Scene Builder angeben.

image.png

Die Eigenschaftendatei enthält die folgende Beschreibung.

Geben Sie in der Anwendungsklasse Folgendes an, damit die Eigenschaftendatei von der eigentlichen JavaFX-Anwendung anstelle von Scene Builder geladen wird.

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);

Verwenden Sie java.util.ResourceBundle, um die Eigenschaftendatei anzugeben (angeben durch Paketname + Dateibasisname, nicht Dateipfad). Übergeben Sie dann beim Laden der FXML-Datei das aus der Eigenschaftendatei generierte ResourceBundle.

Angabe der CSS-Datei

In dem oben gezeigten Bildschirm wird SatelliteOrbits.css in der CSS-Datei angegeben, und die Textfarbe von Text (X-Achse, Y-Achse, Z-Achse) in der Spalte Legende wird aus der CSS-Datei definiert.

Definieren Sie im Scene Builder die Definition (Stilklasse oder ID), die mit dem CSS-Selektor für das Steuerelement angegeben werden kann, das Sie mit CSS angeben möchten, und beschreiben Sie den Selektor und die Eigenschaften in der CSS-Datei. Das folgende Beispiel zeigt den Selektornamen x_axis, der in der Id-Eigenschaft des Textsteuerelements angegeben ist.

image.png

Die CSS-Datei enthält die folgende Beschreibung.

#x_axis {
    -fx-fill: red;
}

Wenn Sie die Id-Eigenschaft mit dem CSS-Selektor angeben, geben Sie sie mit # an.

Hinweis Wenn Sie eine CSS-Datei im Menü [Vorschau] von Scene Builder> [Scene Style Sheets] angeben, wird diese nur in Scene Builder angezeigt. Bei der Ausführung als Java-Programm muss festgelegt werden, dass die CSS-Datei separat gelesen wird. Hier sind zwei Einstellmethoden.

Im Folgenden finden Sie ein Beispiel für die Angabe einer CSS-Datei für die Stylesheets-Eigenschaft eines Containers der obersten Ebene (BorderPane) in Scene Builder in der zweiten Methode.

image.png

Scene Builder Zusammenfassung

Mit Scene Builder,

Es gibt Verdienste wie.

Recommended Posts

Struktur der JavaFX-Anwendungsdatei (FXML, CSS, Eigenschaften)
JavaFX - Geben Sie den Speicherort der CSS-Datei relativ zur fxml-Datei an
Schreiben von JavaFX8-Dateien (TextArea)
JavaFX8-Datei schreiben (TextField)