Would the CSS style set to a parent node be inherited to underlying nodes?

Question

Hi,
Would the CSS style set to a parent node be inherited to underlying nodes?
With below code, style setting to parent(VBox) is not getting inherited to children(Text).
Style.java
package style;
import javafx.application.Application;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.layout.VBox;
import javafx.scene.paint.Color;
import javafx.scene.text.Text;
import javafx.stage.Stage;
public class Style extends Application {
    public static void main(String[] args) {
        Application.launch(Style.class, args);
    @Override
    public void start(Stage primaryStage) {
        primaryStage.setTitle("Hello World");
        Group root = new Group();
        Scene scene = new Scene(root, 300, 250, Color.LIGHTGREEN);
        scene.getStylesheets().add("/style/style1.css");
        // Create children
        Text text1 = new Text("Text1");
        Text text2 = new Text("Text2");
        // Create parent and set style
        VBox vBox = new VBox();
        vBox.getChildren().addAll(text1, text2);
        vBox.getStyleClass().add("font-normal");
        root.getChildren().add(vBox);       
        primaryStage.setScene(scene);
        primaryStage.setVisible(true);
}Style1.css
.font-normal {
    -fx-font-size: 9pt;
    -fx-font-family: "Arial";
    -fx-fill: #FF0000;
}Edited by: Simosh on Jun 10, 2011 4:24 PM

Answer 1

Hello Simosh,
I know you are thinking of VBox as container so their children must have inherited the css of parent like as of HTML <div> pattern. But in JavaFx this is different every node has it's CSS implemented from the Parent of their extended class . Even if you add children inside VBox CSS has nothing to do with children. So to make children to use the css of VBox then you must call getStyleClass().add() explicitly for every children.
Either you call getStyleClass() for every node
or you can make a custom Container as on below
A sample getChildren() overriding of VBox which make VBox children to use their parent css.
Algorithm to make your custom VBox
class MyBox extends VBox{
     @Override public ObservableList<Node> getChildren(){     
          //iterate children of super
               //now bind your children.styleclass with super.styleclass
          //end of iterate
          //return children
}Thanks.
Narayan