JavaFX: Quickstart mit FXML

fxmlFrü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 JavaFX mit Netbeans e(fx)clipse efxclipse

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>

 

Kleiner Tipp am Rande: Ich würde niemals FXML programmieren, ohne eine gescheite IDE zuverwenden! Außer der Code-Completion, verwaltet diese auch noch die Includes und vieles mehr!

Folgende Links sollte man sich ansehen, um FXML zu lernen:

 

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 Creative Commons Lizenzvertrag

JavaFX Hallo FXML

 

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:

 

Die Quellen und weitere Links

 

Copyright © 2013 AxxG – Alexander Gräsel



Kommentar verfassen