JavaFX Applets Meet Google Chrome
by
·
Join the DZone community and get the full member experience.
Join For Freein the jfx custom nodes category of my 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.rgb(28, 28, 28)
selectedrowfill: color.rgb(45, 45, 45)
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.rgb(11, 11, 11)
},
stop {
offset: 1.0
color: color.rgb(52, 52, 52)
}
]
}
vertscrollbarthumbfill: color.rgb(239, 239, 239)
content: bind
for (obj in model.playlistobjects) {
if (obj instanceof string)
text {
textorigin: textorigin.top
fill: color.rgb(183, 183, 183)
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.rgb(211, 211, 211)
},
progressnode {
width: 430
height: 15
progresspercentcolor: color.rgb(191, 223, 239)
progresstextcolor: color.rgb(12, 21, 21)
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.rgb(0, 192, 255)
},
stop {
offset: 0.20
color: color.rgb(0, 172, 234)
},
stop {
offset: 1.0
color: color.rgb(0, 112, 174)
},
]
}
barfill:
lineargradient {
startx: 0.0
starty: 0.0
endx: 0.0
endy: 1.0
stops: [
stop {
offset: 0.0
color: color.rgb(112, 112, 112)
},
stop {
offset: 1.0
color: color.rgb(88, 88, 88)
},
]
}
progress: bind model.burnprogresspercent / 100.0
},
componentview {
component:
flowpanel {
background: color.black
content: [
label {
text: "slide to simulate burn progress:"
foreground: color.rgb(211, 211, 211)
},
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:
<html>
<body bgcolor="black">
<center>
<applet code="javafx.application.applet" width=500 height=400
archive="javafxrt.jar, scenario.jar, javafxgui.jar, javafx-swing.jar, tablenodeexample.jar">
<param name="applicationclass" value="com.javafxpert.table_node_example.ui.tablenodeexampleapplet"/>
<param name="jnlp_href" value="tablenodeexampleapplet.jnlp"/>
<param name="draggable" value="true">
</applet>
</center>
</body>
</html>
finally, here's the java web start
tablenodeexampleapplet.jnlp
file that is used by the html file above:
<?xml version="1.0" encoding="utf-8"?>
<jnlp spec="1.0+" href="tablenodeexampleapplet.jnlp">
<information>
<title>tablenodeexampleapplet</title>
<vendor>jmentor</vendor>
<description>tablenodeexampleapplet</description>
<description kind="short">tablenodeexampleapplet</description>
<homepage href="http://jmentor.com"/>
<offline-allowed />
</information>
<security>
<all-permissions/>
</security>
<resources>
<property name="jnlp.packenabled" value="true"/>
<j2se version="1.6+" href="http://java.sun.com/products/autodl/j2se" java-vm-args="-xmx800m" />
<jar href="tablenodeexample.jar" main="true" download="eager"/>
<jar href="scenario.jar"/>
<jar href="javafxrt.jar"/>
<jar href="javafxgui.jar"/>
<jar href="javafx-swing.jar"/>
</resources>
<applet-desc
name="tablenodeexampleapplet"
main-class="javafx.application.applet"
width="500"
height="400">
</applet-desc>
</jnlp>
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.
thanks google!
jim weaver
javafxpert.com
Opinions expressed by DZone contributors are their own.
Comments