e(fx)clipse 1.0 – New Features – The clever CSS-Editor who got more clever

e(fx)clipse 1.0.0 is just around the corner and scheduled to be released on August 15th, while we are polishing the final bits, the Eclipse IP-Team checks our IP-Log, … .

I’d like to introduce you the new and exiting features that we worked on in the last months since we released 0.9.0 in February.

Blog series

The clever CSS-Editor who got more clever

As all of you probably know we have a fairly clever CSS-Editor who not only knows all JavaFX CSS attributes/properties but also knows on which CSS-Selector they apply. The only problem is that since JavaFX8 library developers like the people behind ControlsFX, JFXtras, miglayout can add Styleable-Properties to their controls, layout-containers, … . So you probably need a CSS-Editor who not only knows the properties of the OpenJFX library but is able to learn those of all the extra libraries out there.

While most know that we provide auto-complete, basic validation, … I guess it’s not publicly known how we manage to do it and where the information is coming from. I won’t go into detail but the main idea is that we defined something similar you know from XML/HTML where one often has Schema or DTD which defines all elements and properties of an XML-Document and your favorite XML-Editor makes use of it. We’ve learned from them and defined our own description language which holds all informations what selectors and properties are defined inside JavaFX and use this language in our tooling.

Let’s look at an example which helps to understand how it works. The file which can be compared to an XML-Schema or DTD is named CSSExt and looks like this:

You see some basic attribute definitions like enumerated values e.g. in Node the -fx-blend-mode one but also more complex attribtues in Region which e.g. results in auto-completes like

This is all stuff that you are used to when e(fx)clipse 0.9.0 is installed into your IDE. The new feature is that we are now analyzing the classpath of your project and if we find other .cssext-Files in e.g. libraries you’ve added to the classpath we take them into account. Let for example assume you’re using our Layout-Panes who have been enhanced in 1.0 to use StyleableProperties as outlined in our first blog post in the series.

Your build path looks like this:

import javafx.scene.layout.Pane

package org.eclipse.fx.ui.panes {
  AbstractLayoutPane extends Pane {
		
  }
  GridLayoutPane extends AbstractLayoutPane {
    -fx-columns @INT default: 1;
    -fx-columns-equal-width <javafx.boolean> default: false;
    -fx-inner-margin-width <javafx.length> default: 5;
    -fx-inner-margin-height <javafx.length> default: 5;
    -fx-inner-margin-left <javafx.length> default: 0;
    -fx-inner-margin-top <javafx.length> default: 0;
    -fx-inner-margin-right <javafx.length> default: 0;
    -fx-inner-margin-bottom <javafx.length> default: 0;
    -fx-hspace <javafx.length> default: 5;
    -fx-vspace <javafx.length> default: 5;
  }

… and because of this you’ll get the following auto-complete in the CSS-Editor

We’d like to start in the next few months with JavaFX library developers like the ones mentionned above and convince them to add a cssext-File to their library so that you as a user of those libs get the best development experience inside e(fx)clipse. BTW if other IDEs would like to make use of our CSSExt-Files we’d appreciate to help anyone.