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

Comments:

do you use some library for the package : com.sun.javafx.scene.control.behavior.ListViewBehavior{} ???
because I have not it and I have an error!!!
please help me...

Posted by liberato on June 02, 2010 at 12:47 AM PDT #

No, this is a standard behavior class for ListView. Make sure to use JavaFX SDK 1.3.
ListViewBehavior is not a public API so it is not guaranteed to work the same way in other releases.
You can also define your own behavior class like this and use it instead:

class SimpleListViewBehavior extends Behavior {
public override function callActionForEvent(e:KeyEvent):Void {
var list = e.node as ListView;
if (e.impl_EventID == KeyEventID.PRESSED and e.code==KeyCode.VK_UP) {
list.selectPreviousRow();
}
if (e.impl_EventID == KeyEventID.PRESSED and e.code==KeyCode.VK_DOWN) {
list.selectNextRow();
}
}

}

Posted by Mikhail Gorshenev on June 02, 2010 at 12:48 AM PDT #

Post a Comment:
  • HTML Syntax: NOT allowed
About

user12608660

Search

Categories
Archives
« April 2014
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
   
       
Today