Today I'd like to show you how to create a dialog box in compiled JavaFX Script, as well as show you the GroupPanel layout component which is incredibly helpful in laying out dialog boxes. Here are the screenshots of the program's UI, followed by the program's code. I'll wrap up this post with a discussion that sheds some light on this example.
When you click the Favorites menu item, the following dialog appears. I've taken the liberty of filling out the fields:
Here's the program code:
/*
* CompiledGroupPanel.fx
*
* Developed 2008 by James L. Weaver (jim.weaver at lat-inc.com)
* to serve as a JavaFX Script example.
*/
import javafx.ui.*;
import java.lang.System;
Frame {
var dlg:Dialog
var firstName:String
var lastName:String
var favoriteBand:String
var favoriteMovie:String
title: "Bag the GridBag"
width: 400
height: 250
visible: true
menubar:
MenuBar {
menus: [
Menu {
text: "Options"
items: [
MenuItem {
text: "Favorites..."
action:
function():Void {
dlg = Dialog {
modal: true
title: "Favorite Things"
visible: true
content:
GroupPanel {
var firstNameRow = Row { alignment: Alignment.BASELINE }
var lastNameRow = Row { alignment: Alignment.BASELINE }
var favoriteBandRow = Row { alignment: Alignment.BASELINE }
var favoriteMovieRow = Row { alignment: Alignment.BASELINE }
var labelsColumn = Column {
alignment: Alignment.TRAILING
}
var fieldsColumn = Column {
alignment: Alignment.LEADING
}
rows: [
firstNameRow,
lastNameRow,
favoriteBandRow,
favoriteMovieRow
]
columns: [
labelsColumn,
fieldsColumn
]
content: [
SimpleLabel {
row: firstNameRow
column: labelsColumn
text: "First Name:"
},
TextField {
row: firstNameRow
column: fieldsColumn
columns: 15
background: Color.WHITE
focusTraversalKeysEnabled: true
value: bind firstName with inverse
},
SimpleLabel {
row: lastNameRow
column: labelsColumn
text: "Last Name:"
},
TextField {
row: lastNameRow
column: fieldsColumn
columns: 15
background: Color.WHITE
focusTraversalKeysEnabled: true
value: bind lastName with inverse
},
SimpleLabel {
row: favoriteBandRow
column: labelsColumn
text: "Favorite Band:"
},
TextField {
row: favoriteBandRow
column: fieldsColumn
columns: 20
background: Color.WHITE
focusTraversalKeysEnabled: true
value: bind favoriteBand with inverse
},
SimpleLabel {
row: favoriteMovieRow
column: labelsColumn
text: "Favorite Movie:"
},
TextField {
row: favoriteMovieRow
column: fieldsColumn
columns: 25
background: Color.WHITE
value: bind favoriteMovie with inverse
}
]
}
buttons: [
Button {
text: "OK"
defaultButton: true
action:
function():Void {
System.out.println("First name: {firstName}
Last name: {lastName}
Favorite band: {favoriteBand}
Favorite movie: {favoriteMovie}");
dlg.hide();
}
}
]
};
}
}
]
}
]
}
onClose:
function():Void {
System.exit(0);
}
}
Creating a Dialog
To create and display a dialog box, we're creating an instance of the Dialog class, and setting its visible attribute to true. We're assigning a reference to the Dialog instance to the variable named dlg, so that its hide() function can be invoked when appropriate. A Dialog has a content attribute which defines what will appear in the dialog, and it has a buttons attribute that allows you to define the buttons and their functionality when activated.
Using the Most Excellent GroupPanel Layout Component
For some reason, I've always resisted using the GridBagLayout in Java. I know that others have used it successfully, but I just seem to prefer using a combination of layout managers to get the job done. One especially thorny layout task for me (using either approach) has been creating a column of labels that have corresponding UI components beside them, all neatly lined up as shown in the previous screenshot. The GroupPanel layout component excels at this task, allowing you to define named rows and columns, and their alignments. You then place each UI component at a given row and column.
This example uses the bind with inverse keywords to keep the UI in sync with the model (which in this simple example program is some variables defined in the declarative expression). To demonstrate that the binding works, the values that you enter in the dialog box are printed to the console when you active the OK button in the dialog box.
JavaFX Script Boot Camp Announcement
As a heads-up, I will be offering a JavaFX Script 2.5 day "boot camp" on Wednesday, April 9 through Friday, April 11, 2008 (ending at noon) in Indianapolis, Indiana. This course is designed to get you quickly up to speed in JavaFX Script application development. A primary reference for this course is my JavaFX Script book, but the course has its own syllabus which includes material covered in the book as well as up to the minute developments in compiled JavaFX Script. Registration will open soon, and for this pilot class I am accepting 12 students. The cost of this pilot class will be 900 USD per student. Additional students from the same organization will be 600 USD. You'll need to bring your laptop computer with the latest versions of the JavaFX Script downloads (which I'll specify in more detail as the class date approaches). The prerequisite for the class will be the completion of a JavaFX Script programming assignment that I'll post soon to this weblog. I'm looking forward to teaching this class and hope that you can attend!
0 comments:
Post a Comment