Native JavaFX Controls

As a rich client development platform, JavaFX comes loaded with several GUI controls found in the javafx.scene.control package. These controls help standardize the look, feel, and expected behavior of an application. Let us take a look at how to use some of the more common controls.

Label & Input TextBox

The following shows a snippet of code used to create a form using Label and TextBox instances. Labels are used to display static text while the TextBox instances are used to accept text input. Note that you can assign an id property to each component so it can be referenced in other part of the code.

var nameRow = HBox {

spacing:7

content:[

VBox{content:[Label{text:"First Name"},TextBox{id:"fName"}]}

VBox{content:[Label{text:"Last Name"},TextBox{id:"lName"}]}

]

}

The snippet above would produce the form elements shown in the figure below:

Button

The code below shows how to declare an instance of Button control. It also shows how to add code to handle the button's click.

Button {

text:"Click me, I am Button"

font: Font {name:"Arial Black" size:18}

effect:DropShadow{offsetY:3 offsetX:3}

action:function():Void {

Alert.inform("Ouch, you clicked me!");

}

The previous code snippet creates the button shown below. When the button is clicked, the function assigned assigned to property action is executed.

RadioButton / Checkbox

To provide section choices, JavaFX offers the RadioButton and the CheckBox controls. The code below shows how to create a RadioButton:

def rdoBtns = ToggleGroup{};

var titleRow = HBox {

spacing:7

content:[

HBox{

nodeVPos:VPos.CENTER

spacing:7

content:[Label{text:"Title:"}

RadioButton{text:"Programmer" toggleGroup:rdoBtns id:"pgmr"}

RadioButton{text:"Manager" toggleGroup:rdoBtns id:"mngr"}

RadioButton{text:"Genator" toggleGroup:rdoBtns id:"gntr"}

]

}

]

}

The snippet above produces the result shown in the figure below. Notice the ToggleGroup instance used to group the button choices.

Checkboxes are created in a similar fashion using the CheckBox class as shown below:

CheckBox{id:"isattnd" text:"Mark as Attendee"}

ProgressBar

An extremely useful control in creating rich and connected app clients in JavaFX is the ProgressBar. This class lets you show progress of long running processes (file upload, music download, etc). In the following example, variable total represents the total unit of work to be done. Variable counter is update as work is being done.

var total = 400;

var counter = 215;

ProgressBar {

progress: bind ProgressBar.computeProgress(total, counter)

effect:DropShadow{offsetY:3 offsetX:3}

}

The snippet above produces the progress bar shown in the figure below:

ListView

The code below shows how to use the ListView control to display list of items. The control takes a data model (a sequence of items) as its data source. The code below shows how it is used:

ListView {

width:w-200

height:h-50

effect:DropShadow{offsetY:3 offsetX:3}

items: for (i in [1..50]) "Cloud {%5s i}"

}

The snippet above would produce the ListView shown in the following figure:

More Controls in Future Versions

Sun/Oracle, creator of JavaFX, is always adding and improving the set of available controls. Future version (1.3, for instance) have already introduced several new controls. Check back soon for coverage.

The materials on this website represent a small sample of content loosely based on the book JavaFX Application Development Cookbook. The book offers far more content with over 80 recipes covering a range of topics from basics to advanced concepts.

Buy the Book

You can get your copy of the book directly from the publisher. Click here to order!

JavaFX Recipes & Tutorials

Content