Riena - A New Adventure In Eclipse

Creating a UI Using Riena

Now that we have installed the Riena UI Wizard, we can see some example code quickly. Here's a step by step to get to one of the Riena project templates: 

• Create a new Plug-in Project, but make sure to base it on Eclipse 3.4
• Check "This plug-in will make contributions to the UI" and select Yes to create a rich client application
• You will get four different Riena options in the template list. Here we'll select Riena Mail Template
  
  

Once you click Finish you will be presented with your Riena mail project. Let's take a quick look at how the application looks, before we start to investigate the code.

To run the application, simply open the plugin.xml and chooose Launch an Eclipse Application

The following is the screen that you will be presented with - I'm sure you'll agree it's pretty slick, and different to any RCP application that you probably developed so far. 

A Different User Interface

The following are the key points in the plugin definition that make Riena UIs different to standard RCP UIs.

•  In the plugin manifest, you'll see that as well as including org.eclipse.ui, there is also a dependency on org.eclipse.riena.client
  
  

  Require-Bundle: org.eclipse.ui,
   org.eclipse.core.runtime,
   org.eclipse.riena.client
  
  

• The main class of the Riena application is created as an org.eclipse.core.runtime.applications extension in the plugin.xml 
  
  

  <extension
           id="application"
           point="org.eclipse.core.runtime.applications">
        <application>
           <run
                 class="com.dzone.riena.tests.Application">
           </run>
        </application>
     </extension>

  We will look at this class in more detail shortly.
• An instance of org.eclipse.riena.navigation.ui.swt.views.SubApplicationView is created as a perspective. This will be called later from the main Application class.

Everything else is as in any standard RCP application. The views, menus and handlers are all written as normal. So, let's take a closer look at the Application class. 

The class extends org.eclipse.riena.navigation.ui.swt.application.SwtApplication. The key part of this class is the overridden createModel method. 

protected IApplicationNode createModel() {
		ApplicationNode app = new ApplicationNode("Riena Mail"); //NON-NLS-1

		ISubApplicationNode subApp = new SubApplicationNode("Your Mail"); //NON-NLS-1
		app.addChild(subApp);
		WorkareaManager.getInstance().registerDefinition(subApp, "rcp.mail.perspective"); //NON-NLS-1

		IModuleGroupNode groupMailboxes = new ModuleGroupNode(new NavigationNodeId(Application.ID_GROUP_MBOXES));
		subApp.addChild(groupMailboxes);

		IModuleNode moduleAccount1 = new ModuleNode("me@this.com"); //NON-NLS-1
		groupMailboxes.addChild(moduleAccount1);
		moduleAccount1.setClosable(false);
                .......		
 		return app;
	}

The ApplicationNode is represented by the entire application's shell, while the current tab that is open is an ISubApplicationNode. The best way to illustrate this is to add a new node, which we'll name "Search".

	ISubApplicationNode searchApp  = new SubApplicationNode("Search"); //NON-NLS-1
	app.addChild(searchApp);

As I haven't associated a perpective with the sub application, all this will do right now is contribute a tab.

Adding Content To The Search Tab

To add some simple UI content into the search tab, we can take the following short cut:

• In plugin.xml, copy the Riena Perspective and create your own perspective. Just change the name and id of this new perspective. Note, we still use the same class.
  

    <perspective
              class="org.eclipse.riena.navigation.ui.swt.views.SubApplicationView"
              id="rcp.search.perspective"
              name="Search Perspective">
        </perspective>

  Now we we click on our Search tab, we will see an empty view. As you would expect, the menu and toolbar items remain the same when you click into the Search tab.
• Next we need to provide a ViewPart for the Search tab. Again, let's take the quick way out of this and copy the existing view, changing a few of the parameters.
  
  

    <view
              allowMultiple="true"
              class="com.dzone.riena.tests.SearchView"
              icon="icons/sample2.gif"
              id="rcp.search.view"
              name="Search">
        </view>

  The view class itself extends ViewPart as in any standard RCP application. All we'll do in this class is define the ID as a constant and create some content for the view in the createPartControl method.
• Modify the Application class to include this new view as follows
  
  

  //create a group node for the search content
  IModuleGroupNode searchGroupNode = new ModuleGroupNode();
  searchApp.addChild(searchGroupNode);
  		
  //create a module note for searching
  IModuleNode searchScreen = new ModuleNode("Search Screen"); //NON-NLS-1
  searchGroupNode.addChild(searchScreen);
  createSubMobule("Search", searchScreen, SearchView.ID); //NON-NLS-1
  		

  First we create a group node to act as a container for our Search screen. Then we provide an IModuleNode. This will create a navigation item on the left hand side. We then add the SearchView as the submodule for this navigation node
  
  I would be interested to find out if there's any way of avoiding having those nodes appear on the left hand side.
  
  The createSubMobule method is provided along with the example, so I won't go into it here.

Here's the resulting screen. As you can see, putting together the pieces for a UI in Riena is pretty easy.

A Custom Look & Feel For Your Application

So far we have seen that a Riena UI can look dramatically different a standard RCP UI. The final UI aspect that I will go through here is how to change the Look & Feel of the application. 

First, you will need to create a theme, by implementing the ILnfTheme from Riena. This allows you to add custom colors, fonts, images and settings. An easier way to do this is to extend the RienaDefaultTheme, as this will have all the necessary parts set up.

For this example we'll just change the background colour of submodules, and the coolbar

public class NewTheme extends RienaDefaultTheme {

	public void addCustomColors(Map<String, ILnfResource> table) {

		super.addCustomColors(table);
		table.put(LnfKeyConstants.SUB_MODULE_BACKGROUND,
                                new ColorLnfResource(186, 193, 225));	
                 table.put(LnfKeyConstants.COOLBAR_BACKGROUND,
                                new ColorLnfResource(186, 193, 225));
		
	}
}

Next, create a class to extend RienaDefaultLnf that can instantiate this new theme 

public NewLnf()
	{
		super();
		setTheme(new NewTheme());
	}
	
	protected String getLnfId()
	{
		return "newLnf";
	}

In the constructor of the Application, just call the LnfManager to make the change to the look and feel of the entire application 

public Application()
{
	super();
	LnfManager.setLnf(new NewLnf());
}

We now have a complete change in our entire UI. I really like this look and feel concept in Riena, which is not that far from the Swing concept. 

Article Resources: 

RienaExample.zip

James is a DZone Zone Leader and has posted 231 posts at DZone. You can read more from them at their website.