by Lars Vogel

Follow me on twitter

Lars Vogel on Google+

Eclipse Rich Ajax Platform (RAP) - Tutorial

Lars Vogel

Version 1.2

02.10.2011

Revision History
Revision 0.1 03.03.2008 Lars
Vogel
Created
Revision 0.3 - 1.2 31.05.2009 - 02.10.2011 Lars
Vogel
bug fixes and updates

Eclipse RAP Tutorial

This tutorial describes how to create Eclipse RAP applications and how to use the CSS theming to modify their look. Eclipse RAP aims to enable developers to build rich, Ajax-enabled web applications by using the Eclipse development model.

This tutorial is based on Eclipse 3.7 (Indigo).


Table of Contents

1. Eclipse RAP
1.1. Introduction
1.2. Differences to Eclipse RCP
1.3. Workspace and Target Platform
2. Tutorial: Eclipse RAP installation
3. Your first Eclipse RAP application
3.1. Create Project
3.2. Run
3.3. Entrypoint
3.4. Extending your UI
4. Theming
4.1. Overview
4.2. Example
5. Single Sourcing
6. Deployment
7. Thank you
8. Questions and Discussion
9. Links and Literature
9.1. Source Code
9.2. vogella Resources
9.3. Eclipse RAP

1. Eclipse RAP

1.1. Introduction

Eclipse RAP is a Eclipse based platform for Ajax web applications which provides part of the API of Eclipse RCP. Eclipse RAP allows to use Eclipse RCP paradigm for developing Ajax web-applications.

RAP is based on the OSGi implementation Equinox. It is possible to run Eclipse RAP applications via the OSGi servlet bridge in a servlet container, e.g. Apache Tomcat or Jetty.

Eclipse RAP supports extension points, views, perspectives, selection service, commands, handlers, editors and databinding.

Eclipse archives this by providing its own implementations for SWT, JFace and the Workbench. Eclipse RAP replaces SWT with RWT (RAP widget toolkit) layer. This toolkit is based on the qooxdoo Ajax library. RWT is a distributed system; every RWT widget has a client and a server part. These part communicate via Ajax.

During development Eclipse RAP applications run in the embedded webserver Jetty which is part of the Eclipse RAP development tooling.

1.2. Differences to Eclipse RCP

Eclipse RAP does not provide all the possibilities Eclipse RCP. For example Eclipse RAP has no Graphics Context which can be used in SWT to draw directly onto the SWT widgets.

Each Eclipse RAP releases provides more functionality so that the differences between Eclipse RCP and Eclipse RAP are getting smaller every release.

1.3. Workspace and Target Platform

Eclipse RAP have its own target platform. A target platform contains the artifacts, e.g. plug-ins, against which the Eclipse plug-ins are compiled. For example Eclipse RAP does not rely on SWT but on RWT therefore the target platform must provide these.

Typically you should create a new workspace for your Eclipse RAP projects. As you have to change the target platform to compile against Eclipse RAP your existing projects may not work with the RAP target platform and may show syntax errors.

2. Tutorial: Eclipse RAP installation

The following assumes that you have already downloaded and installed "Eclipse for RCP and RAP developer". Via the Help page you can install the target platform. Select Help -> Welcome from the menu. Now the Help page should be diplayed. Click on the overview button and search for "RAP" on the next page. Select it and select "Install Target Platform". I suggest to select the "Latest release"

Installation of the Eclipse RAP Target Platform

Check that the target platform got activated under Window -> Preferences -> Plug-in Development -> Target Platform

Use the Eclipse update manager to install the tooling from the Eclipse update.

After the installation is finished restart your Eclipse.

3. Your first Eclipse RAP application

3.1. Create Project

Create a new plugin project "de.vogella.rap.first" via File -> New -> Project -> Plug-in Development -> Plug-in Project. Perform the following selection.

Select the "RAP Hello World" template and press "Finish".

3.2. Run

Select your "MANIFEST.MF", right click on it, select Run-as-> Rap Application.

This should start your first RAP application.

Congratulations! You have your first Eclipse RAP application running.

3.3. Entrypoint

Eclipse RAP requires an entrypoint similar to "org.eclipse.core.runtime.applications" for Eclipse RCP applications. The entrypoint for Eclipse RAP is defined via "org.eclipse.rap.ui.workbench.entrypoint".

View your Entrypoint via the entension "org.eclipse.rap.ui.workbench.entrypoint" in the file "MANIFEST.MF" . Please note that the parameter "default" is used in your runtime configuration of RAP.

.

3.4. Extending your UI

Create now a view. Select therefore in MANIFEST.MF the tab extension and add the extension point "org.eclipse.ui.views". Add then add the view with the id "de.vogella.rap.first.View". The procedure is the same as for Eclipse RCP application which is described in Adding views to Eclipse RCP applications .

Create the following view class.

				
package de.vogella.rap.first;

import org.eclipse.swt.SWT;
import org.eclipse.swt.widgets.Composite;
import org.eclipse.swt.widgets.Label;
import org.eclipse.swt.widgets.Text;
import org.eclipse.ui.part.ViewPart;

public class View extends ViewPart {

	public static final String ID = "de.vogella.rap.first.View";

	@Override
	public void createPartControl(Composite parent) {
		Label label = new Label(parent, SWT.NONE);
		label.setText("This is my label");
		Text text = new Text(parent, SWT.NONE);
		text.setText("Input");
	}

	@Override
	public void setFocus() {

	}

}

			

Add the view to the perspective by changing Perspective.java to the following.

				
package de.vogella.rap.first;

import org.eclipse.ui.IPageLayout;
import org.eclipse.ui.IPerspectiveFactory;

/** * Configures the perspective layout. This class is contributed * through the plugin.xml. */
public class Perspective implements IPerspectiveFactory { public void createInitialLayout(IPageLayout layout) { String editorArea = layout.getEditorArea(); layout.setEditorAreaVisible(false); layout.addStandaloneView(View.ID, false, IPageLayout.LEFT, 0.25f, editorArea); } }

Run your application and see your new view in actions.

Eclipse RAP supports most of the API JFace and Eclipse RCP support. If you want to learn how you can extend your Eclipse RAP application you can review Eclipse RCP Tutorial or Eclipse JFace TableViewer

Of course Eclipse RAP does only support a subset of these API (but this is increasing every release) so the best way of exploring it is to build your application and see which API are available.

4. Theming

4.1. Overview

A Eclipse RAP application look similar to a Eclipse RCP application running in a browser. While this is cool, it is not necessary always what you want if you develop a web application.

Eclipse RAP therefore provides the possibility to change the look of the application via theming. Themes can be defined in css like files. The following will give an demonstration how to do this.

4.2. Example

Create a new Eclipse RAP project "de.vogella.rap.theming". Use the "RAP Mail Template" as template.

Create a new folder "themes" in your project.

Add the directory themes to your build.properties. Otherwise the files from themes will not get included in an exported product.

Add the extension point "org.eclipse.rap.ui.themes". Use the following settings.

Create now the following file "theme.css" in the folder themes.

				 
* {
    backgound-color: yellow;
    color: red;
  }

  
			

Add now the "org.eclipse.rap.ui.branding" extension point which the following settings. Important is the servletName "rap" as this is used in your runtime configuration, your entrypoint and the theme you want to use.

This will result in the following rap application display.

For additional properties in the style sheet check the RAP Theming Wiki (link below).

5. Single Sourcing

With Eclipse RAP it is possible to develop a desktop application Eclipse RCP and a web application with the same source code. This is called single sourcing.

To use the same code basis for Eclipse RCP and Eclipse RAP you can use OSGi fragments. Fragments are special OSGi bundles, which extend another bundle and are merged at runtime with the extended bundle. You can put the RCP or RAP specific functionality into a fragment. If you create a RAP application you use the RAP fragment or if you want to create a RCP application you use the RCP fragment.

One difference between RCP and RAP is that in RCP you only have one user. In case you are using singletons which should be user specific then you have to use the RAP class SessionSingleBase. In case you have a real singleton for several users you need to consider concurrency issues. JFace Preference are already correctly supported in RAP.

For more on single sourcing check the RAP homepage.

6. Deployment

For deployment please see RAP deployment .

7. Thank you

Please help me to support this article:

Flattr this

8. Questions and Discussion

Before posting questions, please see the vogella FAQ. If you have questions or find an error in this article please use the www.vogella.de Google Group. I have created a short list how to create good questions which might also help you.

9. Links and Literature

9.1. Source Code

Source Code of Examples

9.2. vogella Resources

Eclipse RCP Training (German) Eclipse RCP Training with Lars Vogel

Android Tutorial Introduction to Android Programming

GWT Tutorial Program in Java and compile to JavaScript and HTML

Eclipse RCP Tutorial Create native applications in Java

JUnit Tutorial Test your application

Git Tutorial Put everything you have under distributed version control system