The Java Mobile & Embedded Developer Days sessions are wrapping up, and I've found this conference to be a very informative and worthwhile experience I'll write a post soon about the details of JavaFX Mobile that were presented. In this post, however, I'd like to share with you about a contest that occurred during the conference which ended with three other attendees and me each winning a Sun SPOT Java Development Kit. See Roger Brinkley's blog post and Terrence Barr's blog post about the contest. Roger and Terrence dreamed up and conducted the conference in a suburb manner!
If you take a look at the Sun SPOT World site, you'll see that Sun SPOT (Small Programmable Object Technology) is a technology that includes a small device with a Java Virtual Machine, various sensors, and other on-board features. During the conference, the attendees were invited to participate in the contest by answering the question: "What cool thing would you develop if you had a Sun SPOT?" My answer was that I would create programs in JavaFX Script that are geared toward helping kids become interested in learning computer programming. One such program, for example, could communicate with Sun SPOT devices mounted in toy cars.
To help the judges (who were the other conference attendees) visualize the idea, I developed a quick (it took less than one hour) prototype in JavaFX Script of a user interface that would be appropriate for a young child. As illustrated in the screenshot below, you can drag the icons from the right side of the screen and put them together into a sequence that you want the model car to execute (in this case, travel straight, honk the horn, and turn left).
When the user clicks the Go button, the program would communicate with the Sun SPOT in the small vehicle. In this prototype, when you press Go, a dialog box appears that lists some of the features of the proposed application, shown below:
Here's the source code for the prototype:
/*
* SunSpots4Kids.fx
*
* Developed 2008 by James L. Weaver (jim.weaver at lat-inc.com)
* to serve as a compiled JavaFX Script example to try to win
* a Sun SPOT Development Kit at Java Mobile & Embedded Developer Days
*/
import javafx.ui.*;
import javafx.ui.canvas.*;
import java.lang.System;
class ActionModel {
attribute x:Number;
attribute y:Number;
}
Frame {
var dlg:Dialog
title: "SunSpots4Kids"
width: 820
height: 700
background: Color.WHITE
visible: true
content:
BorderPanel {
top:
Canvas {
content:
Text {
content: "SunSpots4Kids: Baby You Can Drive My Car"
x: 20
y: 20
fill: Color.ORANGE
stroke: Color.RED
strokeWidth: 3
font:
Font {
face: FontFace.COMIC_SANS_MS
style: FontStyle.BOLD
size: 36
}
}
}
center:
Canvas {
content:
Group {
transform: Translate.translate(680, 40)
content: [
ImageView {
var toyHorn =
ActionModel {
x: 0
y: 0
}
transform: bind [
Translate.translate (toyHorn.x, toyHorn.y),
]
image:
Image {
url: "file:images/toy_horn.jpg"
}
onMouseDragged: function(mEvt) {
toyHorn.x += mEvt.localDragTranslation.x;
toyHorn.y += mEvt.localDragTranslation.y;
}
},
Group {
var bottomLeftCurve =
ActionModel {
x: 0
y: 80
}
content: [
Arc {
height: 120
width: 120
startAngle: 90
length: 90
closure: ArcClosure.PIE
stroke: Color.BLUE
fill: Color.BLUE
strokeWidth: 5
},
Arc {
x: 30
y: 30
height: 60
width: 60
startAngle: 90
length: 90
closure: ArcClosure.PIE
stroke: Color.WHITE
fill: Color.WHITE
strokeWidth: 5
},
]
transform: bind [
Translate.translate (bottomLeftCurve.x, bottomLeftCurve.y),
]
onMouseDragged: function(mEvt) {
bottomLeftCurve.x += mEvt.localDragTranslation.x;
bottomLeftCurve.y += mEvt.localDragTranslation.y;
}
},
Group {
var topLeftCurve =
ActionModel {
x: 0
y: 150
}
content: [
Arc {
height: 120
width: 120
startAngle: 270
length: 90
closure: ArcClosure.PIE
stroke: Color.BLUE
fill: Color.BLUE
strokeWidth: 5
},
Arc {
x: 30
y: 30
height: 60
width: 60
startAngle: 270
length: 90
closure: ArcClosure.PIE
stroke: Color.WHITE
fill: Color.WHITE
strokeWidth: 5
},
]
transform: bind [
Translate.translate (topLeftCurve.x, topLeftCurve.y),
]
onMouseDragged: function(mEvt) {
topLeftCurve.x += mEvt.localDragTranslation.x;
topLeftCurve.y += mEvt.localDragTranslation.y;
}
},
Rect {
var straightAway =
ActionModel {
x: 0
y: 300
}
width: 100
height: 30
stroke: Color.BLUE
fill: Color.BLUE
strokeWidth: 5
transform: bind [
Translate.translate (straightAway.x, straightAway.y),
]
onMouseDragged: function(mEvt) {
straightAway.x += mEvt.localDragTranslation.x;
straightAway.y += mEvt.localDragTranslation.y;
}
},
ImageView {
var headLights =
ActionModel {
x: 0
y: 350
}
transform: bind [
Translate.translate (headLights.x, headLights.y),
]
image:
Image {
url: "file:images/headlights.jpg"
}
onMouseDragged: function(mEvt) {
headLights.x += mEvt.localDragTranslation.x;
headLights.y += mEvt.localDragTranslation.y;
}
},
]
}
}
bottom:
FlowPanel {
content:
Button {
background: Color.WHITE
borderPainted: false
icon:
Image {
url: "file:images/go.jpg"
}
action:
function() {
dlg = Dialog {
modal: true
width: 600
height: 400
title: "SunSpot4Kids Messages"
visible: true
content:
Canvas {
content: [
Text {
content: "Age Adjusted IDE"
x: 20
y: 20
fill: Color.BLUE
stroke: Color.BLUE
strokeWidth: 3
font:
Font {
face: FontFace.COMIC_SANS_MS
style: FontStyle.BOLD
size: 28
}
},
Text {
content: "Engaging Project Templates"
x: 20
y: 100
fill: Color.RED
stroke: Color.RED
strokeWidth: 3
font:
Font {
face: FontFace.COMIC_SANS_MS
style: FontStyle.BOLD
size: 28
}
},
Text {
content: " - 3D Dance Dance Revolution"
x: 20
y: 180
fill: Color.GREEN
stroke: Color.GREEN
strokeWidth: 3
font:
Font {
face: FontFace.COMIC_SANS_MS
style: FontStyle.BOLD
size: 28
}
},
]
}
buttons: [
Button {
text: "OK"
defaultButton: true
action:
function():Void {
dlg.hide();
}
}
]
};
}
}
}
}
onClose:
function() {
System.exit(0);
}
}
Humble Beginnings
As you can see, the prototype is in its beginning stages, and there is no communication with the Spun SPOT device yet. I plan, however, to evolve this project into the stated vision, and I'll make blog entries periodically as progress in made. I'll put compiled JavaFX Script code in each of these blog entries because the program will be written primarily in JavaFX Script. There will also be some specific Sun SPOT related code, so if you're not interested in that technology you can skip any code or discussions related to Sun SPOT (although I hope you don't, because it will be fun!)
Thanks again to Roger Brinkley, Terrence Barr, and others at Sun who were responsible for this conference. Stay tuned for more on the JavaFX Mobile content, but if you'd like to get ahead of me you could take a look at the session abstracts and slides.
Regards,
Jim Weaver
JavaFX Script: Dynamic Java Scripting for Rich Internet/Client-side Applications
Immediate eBook (PDF) download available at the book's Apress site
