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.

Comments:

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