58 Comments

1. 

   David Qiao on December 20, 2011 at 6:03 pm

   Jasper, excellent job!

   Reply
2. 

   Osvaldo Pinali Doederlein on December 20, 2011 at 9:19 pm

   Now do you have plans to offer full stylesheets to emulate the major native LAFs? I know that’s a bit more tricky because the LAFs are not completely static, have to pick up colors, font sizes and other details dynamically from the native theme… still, I wonder if JavaFX’s styling support would take care of 95% of the work and make native LAFs much easier to develop than Swing.

   Reply
   • 

     Jasper Potts on December 20, 2011 at 11:50 pm

     It should be quite possible to do a emulation of native look. There is still a good amount of work if you want it to read the native theme from the OS and turn that into CSS. We have not plans yet for doing this but there is nothing stopping anyone from implementing their own light weight version that just emulates a single native theme or if they really need it they could implement some code to read the native themes. This could be taken as a starting point from the Swing LAF code for Windows and Mac as it is all open source now.

     Most application today are designed in a style that complements the native look but is not a pure copy of the native look. Eg Skype client or Chrome or iTunes etc.

     Reply
     • 

       aehrenr on December 21, 2011 at 2:31 am

       JavaFX is great technology indeed. However as Steve Jobs teached us, small things are very important for the make or break of a technology.
       One such small thing for a cross platform GUI technology is the ability to emulate the native look and feel of the platform!
       Many programmer are very bad in design and often even don’t realize it or simply do not have the time and a designer is much too expensive for small projects.
       Therefore bad or alien looking applications will be the rule with JavaFX.
       And this will give a bad taste to the whole technology. This taste in turn will prevent considering usage for many projects.
       On the other hand, if you add a native look, many projects will simply pick this up and have a good looking not alien application, using the correct fonts of the user and so on…
       Many clients require this for their application! Especially the Mac crowd.
       So it is not possible to stress in the few words of such a comment how important it is that you add native looking CSS for the platforms and take this very serious for the JavaFX technology.

       Reply
3. 

   Pavan Kumar on December 20, 2011 at 11:09 pm

   Hi Jasper,

   How does the styling take affect, when the component dynamically changes its size (either due to Layout or Font change etc..).

   Regards,
   PavanKumar s

   Reply
   • 

     Richard Bair on December 20, 2011 at 11:15 pm

     It is all dynamic and vector based. If your CSS rules use em’s instead of px, then it will scale according to the font size.

     Reply
   • 

     Jasper Potts on December 20, 2011 at 11:44 pm

     As Richard said everything done in this sample is vector based so it will scale when the size of the button changes. The size of the preferred size of the button is determined by the size of the Text and Icon + the padding. So if the text content or font gets bigger or smaller the preferred size will change. It is up to the layout container to listen for that change and resize the actual button control. The layout container may make the button larger or smaller than its preferred size depending on the layout rules. Once the button has been given a size by the layout container then the backgrounds and borders described in CSS are drawn.

     Reply
4. 

   Peter Rogge on December 21, 2011 at 12:13 am

   Hi Jasper,
   thanks for your excellent example.

   Reply
5. 

   Aleix on December 21, 2011 at 1:48 am

   Wooow ! that’s really amazing ! I’m going to buy a secondary harddisk today and install windows 7 to work with javaFX, as my primary plaform is Ubuntu Linux !! I will have to wait a year..
   Thanks to all javafx team !!!!!

   Reply
6. 

   zoomclub on December 21, 2011 at 2:13 am

   Thanks, this is great!

   Since JavaFX 1.0 I’ve been looking into ways of using JavaFX for rendering a musical score. Now, JavaFX 2 is here and things do look better. Due to technical difficulties with the JavaFX platform before the new JavaFX 2 framework came out I solved my issues by not using JavaFX or nodes.

   What I’d like to do is take another look at how JavaFX might be able to handle my rendering requirements. The best way to do this will be to work with a JavaFX expert who I can share my requirements and current solution with and together we can come to a conclusion and solution. I’m just wondering if there is an opportunity to do this with someone?

   Reply
7. 

   Pedro Duque Vieira on December 21, 2011 at 6:00 am

   Great work Jasper!

   Cheers

   Reply
8. 

   Per-Erik Svensson on December 21, 2011 at 8:23 am

   Amazing work! Now, all I’d like is to have sub-pixel AA on the text of those buttons, and it’ll look as close to native as one could wish for!

   Reply
   • 

     Jasper Potts on December 21, 2011 at 11:35 am

     LCD AA for text is well underway and will be in a future release, you can track progress in JIRA.

     Reply
9. 

   Farrukh on December 21, 2011 at 12:01 pm

   Excellent! is it possible to animate buttons gradients using CSS such as onMouseOver to change color

   Reply
   • 

     Dejay on December 27, 2011 at 5:35 am

     Implicit Animations / CSS3 Transitions is something I’d also be very interested about. Is this already possible with JavaFX 2.0?
     It would be awesome to be able to do this in the design domain, not having to trigger animations in event handlers.

     Reply
10. 

    Slawek on January 4, 2012 at 5:52 am

    In our product we need to provide our custom “look”. This means that we need to replace caspian.css to our own scc file for whole applications. I don’t want to force developers to apply css to each Scene that they will create.

    I want something similar to Swing’s look&feell – load on startup and apply by default to every created component – is it possible?

    Reply
    • 

      Richard Bair on January 4, 2012 at 7:48 pm

      Not currently.

      Reply
11. 

    Narayann on January 12, 2012 at 8:10 am

    Hi jasper ,
    I would like to know what is the use of background-radius I cant see this attribute in css2 and css3. :-/

    Thanks,
    Narayan

    Reply
    • 

      Jasper Potts on January 17, 2012 at 11:44 am

      We are a little more flexible than the CSS 3 standard. We support multiple layers of backgrounds and borders on a single Node. So the background-radius property applies to the backgrounds. For example if you have:

      -fx-background-color: red, blue;

      That defines two backgrounds a red one with a blue one over the top. Then if you add:

      -fx-background-radius: 3, 30;

      The red background will have a corner radius of 3 pixels and the blue will had a corner radius of 30. If you had

      -fx-background-radius: 10;

      Then that will be applied to all the backgrounds.

      HTML CSS has border-radius which also applies to the background but there is no way to separate them. What we do gives you a lot more flexibility to create complex graphics with a single Node and without using images. With web CSS you would have to nest DIVs or use Images to create the same effect.

      Reply
12. 

    Tobi on January 31, 2012 at 8:16 am

    It looks great!

    Could you please create css skins for Windows 7 and Mac OS X Lion? This is a big missing point for JavaFX 2 currently…

    Reply
13. 

    dochoaj on February 27, 2012 at 1:41 am

    Excellent job!!! it really helps me with my thesis work! thanks u so much!

    Reply
14. 

    pugazhendhi on March 7, 2012 at 6:33 am

    hi , i cant able to see the colors , in my app , do i want to include any jar , or any environment pbm ,
    all the buttons are in grey color ….in my app
    can any one help me please ?

    Reply
15. 

    Pedro Duque Vieira on May 25, 2012 at 9:23 am

    Hi again,

    I see that to put drop shadows on text you use something like:
    Text
    {
    -fx-effect: dropshadow( one-pass-box , rgba(0,0,0,0.8) , 0, 0.0 , 0 , -1 );
    }

    What’s that? That construct doesn’t show up on the javafx css documentation.
    Also I’ve tried doing the same in javafx 2.1 but it doesn’t seem to work. How can I add a dropshadow to text on 2.1?

    Cheers,

    Reply
16. 

    Ander Ruiz on June 4, 2012 at 8:07 am

    It Seems like something has changed recently, after making some test I discovered that “Text” needs to be changed to “LabeledText” that is the real internal text node inside a button.

    Reply
17. 

    Carsten on August 22, 2012 at 7:31 am

    Awesome! Thanks alot for all the styles. Gave me some really good ideas on how to style my buttons and UI elements.

    Reply
18. 

    Carsten on August 22, 2012 at 7:32 am

    Oh, one more question: Is it possible to specifiy the width and height of a button via CSS?

    thanks

    Reply
    • 

      daniel on November 22, 2012 at 2:23 am

      please can anybody answer this question? I’m also curious.

      Reply
      • 

        Richard Bair on November 22, 2012 at 7:06 am

        No it is not possible at this time. You can specify the padding which will cause a buttons width / height to be adjusted, but the width/height is fundamentally based on the layout container being used and the content (such as text) of the button.

        Reply
19. 

    Eduardo Frazão on August 24, 2012 at 11:14 am

    Hi Jasper!! You post is so nice! Direct and complete.

    Only one thing. In JavaFX 2.2 I cant select the Text inside buttons using this selector : #buttonId Text {}

    Only works here using #buttonId .text

    Thanks!!

    Reply
20. 

    Edward J. Stembler on August 28, 2012 at 8:22 pm

    Looks great!

    But, I have to say as someone coming from XAML / MXML / CSS, that I find the multiple background colors, inserts, and radii very confusing!

    How can I make a simple button with a solid base color, and a 1px highlight border on the top, with a 1px shadow border on the bottom? (no left or right borders and no rounded corners)

    Reply
    • 

      Richard Bair on August 28, 2012 at 8:29 pm

      -fx-background-color: white, black, gray;
      -fx-background-insets: -1 0 0 0, 0 0 -1 0, 0;

      That should do it! All you are doing is specifying 3 background colors, white on the bottom (the highlight color — notice that it has a -1 inset, meaning on the top, it should be 1 pixel ABOVE the y of the region), then black (the shadow color — notice it has a -1 inset for the bottom, so it will be 1 pixel BELOW the y2 (outward) of the region), and the last is the flat fill.

      Reply
      • 

        Edward J. Stembler on August 29, 2012 at 9:19 pm

        @Richard Bair Thanks for that explanation Richard! Finally got my little experiment to work:

        .menu {
        -fx-base: #31394a;
        -fx-background-color: #31394a;
        }

        .menu-btn {
        -fx-background-color: -fx-inner-border, -fx-outer-border, -fx-body-color;
        -fx-background-insets: -1 0 0 0, 0 0 -1 0, 0;
        -fx-border-width: 0;
        -fx-background-radius: 0;
        -fx-text-fill: #c4ccda;
        -fx-font-size: 16px;
        -fx-font-weight: bold;
        }

        Also, reading caspian.css helped too…

        Reply
21. 

    Carlos de Luna on September 13, 2012 at 10:39 am

    is there a way to put the image via css??? i am trying with -fx-background-image but itseems not to be the way… do you have any exbample of that?
    Greetings

    Reply
    • 

      Richard Bair on September 14, 2012 at 10:17 am

      You can use either -fx-background-image, or -fx-border-image and associated methods. Our docs are not comprehensive enough (I learned it while reimplementing Region, and updating the docs in on my priority list for JavaFX 8). Can you post the exact CSS you are trying?

      Reply
      • 

        Carlos de Luna Saenz on September 18, 2012 at 9:08 am

        I already post the CSS, but i forget to do it as a Replay… hope you see it

        Reply
        • 

          Carlos de Luna Saenz on October 4, 2012 at 3:48 pm

          Are you still there??? I haven’t solved the issue yet… the “efect” i want to reach is just an image button that changes on hover.

          Reply
22. 

    Carlos de Luna on September 17, 2012 at 10:12 am

    The CSS has something like:
    .button{
    -fx-text-fill: white;
    -fx-font: “tahoma Bold”;
    -fx-base: #706e6a;
    -fx-wrap-text: true;
    -fx-backgroundRadius: 10;
    -fx.effect: dropshadow( three-pass-box, rgba(0,0,0,0.6), 5, 0.0, 0,1);
    }

    .button:hover{
    -fx-background-color: linear-gradient(#706e6a, #888888);
    }
    #regresar{
    -fx-background-image: url(“myApp/myImageButton.png”);
    }

    #regresar:hover{
    -fx-background-image: url(“myApp/myImageButtonHover.png”);
    }

    The image is on a jar inside the classpath (a resources only project added to netbeans)

    Reply
23. 

    Xavier Michel on October 12, 2012 at 3:03 am

    Hello,

    That’s a really pretty nice job.

    Thanks a lot !

    Reply
24. 

    Carlos de Luna Saenz on October 23, 2012 at 8:31 pm

    it didn’t worked with button but it did for ImageView… with the CSS in the saME JAR as the images and relative paths from the CSSlocation

    Reply
25. 

    David Vallance on October 28, 2012 at 8:16 am

    Jasper’s original post and all the follow ups are excellent and really helpful. Thank you!

    Two questions, if I may:

    1) Before I attmept the hover/pressed etc options of for Windows 7 buttons, has anyone actually done that and would they be prepared to share

    2) Is it possible to style a button like the tabs that are used in Chrome or the Thunderbird email client i.e. with two internal radii and two external radii, and possibly a shape like a trapezium with the shortest edges sloping)? I want to style a button that projects inwards from one edge of a Pane.

    Thanks in advance …

    Reply
26. 

    Carlos de Luna Saenz on October 28, 2012 at 11:12 am

    David read my coments… hover is not posible on buttons if you want to set images… it’s great if your styles are only going to change colors… if you want to set images “as buttons” you may be think in use ImageViews with hover efect.

    Reply
27. 

    Arun Joseph on October 29, 2012 at 10:44 am

    What can be done for the hover, down and clicked state? And the CSS style for Windows 8 style?

    Reply
28. 

    Carlos de Luna Saenz on November 2, 2012 at 2:30 pm

    Al changes on colors and round corners, effects will work….

    Reply
29. 

    Carlos de Luna Saenz on November 22, 2012 at 7:34 am

    I got it… you can set your -fx-background-color:transparent and then set -fx-graphic to the url of your image then you will have a button with “just an image (if you want) or a transparent background for it, changing it with the hover event… is not the image property but the graphics one.

    Reply
30. 

    Maxim Oblezin on December 11, 2012 at 9:05 am

    You don’t need commas in -fx-background-radius ant the proper way to use it:

    -fx-background-radius: 3 2 1;

    Spent some time trying to figure why variant with commas not working/

    Reply
31. 

    Tony on December 16, 2012 at 4:54 pm

    fabolous. great collections of button. really nice

    Reply
32. 

    Ali on January 8, 2013 at 8:42 am

    Hi
    Nice tutorial and help.

    Can you please guide if there is a way in javafx css to make button in which one side is straight and the other side is curved.

    Thanks in advance

    Reply
33. 

    Java Programmer on February 21, 2013 at 12:26 am

    That’s amazingly powerful and stylish, didn’t expected this from JavaFX, it’s going to be here for long time.

    Reply
34. 

    Santosh Biswakarma on April 12, 2013 at 3:57 am

    Hey,
    I am little bit new in JavaFX and FXML,
    Here i am sharing a problem what i m facing,
    “I am using images in .fxml through .css file and images are shown perfectly, but while i make it an executable file and run it in different pc, the images not display. Mean build file not display images in other pc but it perfectly display in my pc.”

    Please help me if anybody having knowledge about it.
    Thanks in advance.

    Reply
35. 

    Nandish on May 9, 2013 at 10:41 pm

    Jasper..Awesome..thanks a lot

    Reply
36. 

    John on August 10, 2013 at 5:01 am

    Very cool. I was going to go with images for controls, but now see this that one can do just about anything by dynamically switching between advanced styles like these.

    Reply
37. 

    febri on May 27, 2014 at 7:20 am

    beautifulllllllllllll …..!!!!!!!

    Reply
38. 

    idume on July 17, 2014 at 12:07 am

    Hi,
    I tried your interesting code with Java 8 + Netbeans 8. Netbeans says that classes VBoxBuilder, ButtonBuilder and ToolbarBuilder are obsolete. I would be much interested by an up to date version of you code. Thanks.

    Reply
    • 

      Bilal Soidik on April 21, 2016 at 1:30 pm

      You can juste create controls without using Builder pattern use contructor and accessors

      Reply
39. 

    Yassine on December 2, 2014 at 1:45 am

    Hi
    Very nice tutorial
    I have just a problem, when I pressed on a button, nothing is happened (it’s not appeared like a button, it’s appeared like a simple image)
    I tried: active, and: pressed, but without an effect
    thank you a lot

    Reply
40. 

    abderrahmane nadir on June 17, 2016 at 1:04 pm

    Great work it helped me a lot

    Reply
41. 

    Ahmad Alhindi on September 25, 2016 at 7:53 am

    A very great work , well done
    Thanks for sharing

    Reply
42. 

    Ihorko on July 25, 2018 at 6:06 am

    Nice! It will be great material for learning css for FX. Thank you)

    Reply