UPDATE
Please download the latest version from efxclipse.org

People who’ve read my blog in the last few weeks have seen that I invested some time in getting the Eclipse 4 Application Platform running on top of JavaFX.

One of the key technologies of JavaFX is that one uses CSS to theme the whole application but the default CSS-Editors are not of much help because the properties used are specific to JavaFX (read they are all customized extension starting with -fx).

… and because I decided already some time ago that I had to teach myself how to write my own DSL using Xtext it was the prefect chance to create a CSS-Editor for JavaFX using Xtext.

… and because I was traveling a lot in the last 2 weeks (I’ve been to 3 democamps) I had a lot of spare time to work on something I’d like to call “e(fx)clipse” a start of an Eclipse Tooling for JavaFX.

So what do I have for Release 0.0.1 of the Tooling? Well all I have is a start for a CSS-Editor built using Xtext.

Here are 2 screenshots of the current CSS-Editor running in Eclipse 4.1 (it runs as well in 3.7 naturally).

So as you see the editor has not too many features as of now:

• Basic Syntax-Highlighting
• Proposals for CSS-Attributes
• Support for Attribute value proposals

but I hope to improve the initial features.

BTW one of the main features of the CSS-Editor is that it allows people to plug in their own Property-Rules so e.g. e4 could plug-in their own rules, so one can for mozilla, webkit, … -specific rules.

As of now I have 2 property-sets:

• CSS 2.1
• JavaFX

but they are not part of the core plugin but contributed simply as OSGi-Services 🙂

So if you want to give the editor a spin. You can download the p2-repo from my github account. Please note this is a very very early release and the editor currently is only registered for .fxcss-Files.

Update:
There’s one JavaFX syntax not yet support by the editor showing an error marker but the problem is not the CSS-Editor but in reality the CSS-Definition speced by JavaFX. I’ve already filed a Jira-Ticket where I describe the problem and proposed a CSS-2.1 compatible definition:

linear from( <size> , <size> ) to( <size> , <size> ) [ stop( <number> , <color> ) ]+ [ repeat | reflect ]?
radial [ center( <size> , <size> ) , ]? <size> [ focus( <size> , <size> ) ] ? [ stop( <number> , <color> ) ]+ [ repeat | reflect ]?

/* Example */
linear from(0%,0%) to(100%,100%) stop(0.0,red) stop(1.0,black)
radial center(25%,25%) , 50% focus(20%,20%) stop(0.0,gray) stop(0.50,darkgray) stop(1.0,dimgray) reflect