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 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




« March 2015