Enjoy and if you have a request, don’t hesitate to contact me!

Yannick

To be honest, I only created my RadioFX widget one week before the deadline of the contest. I had thought about entering the contest before but I just couldn’t come up with a good idea for a widget that would be useful for a lot of people and not just me as a developer. But as I was creating another JavaFX application that would be able to display information from a Belgian radiostation’s webservice, I thought about how easy it would be to have a small application that would allow me to keep all my urls to various webradios in one place and avoid opening a browser for playback. And that’s when I realized that this would be a good scenario for a widget. So one week before the deadline I started to work on my RadioFX widget during the evenings. This shows that JavaFX allows for pretty fast application development because with little time you can still make cool things!

The features I like most about the WidgetFX framework:

• How easily it allows you to create a widget and save information.
• Sharing your widget with the rest of the world.
• It runs on multiple platforms.

1. How easily it allows you to create a widget and save information.

Creating a widget is as easy as initializing a Widget object and returning it from your main javaFX class.

def widget:Widget = Widget {

      width: defaultWidth

      height: defaultHeight

      aspectRatio: defaultWidth / defaultHeight

      content: group

      configuration: config

      resizable: false

}

return widget;

The content attribute contains the code of the visual part of your widget and you can add any javafx code you like.

The configuration attribute is another great feature: it allows you to store configuration parameters for you widget without having to go through all the trouble of having to save them yourself.

You just have to add the parameters as shown in the following sample and they are automatically saved for when you open the widget the next time.

var enableFilter:Boolean;

def config:Configuration=Configuration {

       properties: [

             BooleanProperty {

                    name: "enableSearch"

                    value: bind enableFilter with inverse

                    autoSave: true

             }]

       scene: Scene { 

             width:180 

             height: 200 

             fill: Color.web("#282a1f") 

             content: [ 

                   HBox { 

                         spacing: 10 

                         content: [ 

                              Text { 

                                   font : Font { name: "Arial" size: 12 } 

                                   fill: Color.WHITE 

                                   content: "Enable filtering" 

                              }, 

                              CheckBox { 

                                   selected: bind enableFilter with inverse 

                              } 

                         ] 

                         layoutX: 30 

                         layoutY: 50 

                   } 

             ] 

       } 

}

2. Publishing your widget to the public is also easy!

Just do as you would normally distribute a JavaFX application but instead of providing direct links to your .jnlp file, you wrap it in a special widgetfx link like this:


<a href=”http://widgetfx.org/dock/launch.jnlp?arg=http://www.jfxperience.com/repo/radiofxj/RadioFXJ.jnlp”><img title=”WidgetFX Launch Icon” src=”http://widgetfx.googlecode.com/svn/site/images/WidgetFX-launch-icon.png” alt=”WidgetFX Launch Icon” width=”82″ height=”25″ /></a>

This will display a nice launch button which will install your widget in the WidgetFX toolbar. If WidgetFX isn’t installed on your user’s computer it will even ask to install it (completely automatic) or launch it if it’s already installed but just not running.

The next step is to announce and share your widget with the rest of the world… This process is made really easy, just submit it to the library on the widgetFX site with a little description on what it does and how it works and after it is approved the whole world will be able to enjoy your wonderful creations!

3. It runs on multiple platforms.

The widgetFX application runs on Windows, Mac OSX and Linux so this means that you no longer need to write separate Windows Vista or Mac OSX widgets. Just write it once in JavaFX and it will work on all three operating systems. This will save you time on development and maintenance.

One critical note needs to be added though: Not all code runs on all OS. For example, in my RadioFX widget, the playing of streaming audio using the standard JavaFX audio components worked fine on Windows but not really stable on OSX and Linux. Therefore I chose to use a java component that worked fine on all three OS. But this is a JavaFX problem and has nothing to do with WidgetFX.

As you can see, widget development is made easy by widgetFX. I really enjoyed writing my first widget on this cool platform and more will definitely follow!

If you want to try out my RadioFX widget or have a look at the source code, it’s all available right here

First I would like to to congratulate the winner Pär Dahlberg on his very cool ScreenshotFX widget and Larry Dickson on his Infix WeatherWidget!
You can read all about it in Stephen Chin’s post on his blog. I think we all owe a special thanks to Stephen for creating the WidgetFX framework, the contest and all the time and effort he puts into JavaFX through WidgetFX and JFXtras.

Thank you Stephen!

JavaFX 1.2: Layout by Amy Fowler

Enjoy!

The == operator in Java is used to compare if two objects are actually the same instance. To check if the are considered equal (logically), you  use .equals().

In JavaFX apparently, it’s the other way around !
== checks for logical equality and .isSameObject() is used to see if two objects are the same instance.

I’ll try and remember it, but I’m sure that i’ll make some mistakes before doing it correctly … and I’m pretty sure I’m not the only JavaFX developer with a Java background who’ll have problems with it …

This widget will also be submitted for the WidgetFX contest.

Hope you enjoy it!

The following code plays an online mp3 file without any problems but refused to play the infinite mp3 stream:

 player = MediaPlayer {

            media : Media { 
                source: streamUrl

            }

        }

        player.play();

After spending some time on google looking for the result, I came across a solution in Java that uses the Javazoom JLayer player to process the mp3 stream.

While I was implementing this, a colleague came up with a much better solution… Just set the repeatCount property of the javafx MediaPlayer to “REPEAT_FOREVER” and it will play an infinite mp3 stream. I never thought of this myself because it looked logical to me that this property is just used to identify how many times you want to play a certain audio file. But anyway, it works great now and makes it really easy to create a webradio client.

So the final code is:

 player = MediaPlayer {
    
            repeatCount: MediaPlayer.REPEAT_FOREVER 

    
            media : Media { 

    
                source: streamUrl 

    
            } 

    
        } 

    
        player.play();

For a personal project I’m going to develop, I could use a rectangle that can be manually resized in the horizontal direction. To do things the right way from the start I created the ManualResizableRectangle component.

It’s a normal Rectangle with the following extra features:

• resizable in horizontal and vertical direction
• the resizing can be enabled or disabled in both directions separately
• a maximum and minimum size can be specified so the user can’t make it too large or too small
• the rectangle can be moved around if this feature is enabled
• a stepsize can be specified to make sure the rectangle is resized in certain steps (can be useful if you want to use it in let’s say a calendar component)
• the width of the area used to resize can be configured

You can try it out here.
The source code can be found here.

How did I create it?

As you can see on the image above I added transparent rectangles (yellow) over the areas of the base rectangle (blue) that need to be used to resize or move . These rectangles provide the click behavior and grow or shrink together with the base rectangle.

How to use it?

ManualResizableRectangle {

                fill: Color.BLUE

                width: 200

                height: 200

                layoutY: 100

                layoutX: 100

                arcWidth: 20

                arcHeight: 20

                clickAreaWidth:10

                maxWidth: 250

                maxHeight: 250

                minWidth: 30

                minHeight: 30

                enableHorizontalResize: true;

                enableVerticalResize: true;

                enableMove: true;

                horizontalSteps: 30

                verticalSteps: 30

            }

I can’t really say much about it yet but for the small part i’ve read, it’s looks promising. The writing style is not too heavy with a lot of examples and very important: it covers JavaFX 1.2! When I finish reading it, I’ll definitely put a small review on this blog.

Another book on my reading list is Pro JavaFX Platform.