Blog

Eclipse 4.0: Automatically created Theme Switching Menu/Toolbar

3

Recently I took a look at Tom Schindl’s great e4 SimpleIDE demo and found his implementation for an automatically created “Theme” menu. I liked it so much that I could not resist and adopted Tom’s implementation to my e4 contacts demo. I pimped it a bit so that theme icons in the menu as well as a theme switching toolbar are supported. The idea is that all themes defined with the extension point org.eclipse.e4.ui.css.swt.theme are checked at startup and the application’s workbench model is updated dynamically. If there is a png file for a corresponding css, it will be treated automatically as theme icon. For example: dark-gradient.css and dark-gradient.png correspond. The result in the user interface are an automatically created “Theme” menu and an icon-based theme toolbar.

How does it work?

First we need a couple of themes,  the e4 contacts demo currently comes with 3 themes:

<extension point="org.eclipse.e4.ui.css.swt.theme">
  <theme
     basestylesheeturi="css/dark-gradient.css"
     id="org.eclipse.e4.demo.contacts.themes.darkgradient"
     label="Dark Gradient Theme">
  </theme>
  <theme
      basestylesheeturi="css/bright-gradient.css"
      id="org.eclipse.e4.demo.contacts.themes.brightgradient"
      label="Bright Gradient Theme">
  </theme>
  <theme
      basestylesheeturi="css/blue-gradient.css"
      id="org.eclipse.e4.demo.contacts.themes.blue"
      label="Blue Gradient Theme">
  </theme>
</extension>

Then we use the extension point org.eclipse.e4.workbench.model to add a model contribution. We need a “processor” to contribute dynamically to the workbench model. The contacts demo provides two processors, one for the menu and the other for the toolbar. To specify which already existing model element should be injected as dependency in the processor’s Java object, we specify an element with a id. In the applications workbench model these ids belong to the main menu bar and the main toolbar.

   <extension
         id="modelContribution"
         point="org.eclipse.e4.workbench.model">
      <processor
            beforefragment="true"
            class="org.eclipse.e4.demo.contacts.processors.MenuThemeProcessor">
         <element
               id="menu:org.eclipse.ui.main.menu">
         </element>
      </processor>
      <processor
            beforefragment="true"
            class="org.eclipse.e4.demo.contacts.processors.ToolbarThemeProcessor">
         <element
               id="toolbar:org.eclipse.ui.main.toolbar">
         </element>
      </processor>
   </extension>

Now we have to implement the Processors in Java. As most classes in e4, a processor is a pure POJO and gets the necessary stuff injected. Since I wanted to provide two processors in the contacts demo, I split the work into an AbstractThemeProcessor and two concrete implementations for the menu and the toolbar. The AbstractThemeProcesor’s method execute() gets invoked because it is annotated with @Execute.

public abstract class AbstractThemeProcessor {

	@Execute
	public void process() {
...

The main task of the abstract class is to get the ThemingEngine and the command used for switching the theme (this is defined regularly in the workbench model). Then it loops though all available themes and invokes the processTheme method of the concrete implementations. As an example, here is the code snippet of the ToolbarThemeProcessor that shows how the toolbar is injected and toolbar items are added dynamically.

public class ToolbarThemeProcessor extends AbstractThemeProcessor {

	@Inject
	@Named("toolbar:org.eclipse.ui.main.toolbar")
	private MToolBar toolbar;

	@Override
	protected void processTheme(String name, MCommand switchCommand,
			MParameter themeId, String iconURI) {
		MHandledToolItem toolItem = MMenuFactory.INSTANCE
				.createHandledToolItem();
		toolItem.setCommand(switchCommand);
		toolItem.getParameters().add(themeId);
		if (iconURI != null) {
			toolItem.setIconURI(iconURI);
		}
		toolbar.getChildren().add(toolItem);
	}
...

The code for the MenuThemeProcessor is very similar. If you want to play around with running code, download e4 1.0 RC0 and check out the latest version of my contacts demo from cvs (host: dev.eclipse.org, repository path: /cvsroot/eclipse, user:anonymous, path to bundle: e4/org.eclipse.e4.ui/examples/org.eclipse.e4.demo.contacts).

Have Fun

Kai
Follow me on Twitter

New Video: Nature at Lago Maggiore

In June 2010 my family and I have spent a nice week at the “Lago Maggiore” in Italy. This short video (7 minutes) shows the beautiful architecture of our hotel “Residenza Patrizia” in Cannobio, the flowers and nature of the botanic gardens “Villa Taranto” and a hike through the impressive Verzasca valley. The film was shot with a Canon HF10, all the scenes you see in the video are not modified in color/contrast. For editing I used Cyberlink PowerDirector 8. As in my last film I also created and recorded the music myself, using Cubase 4 AI. If you ever plan to visit Lago Maggiore or just like nature I hope you enjoy the video.

Below you find a low-resultion embedded version of the video. If you want to see it in high resolution (1280 x 720), what I really recommend, please visit my Vimeo page.

Nature at Lago Maggiore from Kai Toedter on Vimeo.

Have Fun

Kai
Follow me on Twitter

Eclipse 4.0 RCP: Dynamic CSS Theme Switching

22

The css theming capabilities of the Eclipse 4.0 SDK are improving. Especially the mechanism to implement a dynamic theme switcher is much easier now. If you want to implement a css theme switcher, you just need to contribute to the extension point org.eclipse.e4.ui.css.swt.theme. Here is an example from my e4 contacts demo for declaring two themes:

<extension
 point="org.eclipse.e4.ui.css.swt.theme">
 <theme
    basestylesheeturi="css/dark-gradient.css"
    id="org.eclipse.e4.demo.contacts.themes.darkgradient"
    label="Dark Gradient Theme">
 </theme>
 <theme
    basestylesheeturi="css/bright-gradient.css"
    id="org.eclipse.e4.demo.contacts.themes.brightgradient"
    label="Bright Gradient Theme">
 </theme>
</extension>

Then you need to specify a handler that does the actual theme switching. Here is the whole handler code for switching to the dark gradient theme:

public class DarkThemeHandler {

   @Execute
   public void execute(IThemeEngine engine) {
      engine.setTheme("org.eclipse.e4.demo.contacts.themes.darkgradient");
   }
}

Use the workbench model to bind this handler to a menu or tool bar item — that’s it. The two screenshots show the results when dynamically switching between the dark and the bright theme.

Kai
Follow me on Twitter

Planet Eclipse Test

After upgrading to WordPress 2.9.2, my Eclipse related blogs did not appear at Planet Eclipse anymore.  If you see this post at Planet Eclipse, then it is working again 🙂

JAX 2010 Conference

Next week JAX 2010 starts in Mainz, Germany. As always, the program is great and there are many Eclipse and OSGi related sessions. This year I give two sessions:

For the OSGi session I updated my dynamic Swing demo to the latest versions of Equinox, DS, Spring DM and iPOJO. You can test-drive the application with Java WebStart.

I look forward to seeing you at JAX 2010!

Kai 🙂
Follow me on Twitter

EclipseCon 2010 Feedback

2

I would like to thank everyone who attended my sessions at EclipseCon for the feedback. The bucket-feedback was (+1/0/-1):

  • Advanced Eclipse Rich Client Platform
    (together with Ben Pasero): 51/9/0
  • What’s new in e4 CSS Styling?: 11/2/0
  • e4 – Anatomy of an e4-Application
    (together with Tom Schindl and Lars Vogel): 74/6/0

I am very happy with the feedback, especially with some of the comments :):

  • “Excellent for content, depth, detail and presentation.”
  • “Great session! Easily the best so far”
  • “Great Presentation No delays for configuration”
  • “BEST OF CONFERENCE”

This motivates me so much that I plan to submit “Reloaded” versions of the tutorials for EclipseCon 2011!

@Tom, @Lars, @Ben: What do you think?
@Chris, when are you planing to open the submission system?

Have Fun

Kai
Follow me on Twitter

MP3 Manager: Version 3.5.2 released

Just to adopt the latest service release (and for my EclipseCon tutorial), my MP3 Manager Eclipse RCP demo is now based on Eclipse 3.5.2. Compared to version 3.5.1 there is no new functionality, but the headless build is configured to run with a 3.5.2 target platform.

Have Fun

Kai
Follow me on Twitter

Eclipse @ OOP 2010

As every year, I am looking forward to one of my favorite conferences about software architecture and other interesting stuff, the OOP 2010 (January 25th – 29th in Munich, Germany). This year, I give a full day tutorial on Advanced Eclipse RCP (in German)  and a preview on e4: CSS Styling and Workbench Modeling (in English). While most sessions are in German, there are quite a bunch of sessions in English as well.

So, if you happen to be in Munich at the end of January, may be the OOP 2010 could be an interesting conference for you.

See you there,

Kai

e4: Animated Splash Screen Experiment

2

Recently I started playing around with the great Trident animation library (by Kirill Grouchnikov). Boris Bokowski was so kind to provide a bundle-fied version of Trident in the e4 repository, so I could integrate it easily into my e4 Contacts demo. The first thing I wanted to try out was to animate the splash screen. Since the new year has just started, I integrated the Trident fireworks demo with very few modifications. Since e4 has no SplashHandler support (yet :)), I hacked the start up of the E4Application class a bit and inserted a new SWT Shell, running the Fireworks animation.

I have created a little screen capture animation how the start up of the e4 contacts demo looks with animated splash screen. Click on the picture below to start the animation.

contacts-fireworks.png

Have Fun

Kai

Follow me in Twitter

Eclipse RCP Tip of the Day: p2 Touchpoint Instructions

22

A very common use case in a domain specific RCP app is to update itself using p2. When deploying this app, it would be very convenient if a list of predefined update sites could be available for the application at the first start. This was possible (but not trivial) even with Eclipse 3.4. But now, with Eclipse 3.5.1, it is very easy to do:

  1. Put your product configuration file in a bundle (plug-in project), not in a feature
  2. Create a file at top level and name it p2.inf
  3. Put the following content in the file:
    instructions.configure=
    addRepository(type:0,location:YOUR METADATA REPOSITORY);
    addRepository(type:1,location:
    YOUR ARTIFACT REPOSITORY);
  4. Don’t forget to include p2.inf in the build.properties

You find a working example in my MP3 Manager demo application:

instructions.configure=
addRepository(type:0,location:http${#58}//max-server.myftp.org/mp3m/repository);
addRepository(type:1,location:http${#58}//max-server.myftp.org/mp3m/repository);

If you want to test is with file locations rather than Internet locations, you could use locations like

file${#58}/c:/repository

The above location works for Windows, mind that in the file case there is only one / after the colon.

A list of all available p2 touchpoint instructions you find in the Eclipse Wiki.

Have Fun!

Kai

Page 7 of 12« First...«56789»10...Last »