GEF/Draw2D on JavaFX

• Updated – I replace Demo with more rocks!

I tried to let GEF uses JavaFX as a view.

I began to make new GraphicalViewer and EditParts based on FX Scene Graph Node not Draw2d Figure.

However it was failed because there are so much things have to be done to make it success(event dispatching, tool, hit testing, layering, feedback system, lots of edit policies….). It is not acceptable amount of task for individual experiments.

So I changed my goal:

• Let JavaFX renders Draw2D figures.

Benefit:

• I can use advanced beautiful graphics with my custom figures.

What I created:

• FXLightWeightSysyem : New Lightweight System
• FXUpdateManager : New Figure Update Manager
• FXGraphics : Implementation of draw2d Graphics for JavaFX Canvas Node
• FXViewer : Modified Graphical Viewer to use FXLightweightSystem.

FXLightWeightSysyem

It is almost same with original LightWegihtSystem except:

• It takes FXCanvas as control.
• Provides Canvas Scene Node as Graphics Source to UpdateManager.

FXUpdateManager

FXUpdateManager is almost same with DeferredUpdateManager except using GraphicsContext of javaFX. It helps lightweight system to render draw2d figures.

FXGraphics

FXGraphics is implementation of Draw2D Graphics. It is used by FXUpdateManager to redner. Since graphics capabilities of JavaFX is much richer than SWT, It was very easy task.

FXViewer

To use alternative Lightweight System, I defined new GraphicalViewer like this:

public class FXViewer extends GraphicalViewerImpl {
	@Override
	public Control createControl(Composite composite) {
		// To embed JavaFX, uses FXCanvas
		FXCanvas canvas = new FXCanvas(composite, SWT.NORMAL);

		// creates JavaFX Canvas Node
		Canvas canvasNode = new Canvas(800, 400);
		canvasNode.setEffect(new Reflection());
		Pane pane = new Pane();
		pane.getChildren().add(canvasNode);
		canvas.setData("canvas", canvasNode);
		canvas.setScene(new Scene(pane));
		setControl(canvas);
		return canvas;
	}

	@Override
	protected LightweightSystem createLightweightSystem() {
		return new FXSystem();
	}
}

Demo Movie

http://www.youtube.com/watch?feature=player_embedded&v=F0ZwCgb8Ba0&hd=1

Conclusion

I could finish my experiment with very cheap cost, However I have to done some more features to use it at commercial plugins:

• Clipping.
• Optimizing Update Manager.
• Canvas Node Re-sizing.

What Can I do with this:

• I can render figure with much more advanced functions. (eg. hardware accelerated drop shadow effect, 3d transform…)

I felt some worries about:

• Draw2D uses SWT Resources like as Color, Image, Font. So I have to dynamically translate them fit to JavaFX in runtime with FXGraphics. It loses some performance. And application will use GDI resources without point.
• JavaFX Canvas node has fixed rendering size.
• I can’t use JavaFX’s animation features on GEF editors since view is not based on JavaFX Scene Graph Node but just single Canvas Node.

I think what if I had more resources(time and money!), I will make new GraphicalViewer which has a Scene Graph based view. Because I want to provide super rich WYSIWYG environment using JavaFX’s capabilities not only just single Canvas Node.

And it was fun!

Java FX HTML Editor in Eclipse!

I did not care about JavaFX, Because It did not support OSX, and there was no legal OSGi bundle for it.

Now, JDK7 shipped with JavaFX, So there is no bundle problem anymore. JDK7 for OSX is also available now. And I heard that Oracle provides Embedding API for SWT.

So I’v tried to make a HTML Editor for Eclipse using JavaFX.

I could make a HTML WYSIWYG Edtior which supports HTML5/CSS3. Codes were unbelievably easy and short.

• See Demo Movie on Youtube

See in HD to improve readability.

 

Source codes(part):

</span>
<pre>public class HtmlEditor extends EditorPart {
	...

	@Override
	public void createPartControl(Composite parent) {
		canvas = new FXCanvas(parent, SWT.NONE);
		editor = new HTMLEditor();
		Scene scene = new Scene(editor);
		canvas.setScene(scene);

		IDocument doc = documentProvider.getDocument(getEditorInput());
		editor.setHtmlText(doc.get());

		editor.setOnKeyPressed(new EventHandler() {
			@Override
			public void handle(KeyEvent event) {
				setDirty(true);
			}
		});
	}
}

I think we can use JavaFX Scene graph as a view of GEF too. It must be cool! It provides very high quality rendering results with performance. I will challenge this later.