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
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.
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