Wednesday Apr 01, 2009

JavaFX - Book Panel

A new JavaFX sample is released which simulates the flipping pages of book. In various conference and booth many were interested in understanding the logic and wanted to use it in their application. The sample is developed by Chris Campbell and is available at JavaFX - Samples website along with source.

<script src=""></script><script src="/rakeshmenonp/resource/BookPanel/BookPanel.js"></script>

For Applet mode, click on above image

For standalone mode

Try it out! Have fun!

Tuesday Mar 17, 2009

JavaFX - Light Effect

JavaFX provides many APIs for Lighting effects.
There are also different light types such as

As you might have noted, there are many attributes available in each of these classes to control the light. To be frank, I'm not really familiar with the details of those attributes. But I still would like to use the APIs to generate light effects.

For this I have written a program which will generate the source code for the light effect. The user just needs to change the slider and monitor the changes in light. Once the user is happy about the effect, he can just copy the code that is shown and use it in his application!

<script src=""></script><script src="/rakeshmenonp/resource/LightEffect/LightEffect.js"></script>

For Applet mode, click on above image

For standalone mode

Now you too can enjoy using light effects in your application! Simple?!

<script type="text/javascript">var dzone_url = "";</script> <script type="text/javascript">var dzone_style = '2';</script> <script language="javascript" src=""></script>

Tuesday Mar 10, 2009

JavaFX - Sudoku with CSS

This is a Sudoku game developed using JavaFX. The objective is not really to demonstrate Sudoku, but to show Cascading Style Sheets (CSS) support in JavaFX. This sample uses two CSS files - blue.css and black.css. These files have information about different user interface attributes such as color, font, shape...

<script src=""></script><script src="/rakeshmenonp/resource/Sudoku/Sudoku.js"></script>

For Applet mode, click on above image

For standalone mode

First lets create a style sheet...

.titleText {
    font-size: 20pt;
    font-family: "Bitstream Vera Sans";
    font-weight: bold;
    fill: #79818C;
Here we have specified the font attributes family, weight, size, color etc.

Similarly a button can be created by a combination of Rectangle and Text as shown below:

.buttonText {
    font-size: 11pt;
    font-family: "Bitstream Vera Sans";
    font-weight: bold;
    fill: #FFE6D9;
.normalButton {
    fill: #8A9CB4;
    stroke: #79818C;
    strokeWidth: 2.0;
    arcWidth: 10;
    arcHeight: 10;

Now we need to associate this style-sheet with the top level container of JavaFX - Scene.

var stylesheets = "{__DIR__}blue.css";
Scene {
    content: []
    width: 281
    height: 408
    stylesheets: bind stylesheets
I have declared a variable stylesheet and have assigned the URL of the stylesheet file. Now I bind this value to stylesheets attribute of Scene. This will associate the CSS file with this Scene. I have used bind so that I can update the associated stylesheet at runtime.

Now I will associate the style-class defined in style-sheet to the specified Node. For example, we can apply the titleText style-class with the title node as shown below.

var title = Text {
    content: "Sudoku"
    effect: dropShadow
    styleClass: "titleText"

Similarly we can associate the button's rectangle attributes as shown below..

var defRect = Rectangle {
    width: bind width
    height: bind height
    styleClass: "normalButton"
Cool! Now you can play Sudoku game and if you feel bored just change the look and continue playing!!

<script type="text/javascript">var dzone_url = "";</script> <script type="text/javascript">var dzone_style = '2';</script> <script language="javascript" src=""></script>
<script type="text/javascript"> digg_skin = 'compact'; digg_window = 'new'; </script> <script language="javascript" src="" type="text/javascript"></script>
<script src="" type="text/javascript"></script>

Wednesday Mar 04, 2009

Making JavaFX InterestingPhotos... Interesting!

InterestingPhotos is one of JavaFX sample published at samples website. It displays "interesting" photos from flickr [List of interesting photos for the most recent day].

It uses flickr api - flickr.interestingness.getList

Does it sound interesting to you? May be not.. It would have been nice if it could display photos from my flickr id!

Ofcourse yes! It can! For that you need to do some minor modifications to the source code. First download the InterestingPhotos source from

Obtain a flickr api-key from flickr website. You need to login to the site with your flickr id and apply for a new key. You will receive a key similar to 1234567890abcdef0123456789abcdef.

Now you need to find user-id (nsid) of your flickr user-name. It can be found from flickr website. Visit flickr.people.findByUsername. Enter your user name in the text field. Click "Call Method..." button. It will display an XML output below. Note down the nsid in the output, similar to nsid="1234567@A01".

You can get the list of public photos in your flickr account using flickr.people.getPublicPhotos api. You need to specify the above nsid as user_id argument.


Open the above URL, it must list the photo information in XML format.
Below code is in Main.fx of InterestingPhotos.

// Submit HttpRequest    
var request: HttpRequest = HttpRequest {
    location: ""
    method: HttpRequest.GET

Modify the location: URL to point to above obtained URL. Rebuild the application. Now it must show photos from your flickr account!

<script src=""></script><script src="/rakeshmenonp/resource/InterestingPhotos/InterestingPhotos.js"></script>

For Applet mode, click on above image

For standalone mode

<script type="text/javascript">var dzone_url = "";</script>
<script type="text/javascript">var dzone_style = '2';</script>
<script language="javascript" src=""></script>

Friday Feb 27, 2009

JavaFX - Color Chooser

Simple Color-Chooser implemented using JavaFX.

<script src=""></script> <script src="/rakeshmenonp/resource/ColorChooser/ColorChooser.js"></script>

Click on above image to load as Applet

New Color Picker control available!.


<script type="text/javascript">var dzone_url = "";</script> <script type="text/javascript">var dzone_style = '2';</script> <script language="javascript" src=""></script>


The views expressed on this blog are my own and do not necessarily reflect that of my organization


« February 2017