groovy -classpath $JAVAFX_HOME/rt/lib/jfxrt.jar helloGroovyFX.groovyPro Tip: Fellow GroovyFX project member Dierk König suggests using the following tip (as discussed on this page) to make your JavaFX libraries available to all of your Groovy scripts:
mkdir ~/.groovy/lib ln -s $JAVAFX_HOME/rt/lib/* ~/.groovy/lib/Then you can just type:
groovy groovyFXHello.groovyProject Builds
JAVAFX_HOME environment variable to locate the JavaFX libraries. It also declares a dependency on GroovyFX 0.1 from the Maven Central repository.gradlew makeDirs to create a standard Maven/Gradle project structure that includes directories like src/main/ and src/test.gradlew clean run and you should see your new project compile and run, producing the window shown at the top of this post.GroovyFX.start { primaryStage ->
def circles
def sg = new SceneGraphBuilder(primaryStage)
sg.stage(title: 'GroovyFX ColorfulCircles', resizable: false, visible: true) {
scene(width: 800, height: 600, fill: black) {
group {
circles = group {
30.times {
circle(radius: 200, fill: rgb(255, 255, 255, 0.05),
stroke: rgb(255, 255, 255, 0.16),
strokeWidth: 4, strokeType: 'outside')
}
effect boxBlur(width: 10, height: 10, iterations: 3)
}
}
rectangle(width: 800, height: 600, blendMode: 'overlay') {
def stops = ['#f8bd55', '#c0fe56', '#5dfbc1', '#64c2f8',
'#be4af7', '#ed5fc2', '#ef504c', '#f2660f']
fill linearGradient(start: [0f, 1f], end: [1f, 0f], stops: stops)
}
}
parallelTransition(cycleCount: indefinite, autoReverse: true) {
def random = new Random()
circles.children.each { circle ->
translateTransition(40.s, node: circle,
fromX: random.nextInt(800), fromY: random.nextInt(600),
toX: random.nextInt(800), toY: random.nextInt(600))
}
}.play()
}
}
Update: Stephen updated his version to make it shorter! He even stole GroovyFX's new gradient stop syntax to do it. That was low. :-) I have no choice but to respond by shortening the GroovyFX version even further. (Thanks to Jim Clarke for the idea of using the parallelTransition in place of the timeline).
I have just uploaded a second screencast (embedded below) in the "JavaFX on Griffon" series. If you missed the first screencast, you can find it here. This screencast concludes the basic introduction I wanted to provide to writing JavaFX applications with Griffon.
In my previous article, I was remiss in forgetting to thank Andres Almiray, the leader of the Giffon project, for all his help in creating these plugins. I am thoroughly convinced that Andres spent about twice as much time answering all of my silly questions as it would have taken him to just write the plugins himself.
So Mr. Almiray, thank you for all the time you spent teaching me about Griffon plugins and the Griffon build system. You, sir, are a scholar and a gentleman!
I'm really happy to share one of the side projects I've been working on for a while now. Those of you who follow me on Twitter will have seen images of this in the past, but now I'm finally able to open up the sandbox and let others play.
I have posted a screencast on YouTube that shows how to get started with Griffon, GroovyFX, and JavaFX. I hope you will agree that it is a really fun and easy combination for writing Java desktop clients. If you are ready to try it out for yourself, the archetype I used in the video can be downloaded from my GitHub page. The screencast is embedded below, broken into two parts since it is a little on the lengthy side.
In other GroovyFX news, Jim Clarke and I will be doing an in-depth technical session on GroovyFX at JavaOne. The session will be the last session of the day on Thursday. It's titled "GroovyFX: JavaFX is my bag, baby, yeah!" This session will also touch on using GroovyFX with Griffon so I hope you can squeeze it into your busy JavaOne schedule!
Jim and I have also been busy adding more features to GroovyFX. I hope to post a new article soon describing new features like IDEA code completion and improved event declarations. There is so much Groovy JavaFX stuff to talk about!
Update: The next screencast in this series is now available. This screencast goes into more binding functionality and discusses event handling in JavaFX Griffon applications.
gradle buildOnce the project builds successfully, you can start running one of the many demos included with the project by typing a command like
gradle AnalogClockDemoThat will start the application pictured at the top of this article. You can see a complete list of available demos by typing
gradle tasksand examining the "Demo" task group.
@Canonical
class Person {
@FXBindable String firstName
@FXBindable String lastName
@FXBindable String city
@FXBindable String state
}
def data = [
new Person('Jim', 'Clarke', 'Orlando', 'FL'),
new Person('Jim', 'Connors', 'Long Island', 'NY'),
new Person('Eric', 'Bruno', 'Long Island', 'NY'),
new Person('Dean', 'Iverson', 'Fort Collins', 'CO'),
new Person('Jim', 'Weaver', 'Marion', 'IN'),
new Person('Stephen', 'Chin', 'Belmont', 'CA'),
new Person('Weiqi', 'Gao', 'Ballwin', 'MO'),
]
GroovyFX.start {
def sg = new SceneGraphBuilder()
sg.stage(title: "GroovyFX TableView Demo", visible: true) {
scene(fill: groovyblue, width: 650, height:450) {
stackPane(padding: 20) {
tableView(items: data) {
tableColumn(text: "First Name", property: 'firstName')
tableColumn(text: "Last Name", property: 'lastName')
tableColumn(text: "City", property: 'city')
tableColumn(text: "State", property: 'state')
}
}
}
}
}
Compare that with other "simple" JavaFX TableView examples, and it's easy to see that GroovyFX can save you both time and code. There are three main sections to this code: our Person class, the declaration of the data List, and the scene graph itself. The Person class contains the four properties that will be displayed in the TableView. It is annotated with the standard Groovy @Canonical AST transformation that adds a tuple constructor. This allows us to construct a Person instance using new Person('Jim', 'Clarke', 'Orlando', 'FL') in our data List. @Canonical also adds appropriate overrides for the hashCode, equals, and toString methods. These are all generated for us at compile time; this is the power of Groovy's AST transformations.@FXBindable annotation is a custom AST transform that Jim and I have added to GroovyFX. When you use it to annotate a standard Groovy property, the property will be transformed into a JavaFX property. Its job is to generate all of the boilerplate associated with declaring JavaFX properties. For each annotated property it will generate three methods:public void setFirstName(String value) public String getFirstName() public final StringProperty getFirstNameProperty()This setup allows you to access your JavaFX properties just as you would any standard Groovy property.
def name = person.firstName person.firstName = 'James' person.firstNameProperty.bind( /* some binding expression - more on that below */ )Considering all of the boilerplate involved when creating JavaFX properties in Java, this will be a real productivity win for GroovyFX users. One last thing to note is that you can also use
@FXBindable to annotate a class. The following code is equivalent to the class declaration above. The FXBindable transform will iterate all of the class properties and transform each one into a JavaFX property.@Canonical
@FXBindable
class Person {
String firstName
String lastName
String city
String state
}
We'll now turn our attention to the GroovyFX scene graph declaration. All scene graphs in GroovyFX begin with the GroovyFX.start method, which takes a closure as its argument. The first few lines of the closure are almost always the same: instantiate a SceneGraphBuilder and use it to declare your stage and scene. The root of our scene graph is a StackPane layout container. This is a nice container to use as a root node since it will be resized as the scene size changes and will also grow and shrink its child nodes if they are resizable (like TableView is). After the stackPane we add a tableView with its data items and its four tableColumn declarations. It is a very concise way to declare your scene graph.propertyName: value Map syntax. There are a couple of other fun things to note about the scene graph code.red, blue, or burlywood. There are also shortcuts for specifying the padding of a node. Above we have just used a single integer value which will be used as the padding on all sides. You can also specify a list with 1, 2, 3, or 4 integers that will be assigned just as they are in CSS. See the GroovyFX PaddingDemo for the options. These are just a few of the many short cuts and productivity boosters we've incorporated into GroovyFX. hourAngleProperty().bind(Bindings.add(hoursProperty().multiply(30.0),
minutesProperty().multiply(0.5)));
minuteAngleProperty().bind(minutesProperty().multiply(6.0));
secondAngleProperty().bind(secondsProperty().multiply(6.0));
Not bad, but all of the method calls do tend to obfuscate the rather simple binding expression. Wouldn't it be great if you could write these kinds of binding expressions in a more natural way? Say, something like this? hourAngleProperty.bind((hoursProperty * 30.0) + (minutesProperty * 0.5))
minuteAngleProperty.bind(minutesProperty * 6.0)
secondAngleProperty.bind(secondsProperty * 6.0)
This is exactly what Jim has just added to GroovyFX. This functionality uses Groovy's operator overriding ability combined with its ability to add methods to existing classes. The result is all-natural binding goodness with only the essence of the binding and little ceremony. In fact the above expressions are part of the AnalogClockDemo pictured at the start of this article. The code for the demo's Time class is below.@FXBindable
class Time {
Integer hours
Integer minutes
Integer seconds
Double hourAngle
Double minuteAngle
Double secondAngle
public Time() {
// bind the angle properties to the clock time
hourAngleProperty.bind((hoursProperty * 30.0) + (minutesProperty * 0.5))
minuteAngleProperty.bind(minutesProperty * 6.0)
secondAngleProperty.bind(secondsProperty * 6.0)
// Set the initial clock time
def calendar = Calendar.instance
hours = calendar.get(Calendar.HOUR)
minutes = calendar.get(Calendar.MINUTE)
seconds = calendar.get(Calendar.SECOND)
}
/**
* Add a second to the time
*/
public void addOneSecond() {
seconds = (seconds + 1) % 60
if (seconds == 0) {
minutes = (minutes + 1) % 60
if (minutes == 0) {
hours = (hours + 1) % 12
}
}
}
}
Note the use of @FXBindable for easy property declarations, the simple expressive binding, and the natural way of accessing the properties. You use the property name by itself for getting and setting values. You use the property name followed by "Property" to access the underlying JavaFX property class when you need to add listeners or bindings. For completeness, the scene graph code used to draw the clock face is shown below.time = new Time()
GroovyFX.start {
def width = 240.0
def height = 240.0
def radius = width / 3.0
def centerX = width / 2.0
def centerY = height / 2.0
def sg = new SceneGraphBuilder()
sg.stage(title: "GroovyFX Clock Demo", width: 245, height: 265, visible: true, resizable: false) {
def hourDots = []
for (i in 0..11) {
def y = -Math.cos(Math.PI / 6.0 * i) * radius
def x = ((i > 5) ? -1 : 1) * Math.sqrt(radius * radius - y * y)
def r = i % 3 ? 2.0 : 4.0
hourDots << circle(fill: black, layoutX: x, layoutY: y, radius: r)
}
scene(fill: groovyblue) {
group(layoutX: centerX, layoutY: centerY) {
// outer rim
circle(radius: radius + 20) {
fill(radialGradient(radius: 1.0, center: [0.0, 0.0], focusDistance: 0.5, focusAngle: 0,
stops: [[0.9, silver], [1.0, black]]))
}
// clock face
circle(radius: radius + 10, stroke: black) {
fill(radialGradient(radius: 1.0, center: [0.0, 0.0], focusDistance: 4.0, focusAngle: 90,
stops: [[0.0, white], [1.0, cadetblue]]))
}
// dots around the clock for the hours
nodes(hourDots)
// center
circle(radius: 5, fill: black)
// hour hand
path(fill: black) {
rotate(angle: bind(time.hourAngleProperty))
moveTo(x: 4, y: -4)
arcTo(radiusX: -1, radiusY: -1, x: -4, y: -4)
lineTo(x: 0, y: -radius / 4 * 3)
}
// minute hand
path(fill: black) {
rotate(angle: bind(time.minuteAngleProperty))
moveTo(x: 4, y: -4)
arcTo(radiusX: -1, radiusY: -1, x: -4, y: -4)
lineTo(x: 0, y: -radius)
}
// second hand
line(endY: -radius - 3, strokeWidth: 2, stroke: red) {
rotate(angle: bind(time.secondAngleProperty))
}
}
}
}
sequentialTransition(cycleCount: "indefinite") {
pauseTransition(1.s, onFinished: {time.addOneSecond()})
}.playFromStart()
}
Once again, this is the AnalogClockDemo located in src/demo in the GroovyFX project. These binding expressions should still be considered experimental, but you can see them in action If you run the demo with Gradle. It should appear as shown here.
Working with the recent early access release of JavaFX 2.0 has been interesting. On one hand, the scene graph API you know and love translates surprisingly well to Java. The team at Oracle has done a nice job of keeping the new API simple to use. The animation support still makes it easy to do the simple things, and possible to do the sophisticated. The memory overhead is down while performance is up. All good.
There are definitely places where JavaFX Script (now Visage) is missed. Binding, object literals, functional programming, and easy internationalization were all particularly useful language features. To make up for this loss, you can now use all of the old, familiar Java tools to write JavaFX including all of the awesome testing libraries and IDEs that Java is known for. In my opinion, this more than makes up for the loss of the awesomeness that was the JavaFX Script syntactic sugar.
You can always add some of that sweetness back in by using one of the many great JVM languages at our disposal. My weapon of choice happens to be Groovy and I can tell you that Groovy and JavaFX are a potent combination. Apparently Groovy is a terrific language for expressing application frameworks as it boasts two of the best in the Java world: Grails for web applications and Griffon for desktop applications.
Yesterday I decided to take a quick look at what would be involved in creating a JavaFX application plugin for Griffon. I was pleasantly surprised at how easy it was. Griffon's architecture is clean and the documentation was great. It took me a lot longer than it should have just because I was enjoying looking around under Griffon's hood.
A video showing the results of my little experiment is embedded below.
I plan to continue developing this plugin with the ultimate goal being first-class Griffon support for JavaFX applications when JavaFX 2.0 ships later this fall.
The JavaFX team at Oracle has a lot of work ahead of them. There are some missing features and some rough edges, but this Early Access release is a great start. I can't wait to see the finished product.
Just a quick update (long overdue - sorry!) to correct a couple of errors in my last two posts.
First, going all the way back to my post So What's It All Good For?, I realized while using my 'X' shape on another control that I had flubbed one of the coordinates in the SVG path. This made the 'X' look a little hinkey. Although it was really only noticeable at larger sizes, I went back and fixed the SVG path in that post. Now the 'X' checkbox looks better.
My second mistake was of a larger variety. I incorrectly claimed in my Into the Background post that you couldn't use a gradient as the background of a ScrollView because once you added other Nodes, the CSS engine would throw an exception. Turns out it was user error.
You see, I was assigning the gradient to the -fx-background property in the .scene style. The fact is that this property must evaluate to a color, not a gradient, because it is used later in the default Caspian style sheet as the base color from which other gradients are calculated. For some reason the CSS engine objected to me trying to force it to using a gradient as a color stop in another gradient. Go figure!
This is the reason that the error would only manifest once another control was added to the scene as that was when the gradient-based-on-gradient calculation would be triggered.
My mistake was kindly pointed out by David Grieve in response to my initial bug report here. I have also updated the original article to demonstrate a variation of the technique that David suggested. Thanks David!
Hopefully these kinds of mistakes will be less likely to happen in the future now that some nice documentation of the JavaFX CSS engine exists. There is also a new JIRA case opened to add better error handling and reporting to the CSS engine, which should also be a big help.
p.s. If you haven't signed the petition to open source the JavaFX runtime, please do so now! Having access to the source code could also help avoid these kinds of "misunderstandings" in the future.
Update: This post has been edited to show you how to use a gradient as the background of a ScrollView.
The new and improved support for CSS in JavaFX 1.3 includes a .scene style class which is a convenient place to initialize all sorts of application settings such as fonts and colors. Therefore, you would also think that the .scene class is the place to specify the background color for the scene, right? If you do, you're in good company. And just like the rest of us, you would be wrong.
It turns out that the only place to set the fill property of the Scene is in your JavaFX code. But there are some tricks you can use if you want the ability to control the background of your scene from a CSS file.
The simplest way to create a background that can be styled is to use a ScrollView as the background node in your scene. The advantage of using a ScrollView is that if the window is resized to be smaller than the content, scrollbars will automatically appear. This is a handy feature to have in a main window. The following code demonstrates the technique.
Stage {
var sceneRef: Scene;
title: "ScrollView Background"
scene: sceneRef = Scene {
width: 400
height: 300
stylesheets: "{__DIR__}scrollViewBackground.css"
content: [
ScrollView {
width: bind sceneRef.width
height: bind sceneRef.height
node: // Rest of your content goes here
}
]
}
}Here I simply placed the ScrollView first in the Scene's content and bound its width and height to the size of the Scene. Instant background.
If you then create a style sheet that sets the -fx-background property on the .scene selector, the ScrollView will pick it up automatically.
.scene {
-fx-background: skyblue;
}The results are pictured below.
Using a gradient as a background for the ScrollView is also possible, although it requires a little more work in your style sheet. You need to add two new styles that redefine the default background of the ScrollView so that it incorporates a gradient rather than a solid color.
.scene {
-fx-background: skyblue;
-my-scene-background: linear (0%, 0%) to (0%, 100%) stops (0%, derive(-fx-background, 25%)) (100%, derive(-fx-background, -35%));
}
#sceneBackground {
-fx-background-color: -fx-box-border, -my-scene-background;
}
#sceneBackground:focused {
-fx-background-color: -fx-focus-color, -fx-box-border, -my-scene-background;
}Note that I have used an ID selector for these new styles so that it overrides only the -fx-background-color of the single ScrollView that I have designated as my scene's background. I was careful to preserve the -fx-box-border and -fx-focus-color settings of the default ScrollView styles (from caspian.css) so that, other than the gradient, the background will look exactly like a standard ScrollView.
I have also defined my background gradient in the .scene section of the style sheet so that it can be reused in both of the #sceneBackground styles. Declaring CSS "variables" like this is a feature of the JavaFX CSS support.
Once these additions to the application's style sheet have been made, you just need to add the proper ID to the ScrollView being used as the scene's background and you are done. This is what the JavaFX code and our window look like now.
Stage {
var sceneRef: Scene;
title: "ScrollView Background"
scene: sceneRef = Scene {
width: 400
height: 300
stylesheets: "{__DIR__}scrollViewBackground.css"
content: [
ScrollView {
id: "sceneBackground"
width: bind sceneRef.width
height: bind sceneRef.height
node: // Your content goes here...
}
]
}
}Rectangle Backgrounds
Another lightweight option for creating a styled background is to use a simple Rectangle.
Stage {
var sceneRef: Scene;
title: "Rectangle Background"
scene: sceneRef = Scene {
width: 400
height: 300
stylesheets: "{__DIR__}rectangleBackground.css"
content: [
Rectangle {
styleClass: "background"
width: bind sceneRef.width
height: bind sceneRef.height
}
// Rest of your content goes here
]
}
}This is similar to the ScrollView version except that a Rectangle is inserted as the first node in the Scene and its width and height are bound to the Scene's size. Note that I assigned a styleClass of "background" to the Rectangle. The style sheet now looks like this:
.scene {
-my-scene-background: linear (0%, 0%) to (0%, 100%) stops (0%, derive(skyblue, 25%)) (100%, derive(skyblue,-25%));
}
.background {
-fx-fill: -my-scene-background;
}In the style sheet above, I've assigned a gradient to the -my-scene-background property in the .scene section and then used it to set the Rectangle's fill (-fx-fill) in the .background section which was the styleClass for the background Rectangle. Of course, I could have just assigned the gradient to the -fx-fill property directly, but as was pointed out above, doing it this way makes that gradient available for use by other styles in the style sheet.
For the more adventurous, you can also use a Region for your background. This gives you the ability to have background colors, borders, and even images!
Warning! Non-public APIs in use beyond this point. Proceed at your own risk! (It's really not that risky)
All of the core controls in JavaFX 1.3 are made of Regions. Because of this, Regions are heavily tied into the new CSS support and have a lot more styling options than any other type of node. You can assign background colors and images, style borders, and even change the shape of the Region all from a style sheet.
But you don't have to write a control to make use of a Region. Regions are a subclass of the public Stack container and therefore can be used anywhere in the scene graph. Which means that a Region makes a great background for a Scene.
The top image shows a window with a gray gradient background that is typical of a default Caspian color scheme. The bottom image shows a combination of a background color and a background image that is positioned along the bottom of the window and repeated in the x-direction to fill the window with flowers in a celebration of Spring (with apologies to all of our friends in the Southern Hemisphere).
The code and the stylesheet are shown below in their entirety.
Stage {
var sceneRef: Scene;
var backgroundRef: Node;
title: "Region Background"
scene: sceneRef = Scene {
width: 600
height: 300
stylesheets: ["{__DIR__}jfxtras.css", "{__DIR__}sceneStyles.css"]
content: [
backgroundRef = Region {
styleClass: "background1"
width: bind sceneRef.width
height: bind sceneRef.height
}
VBox {
var fillWidth = LayoutInfo { hfill: true }
spacing: 10
padding: Insets { top: 10, right: 10, bottom: 10, left: 10 }
content: [
XEtchedButton {
text: "Business As Usual"
layoutInfo: fillWidth
action: function () {
backgroundRef.styleClass = "background1"
}
}
XEtchedButton {
text: "Yay, It's Spring!"
layoutInfo: fillWidth
action: function () {
backgroundRef.styleClass = "background2"
}
}
]
}
]
}
}.scene {
-fx-font: 24pt "Amble Condensed"
}
.background1 {
-fx-color: lightgray;
-fx-background-color: -fx-body-color;
-fx-background-image: null;
}
.background2 {
-fx-background-color: #81E2F7;
-fx-background-image: "flowersbluesky.png";
-fx-background-position: left bottom;
-fx-background-repeat: repeat-x;
}
Ok, so my previous post (which I refer to facetiously as the Encyclopedia of JavaFX Styling) was a tad on the long-ish side. It contained a lot of not-so-trivial-to-understand information. It contained information that was biased toward helping control authors understand the new system rather than application developers.
.scene {
-fx-font: 16pt "Amble"
}
.button {
-fx-base: dodgerblue;
-fx-shape: "M 50,30 m 0,25 a 1,1 0 0,0 0,-50 a 1,1 0 1,0 0,50";
-fx-scale-shape: false;
}
.check-box:selected *.label {
-fx-text-fill: red
}
.check-box:selected *.mark {
-fx-background-color: red;
-fx-shape: "M 0,0 H1 L 4,3 7,0 H8 V1 L 5,4 8,7 V8 H7 L 4,5 1,8 H0 V7 L 3,4 0,1 Z";
}
.slider *.track {
-fx-base: derive( goldenrod, 50% );
}
.slider *.thumb {
-fx-shape: "M 50,5 L 37,40 5,40 30,60 20,95 50,75 80,95 70,60 95,40 63,40 Z";
-fx-background-color: derive(goldenrod,-50%), goldenrod;
-fx-background-radius: 0, 0;
-fx-background-insets: 0, 2;
-fx-padding: 10;
-fx-effect: dropshadow( two-pass-box , rgba(0,0,0,0.6) , 4, 0.0 , 0 , 1 );
}
Just apply this style sheet and BLAM! All your buttons are round, all your checkboxes are X'ed, and all of your sliders are golden. Life is good. Behold.
Although... we may want to re-think that red checkbox label. Ick.
JavaFX v1.3 includes a brand new and much more powerful CSS-based styling and skinning engine. This article will take a peak under the covers and show you how to get the most out of JavaFX styling so you can develop a unique look for your applications. I'll even show you how to do some basic re-skinning of the core controls - changing not just their color scheme but also their shape! - all from the comfort and convenience of your style sheet. That is a lot of ground to cover so we better get started.
Warning!! The Region API is not public and is not considered a finished work. It can, and certainly will, change in future versions. Maybe even in JavaFX v1.3.1. The code presented here is for demonstration of the concepts underlying the new styling system in JavaFX 1.3. If you are considering using this information to build your own custom controls, be sure you understand the down side of using private APIs!
In v1.3 the core controls are made up of regions. Regions are basically a shape with one or more backgrounds and borders. All core control skins inherit from SkinBase which extends Region. Take the LabelSkin as an example. Its inheritance hierarchy looks like this:
LabelSkin -> SkinBase -> Region -> Stack
So the controls are regions, but they can also have zero or more sub-regions. Think of a scroll bar control. It is a region, but it also has sub-regions for the thumb button, the track, and the up and down arrow buttons.
Regions are tied into the new CSS system and can be fully specified, right down to their shape, from a style sheet.
Note that SkinBase does not inherit from Skin at any point. A SkinBase can be assigned to a custom control's skin variable through the use of the SkinAdapter class. The SkinAdapter will take care of passing along the control and behavior assignments to the SkinBase when SkinAdapter is set as the Control's skin.
I simply define a class that extends Control, assign the skin using the SkinAdapter, and override the styleClass variable.
public class DemoControl extends Control {
// This is the class I'll use in style sheets
override var styleClass = "demo-control";
// SkinAdapter lets me use a Region as a Skin
override var skin = SkinAdapter {
rootRegion: DemoControlRegionSkin{}
}
}
Next I define a Region-based skin by creating a class that extends SkinBase.
public class DemoControlRegionSkin extends SkinBase {
// SkinAdapter will set up SkinBase's control and behavior vars
var cc = bind control as DemoControl;
// You should always give your control skins a default preferred size
override function getPrefWidth( height ) { 100 }
override function getPrefHeight( width ) { 100 }
}
I think it's best to start with a basic example and build up from there. So I'll begin by creating a simple scene and adding our new demo control.
Stage {
title: "JavaFX CSS Controls"
scene: Scene {
var stack:Stack;
width: 300
height: 300
stylesheets: "{__DIR__}controlStyles.css"
content: [
stack = Stack {
width: bind stack.scene.width
height: bind stack.scene.height
content: [
DemoControl {
layoutInfo: LayoutInfo {
width: 250
height: 250
}
}
]
}
]
}
}I created a simple Scene that is 300 by 300 pixels and has a Stack container that fills it completely. I then created a new instance of my DemoControl and set it's preferred width and height to be 250 pixels. Note that this will override the preferred width and height of 100 that I entered into the control skin itself when I added those functions. By default a Stack will size its children to their preferred size and center them. Therefore, when this program is run we should see a 250 by 250 rectangle (a.k.a. a square) centered in the scene. I'll now add some minimal styling in controlStyles.css (which is added to the Scene above) so the Region's rectangle will be visible.
.scene {
-fx-font: 16pt "Amble";
-dean-slightlydarkergreen: derive( green, -25% );
}
.demo-control {
-fx-background-color: skyblue;
-fx-border-color: -dean-slightlydarkergreen;
-fx-border-width: 2;
}This small style sheet first sets a default font for the Scene. I haven't added any controls with text yet, but I will later and it's always nice to set these things up in one place. Below the font attribute, I demonstrate a feature of JavaFX styling: the ability to derive a new color from an existing one and store it for later use. In this case, I created a darker version of Green and named it -dean-slightlydarkergreen. Not only am I now immortalized in my own style sheet, but the DemoControl can reference this attribute later as shown above for the control's border color. Note that I use the same class string "demo-control" that I hard-coded into my DemoControl class. Let's see how this looks so far.
You can also specify linear gradients in your style sheet. The image and code below shows a fancier version of the DemoControl.
 |
#gradient.demo-control {
-dean-lightnavy: derive(navy, 100%);
-dean-navygrad: linear (0%,0%) to (100%,0%) stops (0%, -dean-lightnavy) (100%, navy);
-fx-background-color: linear (0%,0%) to (0%,50%) stops (0%, derive(deepskyblue, 80%)) (30%, deepskyblue) reflect;
-fx-border-color: -dean-navygrad null -dean-navygrad null;
-fx-border-width: 8 0 8 0;
} |
You can see by the CSS selector "#gradient.demo-control" that this style will be applied to DemoControls with "gradient" for an ID. I didn't have to change any JavaFX script code to make this work other than adding the id: "gradient" attribute to the DemoControl's object literal declaration in the Scene, thereby picking up this new style.
In this style, I also derive a new light navy color and then reference it again when I define my navy gradient (-dean-navygrad). This gradient is then used as the border color. I use it on the top and bottom while setting the left and right border colors to null. Similarly, I set the top and bottom border widths to 8 pixels while the left and right borders have a 0 width. Many style attributes of a Region have this ability to specify top, right, bottom, and left properties individually. On the other hand, if I were to simply say "-fx-border-width: 8" then all borders would be 8 pixels wide.
The Region's background color is a slightly more complicated linear gradient. It goes half way down the rectangle and is then reflected so the bottom half matches the top. Note that you can even embed "derive" functions inside of linear gradient definitions. More power!
As I said at the beginning, Regions are made up of a shape and one or more backgrounds and borders. Let's take a look at how you define multiple backgrounds and borders for your region. Once again, I will make no changes to our source code other than the control's ID in the scene and a new style in the style sheet.
 |
#multibg.demo-control {
-fx-background-color: skyblue, mediumaquamarine;
-fx-background-radius: 15 0 15 0;
-fx-background-insets: 0, 20;
-fx-border-color: navy, darkcyan;
-fx-border-style: dotted;
-fx-border-width: 2;
-fx-border-radius: 15 0 15 0;
-fx-border-insets: 0, 20;
} |
Most of the style attributes of a Region can take multiple items in their declarations. You can see examples of this in the declarations of the -fx-background-color, -fx-background-insets, and the -fx-border-color attributes. In these cases, the first item is applied to the first background, the second item is applied to the second background and so on. Therefore we end up with a skyblue rectangle with navy border and a medium aquamarine rectangle with a dark cyan border. The first background has no insets (it is filled right to the border of the control), while the second rectangle is inset by 20 pixels on all sides.
In cases where there are multiple backgrounds but only one item specified, the first item will be applied to all backgrounds. For example, both rectangles have top-left and bottom-right rounded corners defined by the -fx-background-radius and -fx-border-radius attributes. Since only one set of radius attributes are defined, it will be applied to both backgrounds.
The thing to remember is that commas separate multiple items in a single attribute (as in the two items specified by -fx-background-color above), whereas spaces are used as the separators in an item that can take multiple values (as in the one item having 4 values specified by -fx-border-radius above). Crystal clear? Good. Let's take it up a notch.
Here's a twist: many of those attributes that can take multiple values in a single item (like -fx-border-radius) can also take multiple items. This allows you, for example, to specify a different set of border radius values for each background.
 |
#multibgoppcorners.demo-control {
-fx-background-color: skyblue, mediumaquamarine;
-fx-background-radius: 15 0 15 0, 0 15 0 15;
-fx-background-insets: 0, 20 40 20 40;
-fx-border-color: navy, darkcyan;
-fx-border-style: dotted, dashed;
-fx-border-width: 2, 1;
-fx-border-radius: 15 0 15 0, 0 15 0 15;
-fx-border-insets: 0, 20 40 20 40;
} |
Here I specify a completely different set of values for the -fx-background-radius, -fx-background-insets, -fx-border-radius, and -fx-border-insets attributes for each background. Remember, multiple values within a single item are separated by spaces while multiple items are separated by commas.
In this section I've experimented with the most common style attributes that are used on Regions. You can also use the regular Node style attributes that I covered here. Of interest will be Node's -fx-opacity, -fx-effect, and -fx-cursor attributes. It should also be noted that Regions have a corresponding set of attributes for image-based backgrounds and borders (i.e. -fx-background-image and -fx-border-image and so on). I'm not going to cover them here, but I would expect Oracle to publish full documentation on these attributes very soon.
So far, I've just used the default rectangular shape but by using the style sheet I can make a region take on just about any shape that can be imagined. The shape of a Region is specified using SVG path notation. This notation uses a compact encoding to describe shapes using a series of commands and coordinates. Commands are represented by a single letter. For example, M is the move-to command. If the command letter is upper case then the coordinates that follow are considered absolute coordinates whereas the coordinates are interpreted as relative if the letter is lower case. So "M 0 1" means move to location 0,1 while "m 0 1" means move 1 unit in the y direction from the current location. See this page for details of the SVG path syntax.
Drawing shapes with one or more lines is extremely easy. The format of the commands is shown in the following table.
| Move to | M x y m x y |
| Line to | L (x y)+ l (x y)+ |
| Horizontal line to | H x |
| Vertical line to | V y |
| Close the current path | Z z |
Suppose I wanted a triangular region instead of the default rectangle.
 |
#line.demo-control {
-fx-shape: "M 0,1 L 1,1 .5,0 Z";
-fx-background-color: skyblue, blue;
-fx-background-insets: 0, 20 20 10 20;
}
|
The SVG path commands for drawing cubic Bezier curves are shown in the following table.
| Cubic Bezier curve to Draws a curve from the current point to x,y. x1,y1 is the control point at the beginning of the curve. x2,y2 is the control point at the end of the curve. | C (x1 y1 x2 y2 x y)+ c (x1 y1 x2 y2 x y)+ |
| Cubic Bezier curve to (shorthand) Draws a curve from the current point to x,y. The control point at the beginning of the curve is the reflection of the second control point from the previous curve. x2,y2 is the control point at the end of the curve. | S (x2 y2 x y)+ s (x2 y2 x y)+ |
So let's take a look at a region shaped with cubic curves.
 |
#cubic.demo-control {
-fx-shape: "M100,200 C100,100 250,100 250,200 S400,300 400,200 Z";
-fx-background-color: skyblue, blue;
-fx-background-insets: 0, 10;
} |
| Quadratic Bezier curve to Draws a curve from the current point to x,y. x1,y1 is the control point of the curve. | Q (x1 y1 x y)+ q (x1 y1 x y)+ |
| Quadratic Bezier curve to (shorthand) Draws a curve from the current point to x,y. The control point at the beginning of the curve is the reflection of the control point from the previous curve. | T (x y)+ t (x y)+ |
 |
#quadratic.demo-control {
-fx-shape: "M0,200 Q100,50 200,200 T500,100";
-fx-background-color: skyblue, blue;
-fx-background-insets: 0, 10;
} |
| Elliptical arc to rx ry - The radius of the resulting arc x-axis-rotation - Rotation of the x in degrees large-arc-flag - If 1 then the largest arc between the start and end points will be drawn. If 0 then the smallest are will be drawn. sweep-flag - Indicates the direction in which the arc is drawn. A 1 specifies the positive direction, a 0 specifies the negative direction. x y - The end point of the resulting arc. These are absolute coordinates or are relative to the start point (the current location) depending on whether the A or a command is used. | A (rx,ry x-axis-rotation large-arc-flag sweep-flag x,y)+ a (rx,ry x-axis-rotation large-arc-flag sweep-flag x,y)+ |
 |
#arc.demo-control {
-fx-shape: "M 50,30 m 0,25 a 1,1 0 0,0 0,-50 a 1,1 0 1,0 0,50";
-fx-background-color: skyblue, blue;
-fx-background-insets: 0, 10;
}
|
One last thing I want to address is the subject of using that styles in caspian.css with your own controls. The Caspian class in JavaFX 1.2 contained several nice utility functions that would generate nice gradients that tied into the Caspian theme. That class no longer exists in JavaFX 1.3. To use the Caspian theme with your own controls, you will need to use the values defined in the caspian.css style sheet.
Let's return to the DemoControl and make it look like it fits in with the Caspian controls.
|
#caspian.demo-control {
-fx-background-color: -fx-body-color;
-fx-background-radius: 5;
-fx-border-color: null;
} |
#caspianborders.demo-control {
-fx-background-color: -fx-shadow-highlight-color, -fx-outer-border, -fx-inner-border, -fx-body-color;
-fx-background-radius: 5, 5, 4, 3;
-fx-background-insets: 0 0 -1 0, 0, 1, 2;
-fx-border-width: 0;
}
|
.scene {
-fx-font: 16pt "Amble";
-fx-base: dodgerblue;
} |
|
#star.button {
-fx-shape: "M 50,5 L 37,40 5,40 30,60 20,95 50,75 80,95 70,60 95,40 63,40 Z";
-fx-base: goldenrod
} |
Support for styling the core controls using CSS has been greatly enhanced for JavaFX 1.3. In fact, the default skin for the core controls, called Caspian, is now written as a style sheet rather than in JavaFX Script code. Below is an example of a small JavaFX 1.3 style sheet that I wrote for Jim Weaver's 3D Calendar application:
.scene {
/* default font for all content, inherited by all nodes */
-fx-font: 16pt "Amble Cn";
/* main color palette */
-fx-base: #AEBBD2;
-fx-accent: #385589;
-fx-mark-color: #3E857C;
}
.text-box {
-fx-effect: innershadow( two-pass-box, rgba(0,0,0,0.2), 10, 0.0, 0, 2 );
-fx-text-fill: #385589
}
#title.text-box {
-fx-font-size: 125%;
}
.button:strong {
-fx-text-fill: #D3DAE9;
}
If you have used JavaFX's CSS support in previous versions, you will notice some changes in how style sheets are now written.
Here is a table of some more new and fun attributes that can be set from style sheets.
| Attribute | Example Value(s) | Works On | Notes |
|---|---|---|---|
| -fx-cursor | crosshair | default | hand | move | text | wait | Nodes | |
| -fx-opacity | 0 .. 1.0 | Nodes | |
| -fx-rotate | 0 .. 360 | Nodes | Defaults to 0. Not taken into account in layoutBounds |
| -fx-scale-x | Number | Nodes | Defaults to 1. Not taken into account in layoutBounds |
| -fx-scale-y | Number | Nodes | Defaults to 1. Not taken into account in layoutBounds |
| -fx-scale-z | Number | Nodes | Defaults to 1. Not taken into account in layoutBounds |
| -fx-translate-x | Number | Nodes | Defaults to 0. Not taken into account in layoutBounds |
| -fx-translate-y | Number | Nodes | Defaults to 0. Not taken into account in layoutBounds |
| -fx-translate-z | Number | Nodes | Defaults to 0. Not taken into account in layoutBounds |
| -fx-focus-color | white | #FFEEDD | #FFF | Controls | Color of the focus outline |
| -fx-control-inner-background | white | #FFEEDD | #FFF | TextBox, PasswordBox, ListView | |
| -fx-mark-color | blue | #0000FF | #00F | CheckBox, RadioButton, ScrollBar | |
| -fx-echo-char | "\u263A"; | PasswordBox | Make your password boxes friendly! |
This is just a sample of some of the power of the new CSS support. I haven't even touched on linear and radial gradients, deriving colors using derive( pink, -20% ), the ladder function, or alternative ways of specifying colors: rgb(), rgba(), hsb(), and hsba(). So much left to cover!
Warning #1 This post is not an introduction to writing controls in JavaFX. I will not cover the basics of the Control - Skin - Behavior classes. A quick and simple tutorial on this topic can be found here.
Warning #2 All of the information in this post applies only to JavaFX 1.2.1. One of the dangers of using non-public classes is that they can change significantly from version to version (and they certainly will for JavaFX 1.3). If there is interest, I will update this information after JavaFX 1.3 is released.
Apology #1 I discovered the information I'm about to present here while writing my own controls. None of this should be considered official Caspian documentation since I do not work for Sun and I do not have access to their source code (but hopefully I will when they release the source someday). Everything here is accurate as far as I can tell, but I apologize if I have any of the details wrong. Hopefully someone from Sun will read this and let me know if I've made any mistakes.
Knock-knock Joke #1 (of 100) Knock, knock. Who's there? Yewben. Yewben who? Yewben warned, now on with the post!
Colorable. This mixin provides the ubiquitous base and accent properties that can be used to style the controls. The base property specifies the base color of the control while the accent property specifies the accent color on those controls that support it. ListView, for example, uses the accent property to specify the color with which it draws the selection highlight in the list. Usage of the Colorable mixin makes Caspian controls incredibly easy to style. Paint objects from the base color: the body paint, the text paint, the border paint, the highlight line paint, and the shadow highlight paint. The screenshot below shows an application that displays these various colors and paints. It has been annotated with lines that show where they are used on a Caspian button (click the image to see a larger version). 
Caspian class in the com.sun.javafx.scene.control.caspian package provides easy access to these color-generating capabilities via module level functions: Caspian.getOverColor( base: Color )Caspian.getPressedColor( base: Color )Caspian.getBodyPaint( base: Color )Caspian.getTextPaint( base: Color )Caspian.getBorderPaint( base: Color )Caspian.getHighlightLinePaint( base: Color )Caspian.getShadowHighlightPaint( base: Color )public class MyControlSkin extends Skin, Colorable {
def bodyPaint = bind Caspian.getBodyPaint( base );
def overPaint = bind Caspian.getBodyPaint( Caspian.getOverColor( base ) );
def pressedPaint = bind Caspian.getBodyPaint( Caspian.getPressedColor( base ) );
var mousePressed = false;
def background = Rectangle {
fill: bind {
if (mousePressed) {
pressedPaint
} else if (background.hover) {
overPaint
} else {
bodyPaint
}
}
stroke: bind Caspian.getBorderPaint( base )
blocksMouse: true
onMousePressed: function( me: MouseEvent ) {
mousePressed = true;
// ... may also need to notify the Behavior ...
}
onMouseReleased: function( me: MouseEvent ) {
mousePressed = false;
// ... may also need to notify the Behavior ...
}
}
// ... I'm too modest to show more skin ...
}
With just a few lines of code you get nice Caspian gradients for your control plus your custom control will respond to the same base style property as any core JavaFX control. In this simple example I only changed the body paint in response to mouse events. The core JavaFX controls also tend to update their border and highlight colors in response to hover and pressed events. You can see this when you run the Caspian Colors application above and interact with the button. States, State, and StateTransition classes. All of these little beauties are found in the com.sun.javafx.animation.transition package. State class allows you to define each state of your control. The class has four properties of interest: id | The name of the state. |
defaultState | Should be set to true if this state is the one in which your control starts. |
active | Should be set to true when this state is active. Normally this will be bound to some property of the control. For example, when defining the "hover" state, you would bind the state's active property to the skin node's hover property. |
priority | An integer value that is used to establish precedence when multiple states are active at the same time. |
StateTransition class derives from Transition and allows you to define the animation that will occur when your control moves from one state to another. The properties of interest in this class are id, fromState, toState, and animation. The fromState property is a string that allows you to specify the id of the state you are transitioning from. Likewise for the toState property. States class keeps track of your control's states and manages the transitions between them. The following code shows an example of the states and transitions for a custom control. def FAST_TRANSITION = 250ms;
def SLOW_TRANSITION = 500ms;
public class MyControlSkin extends Skin, Colorable {
override var color = base; // color is another property defined in Colorable
def over = bind Caspian.getOverColor( base );
def pressed = bind Caspian.getPressedColor( base );
var mousePressed = false;
def states = States {
states: [
State { id: "disabled", active: bind control.disabled }
State { id: "armed", active: bind mousePressed }
State { id: "hover", active: bind control.hover }
State { id: "enabled", active: bind not control.disabled, defaultState: true }
]
transitions: [
StateTransition {
id: "Enter-Enabled"
toState: "enabled"
animation: ParallelTransition {
content: [
ColorTransition {
colorable: this
toValue: base
duration: SLOW_TRANSITION
}
FadeTransition {
node: bind node
toValue: 1.0
duration: FAST_TRANSITION
}
]
}
}
StateTransition {
id: "Enter-Hover"
toState: "hover"
animation: ColorTransition {
colorable: this
toValue: over
duration: FAST_TRANSITION
}
}
StateTransition {
id: "Enter-Armed"
toState: "armed"
animation: ColorTransition {
colorable: this
toValue: pressed
duration: FAST_TRANSITION
}
}
StateTransition {
id: "Enter-Disabled"
toState: "disabled"
animation: FadeTransition {
node: bind node
toValue: 0.33
duration: FAST_TRANSITION
}
}
]
}
// ... Move along, nothing more to see ...
}
True to the spirit of JavaFX's declarative syntax, all you have to do is declare your states and the transitions between them and the rest is handled for you! You can't ask for easier animations than that. State declarations above. That is because the order in which the states are declared establishes a default priority. You only need to specify an explicit priority if you want to override this default. Also note that I didn't specify a fromState in any of my state transitions. I was telling the States class that it can use that transition when entering the target state from any other state. You only need to specify a fromState if you want the transition to be used only when entering a state from one other particular state. ColorTransition class which is found in the com.sun.javafx.scene.control.caspian package. It will animate the Colorable mixin's color property from one value to another. This is yet another reason to make use of the Colorable mixin in your code - easy color animations! 
Knock, knock. Who's there? Yewer. Yewer who? Yewer afraid I was going to tell 100 knock-knock jokes weren't you!