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.

http://www.oracle.com/us/javaonedevelop/index.html

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

Wednesday Dec 03, 2008

JavaFX 1.0 Release

You were probably wondering what is happening with JavaFX Mobile. It is \*finally\* getting ready for prime time! It took a long time and a lot of effort, but tomorrow we are launching the 1.0 release (yeah!). 1.0 is for the desktop version. Mobile will be released as beta with the official release expected in February. Make sure to check javafx.com tomorrow and download the 1.0 SDK. It comes with everything you need to write desktop or mobile apps. Play with the samples and write your own!

At the launch tomorrow we will be showing a bunch of interesting demos. These are mostly desktop-oriented, but we will also have some real JavaFX code running on mobile phones.

"All my screens" demo is the nice app which is a media browser/player. We have it running on both desktop and mobile screens and the two apps can share media on the cloud. You can take a photo on your phone, upload it to the cloud with a touch of a button and view the same photo in high-res on your desktop. Or start playing a movie on the desktop screen then pause it, go see your friends and show them that same movie playing on your cell phone screen.

The pictures are of the demo app running on the phone and on the SDK emulator. The app looks somewhat similar to the old picture from JavaOne 2007 :) Desktop version has the same look, though, naturally, different screen size and controls. It also takes advantage of visual effects not supported in mobile.

Some technical details on the mobile app. We targeted mid-range MSA phones with the demo. Screen size of 240x320 or more, optional touch screen. The size of the app together with the FX runtime is 1.7 MB. Without the FX runtime it is about 300KB. The app of this size takes a while to install on the phone, but once it is installed, it only takes a few seconds to start (much of this time is spent loading thumbnails) from the memory stick or the server

Stay tuned for more details on JavaFX Mobile and don't miss the launch tomorrow.

About

user12608660

Search

Categories
Archives
« March 2015
SunMonTueWedThuFriSat
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
    
       
Today