6 Replies Latest reply: Apr 2, 2014 8:22 AM by David Grieve RSS

    Multiple style sheet for scene.

    964914

      I have a scene and I added a style to it using the below api.

      Scene scene = new Scene(root, 300, 350);

          scene.getStylesheets().add(NewClass.class.getResource("/mycss1.css").toExternalForm());

      It works fine and all the compoenents in the UI are rendered as per the styles from mycss1.css.

       

      Now I want to apply a different style to one of the component in the Scene. So I did this.

       

      mycomponent.getStylesheets().add(NewClass.class.getResource("/mycss2.css").toExternalForm());

       

      But mycomponent picks up the style (mycss1) associated with the scene. I want mycomponent to take the styles from mycss2.  Any inputs will be great help.

       

      Thanks.

        • 1. Re: Multiple style sheet for scene.
          jsmith

          Looks like you don't really want multiple style sheets for the scene (at least simultaneously).

          It seems you just want to replace the stylesheet which is used, so use setAll on the stylesheets ObservableList.

           

          mycomponent.getStylesheets().setAll(NewClass.class.getResource("/mycss2.css")

           

          If I have misunderstood, please post a sscce which demonstrates the issue.

          • 2. Re: Multiple style sheet for scene.
            David Grieve

            You don't say what version of JavaFX you are using. All other things being equal, styles from stylesheets added to a Parent should take precedence over styles added to the Scene. If you have a small sample that reproduces the issue, please post it. Thanks.

            • 3. Re: Multiple style sheet for scene.
              964914

              I am using FX 8. I tried setAll, but it didn't work. I am posting the code here. What I am doing is I have a stylesheet of my own & it has styles for buttons. Now I set this css to the entire scene. Now inside the scene i add a html editr and set a different css(Modena.css.). When the UI is rendered, the buttons inside the editor seems to pick the styles from my button css and not from modena. To see this effect type some text inside the editor and select it and hover over the cut copy and paste and other buttons to see the effect.

               

              Thanks,

               

              
              
              .button {
                -fx-background-color:yellow;
                -fx-text-fill: black;
                -fx-font-family: "Arial";
                -fx-font-size: 12px;
              }
              
              
              .button:hover{
                -fx-background-color:orange;
                -fx-text-fill: blue;
                -fx-font-family: "Arial";
                -fx-font-size: 12px;
              }
              
              
              
              
              package javafxapplication2;
              
              
              import javafx.application.Application;
              import javafx.event.ActionEvent;
              import javafx.event.EventHandler;
              import javafx.scene.Scene;
              import javafx.scene.control.Button;
              import javafx.scene.layout.StackPane;
              import javafx.scene.layout.VBox;
              import javafx.scene.web.HTMLEditor;
              import javafx.stage.Stage;
              
              
              /**
              *
              *
              */
              public class NewFXMain1 extends Application {
              
              
                @Override
                public void start(Stage primaryStage) {
                  VBox vbox = new VBox();
                  Button btn = new Button();
                  btn.setText("This is a button");
                  btn.setOnAction(new EventHandler<ActionEvent>() {
              
              
                    @Override
                    public void handle(ActionEvent event) {
                      System.out.println("Hello World!");
                    }
                  });
              
              
                  StackPane root = new StackPane();
                  HTMLEditor editor = new HTMLEditor();
                  vbox.getChildren().addAll(btn, editor);
                  root.getChildren().add(vbox);
                  Scene scene = new Scene(root, 300, 250);
                  scene.getStylesheets().setAll(NewFXMain1.class.getResource("/javafxapplication2/buttoncss.css").toExternalForm());
                  System.out.println("style=" + editor.getStylesheets().size());
              
              
                  editor.getStylesheets().setAll(NewFXMain1.class.getResource("/javafxapplication2/tempModena.css").toExternalForm());
              
              
                  primaryStage.setTitle("Hello World!");
                  primaryStage.setScene(scene);
                  primaryStage.setMaximized(true);
                  primaryStage.show();
                }
              
              
                /**
                 * @param args the command line arguments
                 */
                public static void main(String[] args) {
                  launch(args);
                }
              
              
              }
              
              
              
              • 4. Re: Multiple style sheet for scene.
                964914

                Any inputs?

                Thank you.

                • 5. Re: Multiple style sheet for scene.
                  964914

                  Hope my question is clear? Any inputs will be of great help.

                   

                  Thanks.

                  • 6. Re: Multiple style sheet for scene.
                    David Grieve

                    I'm still not clear on what style you have in buttoncss.css and what styles you have in tempModena.css. I ran your sample with just

                    .button { -fx-base: red; } in buttoncss.css and with .button { -fx-base: yellow; } in tempModena.css and the buttons are colored as I would expect (Except for some of the html editor buttons don't show the color. I presume the images used by these buttons aren't transparent. That seems like a bug to me).


                    You could put .html-editor in your tempModena.css styles, e.g., .html-editor .button { -fx-base: red; }