FX

This demonstrates use of CSS to style a simple Sudoku game. All components of UI is styled using information obtained from CSS file. It uses two CSS files : black.css and blue.css. The style can be updated at runtime. Click on "Black" or "Blue" button to toggle between two styles.

Click "New" to select a new game. User can try to solve the game. If you need any help, click on "Hint" button once. It will show some of possible values with in the given square group. Click "Hint" again will display the actual value. Click on "Verify" to verify the result. Any errors will be highlighted.

Understanding the Code

Various node style attributes are specified in CSS file.

.titleText {
    font-size: 20pt;
    font-family: "Bitstream Vera Sans";
    font-weight: bold;
    fill: #79818C;
}
.closeButton {
    fill: #8A9CB4;
    stroke: #79818C;
    strokeWidth: 2.0;
}
.buttonText {
    font-size: 11pt;
    font-family: "Bitstream Vera Sans";
    font-weight: bold;
    fill: #FFE6D9;
}
.normalButton {
    fill: #8A9CB4;
    stroke: #79818C;
    strokeWidth: 2.0;
    arcWidth: 10;
    arcHeight: 10;
}

The stylesheet and attributes are associated with Scene and Node. The stylesheets attribute of Scene points to path of the css file.

var stage = Stage {
    scene: Scene {
        content: [ bgRect, titleText, sudokuNode, buttonGrid, closeButton, glassRect, loadingText ]
        width: 281
        height: 408
        stylesheets: bind stylesheets
    }
    title: "JavaFX Sudoku"
    style: StageStyle.UNDECORATED
}

The class selector is associated with Node using the styleClass attribute.

    var defRect = Rectangle {
        width: bind width
        height: bind height
        styleClass: "normalButton"
        visible: bind not selected
    }

Similarly all attributes mentioned in CSS file is associated with corresponding node.

References

• Cascading Style Sheets