12 thoughts on “Adding a Custom JavaFX Component to Scene Builder 2.0 (Part 2)”

1. I was searching for a clean approach to create custom components. Your blog helped me a lot to get there. The problem comes with the two possibilities to define a controller of a fxml-document. Providing a controller in the fxml via fx:controller allows the designer to use all the features of the JavaFX Scene Builder. While importing such a file in the builder creates only a copy of its content, like you mentioned in:
   http://rterp.wordpress.com/2014/05/21/adding-custom-javafx-components-to-scene-builder-2-0/

   Assigning the controller to the FXML with the FXMLLoader in the constructor of the controller, combined with all the other stuff you’ve explained above results a nice encapsulated custom component. The only drawback is you will not see fx.ids or event handler names in the scene builder, because there is no controller associated.

   To solve the problem I parsed the fxml file, replaced the fx:controller string before loading the fxml document with the FXMLLoader.load(InputStream) method. In my other attempt I’ve written my own FXMLLoader to handle the “fx:controller=” attribute in a different way when a controller was already specified.

   Loading...

   Reply

   • thanks for your sharing, but i still don’t know how to solve “Controller value already specified” when i click button in other scene………..

     Loading...

     Reply

2. Pingback: JavaFX links of the week, August 4 // JavaFX News, Demos and Insight // FX Experience

3. For various reasons I knew I wanted to do this, but didn’t know where to start until I read your blog post here. Your post was crucial to my solution.

   But I wanted to go one step further. From what I can tell, your technique only allows one to build new, custom JavaFX components by compositing existing, stock JavaFX components. I wanted to be able create new, SceneBuilder-recognizable JavaFX components that are based on my custom subclasses of ANY JavaFX component.

   I’m happy to say that I accomplished this today, and, except for one required, rather kludgy, code segment in the custom JavaFX class, the solution seems elegant to me.

   Here’s my revised version of the fxml file. … (The same file, with no changes, will work for ANY custom JavaFX class I write as long as it subclasses Node or any of its descendants.)

   That’s it for the fxml file!

   And here’s a sample class that loads that fxml file and subclasses TextField so it can enforce number-only entry in a JavaFX TextField …

   package numberTextField;

   import java.io.*;
   import javafx.fxml.*;
   import java.util.regex.*;
   import javafx.beans.value.*;
   import javafx.scene.control.*;
   import javafx.util.converter.*;

   public class NumberTextField extends TextField implements ChangeListener
   /*
   This class only allows numbers to be entered into the text field.
   In addition, the entered number is forced to be >= mMin and <= mMax.

   We employ a kludge here to get around leaking "this" in our constructor.
   (Leaking "this" in a constructor can cause concurrency problems – the
   recipient of a "this" injected from within a constructor could start
   using the object referenced by "this" before it has finished constructing
   itself.) We override the layoutChildren() method of our super class,
   because it is guaranteed to be called early on, and we want that guaranteed
   early call so the class can load itself from its fxml file outside the
   constructor. (See, for example, the "fxmlLoader.setRoot(this);" line below.)

   We don't use a factory design pattern because we want this class's jar to
   appear as a custom component in SceneBuilder and SceneBuilder requires a public
   default constructor. So we work around this impasse by using a boolean
   flag ("mHasBeenInitialized") that is checked in our layoutChildren() method
   and if false we call the init() method that, among other things, loads the
   class's fxml file.
   */
   {
   // class variables
   private static final String cMyFXMLPath = "NumberTextField.fxml";
   private static final long cDefaultMin = 0;
   private static final long cDefaultMax = 100;
   private static final int cWidth = 40;
   private static final int cHeight = 40;
   private static final Pattern cNumberPattern = Pattern.compile( "^(-?0|-?[1-9]\\d*)(\\.\\d+)?(E\\d+)?$" );
   private static final NumberStringConverter cConverter = new NumberStringConverter();
   // member variables
   private boolean mHasBeenInitialized = false; // See above
   private final long mMin;
   private final long mMax;

   public NumberTextField()
   // SceneBuilder requires a default constructor.
   {
   this(cDefaultMin, cDefaultMax);
   }

   public NumberTextField(long min,
   long max)
   {
   super();
   mMin = min;
   mMax = max;
   }

   private void init() // See note above.
   {
   FXMLLoader fxmlLoader;

   if (mHasBeenInitialized)
   return;

   mHasBeenInitialized = true;
   fxmlLoader = new FXMLLoader(getClass().getResource(cMyFXMLPath));
   fxmlLoader.setRoot(this);
   fxmlLoader.setController(this);
   try
   {
   fxmlLoader.load();
   }
   catch (IOException exception)
   {
   throw new RuntimeException(exception);
   }
   textProperty().addListener(this);
   }

   @Override protected void layoutChildren()
   {
   if (!mHasBeenInitialized) // See note above.
   init();
   super.layoutChildren();
   }

   @Override public void changed(ObservableValue observable,
   String oldValue,
   String newValue)
   // This is the code that prevents anything but numbers from
   // being entered into the text field. In addition, the entered
   // number is forced to be >= mMin and mMax)
   setText(cConverter.toString(mMax));
   else if (value.longValue() “Show Preview in Window” and try typing or pasting anything into the NumberTextField other than numbers. It blocks all non-number input.

   This is a really powerful, generalizable technique for creating FXML-based JavaFX components.

   Thank you so much for providing me the gateway to this!

   Loading...

   Reply

4. For various reasons I knew I wanted to do this, but didn’t know where to start until I read your blog post here. Your post was crucial to my solution.

   But I wanted to go one step further. From what I can tell, your technique only allows one to build new, custom JavaFX components by compositing existing, stock JavaFX components. I wanted to be able create new, SceneBuilder-recognizable JavaFX components that are based on my custom subclasses of ANY JavaFX component.

   I’m happy to say that I accomplished this today, and, except for one required, rather kludgy, code segment in the custom JavaFX class, the solution seems elegant to me.

   Here’s my revised version of the fxml file. … (The same file, with no changes, will work for ANY custom JavaFX class I write as long as it subclasses Node or any of its descendants.)

   	<?xml version="1.0" encoding="UTF-8"?>
   	<?import javafx.scene.*?>
   	<!--
   	The use of 'fx:root' and 'type="Node"' below is the 'magic'
   	that allows our custom component to inherit from, and therefore
   	customize, ANY JavaFX Node it wants to!
   	-->
   	<fx:root type="Node" xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1"/>
   	

   That’s it for the fxml file!

   And here’s a sample class that enforces only number entry in a JavaFX TextField …

   	package numberTextField;
   
   	import java.io.*;
   	import javafx.fxml.*;
   	import java.util.regex.*;
   	import javafx.beans.value.*;
   	import javafx.scene.control.*;
   	import javafx.util.converter.*;
   
   
   	public class NumberTextField extends TextField implements ChangeListener<String>
   		/*
   		This class prevents anything but numbers from being entered into the text
   		field. In addition, the entered number is forced to be >= mMin and <= mMax.
   
   		We employ a kludge here to get around leaking "this" in our constructor.
   		(Leaking "this" in a constructor can cause concurrency problems - the
   		recipient of a "this" injected from within a constructor could start
   		using the object referenced by "this" before it has finished constructing
   		itself.) We override the layoutChildren() method of our super class,
   		because it is guaranteed to be called early on, and we want that guaranteed
   		early call so the class can load itself from its fxml file outside the
   		constructor. (See, for example, the "fxmlLoader.setRoot(this);" line below.)
   
   		We don't use a factory design pattern because we want this class's jar to
   		appear as a custom component in SceneBuilder and SceneBuilder requires a public
   		default constructor. So we work around this impasse by using a boolean
   		flag ("mHasBeenInitialized") that is checked in our layoutChildren() method
   		and if false we call the init() method that, among other things, loads the
   		class's fxml file.
   		*/
   		{
   		// class variables
   		private static final String			cMyFXMLPath = "NumberTextField.fxml";
   		private static final long			cDefaultMin = 0;
   		private static final long			cDefaultMax = 100;
   		private static final int			cWidth = 40;
   		private static final int			cHeight = 40;
   		private static final Pattern		cNumberPattern = Pattern.compile( "^(-?0|-?[1-9]\\d*)(\\.\\d+)?(E\\d+)?$" );
   		private static final NumberStringConverter	cConverter = new NumberStringConverter();
   		// member variables
   		private boolean				mHasBeenInitialized = false;    // See above
   		private final long				mMin;
   		private final long				mMax;
   
   
   		public NumberTextField()
   		// SceneBuilder requires a default constructor.
   		{
   		this(cDefaultMin, cDefaultMax);
   		}
   
   
   		public NumberTextField(long min,
   				long max)
   		{
   		super();
   		mMin = min;
   		mMax = max;
   		}
   
   
   		private void init()	    // See note above.
   		{
   		FXMLLoader	fxmlLoader;
   	
   		if (mHasBeenInitialized)
   			return;
   	
   		mHasBeenInitialized = true;
   		fxmlLoader = new FXMLLoader(getClass().getResource(cMyFXMLPath));
   		fxmlLoader.setRoot(this);
   		fxmlLoader.setController(this);
   		try
   			{
   			fxmlLoader.load();
   			}
   		catch (IOException exception)
   			{
   			throw new RuntimeException(exception);
   			}
   		textProperty().addListener(this);
   		}
   
   
   		@Override protected void layoutChildren()
   		{
   		if (!mHasBeenInitialized)	// See note above.
   			init();
   		super.layoutChildren();
   		}
   
   
   		@Override public void changed(ObservableValue<? extends String> observable,
   					  String oldValue,
   					  String newValue)
   		// This is the code that prevents anything but numbers from
   		// being entered into the text field. In addition, the entered
   		// number is forced to be >= mMin and <= mMax.
   		{
   		Number	    value;
   
   		if (cNumberPattern.matcher(newValue).matches())
   			{
   			value = cConverter.fromString(newValue);
   			if (value.longValue() > mMax)
   			setText(cConverter.toString(mMax));
   			else if (value.longValue() < mMin)
   			setText(cConverter.toString(mMin));
   			}
   		else if (!newValue.isEmpty())
   			{
   			setText(oldValue);
   			}
   		}
   		}
   	

   When you build this jar and import it into SceneBuilder your subclass of the stock JavaFX TextField is available for all the same SceneBuilder manipulations that the stock TextField supports. To prove this, just drag the NumberTextField control to the compositing pane and try editing its properties. It behaves just like the stock TextField. Then invoke the menu item “Preview” -> “Show Preview in Window”, and try typing or pasting anything into the NumberTextField other than numbers. It blocks all non-number input.

   This is a really powerful, generalizable technique for creating FXML-based JavaFX components.

   Thank you so much for providing me the gateway to this!

   Loading...

   Reply

   • Thanks for the feedback Dean!

     Also, thank you for sharing your work, this looks like a really elegant solution for importing ‘home-grown’ JavaFX custom components.

     Loading...

     Reply

5. Thanks for an excellent post, I wonder if the project can be downloaded somewhere, I had difficulties in importing the Jar file as well as some omissions (the CSS file for example)
   Thanks in advance.

   Loading...

   Reply

6. Thank you, it really helped me creating my first custom control (it’s a status bar that i use on all my screens in my app to show infos).
   I have added an ObjectProperty, so that i can change my status icon via FXML an not only in code:

   Sample:
   private ObjectProperty icon;

   public ObjectProperty iconProperty() {
   if (icon == null) {
   icon = new ObjectPropertyBase() {
   @Override
   public Object getBean() {
   return StatusBar.this;
   }

   @Override
   public String getName() {
   return “icon”;
   }

   @Override
   public void setValue(Image image) {
   imgView.setImage(image);
   }

   @Override
   public Image getValue() {
   return imgView.getImage();
   }
   };
   }
   return icon;
   }

   public void setIcon(Image icon) {
   iconProperty().setValue(icon);
   }

   public Image getIcon() {
   return icon == null ? null : icon.getValue();
   }

   Now i can change/set the Image in FXML:

   That’s really nice!

   One question: Is it possible to set/change the custom control icon in scenebuilder? All custom controls have the ? icon, an custom icon would be nice.

   Greetings,
   Tom

   Loading...

   Reply

   • I believe this may be in the works, but I don’t think it is possible in the current version of SceneBuilder.

     Loading...

     Reply

7. zoi.css please.

   thank you.

   Loading...

   Reply

8. yaptığınız uygulamayı deniyorum
   ancak .jar yapıp SceneBuilder import .jar ile yüklemiyor???

   örnek kaynak kodu paylaşabilir misiniz?

   Loading...

   Reply

9. Please

   Can you share your project on GitHub ?

   Loading...

   Reply