Wednesday Sep 28, 2011

JavaOne talk: 2-D UI and 3-D Graphics on the Same Screen for CDC

It is JavaOne time again. Jerry Evans and I are doing the talk on 2D and 3D graphics for CDC. We will show how traditional 2D AWT graphics can be combined with 3D content written in Open GL ES (JSR 239). There will be a few step-by-step examples running on Oracle Java Embedded Client 1.1. The talk is on Wednesday Oct 5th at 10 AM in the San Francisco Parc 55 Hotel.

Also stop by the show floor to see more demos of Embedded Java, Java FX 2.0, Java TV and more.

For details see

Sunday Sep 19, 2010

New interactive TV demos at JavaOne

We will be at JavaOne this week demoing the new interactive TV technologies. Stop by the Oracle booths at JavaOne Exhibition Hall at Union Squiare Hilton in San Francisco Monday through Wednesday.

Thursday Jun 10, 2010

JavaFX TV Design Guidelines

Check out the article Larry and Jim put together. There is a number of useful tips for JavaFX TV application developers covering limitations and specifics of the TV interface.

Saturday Jun 05, 2010

3D Carousel

One of the more useful UI controls for TV applications is a carousel. There is no standard carousel control in JavaFX 1.3, but it is not very difficult to build one. In this post I am showing how to create a simple 3D image carousel.

This carousel uses PerspectiveTransform rather than true 3D nodes so it can be run with regular desktop toolkit as well as the 3D accelerated prism toolkit. PerspectiveTransform is not very efficient though so it will be not be very fast on a TV device. But it should not be hard to implement this using true 3D transforms which will run faster.

In this example the carousel is rotated using left-right keys or mouse. Mouse can also be used to change the camera view point. Up and down arrows change the layout of the carousel.

Some trigonometric calculations are needed to lay out and rotate the nodes correctly. It is also necessary to sort them in z order. Using Sequences.sort is a very straightforward way to do this.

Download the source code: Main.fx.

Thursday Jun 03, 2010

Simple CSS Styling

A few posts ago I showed how to create a simple control skin from scratch. But what if you just want to tweak the default look of controls in your TV application? This is very easily done with CSS styling. In fact, all controls in JavaFX 1.3 are styled using CSS.

The default skin of JavaFX controls in 1.3 is called Caspian. You can inspect the caspian.css file to find out how the default look for TV is defined. You can find this file inside of lib/tv/javafxrt-cdc.jar in Java FX SDK. The ice cream order application in the previous post uses the default caspian skin.

In this post I am showing how custom stylesheets can be used to add fancier buttons to an application:

The only thing that is required in the application code is Scene.stylesheets which points to a custom stylesheet file (demo.css):

    Scene {
        stylesheets: "{__DIR__}demo.css"
        content: [
            SVGPath{content:"M150,100L200,180H100Z" fill:null stroke: Color.WHITE},
            SVGPath{content:"M150,170V167M150,155V120Z" fill:null stroke: Color.WHITE},
            Label {text: "You've got mail!" translateX: 300 translateY: 130},
            Button {text: "Read" translateX: 200 translateY: 300},
            Button {text: "Cancel" translateX: 400 translateY: 300}

The custom stylesheet includes a few values which alter the way buttons look. Each button state has its own set of values so we can make the focused button look different from other buttons.

    .button {
        -fx-padding: 12;
        -fx-border-radius: 9;
        -fx-background-color: linear (0%,0%) to (0%,100%) stops (0%, #cbd0d7) (100%, #2d4b8e);
        -fx-border-color: #2d4b8e;
        -fx-border-width: 5;
        -fx-background-insets: 0, 0, 0, 0;

You can style other nodes such as shapes using CSS as well. In this example I added an SVG icon and then used CSS to change its stroke width and fill. This is a useful technique when porting desktop applications to TV applications as you can easily make default fonts bigger and lines thicker to look better on the TV screen.

Download the source code: Main.fx and the custom stylesheet: demo.css.

Wednesday Jun 02, 2010

TV-friendly focus traversal

Traversing nodes using TV remote presents certain challenges. In a typical TV set-up there is no mouse or touch screen to click on things and there is no Tab key which is traditionally used on desktop for traversal. The user-friendly way to traverse nodes on TV is using directional arrow keys.

We added two-directional traversal as a new feature in Java FX 1.3 to support TV remotes and non-touch screen phones. And it is very easy to use. When you add a bunch of UI controls to a TV application, they automatically become part of the 2D traversal grid. A simple application shows how this works. Several traversalble nodes are laid out on the screen: a ListView, a CheckBox, a TextBox and a couple of buttons. The user can navigate by pressing directional keys and interact with controls by pressing other keys (e.g. Enter to push a button or number keys to enter digits).

No special code is required to implement the traversal, it just works. It is not necessary to align the controls in a nice grid either. The traversal engine knows the coordinates of each control and figures out which control is directly above or below the one that has focus.

Note that the directional keys are also used to select an item in the ListView. When ListView has focus, The Up and Down keys will interact with ListView by chaning the selection and the Right key will move focus to the controls on the right. This arrangement makes it very easy to interact with the application, but it places certain limits on application layout. For eaxmple, if we add another button under the ListView, there won't be an easy way to traverse to it as Down button is controlling the ListView selection in the default traversal engine. However, application developers can define their own traversal behavior if needed. A similar limitation exists for the other "directional" controls like Slider or ScrollView. In most cases it is best if controls are laid out in a way that is intuitive for the user to navigate, like in this example.

Download the source code: Main.fx.

Tuesday Jun 01, 2010

3D Scene Support in JavaFX TV

Did you know JavaFX TV supports 3D?

JavaFX TV is built on the new Prism toolkit that is built for 3D accelerated graphics hardware. There is new API in JavaFX 1.3 that takes advantage of the 3D features. Transforms like Translate and Rotate now have the third coordinate: "z". They can be used to transform the scene graph nodes in three dimensions. Additionally there is a Scene camera API which can be used to set perspective or parallel camera for the scene.

Here is a sample application demonstrating the 3D scene features. In this sample a single text node is rotated around the "y" axis and is shown using the perspective camera. A simple timeline is used to animate the rotation.

To rotate the node in 3D I use the old familiar Rotate transform, but specify "Y_AXIS" for rotation:

    transforms: Rotate {
        axis: Rotate.Y_AXIS
        angle: bind angle
        pivotX: width/2

Perspective camera for the scene is defined like this:

     camera: PerspectiveCamera{fieldOfView: 60}

Note that you can add effects to the node, just like you would with a 2D node. In this example I used a reflection effect.

Download the sample source code: Main.fx. The app can be run in JavaFX TV emulator or on JavaFX desktop using Prism toolkit (javafx -Xtoolkit prism).

JavaFX does not yet support 3D nodes so you are limited to 3D transformations of 2D nodes. You may also have to write your own z-ordering logic to make the nodes display correctly.

Monday May 24, 2010

Custom ListView Skin for JavaFX TV

ListView is a very useful control for JavaFX TV applications. It is easy to navigate using the standard remote control keys and has the ability to scroll through a number of items. The default "Caspian" TV skin for ListView that comes with JavaFX SDK 1.3 works well, but may look a bit boring in some TV applications. It is easy to tweak the color scheme using CSS, but sometimes a whole different look is needed.

In this post I am showing how to create a simple custom skin for ListView with a different look.

Below is a screenshot of the sample application. The customized list has a simple vertical layout with non-rectangular selection indicator and a couple of arrows indicating the possible scroll directions:

Since there is often no need to have mouse support in TV applications, there is no scrollbar. Standard ListViewBehavior class is used for key handling so there is no code listening for key events. To make the sample code simpler I allocate all the ListView nodes at the time the skin is created. This works perfectly on a typical small list of 10-30 items, but will be a drag on performance if there are 100 or more items. A simple transition animation makes the control behavior more visually appealing.

Using the customized ListView in an application is very easy. One only needs to specify the custom skin class when instantiating the object:

var listView: ListView = ListView {
    items: ["Mercedes", "BMW", "Lexus", "Acura", "Audi", 
        "Porsche", "Ford", "Chevrolet", "Chrysler",
        "Toyota", "Honda", "Nissan", "Mazda"]
    skin: TVListView{}

Note: this simple skin only supports text nodes, but it should not be difficult to add support for images or custom nodes in a similar way.

Here is the source code for the sample application: TVListView.fx

Friday Feb 05, 2010

Broken Tetris

Here is another simple Java FX game: Broken Tetris. This game looks like Tetris, except the dropped bricks won't stay in place.

Objective is to make blocks of the same color hit each other. Once two blocks of the same color collide, they disappear. Be careful: some colors may look alike!

Controls: Left-Right to move the brick, Up to rotate.

See how many points you can get...

A few Java FX UI controls are used to set parameters for the game. You can control gravity, friction and restitution. Or increase the number of colors to make the game more challenging. You can also turn block rotation off to make them behave more like Tetris blocks.

The source code for the game is available here: Main.fx This demonstrates integration of Java code into an FX application code: physics engine is implemented using Phys2D library.

Note a couple of useful FX techniques
- Node transforms are used to rotate the blocks and move them around
- Opacity animation makes the colliding blocks melt and disappear.
- Paiting blocks with radial gradient gives them a more interesting appearance

Click on the image below to start the game.

Tuesday Jun 02, 2009

JavaFX TV!

We demoed JavaFX TV at JavaOne today for the first time. TV demo is running on a 50" LG television set with an integrated set-top box. We now have the complete three-screen demo: desktop, mobile and TV. The same application (CloudDVR) is running on all three screens connected via the Sun cloud server as a back-end. Here is the screenshot of the TV applicaiton (it looks much nicer on the real TV): You may hear more about the app in Eric Klein's session on Wednesday or see it in Java Utopia area on the show floor.

Thursday Feb 12, 2009

Java FX Mobile is out

Finally, Java FX Mobile was officially released today as part of Java FX 1.1. Check it out at

Tuesday Feb 10, 2009

Mobile World Congress - 16-19 February 2009

We will be at the Mobile World Congress in Barcelona next week showing some of the latest FX Mobile demos. Come see us at the Sun Micro booth.

Friday Jan 23, 2009

Picture Puzzle

Here is a simple JavaFX Mobile application I wrote in a couple of hours this morning. It's a simple picture puzzle.

Instructions Press [1] to shuffle and [3] to solve the puzzle. Use arrow keys to arrange the pieces and [Enter] to display numbers when you get lost.

Be sure to have JDK 6u10 or later installed to run the game.

Enjoy! :)

The source is available here: Main.fx

Thursday Jan 22, 2009

New demo

Here is a snapshot of a Java FX Mobile pinball app we showed today at the developer days. This is the emulator snapshot, but we have it running on the phone too. This is a work-in progress demo app. Nicer graphics and performance improvements are on the way.

Note: you can see the streaming from the developer days event at

Tuesday Jan 20, 2009

Mobile & Embedded Developer Days

The developer days in Stanta Clara start tomorrow. Don't miss our talks:
LT-9: JavaFX Mobile Application Development

LT-16: ME Framework

If you are curious about the FX demo I wrote about earlier, you are welcome to stop by and ask questions :)

The agenda is posted here:




« July 2016