This discussion is archived
10 Replies Latest reply: May 9, 2012 2:16 PM by jsmith RSS

How to change certain css subclass from java code?

870611 Newbie
Currently Being Moderated
Hello!

I try to restyle button from java code without creating .css files.

While it goes about general state, all is ok.

But after that I need to restyle :pressed state too.

Have no ideas:(
  • 1. Re: How to change certain css subclass from java code?
    JohnHendrikx Pro
    Currently Being Moderated
    I donot know of a way to accomplish that, apart from making your own Skin for the control that can be changed without using css.
  • 2. Re: How to change certain css subclass from java code?
    870611 Newbie
    Currently Being Moderated
    What's a pity! :(((

    But I hope someone knows top secret recipe!

    Edited by: anatolnsk on 30-Apr-2012 08:30
  • 3. Re: How to change certain css subclass from java code?
    David Grieve Pro
    Currently Being Moderated
    Try this. You will end up with a button with nothing but the text.
    Button btn = new Button("hacked");
    btn.setSkin(new com.sun.javafx.scene.control.skin.ButtonSkin(btn));
    btn.getStyleClass().clear();
    btn.setOnAction(new EventHandler<ActionEvent>() {
        public void handle(ActionEvent t) {
            System.out.println( ((Button)t.getSource()).getText() );
        }
    });
  • 4. Re: How to change certain css subclass from java code?
    870611 Newbie
    Currently Being Moderated
    Interesting, but I still can't understand how add new css properties to :pressed pseudoclass (if it right to call it so )
  • 5. Re: How to change certain css subclass from java code?
    870611 Newbie
    Currently Being Moderated
    If anyone is interested, here the way that seems acceptable for me:
    public class ButtonWithHoverStyle extends Application {
        
        String hoverStyle =  "-fx-background-color: linear-gradient(from 0% 93% to 0% 100%, #c36333 0%, #b05b42 100%);"
                            + "-fx-text-fill: white;"
                            + "-fx-background-radius: 2;"
                            + "-fx-effect: dropshadow(gaussian, rgba(0,0,0,0.75), 6, 0, 0, 2);"
                            + "-fx-font-weight: bold;";
    
        String defaultStyle =  "-fx-background-color: linear-gradient(from 0% 93% to 0% 100%, #b35323 0%, #a04b32 100%);"
                            + "-fx-text-fill: white;"
                            + "-fx-background-radius: 2;"
                            + "-fx-effect: dropshadow(gaussian, rgba(0,0,0,0.75), 6,0,0,2);"
                            + "-fx-font-weight: bold;";    
    
        public static void main(String[] args) {
            launch(args);
        }
        
        @Override
        public void start(Stage primaryStage) {
            primaryStage.setTitle("Hello World!");
            final Button btn = new Button();
            btn.setText("Say 'Hello World'");
            
            
            btn.setStyle(defaultStyle);
            
            btn.setOnMouseEntered(new EventHandler<MouseEvent>(){
    
                @Override
                public void handle(MouseEvent arg0) {
                        
                    btn.setStyle(hoverStyle);
                }        
            });
            
            btn.setOnMouseExited(new EventHandler<MouseEvent>(){
    
                @Override
                public void handle(MouseEvent arg0) {
                
                    btn.setStyle(defaultStyle);
                }
            
            });
            
            StackPane root = new StackPane();
            root.getChildren().add(btn);
            primaryStage.setScene(new Scene(root, 300, 250));
            primaryStage.show();
        }
    }
    Edited by: anatolnsk on 09-May-2012 08:17

    Edited by: anatolnsk on 09-May-2012 08:18
  • 6. Re: How to change certain css subclass from java code?
    ascuccimarra Newbie
    Currently Being Moderated
    It seems easier just to override the style on an external stylesheet, using the pseudo classes.

    external_stylesheet.css
    -------------------------------

    .hyperlink:focused {
    -fx-border-style: none;
    -fx-border-width: 0;
    }

    scene.getStylesheets().add("external_stylesheet.css");
  • 7. Re: How to change certain css subclass from java code?
    David Grieve Pro
    Currently Being Moderated
    Why are you opposed to using a css file? You can accomplish the same thing with this in a .css file AND you can change the styles without having to rewrite/recompile java code.
    .button:hover {
        -fx-background-color: linear-gradient(from 0% 93% to 0% 100%, #c36333 0%, #b05b42 100%);
        -fx-text-fill: white;
        -fx-background-radius: 2;
        -fx-effect: dropshadow(gaussian, rgba(0,0,0,0.75), 6, 0, 0, 2);
        -fx-font-weight: bold;
     }
    
    .button {
         -fx-background-color: linear-gradient(from 0% 93% to 0% 100%, #b35323 0%, #a04b32 100%);
         -fx-text-fill: white;
         -fx-background-radius: 2;
         -fx-effect: dropshadow(gaussian, rgba(0,0,0,0.75), 6,0,0,2);
         -fx-font-weight: bold;
    }
  • 8. Re: How to change certain css subclass from java code?
    870611 Newbie
    Currently Being Moderated
    I am not opposed against .css files per ce, they are very useful.
    But sometimes it is neatly to have all data/behavior in one place.

    Especially when someone need animation skinning, which anyway can't be set via .css files.
  • 9. Re: How to change certain css subclass from java code?
    twasyl Newbie
    Currently Being Moderated
    Hello there,

    In my mind, with JavaFX, it's the first time in our Java desktop applications world we can do real MVC. For me you should always try to separate what's part of the view and the rest of your application. Typically here I also would skin my buttons outside the Java code by using CSS files. And about your answer that someone could need information about the skin/layouts/animations/transitions I think that if that person isn't a Java developer (I mean that writes classes and interfaces), CSS files telling "there the buttons are defined that way blablabla" is easier to understand. And a Java developer should not take care of all the design of an application. Everybody's job I would like to say. If you look to the JEE/JSF world, your web pages are skinned with CSS, not in your backing beans :) But that's a point of view. And maybe in your case you're not able to do so :)

    To quickly answer to ascuccimarra and the way to load a CSS file from your Java code, I do it a bit differently:
    this.component.getStylesheets().add(getClass().getResource("/a/package/location/styles.css").toExternalForm());
    Hope it could help.

    Regards.
  • 10. Re: How to change certain css subclass from java code?
    jsmith Guru
    Currently Being Moderated
    Especially when someone need animation skinning, which anyway can't be set via .css files.
    One day, if you are very, very nice to him, David might implement: http://www.w3.org/TR/css3-animations/ for JavaFX css.

    Interestingly WebView already implements some of the css3 animation spec (the css defined easing transition animations in the following example work):
    import javafx.application.Application;
    import javafx.scene.Scene;
    import javafx.scene.web.WebView;
    import javafx.stage.Stage;
    
    public class AnimatedCssInWebView extends Application {
      public static void main(String[] args) { launch(args); }
      @Override public void start(Stage primaryStage) {
        final WebView webView = new WebView();
        webView.getEngine().load("http://www.paulrhayes.com/experiments/accordion/");
        primaryStage.setScene(new Scene(webView, 800, 800));
        primaryStage.show();
      }
    }

Legend

  • Correct Answers - 10 points
  • Helpful Answers - 5 points