JavaFX: Inline statement and CSS ID

As you know, we have always used ID in CSS to style an element.  We will work out an example that uses a defined ID and an inline statement to style a Label.

Inline statement allows us to use CSS syntax which can be quite handy if we want to style an element with only some minor modifications.

In the style.css, I have also made some changes to the List View on its odd and even cells.  Note that cells in List View are identified by list-cell.

.list-cell:odd {
    -fx-background-color:bisque;
}

.list-cell:even  { 
    -fx-background-color: darkkhaki;
}

#hboxid {
    -fx-background-color: lightblue;
    -fx-padding: 20;
    -fx-spacing: 10;
}

Consider the following example.

package javafxapplication29;

import javafx.application.Application;
import static javafx.application.Application.launch;
import javafx.collections.FXCollections;
import javafx.collections.ObservableList;
import javafx.scene.Scene;
import javafx.scene.control.Label;
import javafx.scene.control.ListView;
import javafx.scene.layout.HBox;
import javafx.stage.Stage;

public class JavaFXApplication29 extends Application {

    @Override
    public void start(Stage stage) {

        stage.setTitle("JavaFX Program!");

        ListView<String> lv = new ListView<String>();

        ObservableList<String> items = FXCollections.observableArrayList(
                "Rock", "Country", "Pop", "Rap");

        int row_height = 24;  //default row height

        lv.setMaxHeight(items.size() * row_height);
        lv.setItems(items);

        HBox hbox = new HBox(10); // spacing = 10           
        hbox.setId("hboxid");

        Label lb = new Label("Selection:");
        lb.setStyle("-fx-font-size: 15pt; -fx-background-color: lightblue; -fx-effect: dropshadow(one-pass-box, black, 8, 0.0, 2, 0 );");

        hbox.getChildren().addAll(lb, lv);

        Scene scene = new Scene(hbox, 450, 300);
        scene.getStylesheets().add("javafxapplication29/style.css");

        stage.setScene(scene);

        stage.show();
    }

    public static void main(String[] args) {
        launch(args);
    }
}

liststyle

Series Navigation<< JavaFX: Applying CSS styles to individual elements
JavaFX: Creating A Circle >>