JavaFX: Quickstart mit FXML

Früher dachte ich, dass der API-basierte Ansatz von JavaFX das Nonplusultra der UI-Entwicklung ist. Man hat alles in der Hand und ist Bauarbeiter, Bauleiter und Architekt in einer Person!
Aber seit der JAX 2013 Zweifel ich an dieser Aussage, denn es gibt noch eine weitere Möglichkeit JavaFX-Anwendungen zu programmieren – der FXML-Ansatz und genau dieser Ansatz ist Gegenstand meines Blogbeitrags. Man braucht keine Angst vor XML und co zu haben, denn es ist echt easy und es gibt sogar ein GUI Builder!!!

FXML ist wie JSF

…kein Hexenwerk und nicht der Teufel in Person. Es ist eine weitere Art UI-Elemente zu positionieren und zu konfigurieren. Außerdem sieht es, meiner Meinung nach, genauso wie eine xHTML-Datei mit JSF aus:)
Wer also schon Erfahrungen in dem Bereich gesammelt hat, wird sich schnell zurecht finden und die Vorteile zu schätzen wissen. Außerdem bieten diverse IDE’s sehr gute Code-Completion an. Meine Empfehlung:

NetBeans

e(fx)clipse

Wer eine „normale“ Eclipse-Installation mit Java SDK 1.7 nutzt, findet hier eine Anleitung für die JavaFX-Entwicklung.

Hauptklasse

Eigentlich ist alles genauso, wie beim API-basierten Ansatz. Nichts Neues – nur ein kleiner Aufruf:

Parent root = FXMLLoader.load(getClass().getResource("maske.fxml"));

Dieser Aufruf lädt die FXML-Datei. Speziell in diesem Beispiel befindet sich die FXML-Datei im gleichen Package, wie die Klasse. Würde die JVM dort keine FXML-Datei finden, fliegt direkt eine IOException. (Siehe Zeile 19)
Die ganze Klasse sieht dann so aus:

package de.axxg.fxml;

import java.io.IOException;

import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.stage.Stage;


public class Start extends Application {

		public static void main(String[] args) {
		        launch(args);
		    }
		     
		    @Override
		    public void start(Stage primaryStage) throws IOException {
		    	// +++++++++++++++++++++++++++++++++++++++++++++
		    	// Layout
		    	// +++++++++++++++++++++++++++++++++++++++++++++
		    	
		    	// FXML-Datei laden!
		    	Parent root = FXMLLoader.load(getClass().getResource("maske.fxml"));
		        
				// Szene
				Scene scene = new Scene(root);
				
		    	// +++++++++++++++++++++++++++++++++++++++++++++
		    	// Stage konfigurieren
		    	// +++++++++++++++++++++++++++++++++++++++++++++

		    	// Titel setzen
				primaryStage.setTitle("AxxG - FXML Beispiel");
				
				// Szene setzen
				primaryStage.setScene(scene);
				primaryStage.sizeToScene();
				
				// Stage anzeigen
				primaryStage.show();
			}
	}

Das Layout

Wie gesagt, definiert man in der FXML-Datei die Position und die Konfiguration von UI-Elementen. Mittels Bindings, die ich im nächsten Beitrag erkläre, greift man im Code wieder auf die UI-Elemente zu.

<?xml version="1.0" encoding="UTF-8"?>

<?import java.lang.*?>
<?import java.util.*?>
<?import javafx.geometry.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>
<?import javafx.scene.paint.*?>
<?import javafx.scene.text.*?>


<GridPane fx:id="grid" alignment="CENTER" hgap="10.0" vgap="10.0" xmlns:fx="http://javafx.com/fxml">
  <children>
    <Text strokeType="OUTSIDE" strokeWidth="0.0" text="Hallo AxxG-Leser" GridPane.columnIndex="0" GridPane.rowIndex="0">
      <font>
        <Font name="Tahoma" size="20.0" />
      </font>
    </Text>
    <Label text="Vorname:" GridPane.columnIndex="0" GridPane.rowIndex="1" />
    <Label text="Nachname:" GridPane.columnIndex="0" GridPane.rowIndex="2" />
    <TextField fx:id="VornameTF" prefWidth="200.0" GridPane.columnIndex="1" GridPane.rowIndex="1" />
    <TextField fx:id="NachnameTF" prefWidth="200.0" GridPane.columnIndex="1" GridPane.rowIndex="2" />
    <HBox GridPane.columnIndex="1" GridPane.rowIndex="4">
      <children>
        <Button fx:id="addBtn" mnemonicParsing="false" text="eintragen" />
        <Button fx:id="okBtn" mnemonicParsing="false" text="Alle anzeigen" />
      </children>
    </HBox>
  </children>
  <padding>
    <Insets bottom="25.0" left="25.0" right="25.0" top="25.0" />
  </padding>
</GridPane>

• Oracle Tutorial
• Oracle FXML get start
• Oracle Einführung in FXML

API-basierter Ansatz

Das gleiche Beispiel, mit dem API-basierten Ansatz umgesetzt, findet ihr hier.

Download

Für Faule gibt es hier ein fertiges Projekt…

Java Version	JDK 1.7.0_11	Inhalt	gepacktes Projekt
JavaFX Version	2.2.4	Größe	4.618 KB (~4.5 MB)
IDE	Eclipse IDE Version 4.2.2	Endung	*.zip
Preis	kostenlos	Lizenz

Blog-Serie

Dieser Beitrag ist ein Teil meiner Serie zu „JavaFX mit FXML programmieren„. In dieser Serie berichte, wie man in die Entwicklung mit FXML einsteigen und effektiv arbeiten kann. Weitere Beiträge sind:

• Quickstart mit FXML
• Controller, Events und UI-Elemente mit FXML
• @PostConstruct für FXML
• DataBinding mit FXML

Die Quellen und weitere Links

• Oracle Tutorial
• Oracle FXML get start
• Oracle Einführung in FXML

Copyright © 2013 AxxG – Alexander Gräsel