Project "FXComparer" part 2 - Building the UI using FXML and JavaFX Sceen Builder

This is the second part in the "FXComparer" series where we will see how we can design a fluid application using the FXML layout files. We will be using JavaFX Sceen Builder which is free to download at http://www.oracle.com/technetwork/java/javafx/tools/index.html.

Instead of trying to write down how to create the UI I have recorded a video describing all the steps to turn the sketch into a real layout, enjoy.

The video was created using CamStudio and Windows Movie Maker. I am not sure that those are the best tools for the job. It took quite a while to edit the movie and add the description text. Also the text effects in Movie Maker are a bit limited and I would like to have a tool where you could highlight areas and at least add a background color to the texts to make them more readable. If you know any better way to create a screen cast please post a comment.

Some helpful tips regarding the Scene Builder

• Remember: Ctrl + P for a quick preview of you UI.
• Wrapping nodes instead of moving around. If you right-click on a node in the hierarchy pane you will see a entry in the menu for "Wrap in". Selecting this will give you a menu with the different layout which you can wrap the node in. Super nice! Likewise you can unwrap a layout-node by selecting unwrap and the node will be removed.
• Keep an eye on the "Layout" section for the different nodes. Here you will find component specific layout options which will help you to create a better UI. Example like the AnchorPane constraints or the VGrow constraints for the VBox layout.

Using the FXML in the application

The FXML is easy loaded into the application using the FXMLLoader. Below is a little stub for loading a FXML-file located in /src/main/fxml/ into a stage and showing it.

public class FXCompare extends Application {
   
 @Override
 public void start(Stage stage) throws Exception {  
  stage.setScene(new Scene(FXMLLoader.load(
                    getClass().getResource("/fxml/layout.fxml")));
  stage.show();
 }
 
 public static void main(String[] args) {
  launch(args);
 }
}

That is all for today. In the next post we will "hook" up the FXML with a controller so we can interact with the users and see how we can present data in a TableView.

For the the full source of the FXComparer see: https://code.google.com/p/fx-comparer/.

The articles in this series are the following:

1. Defining the project, setup using Eclipse and Maven.
2. Building the UI using FXML and JavaFX Sceen Builder.
3. Handling input and showing results using a TableView.
4. Packaging the application.