Home > GEF, JavaFX > GEF/Draw2D on JavaFX

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!

About these ads
Categories: GEF, JavaFX
  1. 2012/11/16 at 4:52 pm

    Wow great Job! How long did it take you? Did you have to modify the core GEF plugins cause I’m just wondering about how your own LWSystem is initialized.

    • 2012/11/16 at 5:00 pm

      It tooks about 3 hours. I updated my post and you can find answer for your question. I did not modify anything inside of GEF, and there is no violation of API contract.

  2. 2012/11/16 at 6:40 pm

    Cool! Are you aware that Tom Schindl did some work in that area in the context of GEF4 (http://dev.eclipse.org/mhonarc/lists/gef-dev/msg01608.html)? Perhaps if you pooled resources we could actually get FX support in GEF…

  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

%d bloggers like this: