Introducing e(fx)clipse

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 

Eclipse 4.1 Application Platform – A platform for anyone

This post is dedicated to “Eclipse 4.1 Application Platform” (EAP).

So what is the EAP? In short it is a Widget-Toolkit agonstic UI-Application framework for OSGi which provides the following features:

  • An extensible central application model abstracting the main concepts of UI-Applications:
    • UI-Concepts like Windows, Toolbars, Parts, …
    • None-UI Concepts like Commands and Handlers, Extensions, …
    • An event bus to get away with listeners
    • UI-State persistance
  • A dependency injection container to keep up with modern programming technologies
  • An extension system build applications from various modules instead one big

As said the EAP-Core is widget agonstic and can be used with any native UI-Technology you want to write your applications with.

Here’s an example application coded 3 times with the native technologies. The only thing they share is the EAP which provides the runtime platform.

  • SWT
  • Swing
  • JavaFX

As of now SWT is the platform with the best support because the Eclipse 4.1 SDK is built on top of EAP and ships with a set of default SWT-Renderes. The Swing and JavaFX implementations for EAP are currently proof of concepts but can be used as a show case of how powerful and flexible the design of EAP is (you’ll find the sources in my github-repo).

The only interface EAP requires you to implement and register looks is this:

public interface IPresentationEngine {
 public Object createGui(MUIElement element, Object parentWidget, IEclipseContext parentContext);

 public Object createGui(MUIElement element);

 public void removeGui(MUIElement element);

 public Object run(MApplicationElement uiRoot, IEclipseContext appContext);

 public void stop();

This where EAP hands over control to you to build and keep the UI in sync with the model.

The already written IPresentationEngine implementation for Eclipse 4.1 is a good source of inspiration on how one could approach the problem but finally it is up to you – all the EAP expects you to respect is the IPresentationEngine-Interface.

… and before some mentions that the current application model is not supporting modern UI-Concepts needed to built App-UIs as you know them from smart phones, tablets, … . You can extend the application model and add the concepts you think are missing.

All I can say: If you have the task to write an UI-Application you should take a look at this new but quite solid runtime platform because it offers you many advanced concepts you’d have to reinvent if not doing so.

How to apply the e4 programming model to 3.x

So while I could only encourage everyone to use the Eclipse 4.1 Application Platform (EAP) to write UI-applications, this post is for those who have existing 3.x code which they want to refactor step by step to run on EAP.

So if you ever looked at how EAP are developed the first thing you notice is the new programming model or better said the paradigm shift happing because you use DI and Services instead of subclassing and use of statics. So if you want to move your code gradually from a 3.x development model to EAP what you need is a bridge that allows you to run the refactored UI-Code in your existing 3.x runtime.

This is exactly where the Tools Bridge feature as part of the e4 updatesite might catch your attention. It allows you to use the e4 programming model inside the 3.x runtime. All you need to do to get started is to install this feature into your 3.x workspace.

Now you are able to write code that follows the e4 programming model and hence runs natively on the EAP (=without any compat layer). All you need to do to integrate your code afterwards is to subclass one of the generic ViewPart/EditorPart classes:

  • DIViewPart
  • DISaveableViewPart
  • DIEditorPart

who’ll act as the integration points into Eclipse 3.x. Now you might be confused, right? So just checkout the git-repo with a view i’ve written which works inside 3.x and 4.x and brings a feature into Eclipse I always wanted to have. It shows all images in a folder as a preview.

Here’s the view in a running 3.7 RC4:

And here in a 4.1 RC4:

You can naturally also install the view into your 3.x/4.x Eclipse Install:

For 3.x:

  • Add the e4 update site as shown above
  • Get the p2repo and add it to your update configuration

For 4.x:

  • Get the p2repo and add it to your update configuration

Please note that there’s a bug in the plugin version of one of the plugins from e4 so you won’t be able to upgrade after having installed it so only give it a try on an installation which you have no problem with reverting.

Final note: The bridge I introduced here has been built for the e4 modeltooling but will quite likely get more customers in 4.2 because we plan to refactor parts of the exiting platform code to be useable in EAP applications so it might get a key component in 4.2.

Using Xtext to create JavaFX-CSS Editor

While working on the example application showed in my last blog

I missed the possibility to edit the CSS-Files used to theme JavaFX-applications.

Having heard about Xtext and that it allows one easily create editors for your DSL (and CSS is nothing more) I decided to start teaching myself some Xtext and so I sat down the last 2 evenings and worked on an editor to author CSS-Files for JavaFX.

First of all I had (or better still have) not a really a knowledge about language design, LL-Parsers, … so what I produced until now is probably nonsense. Anyways even if not 100% correct yet I have a working editor which is able to parse the FX-CSS-File coming with the JavaFX 2.0 example.

It’s quite amazing at least for me as a total newbie to all this stuff to get an editor with autocompletion, … working in such a short time – Xtext rocks. If someone who has more knowledge about all this stuff and wants to help me / give feedback – the sources are available from my github-repository.

Maybe this Xtext-based editor can be used to build a JavaFX-Tooling and Runtime-Stack on top of Eclipse technologies:

  • Xtext to build tooling to author CSS-Files
  • JDT/PDE to develop OSGi based JavaFX applications (I already filed bugs against JavaFX to make it run without hacks in an OSGi-Env which are built using
  • Window Builder to write a visual editor
  • The Eclipse 4.x Application Platform as a runtime container / framework to build JavaFX-Applications using DI, the workbench model, …
  • Xtext/Xbase to build a DSL with a modern syntax supporting closures, …

Taking JavaFX for a spin

So it’s been about 2 weeks ago when a JavaFX beta was released to the public and I could not resist to bring up some Windows and give it a try.

First of all I’m quite impressed on the features it gives me compared to what I know from SWT and Swing. I can control almost L&F stuff using CSS.

The first thing I did naturally was to get Eclipse Databinding integrated so that I was able to bing my EMF-Objects to it (took me half a day to implement a Value-Property-Binding) and so I can now write code like this:

// ...
private void createControls()
{
  // ...
  {
    Label l = new Label("Firstname");
    rootPane.add(l, 0, 0);

    w_firstName = new TextBox();
    GridPane.setHgrow(w_firstName, Priority.ALWAYS);
    rootPane.add(w_firstName, 1, 0);
  }
  // ...
}

private void bindControls()
{
  IValueProperty tProp = JFXBeanProperties.value("text");

  {
    IEMFValueProperty mProp = EMFProperties
      .value(AddressbookPackage.Literals.PERSON__FIRSTNAME);
    dbc.bindValue(tProp.observe(w_firstName),
    mProp.observeDetail(master));
  }
  // ...
}

I know JFX comes with its own binding solution but JFX-Folks do you really think I’ll clutter my Domain-Model with your custom observable system (or did I get this wrong), what if i want to reuse it in areas no JFX is available? Anyways Eclipse Databinding works like a charme and so I don’t care about their custom JFX-Solution when I have to bind my model-instances.

What I really really like and always hoped we could do also with SWT in Eclipse 4.x is to theme an application as much as I want. Now JavaFX gives me (or better the graphic artist) this freedom.

So this is the UI I’ve written without CSS:

And with some CSS (you know I’m not a graphic artist):

If you already read some of my blog entries the UI you see here should be quite familiar to you because there’s also a Swing and SWT version available.

Naturally the application you see above is not simply a JavaFX application it mixes various Eclipse Technologies into it:

  • Equinox
  • Eclipse Databinding
  • EMF + EMF-Databinding + EMF-Edit

Naturally I’ve hit some road blocks with JavaFX:

  • Loading stylesheets is only possible through the global-classpath and filesystem but not if you are in an OSGi-Env – I worked around this using Buddy-Classloading
  • Application-Lifecycle-Handling: This is a know bug and I had work around it by registering a Shutdown-Hook
  • Rendering artefacts (at least on my Virtual-Windows7 Desktop) when resizing, …

But beside that I have to say that I’m quite impressed by what I see and I think JavaFX 2.0 has found a new follower when it comes to writing UIs. This makes me a bit sorry about SWT because compared to what JavaFX provides to me SWT is light years behind.