How to Eclipse + JavaFX + fxml + Scene Builder (WYSIWYG designer)

Since JDK 7u6 is JavaFX 2 integrated to JavaSE on all major platforms (Windows, Linux and Mac). I think that it is time to start switch from SWING to JavaFX.
I use Eclipse 4.2 on Ubuntu 12.10 64bit with WindowBuilder Pro installed for SWING WYSIWYG design, but there is no plug-in with JavaFX GUI designer. Don’t worry, there is solution with using e(fx)clipse and JavaFX Scene Builder.

We will develop JavaFX example with using GUI designer and Eclipse in this post.

[wp_ad_camp_1]

Prerequisites

We have installed in computer:

Eclipse configuration

We have to integrate JavaFX Scene Builder into Eclipse first.

  1. Run Eclipse
  2. Menu „Window / Preferences“
  3. „General / Editors / File associatons“ in tree
  4. Select „*.fxml“ from file extensions list
  5. Click button „Add“ in „Associated editors“
  6. Click „External program“ and select „JavaFX Scene Builder“ from list of external programs or click „Browse“ and find program launcher on the disk.
  7. Select „JavaFX Scene Builder“ in „Associated editors“ and click button „Default“. „JavaFX Scene Builder“ should be a default editor for FXML now.

[wp_ad_camp_1]

JavaFX Example

We are ready, let’s create simple JavaFX application.

  1. Create new „JavFX project“ and create package „org.korecky.javafxexample“ (or another, depends on you)
  2. Create MainForm.java class and implements „javafx.fxml.Initializable“ interface in package „org.korecky.javafxexample“ (or in your package). Code souhld look:
    package org.korecky.javafxexample;
    
    import java.net.URL;
    import java.util.ResourceBundle;
    
    public class MainForm implements javafx.fxml.Initializable {
    
    	@Override	
    	public void initialize(URL location, ResourceBundle resources) {				
    	}	
    }
  3. Create MainForm.fxml – Java FXML file in package „org.korecky.javafxexample“ (or in your package)
  4. Eclipse should auto-open your „MainForm.fxml“ in „JavaFX Scene Builder“
  5. Set „Controller class“ in „Code“ panel to your MainForm.java, in my case „org.korecky.javafxexample.MainForm“. It is very important, this stemp connect your JAVA code with FXML form.
  6. Drag and drop „Button“ from „Library“ to your form in scene builder. And set button properties:
    fx:id = btnPrintHello
    Text = Print Hello

  7. Drag and drop „Text Field“ from „Library“ to your form in scene builder. And set text field properties:
    fx:id = txfHello

  8. Save file and close scene builder
  9. Let’s finish binding between FXML and our java class. Create instance of each control by adding line like this one:
    @FXML private TextField txfHello;

    txfHello is fx:id of referenced control.
    Complete code of MainForm.java:

    
    package org.korecky.javafxexample;
    
    import java.net.URL;
    import java.util.ResourceBundle;
    
    import javafx.event.ActionEvent;
    import javafx.event.EventHandler;
    import javafx.fxml.FXML;
    import javafx.scene.control.Button;
    import javafx.scene.control.TextField;
    
    public class MainForm implements javafx.fxml.Initializable {
    	@FXML
    	private TextField txfHello;
    	@FXML
    	private Button btnPrintHello;
    
    	@Override	
    	public void initialize(URL location, ResourceBundle resources) {		
    		btnPrintHello.setOnAction(new EventHandler() {
    		    @Override public void handle(ActionEvent e) {
    		    	txfHello.setText("Hello!");
    		    }
    		});		
    	}	
    }
    
  10. We have to create no last class for running our JavaFX scene. Create „JavaFX Main Class“ named „Main.java“ in packge „org.korecky.javafxexample“ (or in your package)

[wp_ad_camp_1]

We will open our MainForm by adding these lines to method „start“ in the class.


		Parent root;
		try {
			root = FXMLLoader.load(getClass().getResource("MainForm.fxml"));
		} catch (IOException e) {
			e.printStackTrace();
			return;
		}
		Scene scene = new Scene(root);
		primaryStage.setScene(scene);
		primaryStage.sizeToScene();
		primaryStage.show();

Complete code of Main.java:


package org.korecky.javafxexample;

import java.io.IOException;

import javafx.application.Application;
import javafx.fxml.FXML;
import javafx.fxml.FXMLLoader;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.TextField;
import javafx.stage.Stage;

public class Main extends Application {
	@Override
	public void start(Stage primaryStage) {
		Parent root;
		try {
			root = FXMLLoader.load(getClass().getResource("MainForm.fxml"));
		} catch (IOException e) {
			e.printStackTrace();
			return;
		}
		Scene scene = new Scene(root);
		primaryStage.setScene(scene);
		primaryStage.sizeToScene();
		primaryStage.show();
	}

	public static void main(String[] args) {
		launch(args);
	}
}
  1. Let’s run our Main class and click on button „Print Hello“!

Download Eclipse project

You can download this example as complete Eclipse project here.
[wp_ad_camp_1]

Napsat komentář

Vaše emailová adresa nebude zveřejněna. Vyžadované informace jsou označeny *