What can you do in 30 lines of JavaFX?  JFXStudio is running a contest right now to find this out…

http://jfxstudio.wordpress.com/2009/08/31/jfxstudio-challenge-small-is-the-new-big/

I strongly encourage you to give it a try.  So much so that I took a quick stab at putting together a sample myself this evening.  Welcome to the Time Wheel:

Click here to view the embedded video.

Everything is rendered using JavaFX Shape and Text primitives with clever PerspectiveTransform effects applied.  I also made use of an overlay gradient Flooded and Blended on an outer group in order to create the top and bottom shadow giving it a rounded 3d appearance.

Below is the full code for the application (clearly I was going for the 3000 character limit).  The formatted version was about 200 lines long and over 4000 characters, but by shortening variable names, removing white space, and merging lines, I was able to bring it down substantially.  This is definitely not a recommended coding practice, but met the contest constraints:

import javafx.scene.*;import javafx.scene.effect.*;import javafx.scene.layout.*;import javafx.scene.paint.*;import javafx.scene.paint.Color.*;
import javafx.scene.shape.*;import javafx.scene.text.*;import javafx.stage.*;import javafx.util.Math;import javafx.animation.*;import javafx.scene.media.*;
var ez=Interpolator.EASEBOTH;class Slot{var n:Node[];var v:Number on replace{
Timeline{keyFrames:at(.9s){c => v tween ez}}.play();a();}
var a:function();var c:Number;var e:String[];var s:Number;var f:Number;
init{var entryHeight=bind Math.sin(Math.PI/sizeof e)*h;n=for(entry in e)Stack{
var textLine:Text;content:[Group{var w1=bind Math.max(w,textLine.boundsInLocal.width);
content:[Rectangle{width:bind w1,height:bind h/12,fill:bind if(indexof entry mod 3==0){LIGHTGRAY} else if(indexof entry mod 3==1){DARKGRAY}
else{hsb(360*Math.abs((indexof entry*2-sizeof e as Number)/sizeof e),.4,.7)}}]}
textLine=Text{content:bind entry font:bind Font.font(null,h/12*.75)}]
visible:bind Math.abs(indexof entry-(c mod sizeof e))<=(sizeof e as Number)/4 or Math.abs(indexof entry-(c mod sizeof e))>=(sizeof e as Number)*3/4
effect:PerspectiveTransform{var sw=bind 360.0/sizeof e;var a=bind(indexof entry-c mod sizeof e)/sizeof e*360 + 90-sw/2;def sr=bind Math.toRadians(a + 90);
def er=bind Math.toRadians(a + 90 + sw);def r=bind h/2;var uy=bind r + Math.sin(er)*r;uly:bind uy ury:bind uy var ly=bind r + Math.sin(sr)*r;
lly:bind ly lry:bind ly ulx:bind Math.cos(er)*r*s;llx:bind Math.cos(sr)*r*s;urx:bind w-Math.cos(er)*r*f;lrx:bind w-Math.cos(sr)*r*f;}}}}
var x=45;var y=10;var w=24;var h=200;var ss=for(i in [1..9])Slot{e:for(j in [0..9])"{j}"s:.3-indexof i*.07 f:-.25 + indexof i*.07}
var so=MediaPlayer{media:Media{source:"http://jfxtras.org/sounds/beep.wav";}}
var bg:Color;ss[5].a=function(){so.stop();so.currentTime=0s;so.play();
Timeline{keyFrames:[at(50ms){bg => GREEN tween ez}at(150ms){bg => BLACK tween ez}]}.play();}
var d:java.util.Date;
Timeline{repeatCount:Timeline.INDEFINITE keyFrames:KeyFrame{time:1ms canSkip:true action:function(){d=new java.util.Date();
ss[8].c=java.lang.System.currentTimeMillis()mod 10;ss[7].c=(java.lang.System.currentTimeMillis()mod 100 as Number)/10;
ss[6].c=(java.lang.System.currentTimeMillis()mod 1000 as Number)/100;ss[5].v=d.getSeconds()mod 10;ss[4].v=d.getSeconds()/10;
ss[3].v=d.getMinutes()mod 10;ss[2].v=d.getMinutes()/10;ss[1].v=d.getHours()mod 10;ss[0].v=d.getHours()/10;}}}.play();
Stage{width:400 height:300 title:"Time Wheel"scene:Scene{fill:bind bg content:Group{content:[for(s in ss)Panel{
translateX:x + indexof s*30 +(Math.min(indexof s,7)/2)*10 translateY:y content:s.n height:h width:w}Text{content:bind "The time is now: {d}",fill:WHITE,x:58,y:242}]
effect:Blend{mode:BlendMode.SRC_ATOP topInput:Flood{paint:LinearGradient{endX:0 stops:[
Stop{offset:0,color:color(0,0,0,.9)}Stop{offset:.3,color:TRANSPARENT}Stop{offset:.7,color:TRANSPARENT}Stop{offset:1,color:color(0,0,0,.9)}]}
y:y width:400 height:h}}}}}

There is still time to get your own submission in for the contest. The official deadline is Wednesday at midnight, so with a little hard work and determination you can easily crank out 30 lines of JavaFX goodness!

Update:  By popular demand, here is a cleanly formatted version of the same code:

import javafx.scene.*;
import javafx.scene.effect.*;
import javafx.scene.layout.*;
import javafx.scene.paint.*;
import javafx.scene.paint.Color.*;
import javafx.scene.shape.*;
import javafx.scene.text.*;
import javafx.stage.*;
import javafx.util.Math;
import javafx.animation.*;
import javafx.scene.media.*;

class Slot {
    var node:Node[];
    var value:Number on replace {
            Timeline {keyFrames: at(.9s) {center => value tween Interpolator.EASEBOTH}}.play();
        action();
    }
    var action:function();
    var center:Number;
    var entries:String[];
    var start:Number;
    var finish:Number;

    init {
        var entryHeight = bind Math.sin(Math.PI / sizeof entries) * height;
        node = for (entry in entries) Stack {
            var textLine: Text;
            content: [
                Group {
                    var w1 = bind Math.max(width,textLine.boundsInLocal.width);
                    content: [
                        Rectangle {
                            width: bind w1
                            height: bind height/12
                            fill: bind if (indexof entry mod 3 == 0) {
                                LIGHTGRAY
                            } else if (indexof entry mod 3 == 1) {
                                DARKGRAY
                            } else {
                                hsb(360 * Math.abs((indexof entry*2-sizeof entries as Number) / sizeof entries), .4, .7)
                            }
                        }
                    ]
                }
                textLine = Text {
                    content: bind entry
                    font: bind Font.font(null, height / 12 * .75)
                }
            ]
            visible: bind Math.abs(indexof entry - (center mod sizeof entries)) <= (sizeof entries as Number) / 4 or Math.abs(indexof entry - (center mod sizeof entries)) >= (sizeof entries as Number) * 3/4
            effect: PerspectiveTransform {
                var sweep = bind 360.0 / sizeof entries;
                var action = bind(indexof entry - center mod sizeof entries) / sizeof entries * 360 + 90 - sweep/2;
                def startRadians = bind Math.toRadians(action + 90);
                def endRadians = bind Math.toRadians(action + 90 + sweep);
                def radius = bind height/2;
                var uy = bind radius + Math.sin(endRadians) * radius;
                uly: bind uy
                ury: bind uy
                var ly = bind radius + Math.sin(startRadians) * radius;
                lly: bind ly
                lry: bind ly
                ulx: bind Math.cos(endRadians) * radius * start
                llx: bind Math.cos(startRadians) * radius * start
                urx: bind width-Math.cos(endRadians)*radius*finish
                lrx: bind width-Math.cos(startRadians)*radius*finish
            }
        }
    }
}
var x = 45;
var y = 10;
var width = 24;
var height = 200;
var slots = for(i in [1..9]) Slot {
    entries: for(j in [0..9]) " {j}"
    start: .3 - indexof i * .07
    finish: -.25 + indexof i * .07
}
var beep = MediaPlayer {
    media: Media {
        source: "http://jfxtras.org/sounds/beep.wav";
    }
}
var bgColor: Color;
slots[5].action = function() {beep.stop();
    beep.currentTime = 0s;
    beep.play();
    Timeline {
        keyFrames: [
            at(50ms) {bgColor => GREEN tween Interpolator.EASEBOTH}
            at(150ms) {bgColor => BLACK tween Interpolator.EASEBOTH}
        ]
    }.play();
}
var d: java.util.Date;

Timeline {
    repeatCount: Timeline.INDEFINITE
    keyFrames: KeyFrame {
        time: 1ms
        canSkip: true
        action: function() {
            d = new java.util.Date();
            slots[8].center = java.lang.System.currentTimeMillis() mod 10;
            slots[7].center = (java.lang.System.currentTimeMillis() mod 100 as Number) / 10;
            slots[6].center = (java.lang.System.currentTimeMillis() mod 1000 as Number) / 100;
            slots[5].value = d.getSeconds() mod 10;
            slots[4].value = d.getSeconds() / 10;
            slots[3].value = d.getMinutes() mod 10;
            slots[2].value = d.getMinutes() / 10;
            slots[1].value = d.getHours() mod 10;
            slots[0].value = d.getHours() / 10;
        }
    }
}.play();

Stage {
    width: 400
    height: 300
    title: "Time Wheel"
    scene: Scene {
        fill: bind bgColor
        content: Group {
            content: [
                for(start in slots) Panel {
                    translateX: x + indexof start*30 +(Math.min(indexof start,7)/2)*10
                    translateY: y content: start.node height: height width: width
                }
                Text {
                    content: bind "The time is now: {d}"
                    fill: WHITE
                    x: 58
                    y: 242
                }
            ]
            effect: Blend {
                mode: BlendMode.SRC_ATOP
                topInput: Flood {
                    paint: LinearGradient {
                        endX: 0
                        stops: [
                            Stop {offset: 0, color: color(0,0,0,.9)}
                            Stop {offset: .3, color: TRANSPARENT}
                            Stop {offset: .7, color: TRANSPARENT}
                            Stop {offset: 1, color: color(0,0,0,.9)}
                        ]
                    }
                    y: y
                    width: 400
                    height: height
                }
            }
        }
    }
}

I am pleased to announce the winners of the WidgetFX Developer’s Contest.  There were lots of great entries (22 in total), which made this a very hard decision.  You can browse the full set of entries yourself on the WidgetFX Library page:

http://widgetfx.org/portal/library

To try any of the contest entries below, simply click on the image which will install/open WidgetFX and add the widget to your dock.

1st Place – ScreenshotFX

In first place is Pär Dahlberg with his ScreenshotFX widget.  Pär definitely went above and beyond in all respects, entering a full-blown application for taking screen captures and then editing them in a pop-up window.  Some of the cool features in his application include:

• A delay timer to give you time to arrange windows and menus before the capture occurs
• Multi-monitor support via a drop-down (This was sure to impress Keith)
• Drawing tools to markup the image with annotations
• Crop/Fill and a whole host of other editing tools

Pär has a great blog on JavaFX, WidgetFX, and other topics of interest, so make sure to check out his contest winning speech.

2nd Place – RadioFX

Second place went to Yannick Van Godtsenhoven for his RadioFX Widget.  In terms of visual design and widget polish, Yannick was head-and-shoulders above the competition.

He built a simple, yet functional widget that streams radio over the internet right to your WidgetFX dock.  No more reaching for a web browser to catch your favorite Belgium tunes on StuBru!

Check out Yannick’s blog to hear about the contest results and his experience with JavaFX.

I am definitely looking forward to more great creations from Yannick!

3rd Place – Infix WeatherWidget

Finally, third place went to Larry Dickson for his Infix WeatherWidget.  Besides his Weather widget, he also submitted 3 other widgets including a Clock, Calendar, and G-Mail widget, although his original creation was still the judges’ favorite.

By the way, Larry submitted this widget before the start of the contest, which was perfectly valid.  Similarly, if you submit a widget anytime between now and the start of our next contest you will automatically be entered to win!

Congratulations to all of our winners!!!  I have already sent them their prizes, which were contributed through a generous donation from my publisher, Apress.

WidgetFX Developer Contest

With only 12 days left in the WidgetFX contest, there are a bunch of new entrants.  You can see them all on the Widget Library page:
http://widgetfx.org/portal/library

This includes Till Balendat’s TwitterFX Widget:

Takaaki Nakamura’s Bookmark and ColorPalet Widgets:

Henry Zhang’s Pac-Man Widget:

And also 4! widgets submitted by Larry Dickson:

Just as a reminder, here are the judging criteria:

• Effective use of WidgetFX features and APIs.
• Practical utility of the widget as a pervasive prescence on the user’s desktop.
• Broad use of JavaFX libraries and APIs.
• Technical difficulty of implementation.
• Community features of the widget that tie in with social networking or online services.
• Originality of the submitted widget.
• Quality of widget functionality and dock integration.

(Also found on the contest details page: http://widgetfx.org/portal/contest)

Good luck with the contest, and thanks for supporting WidgetFX!