Support for JavaFX 2 CSS in IntelliJ IDEA 12.1

This is the second part of the serie about Java FX 2 support in the upcoming IntelliJ IDEA 12.1. Today we would show some features dedicated to help you to skin your JavaFX application with CSS. We would use the same sample application we were using in the previous post.

As you know JavaFX allows to configure stylesheets for nodes in your .fxml. IntelliJ IDEA helps to complete existing .css files:

You may rename, move, etc your .css file, the reference would be updated accordingly. If you deside to add one more stylesheet and want to convert attribute value to subtag, the IDE would also help you here.

Accepting intention Expand ‘stylesheets’ to tag would result in the following structure:

Given configured stylesheets file IDEA is able to complete registered style classes.

You can safely rename styleclasses, these references would be also updated accordingly. Of cause it is also possible to navigate from .fxml to corresponding stylesheets/styleclasses.

On the other hand you may want to skin the application right in .fxml and this is also possible (with all support which you may expect):

When no style is configured for the element, default styleclass would be used. It’s possible to modify it’s default content. Completion with default style classes is also available:

As you can see color gutter icon (and also color chooser) are also supported exactly the same way it is done in common .css.

When you need to skin more presicely you may want to set separate style class per node. It is possible to do so in JavaFX based on fx:id attribute. IntelliJ IDEA would suggest you to choose from all available id’s:

It’s also possible to get quick documentation for selected property.

That’s all for today. In the next post we’ll show how can IntelliJ IDEA help you to package your JavaFX Application.

Those who haven’t read the first part can find it here.

Feel free to share your feedback on the discussion forum and report bugs in our issue tracker.

Develop with Pleasure!

Comments below can no longer be edited.

6 Responses to Support for JavaFX 2 CSS in IntelliJ IDEA 12.1

  1. Avatar

    Simachew says:

    October 18, 2015

    Is this support available for community version of Intellij Idea?

  2. Avatar

    Anna Kozlova says:

    October 20, 2015

    No, it doesn’t as it depend on CSS plugin available for Ultimate only.

    • Avatar

      Iiro says:

      January 19, 2016

      When you say that it isn’t supported in CE, do you mean that reformat, autocomplete and other helpful features are not working? Or do you mean that CE doesn’t recognize any JavaFX CSS and marks it as syntax error? Meaning that you just can’t use JavaFX with CSS in that version.
      I’d like to know if I can use CE version fully to create JavaFX CSS applications (even without those helpful features in Ultimate)?

      • Avatar

        Andrey Cheptsov says:

        January 19, 2016

        CE doesn’t provide coding assistance when you edit CSS: e.g. code completion, refactorings, navigation, inspections and intentions. The rest of the functionality works fine; there are no red code in the editor.

  3. Avatar

    Ayoub says:

    May 28, 2016

    How do you add file CSS in my project and i use idea 2016 work with java 8 .
    I do not speak much English, So Please Help me!!

    • Avatar

      meysam jahangiri says:

      June 30, 2016

      you can just right click on your source folder (src) and then create a new file then name it with a css extension and then write your css codes inside that then give the css file location for your scene with this code below

      or if you didn’t understood i can explain this in persian or turkish

Discover more