JavaFXComposerBindingTutorial

Contents

JavaFX Composer Binding Tutorial

Goal

This tutorial shows how to define JavaFX binding within the JavaFX Composer.

During this tutorial you will learn how to create an application which allows user's to enter a text that contains a comma-separated list items. The user's input will be automatically parsed and load up to a list view using JavaFX binding.

Preparation

Create a new JavaFX project using "JavaFX | JavaFX Desktop Business Application" project template. A project should be created and an empty design file should be opened in an Editor area.

Add Components

Drag and drop the following components from "JavaFX Controls" category in Palette to the Design:

  • Label (label) - will be used as a label for the input text box
  • Text Box (textBox) - will be used for user's input
  • Label (label2) - will be used as a label for the result in a list
  • List View (listView) - will be displaying the parsed result.

Move the component on the scene using mouse to align the components one below another. Also you may resize the width of the text box to fill the scene by selecting the text box and dragging the right handle on its selection boundary.

The result should look like this:

File:javafxcomposer-tutorial-databinding-add-components.png

Label Text

Select the first label in the Design. Then go to the Properties window. It should contains the "text" property with its initial value set to "Label". Change the text to "Enter comma-separated items:". Similar change the text of the second label to "Parsed Items:".

The result should look like this:

File:javafxcomposer-tutorial-databinding-labels-text.png

Open List Items Details

Now we have to bind the list items to user's input in text box. To do so, you have to open Details panel of the "Items" property of listView component.

First select the listView component, go to Properties window, click on the button on the right-side of the "Items" property. It opens the Details panel. There click on "Bind" button in the top-right corner of the dialog.

File:javafxcomposer-tutorial-databinding-open-list-items.png

In the "Bind" panel you have a field for specifying the bind expression as well as "Generate" button for creating a new field generated in the source code to which the list items property would be bound.

For now ignore the field and the buttons. Below there are three lists:

  • components
  • properties and expressions of selected component
  • converters

We want to bind the list items to "textBox" component, "text" property and convert the "String" value to "String[]" separated by "," character.

Therefore select the appropriate values in the lists as shown:

File:javafxcomposer-tutorial-databinding-list-items-bind.png

Note that the upper "field" gets automatically updated each time you select an item in lists. Close the dialog.

Run

Now we have whole application done. Click on "Run" icon in the main window toolbar.

File:javafxcomposer-tutorial-databinding-list-run-project.png

The design file is saved, the project is compiled and started.

The final application should look like the picture below. If you type a comma-separated list of items into the text box and press Enter, the list view refreshs its items to ones entered in the text box.

File:javafxcomposer-tutorial-databinding-final-application.png

Not logged in. Log in, Register

By use of this website, you agree to the NetBeans Policies and Terms of Use. © 2012, Oracle Corporation and/or its affiliates. Sponsored by Oracle logo