JavaFX 1.2 Release: Sneak Peek

How to create a fancy JavaFX button, a button that is worth learning a new language and dealing with a front line technology, button like this?


Simplicity itself. Just create a class extending CutomNode, draw there a rectangle and a text, take care of their relative positions, colors, etc. And then, if you really want to make it nice, you have to implement functions onMouseEntered() and onMouseExited() with changes of the button colors, and, perhaps, add to mousePressed() and mouseReleased() some nice pixel shifts to imitate movement of the button being pressed. That's it. (See the source below.) In JavaFX 1.1, that is.

class FancyButton extends CustomNode {

    public var X: Number;
    public var Y: Number;
    public var width: Number;
    public var height: Number;
    public var caption: String;

    var text: Text;

    override function create() :Node {
        return Group {
            translateX: X
            translateY: Y
            content: [
                Rectangle {
                    width: width
                    height: height
                    arcWidth: 20
                    arcHeight: 20
                    stroke: Color.BLACK
                    strokeWidth: 1
                    fill: LinearGradient {
                        startX: 0.0
                        startY: 0.0
                        endX: 0.0
                        endY: 1.0
                        proportional: true
                        stops: [
                            Stop {
                                offset: 0.0
                                color: Color.WHITE
                             },
                             Stop {
                                 offset: 0.50
                                 color: Color.LIGHTBLUE
                             },
                             Stop {
                                 offset: 0.51
                                 color: Color.LIGHTGREY
                             },
                             Stop {
                                 offset: 1.0
                                 color: Color.DARKBLUE
                             }
                         ]
                     }
                 },
                 text = Text {
                     content: caption
                     fill: Color.RED
                     font: Font.font("Arial", FontWeight.BOLD, 14)
                     x: (width - text.boundsInLocal.width) / 2
                     y: (height - text.boundsInLocal.height) / 2 + 7
                 }
             ]
         }
     }
}

How to create the same fancy button in the upcoming JavaFX 1.2 release? Unfortunately, we do not have a well tested crystal ball handy, but our second-hand crystal ball says that it may be as easy as
var button = javafx.ui.Button {...}

Along with the Button, JavaFX 1.2, apparently, will have added the following UI controls:

• Default Button
• Radio Button
• Check Box
• Hyperlink
• Label
• Slider
• Scroll bar
• Combo Box
• Text Box
• List View
• Progress Indicator

And all of these goodies, revealing a true WORA spirit of JavaFX, will look and work the same way on desktop as well as on the phone.

As Octavian Tanase, Sun Executive Director in charge of JavaFX, mentioned in his comment to my earlier post, even though you can use Swing controls with JavaFX, after 1.2 you will probably not need them that often.

The rumor also is that JavaFX 1.2 will switch to a direct graphic acceleration using CPU as well as major types of GPUs. On some benchmarks, JavaFX Script 1.0 shows 25x speed advantage over Groovy and JRuby. With graphics support rewrite in JavaFX 1.2, RIA platforms performance competition may get into a new phase.