JavaFX: Controller, Events und UI-Elemente mit FXML

Im ersten Beitrag meiner kleinen Serie zu FXML haben wir gelernt, wie man eine FXML-Datei in einer JavaFX-Anwendung einbindet und wie man ein Layout mit FXML erstellt. Jetzt geht es um die Interaktion mit dem Benutzer, Events zu verarbeiten und die Verwendung eines Controllers. Hierzu erweitere ich das bisherige Beispiel und markiere wichtige Stellen, die sich geändert haben!

FXML Datei einbinden

wie schon im vorherigen Beispiel hat sich die Start-Klasse in diesem Beispiel nicht geändert. Hier nochmal die Klasse:

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

FXML und Code verbinden

Das sieht zwar alles schön und gut aus, aber interaktiv ist unserer JavaFX-Anwendung trotzdem nicht. Daher brauchen wir jetzt eine Verbindung zwischen der UI (FXML) und dem Code. Die eine Seite der Verbindung wird mit der

@FXML

Annotation erreicht.

package de.axxg.fxml;

import javafx.event.ActionEvent;
import javafx.fxml.FXML;
import javafx.scene.control.TextField;
import javafx.scene.input.MouseEvent;

public class Controller {

	@FXML
	private TextField vornameTF;

	@FXML
	protected void go(ActionEvent event) {
		vornameTF.setText("Button wurde gedrückt!");
	}

	@FXML
	protected void enter(MouseEvent event) {
		vornameTF.setText("Die Maus ist über den Button!");
	}
}

Das Mapping

Mit einer Controller-Klasse und ein paar Annotationen ist es noch nicht getan! In der FXML-Datei muss die entsprechende Klasse noch eingetragen werden (Siehe Zeile 12). Hierfür wird das Attribut fx:controller=“de.axxg.fxml.Controller“ genutzt.

UI-Element-Mapping

Das Mapping bei UI-Elementen funktioniert über die ID des Elements.

Die ID und der Name des Objekts im Controller müssen übereinstimmen!

Ein Beispiel befindet sich in Zeile 21. (fx:id=“vornameTF“)

Event-Mapping

Damit die Methode „go“ der Controller-Klasse bei einem Buttonklick ausgelöst wird, muss das Attribut „onAction“ belegt werden (siehe Zeile 25). Dabei gilt folgende Konvention:

onEventname = „#Methodenname“

In Zeile 26 befindet sich ein weiteres Beispiel.

<?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" fx:controller="de.axxg.fxml.Controller">
  <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" onAction="#go"/>
        <Button fx:id="okBtn" mnemonicParsing="false" text="Alle anzeigen" onMouseEntered="#enter" />
      </children>
    </HBox>
  </children>
  <padding>
    <Insets bottom="25.0" left="25.0" right="25.0" top="25.0" />
  </padding>
</GridPane>

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	3.995 KB (~4.0 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