Jeeeyul’s Eclipse Themes 2.1.0 is released.

I am very glad to announce new Jeeeyul’s Eclipse Themes 2.1.0. Every single details are refined.

• Now you can customize complex gradient colors easily.
• You can customize chevron color , close button.
• You can customize tab items for “Selected”, “Unselected” and “Hovered” states.
• Various Layout Settings can be customized.
• Editor Stack and Empty Editor Stack can be customized.

Visit https://github.com/jeeeyul/eclipse-themes and get details.

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.

Dark Side of SWT, #1 Peer Communication

I began JAVA since 1995, And I loved Swing then SWT.

Now I am a big fan of SWT since 2002. And I have some worries about SWT that I want to share with you.

Why SWT

For long time, SWT is best solution for Java UI. The primary reasons are:

• Native Look & Feel, Performance
• JFace

Native Look&Feel, Performance

In early stage of Java, Standard UI for Java, AWT was very ugly and slow.

There was a big war around Java UI. Primary topic in the war was Unified Experience VS Native Experience.

• Unified Experience, Same Look&Feel in all kind of platform: Swing
• Native Experience, Native Look&Feel in each platform: AWT, SWT

Since one of primary philosophy in Java is “Write once run everywhere(in same way!)”, Sun raised hand of Amy Fowler who is leader of Swing, and denied standard proposal of SWT. (I think actual reason is little bit different. Hint: Sun developed NetBeans.)

All UI Objects in SWT are just proxies to OS’s UI Objects. So application looks very harmonious with their native OS because all UIs are actually native. It is why do we have to dispose SWT Resources and Widgets.

In other words, It is working slightly different for each platform. ex:

• In OSX, Closing shell not dispatching focus out or modify event from text field in shell
• In OSX, Buttons can’t take keyboard focus, So what if some wizard page contains only buttons, it can’t have context help.
• In windows 95, Adavnaced Graphics may not work
• … and so many things …

You have to test every platform what if you have choose SWT.

Behavior of widgets are handled by Native OS, ex: expanding/collapsing tree. So it is very fast. SWT translates Native Events to SWT Events(Display#readAndDispatch), So developer can extend behavior of widgets using Java.

JFace

JFace is most elegant and easy, and well designed library for UI. JFace provides awesome MVC patterns for SWT. So SWT can stay very simple and low-level. Most good experience of Eclipse Application are came with JFace. Swing is much more complex then SWT because there is nothing likes JFace.

JFace is also good tutorial or guide about how to use SWT smart. It’s big heritage.

Peer communication: Is it really fast?

SWT translates messages between Java and OS world. It called as “Peer Communication”. In General, Peer communications between different machine are very slow since it requires:

• Synchronization
• Data conversion

When you commit a command through SWT, SWT translate it and send to OS. OS will work what you ordered. What if amount of work is larger than cost of peer communication, It’s Okay. In other case, It’s not.

In general, OS doing not much since almost controllers are written with Java in SWT. When you click the button, OS generate event, SWT will translate it and dispatch, Java Listener will do some job.

AWT’s Peer communication uses same strategy, buy it is very buggy and slow because they tried to accomplish Write Once Run Everywhere. So communications costs much than SWT. But, Natives are natives, differents are differents. So it was failed.

Example of terrible peer communication performance

public class Example {
   public static void main(String[] args) {
      long start = System.currentTimeMillis();
 
      Display display = Display.getDefault();
      Image image = new Image(display, 640, 480);
      GC gc = new GC(image);
      gc.setForeground(display.getSystemColor(SWT.COLOR_RED));
 
      for(int x=0; x<640; x++){
         for(int y=0; y<480; y++){
            gc.drawPoint(x, y);
         }
      }
 
      long elpasedTime = System.currentTimeMillis() - start;
      System.out.println("done:" + elpasedTime);
   }
}

It fills red pixels into a 640*480 image using SWT. It costs more then 2000 milliseconds! Because Line 12 cause Peer Communication 307,200 times!

How about this, Let replace line 10~14 to below:

gc.fillRectangle(0, 0, 640, 480);

It costs about 300 milliseconds now. They are semantically same task but peer communications are reduced. There was a big difference in performance.

Someone may think first example is too inefficient to compare, see next.

Remove Peer Communication

public class Example {
   public static void main(String[] args) {
      long start = System.currentTimeMillis();
 
      PaletteData palette = new PaletteData(0xff0000, 0xff00, 0xff);
      ImageData data = new ImageData(640, 480, 32, palette);
      RGB red = new RGB(255, 0, 0);
 
      for (int x = 0; x < 640; x++) {
         for (int y = 0; y < 480; y++) {
            data.setPixel(x, y, palette.getPixel(red));
         }
      }
 
      long elapsed = System.currentTimeMillis() - start;
      System.out.println("done:" + elapsed);
   }
}

This codes are exactly same with first example except there is no peer communication since PaletteData, RGB and ImageData are pure java objects.

It costs only 193 milliseconds. And this code can be executed in Non-UI thread. So we don’t have to block UI when we create images.

We know Reducing peer communication or eliminating peer communication is very important topic to develop UI Applications with SWT now. However, in many case, We can’t reduce peer communication. Consider situation that we have to update all TreeItems by it’s model change. We have to perform below codes for all TreeItems:

TreeItem item = ...;
Model model = item.getData();
 
item.setText(model.getLabel());
item.setImage(model.getImage());

Number of peer communications are increased as count of tree items. It’s a reason for that why TreeViewer#refresh() is so slow.

In this case, We can use Deferred Update Strategy, Lazy Content Providing or Virtual FLAG to improve performance. But these techniques are pretty tough to developers.

Lightweight UI

In these days, Swing is super fast since it uses GPU. Native performance is not important anymore since native behavior is tend to be smaller than actual business task or rendering codes. And almost machine has it’s own GPU.

For instance, GEF needs to manipulate very complex UI without Peer Cost, So they developed Draw2d(light-weight, Pure Java UI Library which is rendered on FigureCanvas). So we can use various UIs without loosing performance in GEF Editors.

Figures in Draw2D are almost same with Swing. Swing UIs are rendered by JVM, Figures in Draw2d are rendered by FigureCanvas(LightWeightSystem). So there are no peer cost.

(Actually Figure Canvas uses Native GC when it render, So it uses peer communications. But Figure Updater optimizes this context to reduce peer communication. Defining or manipulating UI elements are toll free! not like SWT)

For same purpose, Nebula provides some widgets like Grid. It can takes massive amount of model and massive number of UI elements.

Conclusion

SWT is fast? Yes! and No!! You have to care about peer communication to make your application support massive scale.

Make System.out.println() Rocks!

System.out.println() is very strong and useful debug tool for long time.
The problem is that we tend to don’t remove this code after we debug.

What if do we have a lots of codes which we forgot to remove, finally debug messages can be useless trashes.
But tracing location of println() code is very difficult since we can’t use break points on system console stream.

So, Here is a cool solution:

@Override
/**
 * @author Jeeeyul 2011. 11. 1. 오후 4:36:51
 * @since M1.10
 */
public class DebugStream extends PrintStream {
   private static final DebugStream INSTANCE = new DebugStream();

   public static void activate() {
      System.setOut(INSTANCE);
   }

   private DebugStream() {
      super(System.out);
   }

   @Override
   public void println(Object x) {
      showLocation();
      super.println(x);
   }

   @Override
   public void println(String x) {
      showLocation();
      super.println(x);
   }

   private void showLocation() {
      StackTraceElement element = Thread.currentThread().getStackTrace()[3];
      super.print(MessageFormat.format("({0}:{1, number,#}) : ", element.getFileName(), element.getLineNumber()));
   }
}

Just call DebugStream.activate() when your application start.

It converts messages in console view from:

Hello World.

into:

(MyHelloWorld.java:10) : Hello World.

Yes, you can click and jump to your System.out.println() code in Eclipse console view. It makes debugging so easy.

Make your IDE more Awesome with PDE-Tools

이 문서는 한국어 버전이 제공됩니다.

I developed commercial Eclipse plugins for 5 years. With this experiences, I made a tools which helps Eclipse Plugin Developers for me and my team.

And I call it “PDE-Tools“, And I love to share this tool to you.

Let me introduce features:

Clipboard History

You don’t have to waste time anymore to just keep current clipboard contents. (Many people doing this)

Just press Control + Shift + V instead of Control + V, then you can paste contents from history of Clipboard.

It supports RTF contents, and It also provides view which supports DND. You can customize various options(sort order, acceptance style).

Icon Preview

It’s pretty insightful function. It just allows to you see icons with your favorite navigator. It’s fast and light-weight, content change sensitive.

Shared Image Generator

This is my favorite feature of PDE-Tools. It generates SharedImages class with given monitored folder. It also supports structural palette according to sub folders.

1. Select a plugin project, and press right mouse button.
2. Select “Configure > Enable Shared Image Generator”
3. That’s all

It also generates icon preview in Java doc, and it also supports Graphiti Image Provider, Re-factoring.

Bundle Image Navigator

Bundle Image View lets you can re-use eclipse image resources. Just drag them into your project.

Wokspace Launcher

This feature is very useful to OSX users. It adds “Launch Workspace” menu below “Switch Workspace”. So you can easily launch another workspace without quitting current one.

Crazy Outline

This cute crazy view provides insightful way to navigate source code.

Snapshot tool (WIP)

You can find small camera on toolbar, It allows you to capture part or toolbar easily. With Ctrl(or command) key, you can capture entire shell with Shadow.

It is very useful when you write some manual about your plugins. It also supports cute camera flash animation and shutter sound 🙂

Installation

1. open market place client (press Ctrl + 3, and type marketplace)
2. type “Jeeeyul” into search field.
3. press “install” button next to “PDE-tools”

Details:

• project page: https://github.com/jeeeyul/pde-tools
• bug/suggestion : https://github.com/jeeeyul/pde-tools/issues
• release note: https://github.com/jeeeyul/pde-tools/wiki/Release-Note

Jeeeyul’s Eclipse Themes – Chrome supports Juno SR1

I created an alternative theme for Eclipse Juno 3 months ago, Now it supports Juno SR1 fully.

• You can customize very many things in lightweight.
• Inelegant drag handle for perspective switcher is removed.
• Much more harmonious drag handles with your configuration.
• Space next to Quick Access has integrated under line.
• See more from project page on github.

This update also contains enhancement for Linux:

• Inelegant image stretching for drag handle was removed.

Crazy Outline

Sublime Text 2 provides pretty unique outline. I want to use outline feature at my workplace. So I added this function to PDE-Tools.

Original outline is great also, But I don’t use that because I prefer to use quick outline(Ctrl + O) instead. This Crazy Outline feature of PDE-Tools let us easily navigate structural text in very insightful way.

Any suggestions and ideas are welcome.

PDE-Tools is provided under the EPL license, and you can fork this on PDE-Tools. It contains several other features which helps plugin developers.

Graphiti rocks!

I’ve inspected Graphiti for 1 week with test project:

You can fork my test project from https://github.com/jeeeyul/graphiti-overview

Graphiti is a framework let you can make Diagram Editor without complex knowledge of WYSIWYG Editor.

Incremental Development

Getting start with Graphiti is super easy. You don’t have to write even single line code to launch the editor.  Graphiti provides fully implemented editor, so You can launch and test the editor at all times.

Everything is Feature

All complex things in GEF(Tool, EditPolicy, Request) are simplified as Feature and Context. You can provide appropriate feature against of given context by defining Feature Provider. Each kind of feature provides insightful interface and basic implementation. It is very easy to learn. And features can co-operate with other features easily through feature provider.

Pictogram and Graphics Algorithm

Graphiti introduces common diagram model and rendering model called as Pictogram and Graphics Algorithm. Pictogram element represents diagram entry. Each pictogram element has a graphics algorithm which contains information that how it will be rendered. So developer make changes on these models not actual view. Developers don’t have to know Draw2D or GEF (likes modeled workbench in E4), And there is no way to access underlying technologies.

As a result, All Graphiti based Editors can have unified appearance, and It also give us free rich function likes SVG exporting.

Graphiti aims to support other platforms(like JavaFX, Flash).

Business Model

Graphiti not forces type of business model, But it provides various automatic features against of EMF model.

• Undo / Redo using EMF ChangeRecorder.
• Update Pictogram Element with model notification.
• …

Synchronize

Visual model(Pictogram Model in Graphiti) refers business model, business model can be edited by other editors. In this case, Visual model may contains wrong value. Treating this problem is generally very complex.

Graphiti provides IUpdateFeature to resolve this problem, and it is also used to update view against of model changes.

Limitation

Graphiti is designed to support diagrams. It means, it is not fit to make editor which needs complex rendering likes Web Page Designer. Because Graphiti provides modeled graphics algorithms, not abstract rendering API. So developers can’t make own renderer for specific diagram entry.

Writing WYSIWYG editor which manipulate simple diagram with Graphiti is very easy. But defining complex structured diagram entry is not so easy. There are no prepared layout algorithms like GridLayout yet. It’s possible but I think it was complex than GEF.

Graphiti Editor is an Interpreter which interprets declared features and diagram types, So you can’t customize things which is not supported by Graphiti. For example, There is no way to show customized feedback UI to user.

Performance seems not good, When I created 40 entries on diagram, Creating new entry is noticeably got slow. Since Graphiti hides underlying technologies, I could not use technique to increase performance like deferred updating. When I adopt single tone pattern to provide feature, Performance was improved very much. (ErdFeatureProvider.xtend)

Conclusion for Now

I think I can’t use Graphiti to make commercial editor for now. But I’m so impressed about it’s unbelievable easiness. Developing WYSIWYG editor is considered as most complex and hard topic for long time. Graphiti proved it’s not!

References:

• Graphiti Eclipse Help (includes good tutorial)

Use E4 DI on Legacy ViewPart

What if you are developing Eclipse IDE plugin, You should have to use old extension points to contribute View or Editor even it’s target platform is Juno.

In this case, You may want to use DI(Dependency Injection Feature of E4) on your contribution.

You can get IEclipseContext through IServiceLocator, and you can inject dependencies with ContextInjectctionFactory:

@Override
public class AddonView extends ViewPart {
   @Inject
   private MApplication application;

   @Override
   public void init(IViewSite site) throws PartInitException {
      super.init(site);

      IEclipseContext context = (IEclipseContext) site.getService(IEclipseContext.class);
      ContextInjectionFactory.inject(this, context);
   }
}