Writing an RCP application using e4 modeled UI - part I

Prakash was couple of hours quicker on posting the same topic here. I have a slightly different approach and may be more to add. Lets see.

Step 1: Create a simple plug-in project.

Open the plug-in wizard and create a new plug-in project. Let's give a name org.example.e4.rcpapp. Be sure to uncheck the Generate an activator option. Click Finish. Do not go to template page (they are not yet updated for e4).

 

Step 2: Adding product extension.

Open the manifest editor and go to Dependencies tab. Add org.eclipse.core.runtime as required plug-in. Now open the Extensions page. Add a new extension org.eclipse.core.runtime.products.

Select the extension and give it a ID product in extension details section.

Right click the extension and select New -> Product. Select the product and give it a nice name - e4 RCP app. Change the application id to org.eclipse.e4.ui.workbench.swt.E4Application.

Now right click the product in extension section and add two new properties. In the extension section give the name and values like this

Name : appName

Value : Hello e4

Name : applicationXMI

Value : org.example.e4.rcpapp/Application.xmi

After this your plugin.xml will look like this

<plugin>
   <extension
         id="product"
         point="org.eclipse.core.runtime.products">
      <product
            application="org.eclipse.e4.ui.workbench.swt.E4Application"
            name="e4 RCP app">
         <property
               name="appName"
               value="Hello e4">
         </property>
         <property
               name="applicationXMI"
               value="org.example.e4.rcpapp/Application.xmi">
         </property>
      </product>
   </extension>
</plugin>

Step 3: Application.xmi

Create a new file to the root of the project and call it Application.xmi. It will open by default in a Toolkit model editor with errors (because it doesn't have the expected header). The editor will show a button Open with Text Editor. Click it and the file will open in a text editor. Add following skeleton to it. Save and close it.

<?xml version="1.0" encoding="ASCII"?>
<application:Application xmi:version="2.0" xmlns:xmi="http://www.omg.org/XMI" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:application="http://www.eclipse.org/ui/2008/UIModel">
</application:Application>

Reopen the file and it will now open properly.

Step 4: Creating Modeled UI

When you right click any node in this editor, there will options to add a new Child and/or Siblings. The Properties view will show the properties of each node. If it is not already visible you can invoke it by selecting the node and choosing Show Properties View option from the context menu.

Select the Application node and add a new child Window to it. See its properties and give it a nice name in the Label property like Hello e4.

Select the Window node and add a child Part Sash Container.
Select PartSashContainer node and add a child Part Stack.
Finally select PartStack node and add a child Part to it. Visit the Properties view for the Part node and give it a name in the Label property like My view. And in the URI property give a path platform:/plugin/org.example.e4.rcpapp/org.example.e4.rcpapp.views.MyView

Save the editor and it shall now look like this.

To be sure that we did everything right, open the Application.xmi in text editor and its contents should look like this

<?xml version="1.0" encoding="ASCII"?>
<application:Application xmi:version="2.0" xmlns:xmi="http://www.omg.org/XMI" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:application="http://www.eclipse.org/ui/2008/UIModel">
  <children xsi:type="application:Window" label="Hello e4">
    <children xsi:type="application:PartSashContainer">
      <children xsi:type="application:PartStack">
        <children xsi:type="application:Part" URI="platform:/plugin/org.example.e4.rcpapp/org.example.e4.rcpapp.views.MyView" label="My View"/>
      </children>
    </children>
  </children>
</application:Application>

Step 5: Product Configuration

Create a new Product Configuration. Select the product org.example.e4.rcpapp.product from the combo by enabling the Use an existing product option in the New Product Configuration wizard.

The product editor will now open and will look like this

Step 6: Creating a Run Configuration

Open the Run Configurations wizard and create a new Eclipse Application config. Name it rcpapp.product.
Choose the product org.example.e4.rcpapp.product in the Run a product option.

Go to Plug-ins tab and make sure all workspace and enabled target plug-ins option is selected in the Launch with combo.

Step 7: Launching the RCP Application

Click Run button in run configuration to execute the RCP application. Your first e4 RCP application will look like this

 

Next

In the following posts we will revisit what we did above and try to see why we did it so.

Note to e4 gurus and committers

This series is post is outcome of hit-and-trial self learning. Please do add you views or point out any mistakes you see.