How to create an FXML file for an already created new component in java, than add it to the scene designer?

Question

I am new to javaFX. I created a custom search field (extends TextField) in java, check the image:

I tested it with a test class and worked.

I want to know now, is it possible to create its FXML file, than add this component to the scene designer? how to do it? Thanks in advance.

Answer 1

How to import a component from a JAR into a SceneBuilder

You can put your component in a Jar and import it into a SceneBuilder. You do not need to create an FXML file for your component in order to add it to the SceneBuilder library panel.

See Adding Custom Components to a Library in the JavaFX User Guide.

To import custom GUI components from a JAR or FXML file:

• Choose the Import JAR / FXML command in the menu of the Library panel or drag a JAR or FXML file directly from your system file (Explorer or Finder) and drop it into the Library panel

• In the Open dialog box, navigate to the location of the JAR or FXML file that you want to import. Import dialog similar to the one shown in Figure 8-4 . The contents of the JAR file are checked and all Java classes that are defined as the corresponding user components are displayed in the dialog box. The contents of the FXML file are analyzed to ensure that the added component is valid and self-contained.

• In the Import dialog box, select or deselect items from the list of items you can import.

• Click Import Features. Imported items are added to the custom section of the Library panel. They can be used immediately, and they are saved in the library even after restarting Scene Builder

Note. SceneBuilder also supports importing components based on FXML, not just simple code components. This answer discusses importing only codes that do not contain FXML.

An example of using an imported component

Here is a component of a custom search field that I imported into SceneBuilder using the method described above.

The top search bar is in the Scene Builder design panel, the bottom search bar is the result of using the script preview function and finding happiness.

Generated SceneBuilder Code

Here is the fxml file generated by SceneBuilder based on the design. Please note: this was a test scene that I created using SceneBuilder to test an already imported component - it was not part of the component import process.

<?xml version="1.0" encoding="UTF-8"?> <?import javafx.scene.text.*?> <?import org.jewelsea.*?> <?import javafx.geometry.*?> <?import javafx.scene.control.*?> <?import java.lang.*?> <?import javafx.scene.layout.*?> <VBox maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" spacing="10.0" xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1"> <children> <Label text="Search Field Import Test"> <font> <Font size="16.0" /> </font> </Label> <SearchField /> </children> <padding> <Insets bottom="10.0" left="10.0" right="10.0" top="10.0" /> </padding> </VBox> 

Example (Imported) Component Code

Code for the search field that was imported:

 package org.jewelsea; import javafx.geometry.Insets; import javafx.scene.control.Button; import javafx.scene.control.Label; import javafx.scene.control.TextField; import javafx.scene.layout.HBox; import javafx.scene.layout.StackPane; import javafx.scene.layout.VBox; public class SearchField extends StackPane { private final TextField textField; private final Button searchButton; private final Label searchResults; public SearchField() { textField = new TextField(); textField.setPromptText( "Search Text" ); searchButton = new Button("Search"); searchResults = new Label(); VBox layout = new VBox( 20, new HBox( 10, textField, searchButton ), searchResults ); layout.setPadding(new Insets(10)); searchButton.setOnAction(event -> searchResults.setText( "Search result for " + textField.getText() ) ); getChildren().setAll( layout ); } } 

Component Prerequisites

In order for the process to work, you need to perform several actions:

• Your component class extends Node.
• There is no argument constructor in your component class.
• Your component class and constructor with no arguments are public.
• The component class is in the package (for example, org.jewelsea) - it cannot have any package.
• The class of your component is packaged in a JAR file that was imported into SceneBuilder as described above.

Troubleshooting

If you are having problems importing JARs, after trying to import JARs, you can use the JAR analysis feature described below to help troubleshoot (which may help or just provide some cryptic information to confuse you more).