JavaFX Applets Meet Google Chrome

ngaongan — Mon, 27 Jul 2009 00:49:00 +0000

In the JFX Custom Nodes category of this blog, graphics designer Mark Dingman of Malden Labs and I have been collaborating on an imaginary Sound Beans application. This category contains a growing series of posts in which we are demonstrating how to create JavaFX UI custom controls. This series also provide a case study in how a graphics designer and an application developer can work together effectively in developing JavaFX applications. Today I’d like to highlight the recent Google Chrome browser announcement by showing you how to create and run a JavaFX applet in Chrome. Here’s a screenshot of the TableNode example from an earlier post running as a JavaFX applet in Chrome:

To try this out, first obtain Google Chrome and install it. Then obtain Java SE 6 Update 10 and install it as well. By the way, installing Java SE 6 update 10 will enable this JavaFX applet to run on Firefox 3 and Internet Explorer as well. Go ahead and run this example, being sure to scroll the custom TableNode control and to click on its rows. Also, select the Burn icon and move the slider to demonstrate the custom ProgressNode control.

Looking at the Code

In addition to the ButtonNode.fx, MenuNode.fx, DeckNode.fx, ProgressNode.fx and TableNode.fx files from previous posts in this series, you’ll need the following files:

TableNodeExampleApplet.fx:

/*

* TableNodeExampleApplet.fx –

* An example of using the TableNode custom node in an Applet. It also

* demonstrates the ProgressNode, DeckNode, MenuNode and ButtonNode

* custom nodes

*

* Developed 2008 by James L. Weaver (jim.weaver at lat-inc.com)

* to demonstrate how to create custom nodes and applets in JavaFX

*/

package com.javafxpert.table_node_example.ui;

import javafx.application.*;

import javafx.ext.swing.*;

import javafx.scene.*;

import javafx.scene.geometry.*;

import javafx.scene.image.*;

import javafx.scene.layout.*;

import javafx.scene.paint.*;

import javafx.scene.text.*;

import javafx.scene.transform.*;

import java.lang.Object;

import java.lang.System;

import com.javafxpert.custom_node.DeckNode;

import com.javafxpert.custom_node.TableNode;

import com.javafxpert.custom_node.ProgressNode;

import com.javafxpert.custom_node.ButtonNode;

import com.javafxpert.custom_node.MenuNode;

import com.javafxpert.table_node_example.model.TableNodeExampleModel;

var deckRef:DeckNode;

Application

}

{
var model = TableNodeExampleModel.getInstance();
var stageRef:Stage;
var menuRef:MenuNode;
stage:
stageRef = Stage {
fill: Color.BLACK
content: [
deckRef = DeckNode {
fadeInDur: 700ms
content: [
// The "Splash" page
Group {
var vboxRef:VBox;
var splashFont =
Font {
name: "Sans serif"
style: FontStyle.BOLD
size: 12
};
id: "Splash"
content: [
ImageView {
image:
Image {
url: "{__DIR__}images/splashpage.png"
}
},
vboxRef = VBox {
translateX: bind stageRef.width - vboxRef.getWidth() - 10
translateY: 215
spacing: 1
content: [
Text {
content: "A Fictitious Audio Application that Demonstrates"
fill: Color.WHITE
font: splashFont
},
Text {
content: "Creating JavaFX Custom Nodes"
fill: Color.WHITE
font: splashFont
},
Text {
content: "Application Developer: Jim Weaver"
fill: Color.WHITE
font: splashFont
},
Text {
content: "Graphics Designer: Mark Dingman"
fill: Color.WHITE
font: splashFont
},
]
}
]
},
// The “Play” page
VBox {
var tableNode:TableNode
id: “Play”
spacing: 4
content: [
Group {
content: [
ImageView {
image:
Image {
url: "{__DIR__}images/playing_currently.png"
}
},
Text {
textOrigin: TextOrigin.TOP
content: bind "{tableNode.selectedIndex}"
font: Font {
size: 24
}
}
]
},
tableNode = TableNode {
height: 135
rowHeight: 25
rowSpacing: 2
columnWidths: [150, 247, 25, 70]
tableFill: Color.BLACK
rowFill: Color.#1c1c1c
selectedRowFill: Color.#2d2d2d
selectedIndex: -1
vertScrollbarWidth: 20
vertScrollbarFill: LinearGradient {
startX: 0.0
startY: 0.0
endX: 1.0
endY: 0.0
stops: [
Stop {
offset: 0.0
color: Color.#0b0b0b
},
Stop {
offset: 1.0
color: Color.#343434
}
]
}
vertScrollbarThumbFill: Color.#efefef
content: bind
for (obj in model.playlistObjects) {
if (obj instanceof String)
Text {
textOrigin: TextOrigin.TOP
fill: Color.#b7b7b7
content: obj as String
font:
Font {
size: 11
}
}
else if (obj instanceof Image)
ImageView {
image: obj as Image
}
else
null
}
onSelectionChange:
function(row:Integer):Void {
System.out.println(“Table row #{row} selected”);
}
}
]
},
// The “Burn” page
Group {
var vboxRef:VBox;
id: “Burn”
content: [
vboxRef = VBox {
translateX: bind stageRef.width / 2 - vboxRef.getWidth() / 2
translateY: bind stageRef.height / 2 - vboxRef.getHeight() / 2
spacing: 15
content: [
Text {
textOrigin: TextOrigin.TOP
content: "Burning custom playlist to CD..."
font:
Font {
name: "Sans serif"
style: FontStyle.PLAIN
size: 22
}
fill: Color.#d3d3d3
},
ProgressNode {
width: 430
height: 15
progressPercentColor: Color.#bfdfef
progressTextColor: Color.#0c1515
progressText: bind "{model.remainingBurnTime} Remaining"
progressFill:
LinearGradient {
startX: 0.0
startY: 0.0
endX: 0.0
endY: 1.0
stops: [
Stop {
offset: 0.0
color: Color.#00c0ff
},
Stop {
offset: 0.20
color: Color.#00acea
},
Stop {
offset: 1.0
color: Color.#0070ae
},
]
}
barFill:
LinearGradient {
startX: 0.0
startY: 0.0
endX: 0.0
endY: 1.0
stops: [
Stop {
offset: 0.0
color: Color.#707070
},
Stop {
offset: 1.0
color: Color.#585858
},
]
}
progress: bind model.burnProgressPercent / 100.0
},
ComponentView {
component:
FlowPanel {
background: Color.BLACK
content: [
Label {
text: "Slide to simulate burn progress:"
foreground: Color.#d3d3d3
},
Slider {
orientation: Orientation.HORIZONTAL
minimum: 0
maximum: 100
value: bind model.burnProgressPercent with inverse
preferredSize: [200, 20]
}
]
}
}
]
}
]
},
// The “Config” page
Group {
id: “Config”
content: [
ImageView {
image:
Image {
url: "{__DIR__}images/config.png"
}
}
]
},
// The “Help” page
Group {
id: “Help”
content: [
ImageView {
image:
Image {
url: "{__DIR__}images/help.png"
}
}
]
}
]
},
menuRef = MenuNode {
translateX: bind stageRef.width / 2 – menuRef.getWidth() / 2
translateY: bind stageRef.height – menuRef.getHeight()
buttons: [
ButtonNode {
title: "Play"
imageURL: "{__DIR__}icons/play.png"
action:
function():Void {
deckRef.visibleNodeId = "Play";
}
},
ButtonNode {
title: "Burn"
imageURL: "{__DIR__}icons/burn.png"
action:
function():Void {
deckRef.visibleNodeId = "Burn";
}
},
ButtonNode {
title: "Config"
imageURL: "{__DIR__}icons/config.png"
action:
function():Void {
deckRef.visibleNodeId = "Config";
}
},
ButtonNode {
title: "Help"
imageURL: "{__DIR__}icons/help.png"
action:
function():Void {
deckRef.visibleNodeId = "Help";
}
},
]
}
]
}
/>

Note that the Application class has a stage attribute just as the Frame had in previous examples. Here’s the TableNodeExamplePage.html file that you’ll open in your browser. The draggable param, by the way, enables that neat “pull the applet out of the browser” trick that I’ll show you in a bit:

archive=”javafxrt.jar, Scenario.jar, javafxgui.jar, javafx-swing.jar, TableNodeExample.jar”>

Finally, here’s the Java Web Start TableNodeExampleApplet.jnlp file that is used by the HTML file above:

TableNodeExampleApplet

JMentor

TableNodeExampleApplet

TableNodeExampleApplet

name=”TableNodeExampleApplet”

main-class=”javafx.application.Applet”

width=”500″

height=”400″>

Dragging the Applet out of the Browser and onto the Desktop

As shown in the following screenshot, one of the cool features of Java SE 6 update 10 is that you can drag a Java or JavaFX applet out of the browser and onto the desktop. By default, you press the Alt key while dragging the applet:

Here is our JavaFX Applet living happily on the desktop after the browser has been closed, and the user has selected the Burn page:

Google Chrome will be a Driving Force for RIA

According to Google, Java SE 6 Update 10 is the version that must be used in order to run Java in the Chrome browser. As I’ve mentioned previously, one of the objectives of Java SE 6 Update 10 is to solve the JRE and Java/JavaFX deployment issues. Because Google Chrome is destined to be a great, cross-platform browser, and because it requires the version of Java that makes rich-client Java/JavaFX programs feasible, this will increase the adoption rate of JavaFX applets and applications.

Using the Java Deployment Toolkit with JavaFX Applets

ngaongan — Mon, 27 Jul 2009 00:47:00 +0000

Using the Java Deployment Toolkit with JavaFX Applets

First, let me apologize for resurrecting the very humble JavaFX program shown below, but I want to keep this example very succinct. This will enable you to use it as “starter code” for JavaFX applet deployment. Note: To see more functional JavaFX programs, please see articles in the JFX Custom Nodes category.

Note: Thanks to reader “mbien” (see comments) for pointing our that the colors of the original applet in this post were hideous (my words). I then consulted graphics designer Mark Dingman of Malden Labs who gave me a graphical mock-up from which I created the above applet. Here’s the code for this applet, updated for the JavaFX SDK preview:

/* * BindToFunctionApplet.fx - A compiled JavaFX program that demonstrates * how to create JavaFX applets. * It also demonstrates binding to a function. * * Developed 2008 by Jim Weaver (development) and Mark Dingman (graphic design) * to serve as a JavaFX Script example. */ package com.javafxpert.bind_to_function; import javafx.application.*; import javafx.ext.swing.*; import javafx.scene.*; import javafx.scene.geometry.*; import javafx.scene.paint.*; import javafx.scene.text.*; import javafx.scene.transform.*; import java.lang.Math; class CircleModel { attribute diameter:Integer; bound function getArea():Number { Math.PI * Math.pow(diameter / 2, 2); } } Application { var cModel = CircleModel {}; var componentViewRef:ComponentView; var stageRef:Stage; stage: stageRef = Stage { var labelFont = Font { name: "Sans Serif" style: FontStyle.PLAIN size: 32 } fill: LinearGradient { startX: 0.0 startY: 0.0 endX: 0.0 endY: 1.0 stops: [ Stop { offset: 0.0 color: Color.rgb(0, 168, 255) }, Stop { offset: 1.0 color: Color.rgb(0, 65, 103) } ] } content: [ Circle { centerX: 250 centerY: 250 radius: bind cModel.diameter / 2 fill: LinearGradient { startX: 0.0 startY: 0.0 endX: 0.0 endY: 1.0 stops: [ Stop { offset: 0.0 color: Color.rgb(74, 74, 74) }, Stop { offset: 1.0 color: Color.rgb(9, 9, 9) } ] } }, Text { font: labelFont x: 30 y: 70 fill: Color.BLACK content: bind "Diameter: {cModel.diameter}" }, Text { font: labelFont x: 260 y: 70 fill: Color.BLACK content: bind "Area: {%3.2f cModel.getArea()}" }, componentViewRef = ComponentView { transform: bind Translate.translate(40, stageRef.height - 30 - componentViewRef.getHeight()) component: Slider { minimum: 0 maximum: 400 preferredSize: bind [stageRef.width - 80, 20] value: bind cModel.diameter with inverse } } ] } }

Why Use the Java Deployment Toolkit for Java Applets?

According to Sun’s Java Deployment Toolkit overview page, “Desktop clients have a wide variety of Java Platforms installed, from the Microsft VM to Sun’s latest Java SE 6 updates. They run various operating systems from Sun, Microsoft, Apple, Red Hat, and others, and are connected to the internet at a wide range of connection speeds. How are content providers to deliver Java content to all of these clients with the best possible user experience?

Various sources have published JavaScript techniques for detecting and deploying the Java Platform for use by Java Plug-In applets and Java Web Start applications. These scripts generally have serious limitations and fail to support the varied combinations of browser, OS, and configuration options found on today’s clients.

The Java Deployment Toolkit allows developers to easily deploy applets and applications to a large variety of clients with JavaScripts. It also provides advice on using some of the most powerful features available in Java Web Start and Java Plug-In, and an outline of the differences between these two deployment vehicles.“

In a nutshell, the Java Deployment Toolkit is a JavaScript library maintained by Sun and always available at runtime by your HTML code. This library has several methods that perform tasks such as sensing Java-related infrastructure and installing the JRE on client machines. We’ll use one of these methods, namely runApplet, to run a JavaFX applet with a specified minimum JRE version. Here’s the HTML and JavaScript code I’m using to deploy today’s example applet:

var attributes = {codebase:'http://jmentor.com/JFX/BindToFunctionApplet', code:'javafx.application.Applet.class', archive:'BindToFunctionApplet.jar, javafxrt.jar, Scenario.jar, javafxgui.jar, javafx-swing.jar', width:500, height:500, java_arguments:'-Djnlp.packEnabled=true'}; var parameters = {"ApplicationClass":"com.javafxpert.bind_to_function.BindToFunctionApplet", "draggable":"true"}; var version = '1.6.0' ; deployJava.runApplet(attributes, parameters, version);

Notice that the above code enables dragging the applet onto the desktop, as well as using Pack200 formatted JAR files, if the client machine has Java SE 6 update 10 installed. Give the applet a whirl to see its deployment behavior on your machine. By the way, according to the Java SE 6 Update 10 plug-in docs, “by default, the gesture to drag the applet out of the web browser is Alt + Left click + Drag.”

Six Degrees of Aynsley Dunbar: BandmatesFX Example JavaFX App Continued

ngaongan — Mon, 27 Jul 2009 00:46:00 +0000

So far in this Freebase Contributing Artists App series, we’ve been developing a JavaFX application that enables the user to navigate connections among musicians. I’m calling this application BandmatesFX, and it uses the JSONHandler feature of the JFXtras open source library to easily query the Freebase.com database.

Note: While using this app, I noticed that drummer Aynsley Dunbar has played with lots of bands over the years, so he’s a good starting point for trying to navigate to another given musician in six or less degrees. Try, for example, to navigate from Aynsley Dunbar to Roy Orbison. Here’s one way in five degrees:

Aynsley Dunbar played in The Animals, with Andy Summers

Andy Summers played in The Police, with Sting

Sting played in Band Aid, with Paul McCartney

Paul McCartney played in The Quarrymen (and of course The Beatles), with George Harrison

George Harrison played in The Traveling Wilburys, with Roy Orbison

Today I’m going to point out some enhancements to this application, and the updated code, which are reflected in the following screenshot:

These enhancements include:

The user can type in an artist name, and with each keystroke the Freebase database web service is invoked, returning suggested names from which the user can choose.

Band and artist pictures are presented in a cover-flow style, using the JFXtras Shelf component. In addition, the JFXtras TitledBorder component is employed to enclose and label the cover-flows.

When the user clicks the central image in the bottom (e.g. Steve Smith in the screenshot above), that artist becomes the featured artist at the top of the page. The group cover-flow images are updated to reflect the groups in which the artist has played, and the member cover-flow images contain the artists that have played in the currently selected group.

One of the cool feature of the JFXtras Shelf component is that the mouse wheel moves the images horizontally on the Shelf, enabling the user to navigate even more quickly than clicking on one of the images. Before invoking this application from the Web Start link at the end of this article, take a look at the main script of the program (named BandmatesFX.fx) in the listing below:

/** BandmatesMain.fx** Uses Freebase and JFXtras with JavaFX to explore connections* between musical artists** Developed by James L. Weaver to demonstrate using JavaFX and JFXtras*/ package javafxpert; import javafx.io.http.HttpRequest;import javafx.animation.transition.*;import javafx.geometry.HPos;import javafx.scene.*;import javafx.scene.control.Label;import javafx.scene.control.ProgressIndicator;import javafx.scene.control.ListView;import javafx.scene.control.TextBox;import javafx.scene.image.*;import javafx.scene.input.*;import javafx.scene.layout.*;import javafx.scene.paint.*;import javafx.scene.text.*;import javafx.stage.Stage; import org.jfxtras.data.pull.*;import org.jfxtras.scene.border.TitledBorder;import org.jfxtras.scene.control.Shelf; /*** Height of the images that we'll be working with*/def IMAGE_HEIGHT:Integer = 140; /*** Artist for which we're searching bandmates*/var artistToSearch:String = "/en/aynsley_dunbar"; /*** Name for which we're finding matches and ids*/var nameToFind:String = "Aynsley Dunbar"; var textBoxRef:TextBox;var listViewRef:ListView;var selectedNameIndex = bind listViewRef.selectedIndex on replace { def selectedId = freebaseSearchResult.result[selectedNameIndex].id; if (selectedId != "") { println("selectedId:{selectedId}"); nameToFind = freebaseSearchResult.result[selectedNameIndex].name; obtainGroupsForArtist(selectedId); }}; /*** Hover text that contains the name of the artist or group*/var nameHoverText:String; /*** A reference to the HTTP request, for the purpose of monitoring progress*/var req:HttpRequest; /*** The root class that will hold the object graph from the JSON results*/var freebaseResult:FreebaseResult; /*** The root class that will hold the object graph from the JSON results*/var freebaseSearchResult:FreebaseSearchResult; /*** The base URL for the freebase query*/def freebaseURL = "http://www.freebase.com/api/service/mqlread?"; /*** The base URL for a freebase search request*/def freebaseSearchURL = "http://www.freebase.com/api/service/search?"; /*** The base URL to get a freebase image*/def freebaseImageURL = "http://img.freebase.com/api/trans/image_thumb"; var artistsNode:Node; /*** Fade in transition for artists*/def shelfFadeIn = FadeTransition { node: bind artistsNode duration: 1500ms fromValue: 0.2 toValue: 1.0} /*** Indexe into groups list*/var groupOneIndex:Integer on replace { shelfFadeIn.playFromStart(); // Choose the middle one def numArtists:Integer = sizeof freebaseResult.result. musicGroupMemberMembership[groupOneIndex]. group.musicMusicalGroupMember; artistTwoIndex = if (numArtists > 1) numArtists / 2 else 0; groupOneName = freebaseResult.result. musicGroupMemberMembership[groupOneIndex].group.name;}; /*** Name of the currently selected band*/var groupOneName:String; /*** Index into artists list*/var artistTwoIndex:Integer; /*** Create a search query and invoke the JSON handler*/function obtainIdForArtistPartialName(artistPartialName:String) { listViewRef.visible = true; nameToFind = artistPartialName; def partialName = artistPartialName.replace(" ", "+"); var searchUrl = "{freebaseSearchURL}prefix={partialName}&type=/music/artist&limit=10&mql_output=[\{\"id\":null,\"name\":null\}]"; println("searchUrl:{searchUrl}"); var albumHandler:JSONHandler = JSONHandler { rootClass: "javafxpert.FreebaseSearchResult" onDone: function(obj, isSequence): Void { freebaseSearchResult = obj as FreebaseSearchResult; println("# of search results:{sizeof freebaseSearchResult.result},freebaseSearchResult:{freebaseSearchResult.code}"); req.stop(); } }; req = HttpRequest { location: searchUrl onInput: function(is: java.io.InputStream) { albumHandler.parse(is); } }; req.start();} /*** Create the Freebase query and invoke the JSON handler*/function obtainGroupsForArtist(artistFreebaseId:String) { listViewRef.visible = false; artistToSearch = artistFreebaseId; var queryUrl = "{freebaseURL}query=\{\"query\":" " \{ " " \"/common/topic/image\": [\{ " " \"id\": null " " \}], " " \"/music/group_member/membership\": [\{ " " \"group\": \{ " " \"name\": null, " " \"id\": null, " " \"/common/topic/image\": [\{ " " \"id\": null " " \}], " " \"/music/musical_group/member\": [\{ " " \"member\": \{ " " \"name\": null, " " \"id\": null, " " \"/common/topic/image\": [\{ " " \"id\": null " " \}] " " \} " " \}] " " \} " " \}], " " \"id\": \"{artistFreebaseId}\", " " \"name\": null, " " \"type\": \"/music/artist\" " " \} \}"; println("queryUrl:{queryUrl}"); var albumHandler:JSONHandler = JSONHandler { rootClass: "javafxpert.FreebaseResult" onDone: function(obj, isSequence): Void { freebaseResult = obj as FreebaseResult; println("# of bands:{sizeof freebaseResult.result.musicGroupMemberMembership}"); req.stop(); // Choose the middle one def numGroups:Integer = sizeof freebaseResult.result.musicGroupMemberMembership; groupOneIndex = if (numGroups > 1) numGroups / 2 else 0; } }; req = HttpRequest { location: queryUrl onInput: function(is: java.io.InputStream) { albumHandler.parse(is); } }; req.start();}var sceneRef:Scene; Stage { title: bind "BandmatesFX - {nameToFind}" scene: sceneRef = Scene { width: 1000 height: 700 content: [ ImageView { image: Image { url: "http://www.popsci.com/files/imagecache/article_image_large/files/articles/guitar.gif" } fitWidth: bind sceneRef.width preserveRatio: true opacity: 0.1 }, VBox { nodeHPos: HPos.CENTER layoutY: 10 spacing: 10 content: [ HBox { spacing: 10 content: [ ImageView { image: bind Image { url: "{freebaseImageURL}{artistToSearch}?maxheight={IMAGE_HEIGHT}" } }, VBox { content: [ textBoxRef = TextBox { promptText: "Enter artist name" text: bind nameToFind with inverse columns: 20 font: Font.font(null, 14) action:function():Void { if (nameToFind != "" and (req.percentDone == 0.0 or req.percentDone == 100.0)) { obtainIdForArtistPartialName(nameToFind); } } onKeyTyped:function(ke:KeyEvent) { println("req.percentDone:{req.percentDone}"); if (textBoxRef.rawText != "" and (req.percentDone == 0.0 or req.percentDone == 100.0)) { obtainIdForArtistPartialName(textBoxRef.rawText); } } }, listViewRef = ListView { visible: false height: 100 items: bind for (rslt in freebaseSearchResult.result) { rslt.name } layoutInfo: LayoutInfo { width: bind textBoxRef.width - 10 height: 80 } } ] }, ProgressIndicator { progress: bind req.progress }, Label { text: bind nameHoverText font: Font.font(null, FontWeight.BOLD, 18) } ] }, TitledBorder { text: bind "{nameToFind} played in these groups:" font: Font.font(null, FontWeight.BOLD, 14) lineColor: Color.GREY node: Shelf { reflection: false showScrollBar: false showText: true imageUrls: bind for (grp in freebaseResult.result.musicGroupMemberMembership) { "{freebaseImageURL}{grp.group.id}?maxheight={IMAGE_HEIGHT}" } imageNames: bind for (grp in freebaseResult.result.musicGroupMemberMembership) { grp.group.name; } index: bind groupOneIndex with inverse thumbnailWidth: IMAGE_HEIGHT thumbnailHeight: IMAGE_HEIGHT layoutInfo: LayoutInfo { width: bind sceneRef.width height: IMAGE_HEIGHT + 120 } } }, artistsNode = Panel { content: bind for (grp in freebaseResult.result.musicGroupMemberMembership) { TitledBorder { text: bind "{groupOneName} has had the following members:" font: Font.font(null, FontWeight.BOLD, 14) lineColor: Color.GREY node: Shelf { visible: bind indexof grp == groupOneIndex reflection: false showScrollBar: false showText: true imageUrls: bind for (mmbr in freebaseResult.result. musicGroupMemberMembership[indexof grp]. group.musicMusicalGroupMember) { "{freebaseImageURL}{mmbr.member.id}?maxheight={IMAGE_HEIGHT}" } imageNames: bind for (mmbr in freebaseResult.result. musicGroupMemberMembership[indexof grp]. group.musicMusicalGroupMember) { mmbr.member.name } onCenterImagePressed:function(me:MouseEvent):Void { var mmbr = freebaseResult.result. musicGroupMemberMembership[indexof grp]. group.musicMusicalGroupMember[artistTwoIndex]; nameToFind = mmbr.member.name; artistToSearch = mmbr.member.id; obtainGroupsForArtist(mmbr.member.id); } index: bind artistTwoIndex with inverse thumbnailWidth: IMAGE_HEIGHT thumbnailHeight: IMAGE_HEIGHT layoutInfo: LayoutInfo { width: bind sceneRef.width height: IMAGE_HEIGHT + 120 } } } } layoutInfo: LayoutInfo { width: bind sceneRef.width height: IMAGE_HEIGHT + 120 } } ] } ] }}obtainGroupsForArtist(artistToSearch);

To try out this application, click the Web Start link below. Since this application is a work in progress, I’ll give you a couple of pointers:

When typing the name of an artist in the text box, each key invokes a web service, so wait until the progress indicator is solid before typing the final character (I’ll make this smoother in a future iteration).

Not all artists are in groups, and I’m not doing the necessary exception handling yet to catch this in the response from Freebase. I know that many artists such as Eric Clapton, Bob Dylan, and Steve Winwood work, as well as any artist that you can click in the bottom cover flow (by definition they are members of a group).

For more background on this application, see the previous article in this series. As always, please leave a comment if you have any questions. Also, if you have any suggestions for future enhancements, please leave a comment as well.

Freebase Contributing Artists App

ngaongan — Mon, 27 Jul 2009 00:45:00 +0000

Six Degrees of Aynsley Dunbar: BandmatesFX Example JavaFX App Continued

So far in this Freebase Contributing Artists App series, we’ve been developing a JavaFX application that enables the user to navigate connections among musicians. I’m calling this application BandmatesFX, and it uses the JSONHandler feature of the JFXtras open source library to easily query the Freebase.com database.

Note: While using this app, I noticed that drummer Aynsley Dunbar has played with lots of bands over the years, so he’s a good starting point for trying to navigate to another given musician in six or less degrees. Try, for example, to navigate from Aynsley Dunbar to Roy Orbison. Here’s one way in five degrees:

Aynsley Dunbar played in The Animals, with Andy Summers

Andy Summers played in The Police, with Sting

Sting played in Band Aid, with Paul McCartney

Paul McCartney played in The Quarrymen (and of course The Beatles), with George Harrison

George Harrison played in The Traveling Wilburys, with Roy Orbison

Today I’m going to point out some enhancements to this application, and the updated code, which are reflected in the following screenshot:

These enhancements include:

The user can type in an artist name, and with each keystroke the Freebase database web service is invoked, returning suggested names from which the user can choose.

Band and artist pictures are presented in a cover-flow style, using the JFXtras Shelf component. In addition, the JFXtras TitledBorder component is employed to enclose and label the cover-flows.

When the user clicks the central image in the bottom (e.g. Steve Smith in the screenshot above), that artist becomes the featured artist at the top of the page. The group cover-flow images are updated to reflect the groups in which the artist has played, and the member cover-flow images contain the artists that have played in the currently selected group.

One of the cool feature of the JFXtras Shelf component is that the mouse wheel moves the images horizontally on the Shelf, enabling the user to navigate even more quickly than clicking on one of the images. Before invoking this application from the Web Start link at the end of this article, take a look at the main script of the program (named BandmatesFX.fx) in the listing below:

/** BandmatesMain.fx** Uses Freebase and JFXtras with JavaFX to explore connections* between musical artists** Developed by James L. Weaver to demonstrate using JavaFX and JFXtras*/ package javafxpert; import javafx.io.http.HttpRequest;import javafx.animation.transition.*;import javafx.geometry.HPos;import javafx.scene.*;import javafx.scene.control.Label;import javafx.scene.control.ProgressIndicator;import javafx.scene.control.ListView;import javafx.scene.control.TextBox;import javafx.scene.image.*;import javafx.scene.input.*;import javafx.scene.layout.*;import javafx.scene.paint.*;import javafx.scene.text.*;import javafx.stage.Stage; import org.jfxtras.data.pull.*;import org.jfxtras.scene.border.TitledBorder;import org.jfxtras.scene.control.Shelf; /*** Height of the images that we'll be working with*/def IMAGE_HEIGHT:Integer = 140; /*** Artist for which we're searching bandmates*/var artistToSearch:String = "/en/aynsley_dunbar"; /*** Name for which we're finding matches and ids*/var nameToFind:String = "Aynsley Dunbar"; var textBoxRef:TextBox;var listViewRef:ListView;var selectedNameIndex = bind listViewRef.selectedIndex on replace { def selectedId = freebaseSearchResult.result[selectedNameIndex].id; if (selectedId != "") { println("selectedId:{selectedId}"); nameToFind = freebaseSearchResult.result[selectedNameIndex].name; obtainGroupsForArtist(selectedId); }}; /*** Hover text that contains the name of the artist or group*/var nameHoverText:String; /*** A reference to the HTTP request, for the purpose of monitoring progress*/var req:HttpRequest; /*** The root class that will hold the object graph from the JSON results*/var freebaseResult:FreebaseResult; /*** The root class that will hold the object graph from the JSON results*/var freebaseSearchResult:FreebaseSearchResult; /*** The base URL for the freebase query*/def freebaseURL = "http://www.freebase.com/api/service/mqlread?"; /*** The base URL for a freebase search request*/def freebaseSearchURL = "http://www.freebase.com/api/service/search?"; /*** The base URL to get a freebase image*/def freebaseImageURL = "http://img.freebase.com/api/trans/image_thumb"; var artistsNode:Node; /*** Fade in transition for artists*/def shelfFadeIn = FadeTransition { node: bind artistsNode duration: 1500ms fromValue: 0.2 toValue: 1.0} /*** Indexe into groups list*/var groupOneIndex:Integer on replace { shelfFadeIn.playFromStart(); // Choose the middle one def numArtists:Integer = sizeof freebaseResult.result. musicGroupMemberMembership[groupOneIndex]. group.musicMusicalGroupMember; artistTwoIndex = if (numArtists > 1) numArtists / 2 else 0; groupOneName = freebaseResult.result. musicGroupMemberMembership[groupOneIndex].group.name;}; /*** Name of the currently selected band*/var groupOneName:String; /*** Index into artists list*/var artistTwoIndex:Integer; /*** Create a search query and invoke the JSON handler*/function obtainIdForArtistPartialName(artistPartialName:String) { listViewRef.visible = true; nameToFind = artistPartialName; def partialName = artistPartialName.replace(" ", "+"); var searchUrl = "{freebaseSearchURL}prefix={partialName}&type=/music/artist&limit=10&mql_output=[\{\"id\":null,\"name\":null\}]"; println("searchUrl:{searchUrl}"); var albumHandler:JSONHandler = JSONHandler { rootClass: "javafxpert.FreebaseSearchResult" onDone: function(obj, isSequence): Void { freebaseSearchResult = obj as FreebaseSearchResult; println("# of search results:{sizeof freebaseSearchResult.result},freebaseSearchResult:{freebaseSearchResult.code}"); req.stop(); } }; req = HttpRequest { location: searchUrl onInput: function(is: java.io.InputStream) { albumHandler.parse(is); } }; req.start();} /*** Create the Freebase query and invoke the JSON handler*/function obtainGroupsForArtist(artistFreebaseId:String) { listViewRef.visible = false; artistToSearch = artistFreebaseId; var queryUrl = "{freebaseURL}query=\{\"query\":" " \{ " " \"/common/topic/image\": [\{ " " \"id\": null " " \}], " " \"/music/group_member/membership\": [\{ " " \"group\": \{ " " \"name\": null, " " \"id\": null, " " \"/common/topic/image\": [\{ " " \"id\": null " " \}], " " \"/music/musical_group/member\": [\{ " " \"member\": \{ " " \"name\": null, " " \"id\": null, " " \"/common/topic/image\": [\{ " " \"id\": null " " \}] " " \} " " \}] " " \} " " \}], " " \"id\": \"{artistFreebaseId}\", " " \"name\": null, " " \"type\": \"/music/artist\" " " \} \}"; println("queryUrl:{queryUrl}"); var albumHandler:JSONHandler = JSONHandler { rootClass: "javafxpert.FreebaseResult" onDone: function(obj, isSequence): Void { freebaseResult = obj as FreebaseResult; println("# of bands:{sizeof freebaseResult.result.musicGroupMemberMembership}"); req.stop(); // Choose the middle one def numGroups:Integer = sizeof freebaseResult.result.musicGroupMemberMembership; groupOneIndex = if (numGroups > 1) numGroups / 2 else 0; } }; req = HttpRequest { location: queryUrl onInput: function(is: java.io.InputStream) { albumHandler.parse(is); } }; req.start();}var sceneRef:Scene; Stage { title: bind "BandmatesFX - {nameToFind}" scene: sceneRef = Scene { width: 1000 height: 700 content: [ ImageView { image: Image { url: "http://www.popsci.com/files/imagecache/article_image_large/files/articles/guitar.gif" } fitWidth: bind sceneRef.width preserveRatio: true opacity: 0.1 }, VBox { nodeHPos: HPos.CENTER layoutY: 10 spacing: 10 content: [ HBox { spacing: 10 content: [ ImageView { image: bind Image { url: "{freebaseImageURL}{artistToSearch}?maxheight={IMAGE_HEIGHT}" } }, VBox { content: [ textBoxRef = TextBox { promptText: "Enter artist name" text: bind nameToFind with inverse columns: 20 font: Font.font(null, 14) action:function():Void { if (nameToFind != "" and (req.percentDone == 0.0 or req.percentDone == 100.0)) { obtainIdForArtistPartialName(nameToFind); } } onKeyTyped:function(ke:KeyEvent) { println("req.percentDone:{req.percentDone}"); if (textBoxRef.rawText != "" and (req.percentDone == 0.0 or req.percentDone == 100.0)) { obtainIdForArtistPartialName(textBoxRef.rawText); } } }, listViewRef = ListView { visible: false height: 100 items: bind for (rslt in freebaseSearchResult.result) { rslt.name } layoutInfo: LayoutInfo { width: bind textBoxRef.width - 10 height: 80 } } ] }, ProgressIndicator { progress: bind req.progress }, Label { text: bind nameHoverText font: Font.font(null, FontWeight.BOLD, 18) } ] }, TitledBorder { text: bind "{nameToFind} played in these groups:" font: Font.font(null, FontWeight.BOLD, 14) lineColor: Color.GREY node: Shelf { reflection: false showScrollBar: false showText: true imageUrls: bind for (grp in freebaseResult.result.musicGroupMemberMembership) { "{freebaseImageURL}{grp.group.id}?maxheight={IMAGE_HEIGHT}" } imageNames: bind for (grp in freebaseResult.result.musicGroupMemberMembership) { grp.group.name; } index: bind groupOneIndex with inverse thumbnailWidth: IMAGE_HEIGHT thumbnailHeight: IMAGE_HEIGHT layoutInfo: LayoutInfo { width: bind sceneRef.width height: IMAGE_HEIGHT + 120 } } }, artistsNode = Panel { content: bind for (grp in freebaseResult.result.musicGroupMemberMembership) { TitledBorder { text: bind "{groupOneName} has had the following members:" font: Font.font(null, FontWeight.BOLD, 14) lineColor: Color.GREY node: Shelf { visible: bind indexof grp == groupOneIndex reflection: false showScrollBar: false showText: true imageUrls: bind for (mmbr in freebaseResult.result. musicGroupMemberMembership[indexof grp]. group.musicMusicalGroupMember) { "{freebaseImageURL}{mmbr.member.id}?maxheight={IMAGE_HEIGHT}" } imageNames: bind for (mmbr in freebaseResult.result. musicGroupMemberMembership[indexof grp]. group.musicMusicalGroupMember) { mmbr.member.name } onCenterImagePressed:function(me:MouseEvent):Void { var mmbr = freebaseResult.result. musicGroupMemberMembership[indexof grp]. group.musicMusicalGroupMember[artistTwoIndex]; nameToFind = mmbr.member.name; artistToSearch = mmbr.member.id; obtainGroupsForArtist(mmbr.member.id); } index: bind artistTwoIndex with inverse thumbnailWidth: IMAGE_HEIGHT thumbnailHeight: IMAGE_HEIGHT layoutInfo: LayoutInfo { width: bind sceneRef.width height: IMAGE_HEIGHT + 120 } } } } layoutInfo: LayoutInfo { width: bind sceneRef.width height: IMAGE_HEIGHT + 120 } } ] } ] }}obtainGroupsForArtist(artistToSearch);

To try out this application, click the Web Start link below. Since this application is a work in progress, I’ll give you a couple of pointers:

When typing the name of an artist in the text box, each key invokes a web service, so wait until the progress indicator is solid before typing the final character (I’ll make this smoother in a future iteration).

Not all artists are in groups, and I’m not doing the necessary exception handling yet to catch this in the response from Freebase. I know that many artists such as Eric Clapton, Bob Dylan, and Steve Winwood work, as well as any artist that you can click in the bottom cover flow (by definition they are members of a group).

For more background on this application, see the previous article in this series. As always, please leave a comment if you have any questions. Also, if you have any suggestions for future enhancements, please leave a comment as well.

Educational JavaFX Script Apps

ngaongan — Mon, 27 Jul 2009 00:42:00 +0000

JavaFX in the Wild: Sapphire!

With JavaFX 1.0 having been released just a few days ago, I’m pleased that we’re observing more JavaFX applications “in the wild”. Here’s one that I became aware of recently, named Sapphire, developed by The Standards Company.

According to the website in which you can launch this JavaFX application:

“Sapphire is an advanced classroom observation tool. It provides an easy-to-use interface, multiple platform deployments, and interchangeable observation forms which can be customized to fit most any situation. The Community Edition [which is the version that you can try out from the link above] is a demonstration version requested by the Oklahoma State Department of Education and configured to complement the “Time on Task” observation form released in October 2008.“

Some JavaFX Technical Notes from Ben Jones of The Standards Company: Real-time Charting in JavaFX

One of the features of JavaFX that makes it attractive to real-time application developers is its ability to tie graphical elements to models through the binding mechanism. This mechanism makes it possible for the current state of the model to be reflected in the interface without the need to create any type of polling system.

In our Sapphire application, we collect real-time data from classroom observations. The observer records classroom events by pressing various buttons. These events are displayed in several dashboard type displays which are actively tied to supporting models. One of these displays in a time lime of events created by a series of colored rectangles. The size, placement and color of the rectangles represent different relationships in the event data. Every time an event is pressed, the data changes and the bound display automatically updates.

To achieve this, you only need three things: a data model, a display element, and an event driver of some type. Let’s take a look at one of the visual building blocks, the TimeOnTaskBlock class:

public class TimeOnTaskBlock extends CustomNode { public var aboveColor:Color = Color.GREEN;public var belowColor:Color = Color.RED; public var seconds:Integer;public var startingMark:Integer;public var zoneWidth:Integer = 600;public var zoneSeconds:Integer = 3600;public var height:Integer = 100;public var maxSegments:Number = 5;public var segment:Number = 0;public var x:Integer;public var scale:Number = 0.95; public override function create(): Node { return Group { var maxDisplayHeight:Number = height/2; content: [ Rectangle { x: bind zoneWidth * startingMark / zoneSeconds; y: bind height/2 - scale * ((maxDisplayHeight) * segment/maxSegments) width: bind zoneWidth * seconds / zoneSeconds; height: bind scale * (maxDisplayHeight * segment/maxSegments) fill: bind aboveColor strokeWidth:0 }, Rectangle { x: bind zoneWidth * startingMark / zoneSeconds; y: bind height / 2 width: bind zoneWidth * seconds / zoneSeconds; height: bind scale * (maxDisplayHeight - (maxDisplayHeight * segment/maxSegments)) fill: bind belowColor strokeWidth:0 } ] effect: Lighting { light: DistantLight { azimuth: 225 elevation: 60 } surfaceScale: 2 } }; }}

This custom node represents what will be displayed. It is a pair of scaled rectangles stacked on top of each other. The various attributes define shape, size, and placement. Notice the use of the the DistantLight effect to give the rectangles in the graph some depth. The next building block up from this is another custom node that handles the visual orchestration of the time blocks nodes. The DisplayTimeChart node is effectively the dashboard element being displayed. It has a data member holding a sequence of TimeOnTaskBlock nodes. Let’s take a peek at this node:

public class TimeDisplayChart extends CustomNode { public var width:Integer; public var height:Integer; public var zoneSeconds:Integer; public var zoneWidth:Integer; public var background:Color; public var timer:SapphireClock; public var timeMark:Integer = 0; public var currentSegment:Number = 0; public var displayTicker:Integer; public var displayBlocks:TimeOnTaskBlock[]; public var onColor:Color = Color.#96ff96; public var offColor:Color = Color.#ff9696; public override function create(): Node { return Group { content: [ Group { content:[ Rectangle { width: width height: height fill: background arcWidth:10 arcHeight:10 stroke:Color.WHITE }, Group { translateX:2 content:[ Group { content: bind displayBlocks } ] }, Group { translateX:0 content:[ TimeOnTaskBlock { aboveColor:bind onColor belowColor:bind offColor seconds: bind timer.ticker - timeMark startingMark: bind timeMark segment:bind currentSegment } ] }, Line { startX:0 startY: height / 2 endX: zoneWidth endY: height / 2 strokeWidth: 1 stroke: Color.BLACK }, Group { content: bind for (i in [1..zoneSeconds - 2] where (i mod 300 == 0)) { Line { startX: bind zoneWidth * i / zoneSeconds startY:0 endX: bind zoneWidth * i / zoneSeconds endY: bind height strokeWidth: 1 stroke: Color.BLACK } } } ] clip: Rectangle { x:-1, y:-1 width: bind width + 4 height: bind height + 4 } }, Group { translateX: 0 translateY: bind height + 5 content: bind for (i in [1..zoneSeconds] where (i mod 300 == 0)) { Text { textAlignment: TextAlignment.RIGHT textOrigin: TextOrigin.TOP fill:Color.WHITE font: Font { size: 12 } x: (zoneWidth * i / zoneSeconds) - 7 content: "{i / 60}" } } } ] }; }}

The TimeDisplayChart serves a couple of purposes. First it builds the overall dashboard element. This defines the usual display space, necessary labeling and element placements. Please note two aspects of this class: the group where its content is bound to the displayBlocks sequence and the second group composed of a solo TimeOnTaskBlock. By binding the content of a group to a data source, any changes in the data source will be made available to the group automatically. This effectively produces a self-updating display since we bound a displayable node. The second group which is a single instance of the TimeOnTaskBlock serves another purpose. It covers the span of time since the last data change and the current time. Since the data model stores only past events, we need a means of showing data yet to be stored. It’s real-time after all.

To place all of this into an application, an instance of TimeDisplayChart is placed into a group as follows:

Group { translateY:310 translateX:10 content:[ TimeDisplayChart{ width:600 height:100 zoneSeconds:3600 zoneWidth:600 background:Color.#969696 timer: bind timer displayTicker: bind displayTicker currentSegment: bind appState.currentSegment timeMark: bind appState.currentTimeMark onColor: bind appState.onColor offColor:bind appState.offColor displayBlocks: bind displayblocks } ]}

Here we can see the various attributes of the custom node being bound to different data sources and conditions that exit within the larger context of the application. The bindings create an active communication channel between application state data and the graphical elements. It’s convenient, responsive, and easy to manage during the development process.

JavaFX in the Enterprise

The technical notes that Ben Jones supplied above demonstrate that graphing real-time data is very achievable in JavaFX. This is one of the capabilities required by many enterprise applications, so I’d like to see an open source initiative that provides a library of JavaFX graphs (that have a contemporary RIA look and feel, of course).

Anyway, play with Sapphire, and please give The Standards Company your feedback on this very specialized JavaFX application. Also, if you have any JavaFX applications in the wild, please let me know at jim.weaver [at] javafxpert.com. At the moment I’m particularly interested in showcasing JavaFX apps that communicate with a server, such as enterprise applications and mashups.

Compiled JavaFX Script Tools

ngaongan — Mon, 27 Jul 2009 00:34:00 +0000

JavaFX Authoring Tool Demo at JavaOne

At JavaOne 2009 during James Gosling’s Toy Show, Tor Norbye demonstrated the current state of the long-awaited JavaFX Authoring Tool.

Some of the demonstrated features were:

The ability to position/orient a node (e.g. an image) in multiple places on the stage, each corresponding with a point in time on a timeline (represented by a slider). Each point in time becomes a KeyFrame, and interpolations are calculated based upon position/orientation. Dragging the slider results in seeing the node move and rotate through the positions in which the node was placed. I assume that scaling and other transforms will be supported in the tool as well. Tor mentioned that various interpolations are supported (LINEAR, EASEIN, EASEOUT, and EASEBOTH). I assume that spline interpolation will be supported as well.

Placing UI controls on the stage, hooking them up with event handlers, as well as binding to instance variable values (e.g. in other UI controls).

Targeting an application at multiple screens (e.g. desktop, mobile phones), with the ability to customize for each screen.

Augusto Sellhorn (AKA sellmic) has compiled some video clips and his thoughts about the JavaFX Authoring Tool in a blog post. If you didn’t see the Toy Show, checking out Augusto’s post is a quick way of seeing the preview of the tool.

Update June 13, 2009: Augusto created another blog post with new screenshots, links and thoughts on the JavaFX Authoring Tool.

var dzone_url = 'http://learnjavafx.typepad.com/weblog/2009/06/javafx-authoring-tool-demo-at-javaone.html'; var dzone_title = 'JavaFX Authoring Tool Demo at JavaOne'; var dzone_blurb = '[blurb]'; var dzone_style = '2';

Magnus Robertsson presents another *aspect* on JavaFX MOJO binding

It is often desirable to have at least part of a JavaFX program’s model represented by Java objects. The problem is that JavaFX programs can’t bind to plain old Java objects (POJOs) yet. Some workarounds have been suggested, one of them articulated by Magnus Robertsson of jayway.

Magnus has created an open source tool called javafxbinder that utilizes Aspect-Oriented Programming, and PropertyChangeListener functions, to keep a JavaFX object updated when mutator functions in a POJO are called. Nice MOJO, Magnus!

Speaking at Øredev in Malmö, Sweden

On a related note, I’ll be speaking at Øredev (founded by jayway and some other “ways”: dotway, leadway, testway and realway) which will be held in Malmö, Sweden on 2-6 November, 2009. Hope to see you there!

JFXtras 0.2 Released: Featuring Extra Shapes for JavaFX

The open source JFXtras project provides extra capabilities for JavaFX, such as a powerful Grid layout facility, dialog box capability, easy to use asynchronous thread support and declarative unit testing. The JFXtras 0.2 release features a new custom shape library that came out of a joint effort with the jSilhouette Project. See Stephen Chin’s blog post for more information on this release. Also, see Andres Almiray’s blog post on the jSilhouette 0.3 release.

Here a screenshot of the ShapesDemoFX program that is included with the JFXtras project. Click the Java Web Start link below to run the demo.

Here’s a screenshot from a little program written by Chris Wright that demonstrates how to use some of the shapes in JFXtras, followed by the source code:

import javafx.scene.*;import javafx.stage.*;import javafx.scene.text.*;import javafx.scene.paint.*;import javafx.scene.layout.*;import javafx.scene.transform.*;import org.jfxtras.scene.shape.*; Stage { width: 500 height: 350 title: "JFXtras 0.2" scene: Scene { fill: Color.BLACK content: [ Group { content: [ MultiRoundRectangle { x: 50 y: 100 width: 400 height: 100 topRightWidth: 35 topRightHeight: 35 bottomRightWidth: 35 bottomRightHeight: 35 fill: LinearGradient { startX: 0.0 startY: 0.0 endX: 1.0 endY: 0.0 proportional: true stops: [ Stop { offset: 0.0 color: Color.rgb(255,255,51) }, Stop { offset: 0.5 color: rgb(255,102,0) } ] } }, ReuleauxTriangle { angle: -48 x: 150 y: 100 width: 175 fill: Color.rgb(204,0,0) stroke: Color.rgb(102,0,0) }, HBox { transforms: Translate.translate(90, 110) content: [ Text { content: "JFX" textOrigin: TextOrigin.TOP font: Font.font("Sans serif", FontWeight.BOLD, 100) }, Text { transforms: Translate.translate(0, 10) content: "tras" textOrigin: TextOrigin.TOP font: Font.font("Sans serif", FontWeight.BOLD, FontPosture.ITALIC, 70) } ] } ] } HBox { transforms: Translate.translate(90, 250) spacing: 7 content: [ Asterisk { centerX: 10 centerY: 10 radius: 25 width: 4 beams: 7 roundness: 0.5 fill: Color.WHITE }, Text { content: "Now With Cool Shapes!" textOrigin: TextOrigin.TOP font: Font.font("Sans serif", FontWeight.BOLD, 24) fill: Color.WHITE } ] } ] }}

For your convenience, here is a link to the JFXtras 0.2 API docs, as well as the JFXtras project itself.

Congratulations to the JFXtras project team for this 0.2 release, particularly Dean Iverson and Andres Almiray, and our fearless leader Stephen Chin

Absence of Malice in JavaFX

Because JavaFX Script programs compile to Java CLASS files and run within the Java Runtime Environment (JRE), they are subject to the Java security model. When a user clicks a Java Web Start link or navigates to a page that contains an applet, the Java code must play exclusively in “the sandbox” unless the user gives it permission to jump out. There are a couple of ways to enable the user to give this permission to the application:

Option #1: Don’t sign the JAR files that contain your JavaFX application. By not signing the JAR files, you are ensuring that the user will be asked to authorize any out-of-sandbox-experiences. For example, the Earthrise at Christmas post contains a Java Web Start link to a JavaFX application that isn’t signed. Because the application displays an image that is loaded from another website (in this case nasa.gov) the following Security Warning dialog is presented to the user:

This option makes the user respond to Security Warnings, but if the code isn’t signed, then the user shouldn’t be expected to trust the application without receiving these kinds of warnings.

Option #2: Sign the JAR files that contain your JavaFX application. By signing the JAR files, you are ensuring that the application will not execute unless the user indicates that he/she trusts the signer of the code. In addition, the user won’t be asked for permission for the application to play outside of the sandbox when, for example, the image from Nasa above is accessed, or a file is written. To demonstrate this, if you click the following Java Web Start link to the Earthrise at Christmas application in which the JAR file is signed, you’ll be presented with the Security dialog shown below it:

Notice that the the dialog says that the signature has been verified/validated (because a code-signing certificate was used). This is an important feature because if the signature can’t be verified, then the user can’t be sure who really signed it. This opens the door for spoofed and malicious applications. The only way that I would run an application whose signature hasn’t been verified, is if I knew by some other means who published the application (e.g. the application was written by a colleague and it is located on a corporate intranet).

What about the Self-Signed Jar option in NetBeans (using the JavaFX Plug-in)?

If you select the Self Signed Jar option in NetBeans as shown below, then a dialog similar to the one above will appear when the user runs the application, but it will say that the signature can’t be verified.

For reasons described above, posting or executing Java and JavaFX applications with self-signed JARs on the Internet is not a good practice. It’s better to go with option #1 above and let the user approve any out-of-the-sandbox behavior, or option #2 with a code-signing certificate (e.g. from VeriSign or Thawte).

Creating and Signing Pack200 (Compressed) Files

The JAR files that contain Java/JavaFX applications can be further compressed into the Pack200 format and deployed with JNLP. To create and sign a Pack200 file, use the following commands available with the JDK, shown here in the context of the Earthrise at Christmas application:

pack200 --repack HelloEarthRise.jar jarsigner -keystore [keystore url] -verbose -keypass [key password] -storepass [keystore password] HelloEarthRise.jar [keystore alias] pack200 HelloEarthRise.jar.pack.gz HelloEarthRise.jar

As always, please leave a comment if you have any questions.

JavaFX Skins Game, and Happy New Year!

A Note from Jim Weaver:

First of all, I would like to wish you a Happy and Blessed New Year! I’m excited about the momentum that JavaFX has achieved since its 1.0 release in December 2008, and about its increased adoption for RIA and mobile development in 2009.

Also, I’d like to introduce Dean Iverson, the author of today’s article, who for many of you needs no introduction because he’s been active in the Java/Swing/JavaFX community for some time now. Dean will be a regular contributor to the JavaFXpert blog, as well as to the JFXtras project that he mentions in todays article.

Dean has been writing software professionally for over 15 years. In that time he has worked on everything from games, to driving simulators, to large-scale enterprise applications and just about everything in between. Currently, he is employed by the Virginia Tech Transportation Institute where he has a cool job (of which I’m jealous) as a senior researcher where he is working on rich client applications. He also has a small software consultancy called Pleasing Software Solutions which he co-founded along with his wife who, by his own admission, is the brains of the outfit and the better programmer. I personally think that his wife develops these JavaFX examples and that he just writes about them Also, he is the Technical Reviewer of the upcoming Pro JavaFX book that Weiqi Gao, Stephen Chin and I are currently writing. With that being said, please enjoy Dean’s first post on the JavaFXpert blog:

JavaFX Skins Game

Simon Morris, author of the upcoming JavaFX in Action book, has just written a very informative post on his blog. He shows how to create a custom progress bar that is skinnable using JavaFX’s support for CSS. It’s definitely worth a read. Using CSS you can customize just about every aspect of the rectangles that Simon uses in his progress meter: their size, color, even how many there are! It’s the ultimate in flexibility.

A New Shape

But what if you want to use a different shape entirely? Even that is possible without having to recompile Simon’s original code. For example, there is a new shape in the JFXtras project called the VariableCornerRectangle. This shape is a rectangle that can have any combination of rounded or square corners. It looks like this:

The code to produce the shape above looks like this:

VariableCornerRectangle { ulArc: 80 urArc: 0 lrArc: 80 llArc: 0 width: 200 height: 200 fill: Color.CORNFLOWERBLUE stroke: Color.BLUE strokeWidth: 5}

We just use the shape’s corner arc attributes to set the upper-left and lower-right corners as arcs with a radius of 80 pixels. We then set the other corners to be square by using an arc size of 0.

A New Skin

So how do we use this new shape in Simon’s progress meter? First, we create a new skin class. It will be almost exactly the same as Simon’s, but it will use the new shape.

public class VariableCornerProgressSkin extends Skin { public var boxCount:Integer = 10; public var boxWidth:Number = 15; public var boxHeight:Number = 20; public var boxHGap:Number = 2; public var unsetHighColor:Color = Color.YELLOW; public var unsetMidColor:Color = Color.GREEN; public var unsetLowColor:Color = Color.DARKGREEN; public var setHighColor:Color = Color.ORANGE; public var setMidColor:Color = Color.RED; public var setLowColor:Color = Color.DARKRED; var boxValue:Integer = bind { var p:Progress = control as Progress; var v:Number = (p.value - p.minimum) / (p.maximum - p.minimum); (boxCount * v) as Integer; } init { def border:Number = bind boxWidth / 10; def arc:Number = bind boxWidth / 2; def lgUnset:LinearGradient = bind makeLG(unsetHighColor,unsetMidColor,unsetLowColor); def lgSet:LinearGradient = bind makeLG(setHighColor,setMidColor,setLowColor); scene = HBox { spacing: bind boxHGap; content: bind for(i in [0..

A Small Change Of Style

Simon’s original code used the following CSS to style the three different progress meters in his sample program.

"Progress" { boxWidth: 15; boxHGap: 2; setHighColor: yellow; setMidColor: red; setLowColor: darkred; unsetHighColor: cyan; unsetMidColor: blue; unsetLowColor: darkblue;} "Progress"#testId { boxWidth: 25; boxHeight: 30; boxCount: 7; boxHGap: 1; unsetHighColor: white; unsetMidColor: silver; unsetLowColor: dimgray;} "Progress".testClass { boxWidth: 7; boxHGap: 2; boxCount: 20; setHighColor: yellow; setMidColor: limegreen; setLowColor: darkgreen;}

This stylesheet produced the three progress meters in Simon’s original example.

All we have to do to use our new skin is to add a new CSS selector. In this case I want to change the skin of the progress meter with the id of testId. So I’ll add a new selector just above the existing one that applies the new skin.

"Progress"#testId { skin: javafx_css.VariableCornerProgressSkin;} "Progress"#testId { boxWidth: 25; boxHeight: 30; boxCount: 7; boxHGap: 1; unsetHighColor: white; unsetMidColor: silver; unsetLowColor: dimgray;}

And voila, we have a new progress meter! Notice that the middle meter (whose id is testId) is the only one that changed. Click the Java Web Start Launch icon below to see it in action.

I have used the fully qualified path name for the VariableCornerProgressSkin class in the selector’s skin declaration. In this case, the class is located in my javafx_css package.

It is important that the selector with the skin: declaration be a separate selector and be placed above any other selectors that match the same control. Otherwise all of the style declarations will be applied to the original skin instead of the new one. Apparently the skin is only replaced after the entire selector is parsed so any styles contained within the same selector will be applied to the existing skin rather than the new one.

Thanks again to Simon Morris for the original example!

JFXtras 0.1 Release: Utilities and Add-ons for the JavaFX Language

JFXtras is an open-source project that helps fill in some of the gaps of the JavaFX 1.0 Release. The JFXtras project is led by Stephen Chin (co-author of the upcoming Pro JavaFX book) and it includes support for Dialogs, Grid Layouts, Unit Testing, and an Asynchronous Worker class.

You can download the 0.1 release, peruse the Javadoc online, and sign-up for the mailing list, all on the Google Code project site.

The 0.1 release includes the following capabilities that augment what JavaFX 1.0 provides:

Dialogs – The JFXtra Dialog provides a drop-in replacement for a Stage that will pop-up a real Java Dialog. This includes support for an owner window, modality, alwaysOnTop, the ability to hide the taskbar icon, and many other features.

Layouts – The JFXtra Grid provides an advanced layout container (example shown above) that can be used for JavaFX nodes and wrapped swing components.

Testing – JFXtras provides a declarative Unit Testing facility that allows you to do write JavaFX tests in the JavaFX language. It is modeled after best-of-class behavior-driven and fluent testing patterns to make tests easier to read and maintain.

Asynchronous Worker – Working on the theory that developers deserve their share of rope, JFXtras provides an asynchronous worker wrapper that allows you to execute pure JavaFX code on a background thread.

A JavaFX Visual Designer Tool Just Fell out of the Sky

Jeff Martin of ReportMill Software has been involved with the JavaFX community since the beginning. ReportMill has been working on a GUI builder tool for JavaFX named JFXBuilder, and has given the community a peek from time to time. Each time, I’ve kicked the tires a bit, but haven’t felt that it was ready for prime time.

Today on a JavaFX community mailing list, I received the following email from Jeff that began with:

“Hope nobody minds me posting this, since it’s free and “educational”.

-jeff”

It was followed by the first portion of the JFXBuilder press release, which contains a Java Web Start link to JFXBuilder, and information such as the following:

“JFXBuilder is a desktop design and composition application for visually building JavaFX applications quickly, including the ability to:

Perform drawing and illustration

Add and edit rich text (fonts, colors, styles, wrapping, spelling, etc.)

Apply advanced fills (textures and gradients)

Apply advanced effects (shadow, reflection, emboss, glow, etc.)

Apply advanced transforms (rotation, scale, skew)

Drag and Drop images and other media

Drag and Drop application components

Apply Key-Frame based animation

Apply path-based animation

Apply Input-related behavior (Mouse-over, Mouse-down, etc.)

Attach to a database or XML and perform data binding

Design simple layouts for default JavaFX mobile devices

Generate JavaFX code on the fly”

I decided to play with it a bit today, and was very impressed with its features. I’m excited about evaluating its ability to help build JavaFX applications, and would invite you to do the same. Here’s a screenshot of the tool at the point that it really started getting my attention, especially after the comment I made yesterday about desiring a library of JavaFX graphs:

As I dragged the mouse on the trackball shown above in the lower-right corner, the perspective of the 3D bar graph changed accordingly. I was not expecting that level of sophistication, given that JavaFX SDK 1.0 was released only two weeks ago.

I haven’t experimented much with JFXBuilder, and I don’t know anything about their licensing-related plans yet, but wanted to give you a heads-up that this looks seriously cool to me so far.

Jeff Martin or someone from ReportMill: If you read this, would you leaving a comment and/or link about your licensing-related plans for JFXBuilder?

December 11, 2008

Eclipse Plugin for JavaFX Available, and NetBeans JavaFX Plugin Works on Linux

According to Josh Marinacci of Sun on a Java Posse thread: “We (Sun) have an early release of an Eclipse plugin for JavaFX up on Kenai.”

Please join me in checking it out and let me know what your experiences are with this early release Eclipse plugin for JavaFX!

On a related note, Weiqi Gao shows us how to make the JavaFX 1.0 plugin for NetBeans 6.5 work on Linux!

Up the Nile *with* a Paddle: Fun with JavaFX Graphics

I’ve often mentioned the importance of programmers and graphics designers working together to create great looking RIAs. The declarative syntax of JavaFX facilitates this approach, and the “Project Nile” tool available with the JavaFX SDK makes this even easier.

Try your hand at the “Breakout” style game that Sten posted on his blog, and then read about how he collaborated with a graphic designer (his four-year-old daughter) to create this game in JavaFX. Sten discusses in his post how he used Project Nile to export graphics-related JavaFX code from Adobe Illustrator using Project Nile.

On a related note, Silveira Neto (whose JavaFX fun I’ve featured on this blog before) participated in creating a plug-in for Inkscape that exports SVG in the form of JavaFX code.

That Silveira has all the fun! Regards,

July 04, 2008

JavaFX API Documentation Tool Now Supports In-line Examples

The JavaFX API documentation tool (javafxdoc) now supports the effortless insertion of examples. For instance, this screenshot shows a page of the JavaFX API in which an example is embedded along with its output image generated:

An Explanation from the Author of this Feature

According to an explanation by Josh Marinacci of Sun, “One of the innovations in the JavaFX toolchain is our new javafxdoc tool. Rather than producing a set of html files like regular ‘javadoc’ does, we produce a single large XML file representing the entire codebase’s API. This lets us easily add extra processing steps, such as producing semantic well-formed XHTML as you see today. It also lets us do a few other things. Last time I mentioned custom doclet tags for things like default value and read only. Now we’ve added inline examples.

Before today if you wanted some example code with a screenshot in your docs you had to mark up the code manually (assuming you wanted any syntax highlighting), then copy the code into a separate project, compile it, run it, then save a screenshot of the running app. Then you must finally copy the screenshot back into your docs. This system is really bad for several reasons:

* It’s time consuming, so we do less of it.
* The repository becomes polluted with screenshots
* The sample code may not compile if the API changes before you release the SDK
* The screenshots can get quickly out of date.
* The code snippets aren’t syntax highlighted.

With our new inline examples system all of these are taken care of. Just use the @example doc tag and the rest will be taken care of for you. The doc tool will compile and run your code into a buffered image. Then it will insert nicely syntax highlighted code back into the final page along with a link to the screenshot.”

Here’s an example:

@example
import javafx.scene.geometry.*;
import javafx.scene.paint.*;

ShapeSubtract {
fill: Color.BLACK
a: Rectangle { width: 100 height: 50 }
b: Ellipse { centerX: 100 centerY: 25 radiusX: 50 radiusY: 25}
}

Will produce the page you see in the screenshot above.

Tom Ball, a JavaFX development leader in Sun, added these comments in a reply: “It also lets *anyone* with basic XML transforming skills (lots of online tutorials) do things we never imagined. One reason JavaDoc tends to look dated is that most developers have relied on whatever comes from Sun, instead of jumping in and raising the UI bar. Now it is much more hackable…

This XML file is a database of a project’s attributes, which can not only be data-mined to improve documentation, but to support many other tools. For example, a cscope-like source navigator is more easily done than the original tool, as the XML model has more useful information about the source.”

The ease of creating examples that are in-line with the documentation should encourage development of these examples, both in the JavaFX library API as well as in documentation that you and I as developers create for our projects. Thanks Josh and the JavaFX development team for this facility!

Romain Guy’s Magic InfiniteProgressPanel

ngaongan — Mon, 27 Jul 2009 00:34:00 +0000

I’ve mentioned how simple, elegant and powerful JavaFX Script is. Here’s a perfect example of these three qualities. A few weeks ago I wanted to show a progress indicator in a multi-tier application that has a rich client developed in JavaFX Script. Whenever the client is waiting for a response from the server, I wanted to show this progress indicator.

The screenshot above shows the InfiniteProgressPanel widget that I used from the JavaFX Script UI library. It was invented by Romain Guy, a co-author of the book Filthy Rich Clients. It is a great alternative to a progress bar due to the fact that you don’t have to continually calculate what percent complete the operation is. This is because the progress bar is circular (and therefore infinite). In addition, it is very easy to use: You just place the InfiniteProgressPanel in the UI containment hierarchy, and bind its progress attribute to a Boolean variable that is true whenever you want the progress indicator to appear. Here’s the code for this compiled JavaFX Script example:

/*
* CompiledInfiniteProgress.fx
*
* Developed 2007 by James L. Weaver (jim.weaver at lat-inc.com)
* to serve as a compiled JavaFX Script example.
*/

import javafx.ui.*;
import java.lang.System;

Frame {
var busy = false
title: “Infinite Progress Panel Demo”
width: 400
height: 400
background: Color.WHITE
visible: true
onClose:
function() {
System.exit(0);
}
content:
InfiniteProgressPanel {
progress: bind busy
content:
FlowPanel {
content: [
Button {
text: "Get Busy"
action:
function() {
busy = true;
ConfirmDialog {
title: "Patience is a Virtue"
message: "Simulating a busy condition"
visible:true
onYes:
function() {
busy = false
}
};
}
}
]
}
}
}

Please compile and run this example and try it out for yourself! When you click the Get Busy button, the confirmation dialog will be displayed and the infinite progress indicator will appear. When you dismiss the dialog by clicking the OK button, the progress indicator will disappear.

By the way, the next several posts are going to highlight various UI widgets similar to the way this post does. I’d like to give you an appreciation of the rich set of widgets available in JavaFX Script, and how easy they are to use.

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!

Creating Sliders in Compiled JavaFX Script

ngaongan — Mon, 27 Jul 2009 00:34:00 +0000

Beginning with the Romain Guy’s Magic InfiniteProgressPanel post, I’m in the process of showcasing some JavaFX Script UI components. I want you to get a feel for what components are available and how to use them in your code. Today’s feature is the Slider widget, and here’s a screenshot of an example program that uses it:

As you move the slider, the Text graphic shown above changes. Note that I chose a font that attempts to anthropomorphize the numbers.

Here’s this example program’s code:

/** CompiledSpinner.fx - A compiled JavaFX program that demonstrates* the Slider widget.**/ import javafx.ui.*;import javafx.ui.canvas.*; Frame { var displayNum:Number = 0.0 height: 300 width: 380 title: "Slider Example" background: Color.WHITE content: BorderPanel { center: Canvas { content: Text { font: Font { face: FontFace.BITSTREAM_VERA_SANS_MONO style: FontStyle.BOLD size: 96 } x: 20 y: 40 stroke: Color.RED fill: Color.RED content: bind "{displayNum}" } } bottom: Slider { min: 0 max: 100 border: TitledBorder { title: "Speed:" } value: bind displayNum with inverse minorTickSpacing: 5 majorTickSpacing: 10 paintTicks: true paintLabels: true labels: [ SliderLabel { value: 0 label: SimpleLabel { text: "0" } }, SliderLabel { value: 50 label: SimpleLabel { text: "50" } }, SliderLabel { value: 100 label: SimpleLabel { text: "100" } } ] } } visible: true}

Noteworthy Concepts

This weblog has covered most of the concepts in this example, but I do want to point out a couple of things:

Up to this point I’ve used the faceName attribute of the Font class, but lately I’ve been using the face attribute. The difference is that faceName is a String, and face is of type FontFace. You can see the available constants for various font faces in FontFace.fx located in the javafx.ui package.

When binding a UI component that the user can modify (like this Slider) to a variable, the bind is bi-directional. Bi-directional binding is expressed by adding with inverse at the end, as seen in the following statement from the code example:

value: bind displayNum with inverse

Have fun with this example, and please post a comment if you have any questions, or if there are particular UI components that you’d like to see featured soon.

Turn the Page: Creating a Compiled JavaFX Script BookPanel

ngaongan — Mon, 27 Jul 2009 00:33:00 +0000

I’d like to show you a novel (pardon the pun) and useful JavaFX Script widget called a BookPanel. It’s perfect for enabling the user to view content using a book metaphor. To turn pages, you can either press the buttons below the pages, or as shown in the screenshot below you can drag the mouse to turn the pages:

Please take a look at the compiled JavaFX Script program that produced this output:

/** CompiledBookPanelExample.fx** Developed 2007 by James L. Weaver (jim.weaver at lat-inc.com)* to serve as a compiled JavaFX Script example.*/ import javafx.ui.*;import javafx.ui.canvas.*;import java.awt.Rectangle;import java.lang.System; Frame { var textFont = Font { face: FontFace.COMIC_SANS_MS style: FontStyle.BOLD size: 20 } title: "Compiled BookPanel Example" width: 700 height: 350 background: Color.WHITE visible: true onClose: function() { System.exit(0); } content: BorderPanel { var bookPanel = BookPanel { pageBounds: new Rectangle (0, 0, 350, 300) leftPageIndex: 0 pages: [ BorderPanel { background: Color.WHITE border: LineBorder {} center: Canvas { content: Text { x: 10 y: 100 content: "Here I am - on the road again" font: textFont stroke: Color.RED fill: Color.RED } } }, BorderPanel { background: Color.WHITE border: LineBorder {} center: Canvas { content: Text { x: 10 y: 100 content: "There I am - up on the stage" font: textFont stroke: Color.BLUE fill: Color.BLUE } } }, BorderPanel { background: Color.WHITE border: LineBorder {} center: Canvas { content: Text { x: 10 y: 100 content: "Here I go - playing star again" font: textFont stroke: Color.GREEN fill: Color.GREEN } } }, BorderPanel { background: Color.WHITE border: LineBorder {} center: Canvas { content: Text { x: 10 y: 100 content: "There I go - turn the page" font: textFont stroke: Color.PURPLE fill: Color.PURPLE } } } ] } center: bookPanel bottom: FlowPanel { content: [ Button { text: "Previous Page" enabled: bind bookPanel.leftPageIndex > 0; action: function() { bookPanel.previousPage(); } }, Button { text: "Next Page" enabled: bind bookPanel.leftPageIndex < sizeof bookPanel.pages - 2; action: function() { bookPanel.nextPage(); } } ] } }}

Noteworthy Concepts

I’d like to point some concepts from this example:

A BookPanel instance is created using object literal syntax, but is assigned to a variable. This variable is used later to access its previousPage() and nextPage() functions.

The pageBounds attribute of the BookPanel class is of type java.awt.Rectangle, which is in the Java SE class library. This is an example of instantiating a Java class within a JavaFX Script program.

The enabled attribute of each Button is bound to an expression that calculates whether the Button should be operable.

The LineBorder associated with each page helps give a visual indication of its edges.

Please be sure to compile and run this example so that you can experience the behavior of the BookPanel widget for yourself.

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!

Creating a Dialog in Compiled JavaFX Script – and Bag the GridBag

ngaongan — Mon, 27 Jul 2009 00:33:00 +0000

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!

Ngaongan's Blog

JavaFX Applets Meet Google Chrome

Using the Java Deployment Toolkit with JavaFX Applets

Using the Java Deployment Toolkit with JavaFX Applets

Six Degrees of Aynsley Dunbar: BandmatesFX Example JavaFX App Continued

Freebase Contributing Artists App

Six Degrees of Aynsley Dunbar: BandmatesFX Example JavaFX App Continued

Educational JavaFX Script Apps

JavaFX in the Wild: Sapphire!

Compiled JavaFX Script Tools

JavaFX Authoring Tool Demo at JavaOne

Magnus Robertsson presents another aspect on JavaFX MOJO binding

JFXtras 0.2 Released: Featuring Extra Shapes for JavaFX

Absence of Malice in JavaFX

JavaFX Skins Game, and Happy New Year!

JavaFX Skins Game

A New Shape

A New Skin

A Small Change Of Style

JFXtras 0.1 Release: Utilities and Add-ons for the JavaFX Language

A JavaFX Visual Designer Tool Just Fell out of the Sky

December 11, 2008

Eclipse Plugin for JavaFX Available, and NetBeans JavaFX Plugin Works on Linux

Up the Nile with a Paddle: Fun with JavaFX Graphics

July 04, 2008

JavaFX API Documentation Tool Now Supports In-line Examples

Romain Guy’s Magic InfiniteProgressPanel

Creating Sliders in Compiled JavaFX Script

Turn the Page: Creating a Compiled JavaFX Script BookPanel

Creating a Dialog in Compiled JavaFX Script – and Bag the GridBag