JavaFX: Controller, Events und UI-Elemente mit FXML

1Im 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.

Die Annotation verbindet eine Java-Methode mit einem Event oder ein Objekt mit einem UI-Element.

In meinem Beispiel habe ich dafür eine Controller-Klasse geschrieben.

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

[download id=“22″ format=“2″]

 

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




3 Antworten : “JavaFX: Controller, Events und UI-Elemente mit FXML”

  1. Matthias sagt:

    Hallo Alexander,

    Danke für das ausgezeichnete Tutorial; es hat mir sehr geholfen!

  2. Schön, dass ich dir helfen konnte:)

  3. Mustafa Dündar Celebi sagt:

    Wieder sehr gute Beitrag,
    warum wurd die Alle anzeigen als zweiter Fenster nicht erweitert, das wäre ja Interessant zu wiessen als Anfänger Tutorial

    Mit freundlichen Grüssen

    Celebi

Trackbacks/Pingbacks

  1. JavaFX: DataBinding mit FXML | AxxG Blog - […] Controller, Events und UI-Elemente mit FXML […]

Kommentar verfassen

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.