This last screenshot is the resume search dialog in WEB context (Eclipse RAP). Here a screenshot in fat client context (Eclipse RCP) :

After several search, it seems that there is no project which provides a SWT pagination control, which works with Eclipse RCP and RAP. So we decided to develop this control and give our code to Eclipse Nebula Project with the bug 367064. Today Nebula Team are voting if the project will be accepted or not.

Overview

The Nebula Pagination Plug-Ins gives you the capability to paginate data list in any SWT Widgets. It works with Eclipse RCP and RAP too.

Table pagination

Nebula Pagination gives you the capability for instance to manage pagination in a SWT Table :

This screen comes from org.eclipse.nebula.widgets.pagination.example.table.renderers.GraphicsPageableTableExample. Here the page navigation bar is drawn with SWT Graphics Context (GC), and you can change on runtime if you need the control style (or implement your own style). Here black style :

and green style :

You can use another pagination navigation bar renderer. For instance here links renderer: (see org.eclipse.nebula.widgets.pagination.example.table.StringPageableTableExample) :

Nebula Pagination provides another pagination renderer like Combo Page to choose the page, Scale Page to select a page, etc… Here a screenshot where you can see the whole pagination renderer (see org.eclipse.nebula.widgets.pagination.example.table.renderers.AllRenderersPageableTableExample) :

The whole pagination renderer are synchronized with the pagination controller. For instance if you change the selected page in a pagination renderer, the other pages renderer will be synchronized with this new selected page.

Table pagination&sort

You can manage sort with pagination like this (see org.eclipse.nebula.widgets.pagination.example.table.ModelSortPageableTableExample) :

Work In Process

The load of the paginated list could take time. You can observe the before/end loading of the paginated list to display a “Loading…” message. If you launch org.eclipse.nebula.widgets.pagination.example.table.ModelSortPageableTableWorkInProcessExample and you click on a page index (here the 2 page is selected), a “loading” message display on the bottom of the table :

The load of the paginated list takes 1 second and display at end the time of the load of the data :

Lazy loading

Nebula Pagination is able to manage lazy table to load new items when last item of the table is selected (see org.eclipse.nebula.widgets.pagination.example.table.lazy.LazyPageTableExample):

after selecting the last row, it load new data :

Plug-Ins

Nebula Pagination contribution provides 7 Plug-Ins :

• org.eclipse.nebula.widgets.pagination : Eclipse Nebula Pagination which provides abstract class to manage pagination and implementation of thoses classes with PageResult pagination structure. Eclipse Nebula Pagination defines an IPageContentProvider to work with any Pagination structure (by default it works with Nebula PageResult, but you can use Spring Data Page structure if you wish (see org.eclipse.nebula.widgets.pagination.springdata).
• org.eclipse.nebula.widgets.pagination.example : sample with table pagination by using Nebula Pagination.
• org.eclipse.nebula.widgets.pagination.tests : tests of Eclipse Nebula Pagination.

And if you wish use Spring Data pagination structure :

• org.eclipse.nebula.widgets.pagination.springdata : defines an IpageContentProvider to works with Spring Data Page, Pageable.
• org.eclipse.nebula.widgets.pagination.example.springdata : same sample than org.eclipse.nebula.widgets.pagination.example but works with Spring Data structure.
• org.springframework.data.domain-only : Spring Data with just Pagination structure.
• org.springframework.data.domain.collections : Spring Data domain Collections support.

Nebula Pagination API (without Spring Data)

To manage pagination with SWT table, Nebula Pagination provides a SWT Composite org.eclipse.nebula.widgets.pagination.PageableTable. The use of PageableTable is very easy but before explaining how to use it, it’s interesting to manage pagination at hand with the Nebula Pagination API (page controller etc) to understand more how to work PageableTable. The Nebula Pagination API could be used to manage pagination with another thing like Tree, NatTable, etc.

Pagination in Table at hand

This explanation is based on the sample org.eclipse.nebula.widgets.pagination.example.table.renderers.OneRendererPaginationTableAtHandExample :

Nebula Pagination works with a pagination controller which hold information about pagination and send events when information changes. The pagination controller is used to store information about pagination :

• the current page index: index of the selected page.
• the page size: number items to display per page.
• the total elements: the total elements of the paginated list.
• the current sort information: the property name and direction of the sort.

The controller fire events as soon as pagination information changes (ex: a new page is selected, sort change,etc). Those information can be observed by adding org.eclipse.nebula.widgets.pagination..IPageChangedListener to the controller. The pagination controller is designed with the class org.eclipse.nebula.widgets.pagination.PageableController which plays the role of the pagination request.

1. At first you must create a pagination controller like this:
   

   int pageSize = 10;
   final PageableController controller = new PageableController(pageSize);

2. For pagination table, a listener is added to the pagination controller to refresh the table with paginated list. To load paginated list, you must implement org.eclipse.nebula.widgets.pagination.IPageLoader :

   package org.eclipse.nebula.widgets.pagination;
   
   import java.util.List;
   
   import org.eclipse.nebula.widgets.pagination.collections.PageResultLoaderList;
   import org.eclipse.nebula.widgets.pagination.collections.PageResult;
   
   /**
    * Classes which implement this interface provide methods which load paginated
    * list by using information about pagination (sort, page index etc) coming from
    * the {@link PageableController}.
    * 
    * <p>
    * If you wish to manage pagination with Java {@link List} in memory you can use
    * {@link PageResultLoaderList}.
    * 
    * </p>
    * <p>
    * For better design {@link IPageLoader} should be implemented by the Service
    * Layer or DAO (Repository) layer. If you wish to manage pagination with JPA,
    * Spring Data JPA can be very helpful.
    * </p>
    * 
    * @see http://www.springsource.org/spring-data
    */
   public interface IPageLoader<T> {
   
     /**
      * Load the paginated list by using the {@link PageableController}
      * information about pagination (sort, page index etc) and returns a page
      * result which contains the paginated list and the total elements (ex:
      * {@link PageResult}, Spring Data Page, etc).
      * 
      * @param controller
      *            information about pagination.
      * @return a pagination structure which contains the paginated list and the
      *         total elements.
      */
     T loadPage(PageableController controller);
   
   }

   The implementation of this interface must return the page result structure. Nebula Pagination provides a basic pagination page result org.eclipse.nebula.widgets.pagination.collections.PageResult which works with Java list :

   package org.eclipse.nebula.widgets.pagination.collections;
   
   import java.util.List;
   
   /**
    * 
    * Page result used to store pagination result information :
    * 
    * <ul>
    * <li>the total elements</li>
    * <li>the paginated list</li>
    * </ul>
    * 
    * @param <T>
    *            the type item of the paginated list.
    */
   public class PageResult<T> {
   
   	private final List<T> content;
   	private final long totalElements;
   
   	/**
   	 * Constructor with the given paginated list and total elements.
   	 * 
   	 * @param content
   	 * @param totalElements
   	 */
   	public PageResult(List<T> content, long totalElements) {
   		this.totalElements = totalElements;
   		this.content = content;
   	}
   
   	/**
   	 * Returns the total amount of elements.
   	 * 
   	 * @return the total amount of elements
   	 */
   	public long getTotalElements() {
   		return totalElements;
   	}
   
   	/**
   	 * Returns the page content as {@link List}.
   	 * 
   	 * @return
   	 */
   	public List<T> getContent() {
   		return content;
   	}
   }

   So you can create a page loader like this:

   final List items = ...;
   final IPageLoader<PageResult> pageLoader = new PageResultLoaderList(items);

   If you use Spring Data JPA, the page result structure can be org.springframework.data.domain.Page and implementation of the IPageLoader can call directly a repository interface (ex: Page findAllPageable(Pageable pageable)). If you wish use Nebula Pagination with Spring Data, please read Nebula Pagination API (with Spring Data).

3. You can create your TableViewer with classic mean and synchronyse it with controller and pageLoader like this :
   

   Table table = new Table(parent, SWT.BORDER | SWT.MULTI | SWT.H_SCROLL | SWT.V_SCROLL);
   ...
   TableViewer viewer = new TableViewer(table);
   controller.addPageChangedListener(PageLoaderStrategyHelper.createLoadPageAndReplaceItemsListener(controller, viewer, pageLoader, PageResultContentProvider.getInstance(), null));
   

   Here when controller changes (ex: page index changes, sort changes, etc), it call the pageloader which returns paginated list in the PageResult and the viewer is refreshed (viewer.setInput(page.gecontent()) with the sublist coming from the PageResult#getContent(). PageResultContentProvider.getInstance() is the org.eclipse.nebula.widgets.pagination.IPageContentProvider to tell that you wish works with page result org.eclipse.nebula.widgets.pagination.PageResult.

   Now if you do :

   controller.setCurrentPage(0)

   to set the current page index to 0, the controller will send an event to notify that page index has changed. In this case, page loader will be called to load paginated list and refresh the viewer.

4. At this step we can display navigation page with a renderer :

   ResultAndNavigationPageLinksRenderer resultAndPageLinksDecorator = new ResultAndNavigationPageLinksRenderer(parent, SWT.NONE, controller);

5. At this step, page links are drawn and you can click on page links to navigate to page and refresh the table. Now you can create columns and add sort by adding SortTableColumnSelectionListener to the column:
   

   TableViewerColumn viewerColumn = new TableViewerColumn(viewer,
   SWT.NONE);
   ...
   viewerColumn.getColumn().addSelectionListener(new SortTableColumnSelectionListener("name", controller));
   

   The constructor org.eclipse.nebula.widgets.pagination.table.SortTableColumnSelectionListener is called with “name” property to sort to Person#getName() property.

Here the full code :

package org.eclipse.nebula.widgets.pagination.example.table.renderers;

import java.util.ArrayList;
import java.util.List;

import org.eclipse.jface.viewers.ArrayContentProvider;
import org.eclipse.jface.viewers.ColumnLabelProvider;
import org.eclipse.jface.viewers.LabelProvider;
import org.eclipse.jface.viewers.TableViewer;
import org.eclipse.jface.viewers.TableViewerColumn;
import org.eclipse.nebula.widgets.pagination.IPageLoader;
import org.eclipse.nebula.widgets.pagination.PageLoaderStrategyHelper;
import org.eclipse.nebula.widgets.pagination.PageableController;
import org.eclipse.nebula.widgets.pagination.collections.PageResult;
import org.eclipse.nebula.widgets.pagination.collections.PageResultContentProvider;
import org.eclipse.nebula.widgets.pagination.collections.PageResultLoaderList;
import org.eclipse.nebula.widgets.pagination.example.model.Address;
import org.eclipse.nebula.widgets.pagination.example.model.Person;
import org.eclipse.nebula.widgets.pagination.renderers.navigation.ResultAndNavigationPageLinksRenderer;
import org.eclipse.nebula.widgets.pagination.table.SortTableColumnSelectionListener;
import org.eclipse.swt.SWT;
import org.eclipse.swt.layout.GridData;
import org.eclipse.swt.layout.GridLayout;
import org.eclipse.swt.widgets.Composite;
import org.eclipse.swt.widgets.Display;
import org.eclipse.swt.widgets.Shell;
import org.eclipse.swt.widgets.Table;
import org.eclipse.swt.widgets.TableColumn;

/**
 * This sample display a list of model {@link Person} in a SWT Table with
 * pagination banner displayed with Page Results+Page Links on the top of the
 * SWT Table. The 2 columns which display the list of {@link Person} can be
 * clicked to sort the paginated list.
 * 
 */
public class OneRendererPaginationTableAtHandExample {

	public static void main(String[] args) {

		Display display = new Display();
		Shell shell = new Shell(display);
		GridLayout layout = new GridLayout(1, false);
		shell.setLayout(layout);

		final List items = createList();

		Composite parent = new Composite(shell, SWT.NONE);
		parent.setLayoutData(new GridData(GridData.FILL_BOTH));
		parent.setLayout(new GridLayout());

		// Left panel
		Table table = new Table(parent, SWT.BORDER | SWT.MULTI | SWT.H_SCROLL
				| SWT.V_SCROLL);
		table.setLayoutData(new GridData(GridData.FILL_BOTH));

		// 2) Initialize the table viewer + SWT Table
		TableViewer viewer = new TableViewer(table);
		viewer.setContentProvider(ArrayContentProvider.getInstance());
		viewer.setLabelProvider(new LabelProvider());

		table.setHeaderVisible(true);
		table.setLinesVisible(true);

		// 3) Create Table columns with sort of paginated list.
		int pageSize = 10;
		final PageableController controller = new PageableController(pageSize);
		final IPageLoader<PageResult> pageLoader = new PageResultLoaderList(
				items);
		controller.addPageChangedListener(PageLoaderStrategyHelper
				.createLoadPageAndReplaceItemsListener(controller, viewer,
						pageLoader, PageResultContentProvider.getInstance(),
						null));

		// Create navigation page links
		ResultAndNavigationPageLinksRenderer resultAndPageLinksDecorator = new ResultAndNavigationPageLinksRenderer(
				parent, SWT.NONE, controller);
		resultAndPageLinksDecorator.setLayoutData(new GridData(
				GridData.FILL_HORIZONTAL));

		createColumns(viewer, controller);
		// 3) Set current page to 0 to refresh the table

		controller.setCurrentPage(0);

		shell.setSize(350, 250);
		shell.open();
		while (!shell.isDisposed()) {
			if (!display.readAndDispatch())
				display.sleep();
		}
		display.dispose();
	}

	private static void createColumns(final TableViewer viewer,
			PageableController controller) {

		// First column is for the first name
		TableViewerColumn col = createTableViewerColumn(viewer, "Name", 150);
		col.setLabelProvider(new ColumnLabelProvider() {
			@Override
			public String getText(Object element) {
				String p = (String) element;
				return p;
			}
		});
		col.setLabelProvider(new ColumnLabelProvider() {
			@Override
			public String getText(Object element) {
				Person p = (Person) element;
				return p.getName();
			}
		});
		col.getColumn().addSelectionListener(
				new SortTableColumnSelectionListener("name", controller));

		// Second column is for the adress
		col = createTableViewerColumn(viewer, "Adress", 150);
		col.setLabelProvider(new ColumnLabelProvider() {
			@Override
			public String getText(Object element) {
				Person p = (Person) element;
				Address address = p.getAddress();
				if (address == null) {
					return "";
				}
				return address.getName();
			}
		});
		col.getColumn()
				.addSelectionListener(
						new SortTableColumnSelectionListener("address.name",
								controller));
	}

	private static List createList() {
		List names = new ArrayList();
		for (int i = 1; i < 100; i++) {
			names.add(new Person(&quot;Name &quot; + i, i < 25 ? &quot;Adress &quot;
					+ Math.random() : null));
		}
		return names;
	}

	private static TableViewerColumn createTableViewerColumn(
			TableViewer viewer, String title, int bound) {
		final TableViewerColumn viewerColumn = new TableViewerColumn(viewer,
				SWT.NONE);
		final TableColumn column = viewerColumn.getColumn();
		column.setText(title);
		column.setWidth(bound);
		column.setResizable(true);
		column.setMoveable(true);
		return viewerColumn;
	}

}

Pagination in Table with PageableTable

You can simplify the previous code by using org.eclipse.nebula.widgets.pagination.table.PageableTable. This explanation is based on the sample org.eclipse.nebula.widgets.pagination.examples.table.OneRendererPaginationTableWithPageableTableExample.

Here the code which create the SWT Table, the Pagination controller, the TableViewer:

final PageableTable pageableTable = new PageableTable(shell, SWT.BORDER, SWT.BORDER | SWT.MULTI | SWT.H_SCROLL | SWT.V_SCROLL, pageSize, null,
ResultAndNavigationPageLinksRendererFactory.getFactory());

This code create the SWT Table, viewer and add on the bottom an instance of ResultAndNavigationPageLinksRenderer.

PageLoader must be set like this:

pageableTable.setPageLoader(new PageResultLoaderList(items));

Here the full code :

package org.eclipse.nebula.widgets.pagination.example.table.renderers;

import java.util.ArrayList;
import java.util.List;

import org.eclipse.jface.viewers.ArrayContentProvider;
import org.eclipse.jface.viewers.ColumnLabelProvider;
import org.eclipse.jface.viewers.LabelProvider;
import org.eclipse.jface.viewers.TableViewer;
import org.eclipse.jface.viewers.TableViewerColumn;
import org.eclipse.nebula.widgets.pagination.PageableController;
import org.eclipse.nebula.widgets.pagination.collections.PageResultContentProvider;
import org.eclipse.nebula.widgets.pagination.collections.PageResultLoaderList;
import org.eclipse.nebula.widgets.pagination.example.model.Address;
import org.eclipse.nebula.widgets.pagination.example.model.Person;
import org.eclipse.nebula.widgets.pagination.renderers.navigation.ResultAndNavigationPageLinksRendererFactory;
import org.eclipse.nebula.widgets.pagination.table.PageableTable;
import org.eclipse.nebula.widgets.pagination.table.SortTableColumnSelectionListener;
import org.eclipse.swt.SWT;
import org.eclipse.swt.layout.GridData;
import org.eclipse.swt.layout.GridLayout;
import org.eclipse.swt.widgets.Display;
import org.eclipse.swt.widgets.Shell;
import org.eclipse.swt.widgets.Table;
import org.eclipse.swt.widgets.TableColumn;

/**
 * This sample display a list of model {@link Person} in a SWT Table with
 * pagination banner displayed with Page Results+Page Links on the top of the
 * SWT Table. The 2 columns which display the list of {@link Person} can be
 * clicked to sort the paginated list.
 * 
 */
public class OneRendererPaginationTableWithPageableTableExample {

	public static void main(String[] args) {

		Display display = new Display();
		Shell shell = new Shell(display);
		GridLayout layout = new GridLayout(1, false);
		shell.setLayout(layout);

		final List items = createList();

		int pageSize = 10;
		final PageableTable pageableTable = new PageableTable(shell,
				SWT.BORDER, SWT.BORDER | SWT.MULTI | SWT.H_SCROLL
						| SWT.V_SCROLL, pageSize,
				PageResultContentProvider.getInstance(), null,
				ResultAndNavigationPageLinksRendererFactory.getFactory());
		pageableTable.setLayoutData(new GridData(GridData.FILL_BOTH));
		pageableTable.setPageLoader(new PageResultLoaderList(items));

		// 2) Initialize the table viewer + SWT Table
		TableViewer viewer = pageableTable.getViewer();
		viewer.setContentProvider(ArrayContentProvider.getInstance());
		viewer.setLabelProvider(new LabelProvider());

		Table table = viewer.getTable();
		table.setHeaderVisible(true);
		table.setLinesVisible(true);

		PageableController controller = pageableTable.getController();
		createColumns(viewer, controller);
		// 3) Set current page to 0 to refresh the table

		controller.setCurrentPage(0);

		shell.setSize(350, 250);
		shell.open();
		while (!shell.isDisposed()) {
			if (!display.readAndDispatch())
				display.sleep();
		}
		display.dispose();
	}

	private static void createColumns(final TableViewer viewer,
			PageableController controller) {

		// First column is for the first name
		TableViewerColumn col = createTableViewerColumn(viewer, "Name", 150);
		col.setLabelProvider(new ColumnLabelProvider() {
			@Override
			public String getText(Object element) {
				String p = (String) element;
				return p;
			}
		});
		col.setLabelProvider(new ColumnLabelProvider() {
			@Override
			public String getText(Object element) {
				Person p = (Person) element;
				return p.getName();
			}
		});
		col.getColumn().addSelectionListener(
				new SortTableColumnSelectionListener("name", controller));

		// Second column is for the adress
		col = createTableViewerColumn(viewer, "Adress", 150);
		col.setLabelProvider(new ColumnLabelProvider() {
			@Override
			public String getText(Object element) {
				Person p = (Person) element;
				Address address = p.getAddress();
				if (address == null) {
					return "";
				}
				return address.getName();
			}
		});
		col.getColumn()
				.addSelectionListener(
						new SortTableColumnSelectionListener("address.name",
								controller));
	}

	private static List createList() {
		List names = new ArrayList();
		for (int i = 1; i < 100; i++) {
			names.add(new Person(&quot;Name &quot; + i, i < 25 ? &quot;Adress &quot;
					+ Math.random() : null));
		}
		return names;
	}

	private static TableViewerColumn createTableViewerColumn(
			TableViewer viewer, String title, int bound) {
		final TableViewerColumn viewerColumn = new TableViewerColumn(viewer,
				SWT.NONE);
		final TableColumn column = viewerColumn.getColumn();
		column.setText(title);
		column.setWidth(bound);
		column.setResizable(true);
		column.setMoveable(true);
		return viewerColumn;
	}

}

Nebula Pagination API (with Spring Data)

By default the pagination structure used in the page loader is org.eclipse.nebula.widgets.pagination.PageResult. But it’s possible to use Spring Data pagination structure org.springframework.data.domain.Page with Nebula Pagination. We do that in our Eclipse RCP/RAP XDocReport.
:

Before explaining how to use Spring Data with Nebula Pagination, here some interesting information:

• No need to add Spring dependencies to use Spring Data pagination structure.
• If you wish paginate :
  • list stored in memory, I suggest to use Spring Data domain Collections.
  • list stored in database I suggest you to use Spring Data JPA or Spring Data JDBC Extensions.
  • If you don’t know Spring Data, I suggets you to study it. You can just write your repository (dao) interface with name convention to manage JPA or JDBC like manage pagination in for Person list:
    

    Page finadAll(Pageable pagable)

    
    and that’s all!

Why Spring Data?

Why org.springframework.data.domain-only?

The big problem with Spring Data Core is that it dependends to Spring Core, Spring AOP etc. That’s why we have created org.springframework.data.domain-only which contains only the source of org.springframework.data.domain with pagination structure :



We have intention to tell about this problem to Spring Data Team and see if those bundles could exist?

If you wish to manage JPA (like we have done with our XDocReport demo), Spring Data JPA is very helpfull. In this case no need to use org.springframework.data.domain-only because Spring Data JPA requires Spring Core, AOP etc. The only case where org.springframework.data.domain-only is intersesting with JPA is when you have Eclipse RCP client (client side) which calls services with remoting which uses JPA (server side). The client side doesn’t call directly JPA, so no need to have in the Target Platform the Spring Data Core.

Why org.springframework.data.domain.collections?

In a business application, pagination is done generally with list coming from database. But sometimes list could coming from java list stored in memory. This is the case for our XDocReport application wich works with DAO layer (Data Access Object) :

• with JPA (it’s our JPA DAO).
• or with java list stored in memory (it’s our mock DAO).

For our mock DAO, we need to create Spring Data Page structure coming from a Java list (and not from JPA). Spring Data manages JPA, JDBC but not Java list in memory. The org.springframework.data.domain.collections is able to create Page implementation coming from Java list and Pageable pagination criteria like this :

List persons =...
Pageable pageable =...
Page paginatedPersons = PageListHelper.createPage(items, pageable)

How to use Spring Data with Nebula Pagination?

If you wish use Spring Data Page structure with Nebula Pagination you must add org.eclipse.nebula.widgets.pagination.springdata in your project and :

• use org.eclipse.nebula.widgets.pagination.springdata.SpringDataPageableController instead of using org.eclipse.nebula.widgets.pagination.PageableController.
• use org.eclipse.nebula.widgets.pagination.springdata.SpringDataPageContentProvider.getInstance() instead of using org.eclipse.nebula.widgets.pagination.PageResultContentProvider.getInstance().

If you wish use pagination with Java list in memory (and not Spring Data JPA or Spring Data JDBC).

• use org.eclipse.nebula.widgets.pagination.springdata.SpringDataPageLoaderList instead of org.eclipse.nebula.widgets.pagination.collections.PageResultLoaderList.

Pagination in Table at hand

Here the “Pagination in Table at hand” with Spring Data (see org.eclipse.nebula.widgets.pagination.springdata.examples.renderer.OneRendererPaginationTableAtHandExample) :

final PageableController controller = new SpringDataPageableController(pageSize);
final IPageLoader pageLoader = new SpringDataPageLoaderList(items);
controller.addPageChangedListener(PageLoaderStrategyHelper.createLoadPageAndReplaceItemsListener(controller, viewer,pageLoader,	SpringDataPageContentProvider.getInstance(), null));

Pagination in Table with PageableTable

Here the “Pagination in Table with PageableTable” with Spring Data (see org.eclipse.nebula.widgets.pagination.springdata.examples.renderer.OneRendererPaginationTableWithPageableTableExample) :

final PageableTable pageableTable = new PageableTable(shell,	SWT.BORDER, SWT.BORDER | SWT.MULTI | SWT.H_SCROLL | SWT.V_SCROLL, pageSize, SpringDataPageContentProvider.getInstance(), null, ResultAndNavigationPageLinksRendererFactory.getFactory());
pageableTable.setLayoutData(new GridData(GridData.FILL_BOTH));
pageableTable.setPageLoader(new SpringDataPageLoaderList(items));

This last screenshot is the resume editor in WEB context (Eclipse RAP). Here a screenshot in fat client context (Eclipse RCP) :

After several search, it seems that there is no project which provides a SWT picture control, which works with Eclipse RCP and RAP. So we decided to develop SWT PictureControl and give our code to Eclipse Nebula Project with the bug 365948. Today Nebula Team are voting if the project will be accepted or not.

Plug-Ins

Nebula PictureControl contribution provides a SWT control to display an image, remove and modify it. It can be used in the RCP/RAP application context. This control is useful to manage photo, logo in a SWT, RCP and RAP Application. It works with SWT (use org.eclipse.nebula.widgets.picture.PictureControl) and FormToolkit (use org.eclipse.nebula.widgets.picture.FormPictureControl)

The PictureControl contribution zip contains :

• org.eclipse.nebula.widgets.picture : plugin which contains the Nebula Picture control.
• org.eclipse.nebula.widgets.picture.example : Main example with PictureControl.

SimplePictureControl

org.eclipse.nebula.widgets.picture.example.SimplePictureControl create a picture control like this :

PictureControl photoControl = new PictureControl(shell);

If you Run org.eclipse.nebula.widgets.picture.example.SimplePictureControl, you will see that :

The “Modify” Link opens the file Explorer View to select an image :

After selecting an image, the image appears :

You can click in the “Delete” link to delete the image. It’s possible to get the image as byte array with the following code :

byte[] imageByteArray = photoControl.getImageByteArray();

When image changes, the PictureControl stores the image as byte array and fires events to tell that image has changed. Here a sample code to observe the image changed :

photoControl.addPropertyChangeListener(PictureControl.IMAGE_BYTEARRAY_PROPERTY,
	new PropertyChangeListener() {
		public void propertyChange(PropertyChangeEvent event) {
			byte[] newImage = (byte[]) event.getNewValue();
		}
});

This feature can be useful when you wish bind with JFace Databinding the image byte array with a Model object. Here a sample to bind byte[] Person#getPhoto() :

Person person=...;
IObservableValue uiValue = BeansObservables.observeValue(photoControl, PictureControl.IMAGE_BYTEARRAY_PROPERTY);
IObservableValue modelValue = PojoObservables.observeValue(person, "photo");
bindingContext.bindValue(uiValue, modelValue, null, null);

PictureControlWithDefaultImage

It’s possible to set a default image (PictureControl#getImageByteArray() will return null in this case). If you run org.eclipse.nebula.widgets.picture.example.PictureControlWithDefaultImage you will see that :

Here the code to set a default image :

Image defaultImage = new Image(display, PictureControlWithDefaultImage.class.getResourceAsStream("EmptyPhoto.jpg"));
PictureControl photoControl = new PictureControl(shell);
photoControl.setDefaultImage(defaultImage);

In this article we will create a sample Java class HelloServiceImpl and publish it as WebService by using CXF Eclipse wizard. Basicly, this wizard will :

• modify the HelloServiceImpl to add well-formed JAX-WS annotation.
• modify or create the Spring beans.xml file which declares the WebServices (in our case HelloServiceImpl) to publish.
• modify the web.xml to declare the Spring CXF Servlet used to dispatch to the proper WebService declared in the beans.xml.

Download

You can download jaxwswithcxf_step2.zip which is a zip which contains the Dynamic Web Project jaxwswithcxf with the HelloWorldImpl WebServices explained in this article.

Create Class HelloServiceImpl

Create in the jaxwswithcxf Dynamic Web Project the class org.sample.ws.HelloServiceImpl like this :

package org.sample.ws;

public class HelloServiceImpl {

	public String getVersion() {
		return "1.0";
	}

	public String hello(String user) {
		return "Hello " + user + "!";
	}
}

Create WebService HelloServiceImpl

Web services can be created using two methods:

• top-down development : Top-down Web services development involves creating a Web service from a WSDL file. WSDL file describes the services (methods, parameters) and defines the contract for the WebService. This WSDL file can also be used to generate the consumer of the WebService (which can be different technolgy (PHP, .Net, etc) than the WebService).
• bottom-up development : Bottom-up Web services development involves creating a Web service from a Java bean or enterprise bean.

In our case we will use bottom-up development : we will use HelloServiceImpl Java class to create the Web Service.

step1 : select Java class

Select HelloServiceImpl and click on the right mouse button to click on the Web Services/Create Web Service menu item :

step2 : select CXF runtime

This action opens the generic Wizard Web Service to generate WebService with Axis, Axis2, CXF, etc :

In our case we want to generate CXF code. To do that, click on Web service runtime: Apache Axis, the Service Deployment Configuration opens. Select Apache CXF 2.x for Web service runtime :

Click on OK button to close the Service Deployment Configuration dialog :

You can notice that Web service runtime is Apache CXF 2.x. By default the Start service is selected which means as soon as wizard is finished, the server will start. I prefer to start my server manually, so I use Install Service to avoid launching the server at the end of the wizard :

step3 : Starting Point Configuration

Click on Next button, the Starting Point Configuration wizard page displays. This page is used to generate an interface (for the HelloServiceImpl) annoted with JAX-WS annotation. In our case we change nothing and HelloServiceImpl will contain the JAX-WS annotation :

step4 : Web Service JAX-WS Annotations Configuration

Click on Next button, the Web Service JAX-WS Annotations Configuration wizard page displays. This page provides several checkbox that you can select/unselect to generate JAX-WS annotation. You can preview the generated code on the bottom of this page. In our case we don’t change the pre-defined values. We will play with those checkbox in a next article :

step5 : Web Service Java2WS Configuration

Click on Next button, the Web Service Java2WS Configuration wizard page displays. This wizard page provides some checkbox to select that you wish generate :

• Generate client generate simple client with JAX-WS Service.create()
• Generate server generate simple server of the WebService. This code starts a server (with Embedding Jetty) and publish the WebService by using JAX-WS Endpoint#publish.
• Generate Wrapper and Fault Beans generate Java class with JAXB annotation. Those classes are generated in the *.jaxws package (in our case org.sample.ws.jaxws). We will see the use of those classes in the next articles.
• Generate WSDL generate WSDL of the WebService.
  • WSDL file : name of the WSDL file to generate.
  • Default SOAP binding.
  • Generate seperate XSD for the types : if this option is selected, the generated WSDL file will not contain the XML Schema which declares the type of the structure used in the method parameters.

step6 : Web Service Publication

Click on Next button, the Web Service Publication wizard page displays :

Click on Finish button to generate JAX-WS WebService and CXF component (Spring beans and web.xml).

Result of CXF Wizard

After finishing the generation of the CXF wizard, your workspace looks like this :

The wizard generate several things :

• [1] HelloServiceImpl : modify the Java class HelloServiceImpl with JAX-WS annotation :
  

  package org.sample.ws;
  
  import javax.jws.WebService;
  
  @WebService(targetNamespace = "http://ws.sample.org/", portName = "HelloServiceImplPort", serviceName = "HelloServiceImplService")
  public class HelloServiceImpl {
  
  	public String getVersion() {
  		return "1.0";
  	}
  
  	public String hello(String user) {
  		return "Hello " + user + "!";
  	}
  }

  The JAX-WS javax.jws.WebService annotation is used to indicate that this class is a WebService.

• [2] generate some classes in the org.sample.ws.jaxws package. Those classes are generated because the Generate Wrapper and Fault Beans of the page Web Service Java2WS Configuration was checked. At this step, those classes are not used.
• [3] CXF librarires. If you open this item you will see that the wizard use the whole JAR of the CXF distribution :

  

  Don’t be afraid of the amount of JARs, CXF needs few JARs.

• [4] beans.xml : this Spring file is used to declare with Spring bean the Java class HelloServiceImpl which must be published as WebService :

  <?xml version="1.0" encoding="UTF-8"?>
  <beans xmlns="http://www.springframework.org/schema/beans"
  	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:jaxws="http://cxf.apache.org/jaxws"
  	xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans-2.5.xsd http://cxf.apache.org/jaxws http://cxf.apache.org/schemas/jaxws.xsd">
  	<import resource="classpath:META-INF/cxf/cxf.xml" />
  	<import resource="classpath:META-INF/cxf/cxf-extension-soap.xml" />
  	<import resource="classpath:META-INF/cxf/cxf-servlet.xml" />
  	<jaxws:endpoint xmlns:tns="http://ws.sample.org/" id="helloservice"
  		implementor="org.sample.ws.HelloServiceImpl" wsdlLocation="wsdl/helloserviceimpl.wsdl"
  		endpointName="tns:HelloServiceImplPort" serviceName="tns:HelloServiceImplService"
  		address="/HelloServiceImplPort">
  		<jaxws:features>
  			<bean class="org.apache.cxf.feature.LoggingFeature" />
  		</jaxws:features>
  	</jaxws:endpoint>
  </beans>

  • the following declaration :
    

    <jaxws:endpoint ... implementor="org.sample.ws.HelloServiceImpl" 

    
    is used to publish the HelloServiceImpl class.
  • the following declaration :
    

    <jaxws:endpoint ... address="/HelloServiceImplPort" 

    
    is used to set the path for the URL of HelloServiceImpl. In our case our service will be available at http://localhost:8080/jaxwswithcxf/services/HelloServiceImplPort.
  • the following declaration :
    

    <jaxws:endpoint ... wsdlLocation="wsdl/helloserviceimpl.wsdl" 
    

    
    set the location of the WSDL. If you remove this wsdlLocation attribute, WSDL will be generated if you access it by the URL http://localhost:8080/jaxwswithcxf/services/HelloServiceImplPort?wsdl.
• [5] web.xml is modified to declare the CXF servlet based on Spring

  <servlet>
    <description>Apache CXF Endpoint</description>
    <display-name>cxf</display-name>
    <servlet-name>cxf</servlet-name>
    <servlet-class>org.apache.cxf.transport.servlet.CXFServlet</servlet-class>
    <load-on-startup>1</load-on-startup>
  </servlet>
  

  available at http://localhost:8080/jaxwswithcxf/services/ :

  <servlet-mapping>
    <servlet-name>cxf</servlet-name>
    <url-pattern>/services/*</url-pattern>
  </servlet-mapping>
  

  This servlet is used to dispatch to the proper WebServices. To know the deployed WebServices, this servlet use the Spring ApplicationContext loaded from the beans.xml :

    <context-param>
      <param-name>contextConfigLocation</param-name>
      <param-value>WEB-INF/beans.xml</param-value>
    </context-param>
  
    <listener>
      <listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>
    </listener>
  

  Here is the full code of the web.xml :

  <?xml version="1.0" encoding="UTF-8"?>
  <web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd" id="WebApp_ID" version="3.0">
    <display-name>jaxwswithcxf</display-name>
    <welcome-file-list>
      <welcome-file>index.html</welcome-file>
      <welcome-file>index.htm</welcome-file>
      <welcome-file>index.jsp</welcome-file>
      <welcome-file>default.html</welcome-file>
      <welcome-file>default.htm</welcome-file>
      <welcome-file>default.jsp</welcome-file>
    </welcome-file-list>
    <servlet>
      <description>Apache CXF Endpoint</description>
      <display-name>cxf</display-name>
      <servlet-name>cxf</servlet-name>
      <servlet-class>org.apache.cxf.transport.servlet.CXFServlet</servlet-class>
      <load-on-startup>1</load-on-startup>
    </servlet>
    <servlet-mapping>
      <servlet-name>cxf</servlet-name>
      <url-pattern>/services/*</url-pattern>
    </servlet-mapping>
    <session-config>
      <session-timeout>60</session-timeout>
    </session-config>
    <context-param>
      <param-name>contextConfigLocation</param-name>
      <param-value>WEB-INF/beans.xml</param-value>
    </context-param>
    <listener>
      <listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>
    </listener>
  </web-app>

• [6] helloserviceimpl_schema1.xsd : this XML Schema describes the structure used in the WebService. This file is generated because the Generate seperate XSD for the types checkbox of the page Web Service Java2WS Configuration was checked. Here is the content of this file :

  <?xml version="1.0" encoding="utf-8"?><xs:schema xmlns:xs="http://www.w3.org/2001/XMLSchema" xmlns:tns="http://ws.sample.org/" elementFormDefault="unqualified" targetNamespace="http://ws.sample.org/" version="1.0">
  <xs:element name="getVersion" type="tns:getVersion"/>
  <xs:element name="getVersionResponse" type="tns:getVersionResponse"/>
  <xs:element name="hello" type="tns:hello"/>
  <xs:element name="helloResponse" type="tns:helloResponse"/>
  <xs:complexType name="getVersion">
      <xs:sequence/>
    </xs:complexType>
  <xs:complexType name="getVersionResponse">
      <xs:sequence>
        <xs:element minOccurs="0" name="return" type="xs:string"/>
      </xs:sequence>
    </xs:complexType>
  <xs:complexType name="hello">
      <xs:sequence>
        <xs:element minOccurs="0" name="arg0" type="xs:string"/>
      </xs:sequence>
    </xs:complexType>
  <xs:complexType name="helloResponse">
      <xs:sequence>
        <xs:element minOccurs="0" name="return" type="xs:string"/>
      </xs:sequence>
    </xs:complexType>
  </xs:schema>

• [7] helloserviceimpl.wsdl : is the generated WSDL. This file is generated because the Generate WSDL checkbox of the page Web Service Java2WS Configuration was checked. Here is the content of this file :
  

  <?xml version="1.0" encoding="UTF-8"?>
  <wsdl:definitions name="HelloServiceImplService" targetNamespace="http://ws.sample.org/" xmlns:wsdl="http://schemas.xmlsoap.org/wsdl/" xmlns:tns="http://ws.sample.org/" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:soap="http://schemas.xmlsoap.org/wsdl/soap/">
    <wsdl:types>
  <schema xmlns="http://www.w3.org/2001/XMLSchema">
  <import namespace="http://ws.sample.org/" schemaLocation="helloserviceimpl_schema1.xsd"/>
  </schema>
    </wsdl:types>
    <wsdl:message name="hello">
      <wsdl:part name="parameters" element="tns:hello">
      </wsdl:part>
    </wsdl:message>
    <wsdl:message name="getVersion">
      <wsdl:part name="parameters" element="tns:getVersion">
      </wsdl:part>
    </wsdl:message>
    <wsdl:message name="helloResponse">
      <wsdl:part name="parameters" element="tns:helloResponse">
      </wsdl:part>
    </wsdl:message>
    <wsdl:message name="getVersionResponse">
      <wsdl:part name="parameters" element="tns:getVersionResponse">
      </wsdl:part>
    </wsdl:message>
    <wsdl:portType name="HelloServiceImpl">
      <wsdl:operation name="getVersion">
        <wsdl:input name="getVersion" message="tns:getVersion">
      </wsdl:input>
        <wsdl:output name="getVersionResponse" message="tns:getVersionResponse">
      </wsdl:output>
      </wsdl:operation>
      <wsdl:operation name="hello">
        <wsdl:input name="hello" message="tns:hello">
      </wsdl:input>
        <wsdl:output name="helloResponse" message="tns:helloResponse">
      </wsdl:output>
      </wsdl:operation>
    </wsdl:portType>
    <wsdl:binding name="HelloServiceImplServiceSoapBinding" type="tns:HelloServiceImpl">
      <soap:binding style="document" transport="http://schemas.xmlsoap.org/soap/http"/>
      <wsdl:operation name="getVersion">
        <soap:operation soapAction="" style="document"/>
        <wsdl:input name="getVersion">
          <soap:body use="literal"/>
        </wsdl:input>
        <wsdl:output name="getVersionResponse">
          <soap:body use="literal"/>
        </wsdl:output>
      </wsdl:operation>
      <wsdl:operation name="hello">
        <soap:operation soapAction="" style="document"/>
        <wsdl:input name="hello">
          <soap:body use="literal"/>
        </wsdl:input>
        <wsdl:output name="helloResponse">
          <soap:body use="literal"/>
        </wsdl:output>
      </wsdl:operation>
    </wsdl:binding>
    <wsdl:service name="HelloServiceImplService">
      <wsdl:port name="HelloServiceImplPort" binding="tns:HelloServiceImplServiceSoapBinding">
        <soap:address location="http://localhost:9090/HelloServiceImplPort"/>
      </wsdl:port>
    </wsdl:service>
  </wsdl:definitions>
  

You can notice that you have JAX-WS Web Services menu item which shows you information about Java classes which are annotated with JAX-WS :

Launch WEB Application

At this step we don’t have any client (consumer of the HelloServiceImpl) but we can test it.

An important information is that our WebService is declared with the org.apache.cxf.feature.LoggingFeature :

 
<jaxws:endpoint id="helloservice"
		...>
		<jaxws:features>
			<bean class="org.apache.cxf.feature.LoggingFeature" />
		</jaxws:features>
	</jaxws:endpoint>

This feature is very usefull because it gives you the capability to trace for instance the received SOAP message (IN) and the sent SOAP message (OUT). We will check that in the Eclipse Console View.

Launch jaxwswithcxf to publish our WebService. After the start of the Web Application, you can notice some interesting logs in the Eclipse Console View :

• you can notice that WEB-INF/beans.xml is loaded :

  ...
  INFO: Loading XML bean definitions from ServletContext resource [/WEB-INF/beans.xml]
  ...
  

  And check that HelloServiceImpl is published :

  ...
  INFO: Creating Service {http://ws.sample.org/}HelloServiceImplService from WSDL: wsdl/helloserviceimpl.wsdl
  22 août 2011 17:16:13 org.apache.cxf.endpoint.ServerImpl initDestination
  INFO: Setting the server's publish address to be /HelloServiceImplPort
  ...

  URLs

  At this step we can play with different URLs

  CXF Services list

  If you go at http://localhost:8080/jaxwswithcxf/services, you can see the list of WebServices (and REST services) :

  

  WSDL

  If you click on the link

  WSDL : {http://ws.sample.org/}HelloServiceImplService

  you will see the WSDL :

  

  URL of the WSDL is http://localhost:8080/jaxwswithcxf/services/HelloServiceImplPort?wsdl

  If you go to the Eclipse Console View, you will see some logs (because we have LoggingFeatures) :

  

  getVersion method

  It’s possible to call our getVersion method with the following URL http://localhost:8080/jaxwswithcxf/services/HelloServiceImplPort/getVersion which returns the SOAP message :

  <soap:Envelope xmlns:soap="http://schemas.xmlsoap.org/soap/envelope/">
  	<soap:Body>
  		<ns2:getVersionResponse xmlns:ns2="http://ws.sample.org/">
  			<return>1.0</return>
  		</ns2:getVersionResponse>
  	</soap:Body>
  </soap:Envelope>
  

  If you go to the Eclipse Console View, you will see some logs (because we have LoggingFeatures)

  

  With this log you can see for instance the sent SOAP Message :

  hello method

  It’s possible to call method with parameter. If you call hello like this, you will that :

  http://localhost:8080/jaxwswithcxf/services/HelloServiceImplPort/hello

  <soap:Envelope xmlns:soap="http://schemas.xmlsoap.org/soap/envelope/">
  	<soap:Body>
  		<ns2:helloResponse xmlns:ns2="http://ws.sample.org/">
  			<return>Hello null!</return>
  		</ns2:helloResponse>
  	</soap:Body>
  </soap:Envelope>
  

  Hello null!

  is returned because we have not filled the parameter.

  To set a parameter, you must access to this URL :
  http://localhost:8080/jaxwswithcxf/services/HelloServiceImplPort/hello?arg0=world

  This URL will return the following SOAP message :

  <soap:Envelope xmlns:soap="http://schemas.xmlsoap.org/soap/envelope/">
  	<soap:Body>
  		<ns2:helloResponse xmlns:ns2="http://ws.sample.org/">
  			<return>Hello world!</return>
  		</ns2:helloResponse>
  	</soap:Body>
  </soap:Envelope>

  Why arg0? Because if you check the XML Schema you have :

  <xs:complexType name="hello">
      <xs:sequence>
        <xs:element minOccurs="0" name="arg0" type="xs:string"/>
      </xs:sequence>
    </xs:complexType>

  Conclusion

  In this article we have generated with CXF Eclipse wizard a WebService with JAX-WS. This wizard initializes CXF by creating beans.xml wich declare Java classes which must be published and CXF Servlet. You can notice that HelloServiceImpl is not linked to CXF and could be used with another JAX-WS implementation.

  In next article [step3] we will create and generate a client with JAX-WS (and CXF) which will consume our WebService.

  
  ]]> http://angelozerr.wordpress.com/2011/08/24/jaxwscxf_step2/feed/ 15 akrogen http://angelozerr.wordpress.com/2011/08/23/jaxwscxf_step1/ http://angelozerr.wordpress.com/2011/08/23/jaxwscxf_step1/#comments Tue, 23 Aug 2011 13:36:36 +0000 angelozerr http://angelozerr.wordpress.com/?p=5217 ]]> Few months ago, I had to migrate WebServices from my professional project based on Axis to JAX-WS which is the Java API for XML Web Services supported by the Java Platform, Standard Edition 6 (Java SE 6).

  There are several implementations of JAX-WS like :

  • Glassfish – Metro.
  • JBoss WS.
  • Axis2.
  • Spring JAX-WS.
  • Apache CXF which is based on XFire.

  In my case, my professional project doesn’t use Spring. We have chosen Apache CXF which use Spring by default but you can manage CXF without Spring.

  I have discovered and learned CXF with Eclipse JEE Indigo (works too with Eclipse JEE Helios) which provides Wizard to generate JAX-WS annotation and initialize CXF application. I think that playing with the CXF Eclipse Wizard is a good start point to learn CXF, so I decided to write some articles called JAX-WS with Apache CXF and Eclipse (this link is the plan of articles) which explains step by step how to generate WebService and Consumer of WebService with CXF Eclipse Wizard.

  In my articles I will use :

  • the last version 2.4.2 of CXF.
  • Tomcat 7 as server.
  • Eclipse JEE Indigo.

  But you can do the same thing with another version of CXF and another server. In this article I will explain how to

  1. initialize the CXF Plugin
  2. and create an empty Eclipse Dynamic Web Project with Tomcat 7.

  Download

  You can download jaxwswithcxf_step1.zip which is a zip which contains the empty Dynamic Web Project jaxwswithcxf.

  Why CXF?

  My experimentation with Axis2

  When I started to play with JAX-WS, I decided to test Axis2 because I was happy with Axis but I was disappointed with the JAX-WS implementation of Axis2 for serveral reasons :

  • documentation is very complex when you are a newbie.
  • axis2 distribution provides a lot of JARs and we don’t know which JARs we must select
  • default deploy service force you to set your WebService JARs in a servicejars folder.
  • that’s why I tried to implement my own deployer to follow my custom architecure (WebService JARs are stored on another folders) but default axis2 deployer code is not based on JAX-WS Endpoint#publish(String address, Object implementor) to deploy a WebService.
  • webservice is not a singleton
  • have some bugs with method which don’t have any parameter, etc.

  My experimentation with CXF

  After my Axis2 experimentation, I have noticed that Eclipse JEE Indigo provides a wizard to generate JAX-WS annotation and initialize a Dynamic Web Project with CXF by using Spring. Unfortunately we have not Spring in our project, but CXF can work without Spring! I will explain to you how to do that in the next articles.

  Today I’m not disappointed in CXF for several reasons :

  • Eclipse JEE Indigo generate well JJAX-WS annotation for the Java class you wish publish as WebService.
  • If you can use Spring, the CXF Wizard is very helpfull because it generate you the well web.xml with Spring CXF Servlet and Spring beans which are used to declare classes which must be published as WebService.

    Writing a service with Spring explains that.

  • If you don’t use Spring, you can still use the CXF Wizard to generate JAX-WS annotation. For the publish of the WebService you need to do that manually with Java code by using JAX-WS API Endpoint#publish(String address, Object implementor) to deploy a WebService :

    MyService serviceInstance = new MyService();
    Endpoint.publish("http://localhost:8080/MyService", serviceInstance);
    

    will deploy your service available at the http://localhost:8080/MyService.

    A simple JAX-WS service explains that.

  • CXF architecture is based on CXF Interceptors (In/Out) to do some process before (In)/after (Out) calling your WebService. You can use existing CXF Interceptor or develop your own Interceptor to manage logging, security, etc.
  • CXF Team is very available. As soon as you post your questions/requirements on the CXF Mailing list, you have an answer.

  Install CXF

  CXF distribution provides several tools to generate JAX-WS annotation, WSDL, etc. The CXF Eclipse Plugin use those tools for the CXF wizard.

  Installing CXF means :

  • download CXF distribution
  • Initialize CXF Eclipse Plugin to set the path of the CXF distribution in the CXF Eclipse Preferences.

  Download CXF distribution

  Go to the CXF Download and download the last version of the CXF distribution. In this article apache-cxf-2.4.2.zip is used :

  

  Unzip apache-cxf-2.4.2.zip on your Hard Disk wherever you want. In my case I have unzipped to C:\Apache\apache-cxf-2.4.2 :

  

  Initialize CXF Eclipse Plugin

  In this section we will set the path of the CXF distribution in the CXF Eclipse Preferences. Open your Eclipse JEE (Helios or Indigo) and go to the Window / Preferences menu :

  

  This action opens the Preferences dialog. Click on the Web Services / CXF 2.x Preferences menu item :

  

  Click on Add… button (on the right of the dialog) to select the path of the CXF distribution. This action opens the Add CXF Runtime. Add Browse… button and select the path of CXF distribution (in my case C:\Apache\apache-cxf-2.4.2) :

  

  If the path of CXF distribution is valid, the fields of the dialog are filled automatically like this :

  

  Click on Finish button, the dialog closes and CXF Runtime tab is filled with the CXF Runtime :

  

  At this step, CXF Runtime is not available. Click on checkbox to make it available :

  

  CXF Runtime is now available. In the next article we will see that CXF Runtime will be present in the generic WebServices wizard.

  Initialize CXF Web Application

  Here we will create an empty Dynamic Web Project named jaxwswithcxf which will host the JAX-WS WebService.

  Download Tomcat 7

  Go to the Tomcat 7 Download and download the last version of the Tomcat distribution. In this article apache-tomcat-7.0.20.zip is used :

  

  Unzip apache-tomcat-7.0.20.zip on your Hard Disk wherever you want. In my case I have unzipped to C:\Apache\apache-tomcat-7.0.20 :

  

  Create Dynamic Web Project

  In this section we will create an empty jaxwswithcxf WEB application with Dynamic Web Project. To do that go to menu File/New /Dynamic Web Project :

  

  New Dynamic Web Project wizard opens. Fill in the project name with jaxwswithcxf and select Target runtime with your Server. If no server is defined, click on New Runtime… button to define it.

  

  Define New Server

  Click on New Runtime… button, open the wizard to create a server. Select Tomcat v7.0 Server :

  

  Click on Next button, the wizard page displays the selection of the Tomcat directory (existing Tomcat or empty folder where Tomcat must be installed). Here we will select the installed Tomcat 7. Click on the Browse… button to select the Tomcat home (in my case C:\Apache\apache-tomcat-7.0.20) :

  

  New Dynamic Web Project configurated

  Click on the Finish button, the New Dynamic Web Project wizard page appears :

  

  Fields of this wizard are pre-filled like 3.0 Dynamic Module Web version which means that Tomcat 7.0 support 3.0 servlet (you can select another version if you wish). Click on Finish Button, the empty jaxwswithcxf WEB application is generated :

  

  Launch Empty WEB application

  Now you can start the Tomcat server and launch the empty WEB Application. Select the jaxwswithcxf project, click on right mouse button and select menu Run As->Run on Server

  

  This action opens the wizard to select the server :

  

  Select Tomcat 7.0 server and click on the Finish button. This action create a Server folder in your workspace which is the configuration of your Tomcat and launch the jaxwscxf WEB Application :

  

  You can notice that you will have a 404 error because the generated web.xml is like this :

  <?xml version="1.0" encoding="UTF-8"?>
  <web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd" id="WebApp_ID" version="3.0">
    <display-name>jaxwswithcxf</display-name>
    <welcome-file-list>
      <welcome-file>index.html</welcome-file>
      <welcome-file>index.htm</welcome-file>
      <welcome-file>index.jsp</welcome-file>
      <welcome-file>default.html</welcome-file>
      <welcome-file>default.htm</welcome-file>
      <welcome-file>default.jsp</welcome-file>
    </welcome-file-list>
  </web-app>

  And your web application contains no such files.

  Conclusion

  In this article we have initialized CXF Eclipse Plugin and created an empty Dynamic Web Project with Tomcat 7.

  In the next article [step2] we will create a simple Java class HelloServiceImpl and we will use CXF Eclipse wizard to expose it as WebService with JAX-WS and CXF.

  
  ]]> http://angelozerr.wordpress.com/2011/08/23/jaxwscxf_step1/feed/ 6 akrogen http://angelozerr.wordpress.com/2011/08/08/rap_step7/ http://angelozerr.wordpress.com/2011/08/08/rap_step7/#comments Mon, 08 Aug 2011 15:43:33 +0000 angelozerr http://angelozerr.wordpress.com/?p=4741 ]]> In [step6] we have seen how to manage UI with SWT Java code (no need to code Javascript). When I started “My first steps with Eclipse RAP” articles, I used Eclipse Helios which provides RAP 1.3. Since June 2011 Eclipse Indigo has been released and provides RAP (runtime and tooling) 1.4 which improves RAP. So, I decided to start over my articles with Eclipse Indigo to benefit from New & Noteworthy of RAP 1.4. In this article we will :
  • create an Eclipse RAP with PDE Template “RAP Application with a view” which generates this WEB Application :
    
  • create an Eclipse RCP with PDE Template “RCP Application with a view” which generates this Fat client Application :
    

  At the end of this article we will compare the two generated RAP and RCP Application code to see the differences between RCP and RAP Application. We will use this comparison in the [step8] to manage RAP (WEB Application) and RCP (Fat client) application with the same code (Single Sourcing).

  Prerequisite

  Before starting this article, Download Eclipse for RCP and RAP Developers distribution of Eclipse Indigo to benefit from New & Noteworthy of RAP 1.4.

  Download

  You can download rap_step7.zip which contains the following explained projects :

  • sample.application.rap which is the generated Eclipse “RAP Application with a view” explained in this article. To use this project you must unzip it and copy/paste in your Eclipse workspace. Import the Eclipse Plugin Project sample.application.rap with File/Import … menu. Go at General/Existing Projects Into Workspace and select sample.application.rap. This action will import the project in your workspace. It requires you to install RAP Target Platform to avoid compilation problems.
  • sample.application.rcp which is the generated Eclipse “RCP Application with a view” explained in this article. To use this project you must unzip it and copy/paste in your Eclipse workspace. Import the Eclipse Plugin Project sample.application.rcp with File/Import … menu. Go at General/Existing Projects Into Workspace and select sample.application.rcp. This action will import the project in your workspace. It requires you to use RCP Target Platform (by default if you create a new Workspace).

  RAP Application with a view

  In this section we will generate a basic RAP application with a view with the PDE template RAP Application with a view with RAP 1.4. The new RAP tooling will install the RAP Target Platform.

  Generate sample.application.rap

  RAP application is an Eclipse Plugin. To create a RAP Application we need to create an Eclipse Plugin. To do that, go to the File/New/Other… menu :

  

  Select Plug-in Development/Plug-in Project node :

  

  Click on Next button, the wizard page which gives the choice to create OSGi Bundle or Eclipse Plugin is displayed :

  

  • fill in the Project name field with sample.application.rap.
  • select the radio button Eclipse version because we would like to develop RAP application which is an Eclipse Plugin.

  Click on Next button, the wizard page which configures the Eclipse Plugin is displayed :

  

  • ID field is the Bundle identifier (Bundle-SymbolicName: sample.application.rap).
  • Version field is the Bundle version (Bundle-Version: 1.0.0.qualifier).
  • Name field is the Bundle name (Bundle-Name: RAP Application).
  • Execution Environment sets the minimal version of the JRE in order to execute the bundle (Bundle-RequiredExecutionEnvironment: JavaSE-1.6).
  • you can unselect generate an activator, a Java class that controls the plug-in’s life cycle to avoid generating a Bundle Activator
  • select This plug-in will make contributions to the UI because we want to generate RAP application
  • select no for Would you like create a rich client application? because we want to generate a RAP application and not RCP application.

  Click on Next button, the wizard page which shows several PDE templates is displayed :

  

  Select RAP Application with a view template to generate RAP application with a view. When you select this template, you can notice on the right view a description of this PDE template “This code will need the RAP target to compile. At this step RAP target is not installed, but RAP 1.4 Tooling will propose to install it at the end of this wizard.

  Click on Next button, the wizard page which gives you the capability to customize package names, class names of the RAP project to generate is displayed :

  

  Don’t change default values and click on Finish Button to generate the RAP application. This action will generate the RAP Application but before the dialog box “Install RAP Target PLatform” is displayed :

  

  Click on OK button to install RAP Target Platform (in our case RAP 1.4). This action opens a dialog box to download and install the RAP Target Platform :

  

  When generation is done, your workspace looks like this :

  

  RAP Target Platform

  If you go to the Window / Preferences menu and Plug-in Development / Target Platform, you can check that RAP Target Platform is installed and selected for the workspace :

  

  Launch RAP Application

  In this section we can start the generated RAP Application. To do that open MANIFEST.MF and click on Overview tab.

  

  Click on Launch a RAP Application link on Testing section. This action starts the RAP WEB application by starting Jetty server and open Browser view with the first home page of the WEB Application :

  

  Jetty 404 error

  If you use Eclipse Browser, sometimes when you start the RAP Application, you can have a 404 error :

  

  Don’t panic with that, wait a moment and refresh the browser. This errors comes from when the Eclipse browser is refreshed before that RAP Application is started.

  Set Jetty Port

  In the last screen, RAP application is available with the URL :

  http://127.0.0.1:3828/view?startup=sample.application.rap.viewapp but each time you will restart your RAP application, port will change (ex : http://127.0.0.1:3829/view?startup=sample.application.rap.viewapp). To set a port go to the Run/Run Configurations… menu :

  

  Select the RAP Application launch, go to the Main tab and set the port value to 8080 in the Runtime Settings/Manual Port configuration :

  

  Now your RAP application will be available every time with the URL http://127.0.0.1:8080/view?startup=sample.application.rap.viewapp. Next articles will use this URL.

  RAP Application – Code

  Here I will not explain each component (Java, plugin.xml, MANIFEST.MF…) of the generated RAP Application, because I have already done that in the [step5]. However, there are few differences that it’s interesting to explain :

  • RAP 1.4 application can use IApplication instead of IEntryPoint.
  • RAP 1.4 tooling generate branding which manage theme (color….) of the RAP Application.
  • generate View class : s we have chosen the PDE template which generates a view, the RAP Application generates a View class with SWT Table.

  IApplication instead of IEntryPoint

  Since RAP 1.4, RAP Application can define the main entry with org.eclipse.equinox.app.IApplication instead of using org.eclipse.rwt.lifecycle.IEntryPoint which is specific RAP interface. This feature is very interesting because RCP Application use too org.eclipse.equinox.app.IApplication and facilitate the Single sourcing.

  plugin.xml

  Instead of declaring the main entry with RAP entrypoint :

  <extension
           point="org.eclipse.rap.ui.entrypoint">
        <entrypoint
              class="sample.application.rap.Application"
              parameter="view"
              id="sample.application.rap.Application">
        </entrypoint>
     </extension>
  

  the RAP Application which is based on RAP 1.4, declares the application like this :

  <extension
        id="viewapp"
        point="org.eclipse.core.runtime.applications">
     <application
           thread="main"
           cardinality="singleton-global"
           visible="true">
        <run
              class="sample.application.rap.Application">
       </run>
     </application>
  </extension>
  
  

  Application

  The application declaration is based on the sample.application.rap.Application class which looks like this :

  package sample.application.rap;
  
  import org.eclipse.equinox.app.IApplication;
  import org.eclipse.equinox.app.IApplicationContext;
  import org.eclipse.swt.widgets.Display;
  import org.eclipse.ui.PlatformUI;
  import org.eclipse.ui.application.WorkbenchAdvisor;
  
  /**
   * This class controls all aspects of the application's execution
   * and is contributed through the plugin.xml.
   */
  public class Application implements IApplication {
  
  	public Object start(IApplicationContext context) throws Exception {
  		Display display = PlatformUI.createDisplay();
  		WorkbenchAdvisor advisor = new ApplicationWorkbenchAdvisor();
  		return PlatformUI.createAndRunWorkbench(display, advisor);
  	}
  
  	public void stop() {
  		// Do nothing
  	}
  }

  Branding

  RAP Tooling 1.4 generates an extension point with branding. What is branding? If you look at the RAP Application you have a green color for the title of the RAP Application :

  

  Here is the declaration of the branding :

  <extension
        point="org.eclipse.rap.ui.branding">
     <branding
           servletName="view"
           themeId="org.eclipse.rap.design.example.fancy.theme"
           defaultEntrypointId="sample.application.rap.viewapp"
           title="RAP Single View"
           id="sample.application.rap.branding">
      </branding>
  </extension>

  org.eclipse.rap.rwt.theme.Default

  You can select another branding if you wish. To know the available branding, use completion (Ctrl+Space) in the plugin.xml :

  

  If you select for instance org.eclipse.rap.rwt.theme.Default

  <extension
        point="org.eclipse.rap.ui.branding">
     <branding
           servletName="view"
           themeId="org.eclipse.rap.rwt.theme.Default"
           defaultEntrypointId="sample.application.rap.viewapp"
           title="RAP Single View"
           id="sample.application.rap.branding">
      </branding>
  </extension>

  and you restart your RAP Application, the WEB application will look like this:

  

  View

  The View class was generated to display Table with 3 items. Here is the generated code sample.application.rap.View class :

  package sample.application.rap;
  
  import org.eclipse.jface.viewers.IStructuredContentProvider;
  import org.eclipse.jface.viewers.ITableLabelProvider;
  import org.eclipse.jface.viewers.LabelProvider;
  import org.eclipse.jface.viewers.TableViewer;
  import org.eclipse.jface.viewers.Viewer;
  import org.eclipse.swt.SWT;
  import org.eclipse.swt.graphics.Image;
  import org.eclipse.swt.widgets.Composite;
  import org.eclipse.ui.ISharedImages;
  import org.eclipse.ui.PlatformUI;
  import org.eclipse.ui.part.ViewPart;
  
  public class View extends ViewPart {
  	public static final String ID = "sample.application.rap.view";
  
  	private TableViewer viewer;
  
  	/**
  	 * The content provider class is responsible for providing objects to the
  	 * view. It can wrap existing objects in adapters or simply return objects
  	 * as-is. These objects may be sensitive to the current input of the view,
  	 * or ignore it and always show the same content (like Task List, for
  	 * example).
  	 */
  	class ViewContentProvider implements IStructuredContentProvider {
  		public void inputChanged(Viewer v, Object oldInput, Object newInput) {
  		}
  
  		public void dispose() {
  		}
  
  		public Object[] getElements(Object parent) {
  			return new String[] { "One", "Two", "Three" };
  		}
  	}
  
  	class ViewLabelProvider extends LabelProvider implements
  			ITableLabelProvider {
  		public String getColumnText(Object obj, int index) {
  			return getText(obj);
  		}
  
  		public Image getColumnImage(Object obj, int index) {
  			return getImage(obj);
  		}
  
  		public Image getImage(Object obj) {
  			return PlatformUI.getWorkbench().getSharedImages()
  					.getImage(ISharedImages.IMG_OBJ_ELEMENT);
  		}
  	}
  
  	/**
  	 * This is a callback that will allow us to create the viewer and initialize
  	 * it.
  	 */
  	public void createPartControl(Composite parent) {
  		int style = SWT.MULTI | SWT.H_SCROLL | SWT.V_SCROLL;
  		viewer = new TableViewer(parent, style);
  		viewer.setContentProvider(new ViewContentProvider());
  		viewer.setLabelProvider(new ViewLabelProvider());
  		viewer.setInput(getViewSite());
  	}
  
  	/**
  	 * Passing the focus request to the viewer's control.
  	 */
  	public void setFocus() {
  		viewer.getControl().setFocus();
  	}
  }

  This code shows you how to manage a list of items with Java code by using SWT Table and JFace content/label provider.

  RCP Application

  RCP Application with a view

  In this section we will generate a basic RCP application with a view with the PDE template RCP Application with a view.

  RAP Target Platform

  Open a new workspace where RAP Target Platform is not installed. If you go to the Window / Preferences menu and Plug-in Development / Target Platform, you can check RCP Target Platform is installed and selected for the workspace :

  

  Generate sample.application.rcp

  RCP application is an Eclipse Plugin. To create a RCP Application we need to create an Eclipse Plugin. To do that, go to the File/New/Other… menu :

  

  Select Plug-in Development/Plug-in Project node :

  

  Click on Next button, the wizard page which gives the choice to create OSGi Bundle or Eclipse Plugin is displayed :

  

  • fill in the Project name field with sample.application.rcp.
  • select the radio button Eclipse version because we would like to develop RCP application which is an Eclipse Plugin.

  Click on Next button, the wizard page which configure the Eclipse Plugin is displayed :

  

  • ID field is the Bundle identifier (Bundle-SymbolicName: sample.application.rcp).
  • Version field is the Bundle version (Bundle-Version: 1.0.0.qualifier).
  • Name field is the Bundle name (Bundle-Name: RCP Application).
  • Execution Environment sets the minimal version of the JRE in order to execute the bundle (Bundle-RequiredExecutionEnvironment: JavaSE-1.6).
  • you can unselect generate an activator, a Java class that controls the plug-in’s life cycle to avoid generating a Bundle Activator
  • select This plug-in will make contributions to the UI because we want to generate RCP application
  • select yes for Would you like create a rich client application? because we want to generate a RCP application.

  Click on Next button, the wizard page which show several PDE templates is displayed :

  

  Select RCP Application with a view template to generate RCP application with a view.

  Click on Next button, the wizard page which gives you the capability to customize package names, class names of the RCP project to generate is displayed :

  

  When generation is done, your workspace looks like this :

  

  Launch RCP Application

  In this section we can start the generated RCP Application. To do that open MANIFEST.MF and click on Overview tab.

  

  Click on Launch an Eclipse Application link on Testing section. This action starts the RCP fat client application :

  

  Comparison between RAP and RCP Application with a view

  If you compare the generated code between the RAP and RCP Application with a view you can notice that the code is almost the same. The main difference between RAP/RCP Application (in our case) is the dependencies :

  For RAP Application, we have RAP dependencies :

  

  Require-Bundle: org.eclipse.rap.ui
  ...
  Import-Package: javax.servlet;version="2.4.0",
   javax.servlet.http;version="2.4.0"

  For RCP Application we have RCP dependencies :

  

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

  As we use RAP 1.4, there is no difference for the the main entry which use org.eclipse.equinox.app.IApplication instead of using org.eclipse.rwt.lifecycle.IEntryPoint which is a specific RAP interface.

  Conclusion

  In this article we have used RAP (runtime and tooling) 1.4 to generate RAP Application with a view. We have generated a RCP Application with a view and we have compared it with RAP Application. The main difference between RAP Application/ RCP Application (for this case) is the dependencies (RAP/RCP dependencies) managed with MANIFEST.MF file. In [step8] we will explain how to manage RAP (WEB Application) and RCP (Fat client) application with the same code. This feature is called Single Sourcing.

  
  ]]> http://angelozerr.wordpress.com/2011/08/08/rap_step7/feed/ 10 akrogen http://angelozerr.wordpress.com/2011/07/26/websockets_jetty_step4/ http://angelozerr.wordpress.com/2011/07/26/websockets_jetty_step4/#comments Tue, 26 Jul 2011 15:05:23 +0000 angelozerr http://angelozerr.wordpress.com/?p=4962 ]]> In [step3] we have created Chat WebSocket on server side and start the Jetty server with a Java main by using Embedding Jetty.

  In this article we will create a chat WEB Application which hosts chat.html. The chat WEB Application will be started on the 8080 port with Tomcat 6 by using Eclipse WTP Adaptor. This WEB Application will use the javax.servlet.ServletContextListener ChatServerServletContextListener for LifecycleListener :

  1. when the WEB Application starts, the Embedding Jetty starts on the 8081 port. Chat WebSocket on server side will be available at ws://localhost:8081/.
  2. when the WEB Application stops, the Embedding Jetty stops.

  Here a scheme which shows you the architecture of the chat application hosted by Tomcat Server (8080 port) and WebSocket managed with Jetty Server (8081 port) :

  

  This schema shows you that:

  • HTTP request will be used on the 8080 port (ex : display the chat.html) to use Tomcat Server which doesn’t support WebSocket.
  • WebSocket request will be used on the 8081 port (ex : click on the “Join” button to join the chat) to use Jetty Server which supports WebSocket.

  Download

  You can download chat-webapp.zip which contains Eclipse WTP Dynamic Web Project chat-webapp which is a the chat WEB Application configured with Tomcat 6 for WTP Tomcat Adaptor explained in this article.

  Initialize WEB Application

  In this section we will create and initialize an Eclipse WTP Dynamic Web Project chat-webapp to add Jetty-WebSocket JARs, chat.html and ChatWebSocketHandler :

  1. Create a WEB Application with Dynamic Web Project with name chat-webapp. In my case I have used WTP Tomcat Adaptor with Tomcat 6.
  2. Copy chat.html in the /WebContent folder of the WEB Application.
  3. Copy Jetty-WebSocket JARs in the /WEB-INF/lib folder without servlet-api-2.5.jar because Tomcat already defines this JAR.
  4. Copy/Paste the ChatWebSocketHandler in the WEB Application.

  Your workspace looks like this:

  

  Create Listener

  In this section we will create an implementation of javax.servlet.ServletContextListener to start and stop Jetty Server when WEB Application starts and stops.

  ChatServerServletContextListener

  Create org.samples.websockets.embeddingjetty.ChatServerServletContextListener like this:

  package org.samples.websockets.embeddingjetty;
  
  import javax.servlet.ServletContextEvent;
  import javax.servlet.ServletContextListener;
  
  import org.eclipse.jetty.server.Server;
  import org.eclipse.jetty.server.handler.DefaultHandler;
  
  /**
   * Application Lifecycle Listener implementation for start/stop Embedding Jetty
   * Server configured to manage Chat WebSocket with {@link ChatWebSocketHandler}.
   * 
   */
  public class ChatServerServletContextListener implements ServletContextListener {
  
  	private Server server = null;
  
  	/**
  	 * Start Embedding Jetty server when WEB Application is started.
  	 * 
  	 */
  	public void contextInitialized(ServletContextEvent event) {
  		try {
  			// 1) Create a Jetty server with the 8091 port.
  			this.server = new Server(8081);
  			// 2) Register ChatWebSocketHandler in the Jetty server instance.
  			ChatWebSocketHandler chatWebSocketHandler = new ChatWebSocketHandler();
  			chatWebSocketHandler.setHandler(new DefaultHandler());
  			server.setHandler(chatWebSocketHandler);
  			// 2) Start the Jetty server.
  			server.start();
  		} catch (Throwable e) {
  			e.printStackTrace();
  		}
  	}
  
  	/**
  	 * Stop Embedding Jetty server when WEB Application is stopped.
  	 */
  	public void contextDestroyed(ServletContextEvent event) {
  		if (server != null) {
  			try {
  				// stop the Jetty server.
  				server.stop();
  			} catch (Exception e) {
  				e.printStackTrace();
  			}
  		}
  	}
  
  }
  

  web.xml

  Declare the ChatServerServletContextListener listener in the web.xml like this:

  <listener>
  	<listener-class>org.samples.websockets.embeddingjetty.ChatServerServletContextListener</listener-class>
  </listener>
  

  Here the full web.xml :

  <?xml version="1.0" encoding="UTF-8"?>
  <web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  	xmlns="http://java.sun.com/xml/ns/javaee" xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
  	xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
  	id="WebApp_ID" version="2.5">
  	<display-name>chat-webapp</display-name>
  	<welcome-file-list>
  		<welcome-file>chat.html</welcome-file>
  	</welcome-file-list>
  	<listener>
  		<listener-class>org.samples.websockets.embeddingjetty.ChatServerServletContextListener</listener-class>
  	</listener>
  </web-app>

  Your workspace looks like this :

  

  Play with chat application!

  Start Tomcat Server, open a Google Chrome and go to the http://localhost:8080/chat-webapp/chat.html URL to play with the chat application :

  

  Limitation with Embedding Jetty

  The Embedding Jetty is a simple solution to support WebSocket on server side for any Java server. The 2 requirements with this solution are :

  • the Java server must support servlet 2.5 API because Embedding Jetty needs this JAR.
  • port of the Java Server and the Embedding Jetty must be different otherwise it will have a conflict.

  Embedding Jetty problem with same port than Java Server

  Testing the second point (Embedding Jetty with same port of the Java Server) is very easy. After modifying the port of the Embedding Jetty of the ChatServerServletContextListener like this :

  ...
  this.server = new Server(8080);
  ...
  

  If you restart your Java Server (in my case Tomcat 6) and go to the http://localhost:8080/chat-webapp/chat.html URL, you will have 404 error :

  

  The 404 error is thrown by the Embedding Jetty Server. It means that Embedding Jetty Server overrides the Java Server Tomcat 6.

  Another problem with Embedding Jetty

  I had discussion with Greg Wilkins the creator of the Jetty-WebSocket about the Embedding Jetty to manage WebSockets like I have suggested you. He tell me that they are another problems. With a separate server you will get something that looks like :

           +---HTTP------> Websphere -----> Req/Resp Application code
          /                                              ^
         /                                               |
  Browser                                             Some link
         \                                               |
          \                                              v
           +---Websocket-> Jetty ---------> Messaging Application code
  -----------------------------------------------------------------------------------------
  

  You also get problems that HTTP and websocket are going to different hosts, so it is hard to share cookies and other security issues.

  Jetty Proxy seems to be the solution?

  The solution who he has suggested me is to use Jetty Proxy. Using a proxy, you can make the Jetty server the main server for all connections, but have the application logic on the Java Server (Tomcat, WebShpere…) :

  Browser====HTTP/Websocket=====>Jetty----HTTP----> Websphere ----> Application
  

  • Jetty would pass normal HTTP requests through to the Java Server (Tomcat, WebShpere…) WEB Application.
  • Jetty would pass received WebSocket messages to the Java Server (Tomcat, WebShpere…) WEB Application as HTTP requests.

  To send a WebSocket message, the WebSocket application would make a HTTP request to Jetty, which would then send the WebSocket message.

  I have not studied Jetty Proxy but if I can do something, I will create a new article about that.

  Conclusion

  This article shows you that it’s easy to support WebSocket for any Java Server by using Embedding Jetty. However it exists some limitations like port problem, cookies and security that Greg Wilkins has explained. Jetty Proxy could be a solution but I have not studied that.

  
  ]]> http://angelozerr.wordpress.com/2011/07/26/websockets_jetty_step4/feed/ 4 akrogen http://angelozerr.wordpress.com/2011/07/26/websockets_jetty_step3/ http://angelozerr.wordpress.com/2011/07/26/websockets_jetty_step3/#comments Tue, 26 Jul 2011 09:45:38 +0000 angelozerr http://angelozerr.wordpress.com/?p=4755 ]]> In [step2] we have implemented our chat application on client side with JavasScript WebSocket component. In this article we will create chat WebSockets on server side with Jetty-WebSocket and start the Jetty Server with Embedding Jetty. We will create a Java main which start a Jetty Server and configure it to manage WebSockets Chat Application on server side.

  We will use Eclipse IDE to create a Java Project org.samples.websockets.embeddingjetty (but you can do with another IDE if you wish). At the end of this article our workspace will looks like this:

  

  Download

  You can download several Eclipse projects explained in this article:

  • org.samples.websockets.embeddingjetty_step3_1.zip contains Eclipse Project org.samples.websockets.embeddingjetty explained in this section. This project is Java project with pom.xml and maven launch (for M2Eclipse) configure it to download Jetty-WebSocket JARs with maven.
  • org.samples.websockets.embeddingjetty_step3_2.zip contains Eclipse Project org.samples.websockets.embeddingjetty explained in this section. This project is Java project with Jetty-WebSocket JARs stored in the lib folder.
  • org.samples.websockets.embeddingjetty_step3_2.zip contains Eclipse Project org.samples.websockets.embeddingjetty explained in this section. This project contains chat.html (client side) and chat application with Jetty-WebSocket on server side.

  Download Jetty-WebSockets JARs

  You can download org.samples.websockets.embeddingjetty_step3_2.zip which contains Eclipse project explained in this section.

  Before starting read this section, create an Eclipse Java Project org.samples.websockets.embeddingjetty.

  Here we will use Jetty-WebSockets 7.4.4.v20110707 which is the last stable Jetty release. This version is very important because WebSockets API has changed since the article Jetty WebSocket Server. I would like say too that WTP Jetty Websocket_Wizard doesn’t generate well WebSockets code for the Jetty 7.4.

  At first we need to download required Jetty-WebSockets JARs :

  • jetty-continuation-7.4.4.v20110707.jar
  • jetty-http-7.4.4.v20110707.jar
  • jetty-io-7.4.4.v20110707.jar
  • jetty-server-7.4.4.v20110707.jar
  • jetty-util-7.4.4.v20110707.jar
  • jetty-websocket-7.4.4.v20110707.jar
  • servlet-api-2.5.jar

  If you wish download thoses JARs you can :

  • download the project org.samples.websockets.embeddingjetty_step3_2.zip which contains required Jetty-Websockets JARs.
  • download at hand the required JARs at http://mvnrepository.com/artifact/org.eclipse.jetty.
  • use maven.

  Jetty-WebSockets POM (maven)

  If you don’t know maven or you don’t know how to use maven to download JARs and you can read French, please read Conception d’un client Eclipse RCP et serveur OSGI avec Spring DM [step14] where I explain how download JARs by using POM maven.

  In your POM, you must declare the Maven repository of the Jetty Eclipse Repository like this :

  <repository>
    <id>org.eclipse.jetty</id>
    <name>Jetty Eclipse Repository</name>
    <url>http://mvnrepository.com/artifact/org.eclipse.jetty</url>
  </repository>
  

  After you must declare the jetty-websocket dependency like this :

  <dependency>
    <groupId>org.eclipse.jetty</groupId>
    <artifactId>jetty-websocket</artifactId>
    <version>7.4.4.v20110707</version>
  </dependency>
  

  Here the full POM that I have used to download Jetty-WebSocket JARs :

  <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  	xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd">
  	<modelVersion>4.0.0</modelVersion>
  	<groupId>org.samples.websockets</groupId>
  	<artifactId>org.samples.websockets.embeddingjetty</artifactId>
  	<packaging>pom</packaging>
  	<version>0.0.1-SNAPSHOT</version>
  
  	<build>
  		<plugins>
  			<plugin>
  				<groupId>org.apache.maven.plugins</groupId>
  				<artifactId>maven-dependency-plugin</artifactId>
  				<version>2.1</version>
  				<executions>
  					<execution>
  						<id>copy-dependencies</id>
  						<phase>process-resources</phase>
  						<goals>
  							<goal>copy-dependencies</goal>
  						</goals>
  						<configuration>
  							<outputDirectory>lib</outputDirectory>
  							<overWriteReleases>true</overWriteReleases>
  							<overWriteSnapshots>true</overWriteSnapshots>
  							<overWriteIfNewer>true</overWriteIfNewer>
  							<excludeTypes>libd</excludeTypes>
  						</configuration>
  					</execution>
  				</executions>
  			</plugin>
  		</plugins>
  	</build>
  
  	<repositories>
  
  		<!-- Jetty Eclipse Repository -->
  		<repository>
  			<id>org.eclipse.jetty</id>
  			<name>Jetty Eclipse Repository</name>
  			<url>http://mvnrepository.com/artifact/org.eclipse.jetty</url>
  		</repository>
  
  	</repositories>
  
  	<dependencies>
  
  		<!-- Jetty WebSockets -->
  		<dependency>
  			<groupId>org.eclipse.jetty</groupId>
  			<artifactId>jetty-websocket</artifactId>
  			<version>7.4.4.v20110707</version>
  		</dependency>
  
  	</dependencies>
  
  </project>

  You can do :

  mvn process-resources

  Or use the launch org.samples.websockets.embeddingjetty\launch-mvn\Process-resources Jetty-Websockets.launch from the org.samples.websockets.embeddingjetty_step3_2.zip :

  

  After refreshing the Eclipse project, lib folder must appears with Jetty-WebSockets JARs :

  

  Update your ClassPath with Jetty-WebSockets JARs :

  

  Simple Server with Embedding Jetty

  In this section we will create a simple Embedding Jetty Server which is started in the 8081 port. To do that create the Java class org.samples.websockets.embeddingjetty.ChatWebSocketServer like this :

  package org.samples.websockets.embeddingjetty;
  
  import org.eclipse.jetty.server.Server;
  
  public class ChatWebSocketServer {
  
  	public static void main(String[] args) {
  		try {
  			// 1) Create a Jetty server with the 8091 port.
  			Server server = new Server(8081);
  			// 2) Start the Jetty server.
  			server.start();
  			// Jetty  server is stopped when the Thread is interruped.
  			server.join();
  		} catch (Throwable e) {
  			e.printStackTrace();
  		}
  	}
  }
  

  We have created a simple Jetty Server with Java main started on 8081 port. You can notice that the code is very simple! To test our code, start the Java main ChatWebSocketServer. The Eclipse console must display some Jetty logs which shows you Jetty Server is started in the 8081 port :

  

  Open a Google Chrome (or another WEB Browser) and go at http://localhost:8081 :

  

  You will see 404 error because the Jetty server has not defined HTML resources files, Servlet, Filter… If you are interested to do that, you can find several samples with Embedding Jetty at SVN example-jetty-embedded.

  Chat Application with Jetty-WebSockets

  In this section we create a Jetty Handler to manage WebSocket with ChatWebSocketHandler and register it to the Jetty Server instance.

  ChatWebSocketHandler

  In this section we create a Jetty Handler ChatWebSocketHandler to manage WebSocket.

  Implements WebSocketHandler

  Create org.samples.websockets.embeddingjetty.ChatWebSocketHandler like this :

  package org.samples.websockets.embeddingjetty;
  
  import javax.servlet.http.HttpServletRequest;
  import org.eclipse.jetty.websocket.WebSocketHandler;
  
  public class ChatWebSocketHandler extends WebSocketHandler {
  
  	public WebSocket doWebSocketConnect(HttpServletRequest request,
  			String protocol) {
  		return null;
  	}
  }

  When this handler will be registered in the Jetty Server instance and user of chat application on client side will click on “Join” button, which call the JavaScript code :

  var location = "ws://localhost:8081/"
  this._ws = new WebSocket(location);
  

  The Jetty server will call :

  ChatWebSocketHandler#doWebSocketConnect(HttpServletRequest request, String protocol)

  This method creates an instance of org.eclipse.jetty.websocket.WebSocket. The server side will store an instance of org.eclipse.jetty.websocket.WebSocket per JavasScript WebSocket component (client side).

  Implements WebSocket.OnTextMessage

  At this step we must implement org.eclipse.jetty.websocket.WebSocket to return an instance of this class when

  ChatWebSocketHandler#doWebSocketConnect(HttpServletRequest request, String protocol)

  is called.

  WebSocket interface before 7.4 version

  Before Jetty 7.4 version that we are using, Jetty WebSocket interface was defined like this:

  package org.eclipse.jetty.websocket;
  
  import java.io.IOException;
  
  public interface WebSocket
  {
      @Deprecated
      public final byte LENGTH_FRAME=(byte)0x80;
      @Deprecated
      public final byte SENTINEL_FRAME=(byte)0x00;
  
      public final static byte   OP_CONTINUATION = 0x00;
      public final static byte   OP_CLOSE = 0x01;
      public final static byte   OP_PING = 0x02;
      public final static byte   OP_PONG = 0x03;
      public final static byte   OP_TEXT = 0x04;
      public final static byte   OP_BINARY = 0x05;
      
      public final static int CLOSE_NORMAL=1000;
      public final static int CLOSE_SHUTDOWN=1001;
      public final static int CLOSE_PROTOCOL=1002;
      public final static int CLOSE_DATA=1003;
      public final static int CLOSE_LARGE=1004;
      
      void onConnect(Outbound outbound);
      void onMessage(byte opcode,String data);
      void onFragment(boolean more,byte opcode,byte[] data, int offset, int length);
      void onMessage(byte opcode,byte[] data, int offset, int length);
      void onDisconnect(); // TODO add code 
      
      public interface Outbound
      {
          void sendMessage(String data) throws IOException;
          void sendMessage(byte opcode,String data) throws IOException;
          void sendMessage(byte opcode,byte[] data, int offset, int length) throws IOException;
          void sendFragment(boolean more,byte opcode,byte[] data, int offset, int length) throws IOException;
          void disconnect();
          void disconnect(int code,String message);
          boolean isOpen();
      }
  }

  When you wanted to implement Jetty-WebSocket you needed to implement several methods like WebSocket#sendMessage(byte opcode,byte[] data, int offset, int length) throws IOException which is the method to send binary data, although this method was never called. For instance in our chat application, only WebSocket#sendMessage(String data) throws IOException is used because chat application client send simple text.

  WebSocket interface 7.4 version

  Jetty 7.4 version has changed the WebSocket interface like this :

  package org.eclipse.jetty.websocket;
  
  import java.io.IOException;
  
  /**
   * WebSocket Interface.
   * <p>
   * This interface provides the signature for a server-side end point of a websocket connection.
   * The Interface has several nested interfaces, for each type of message that may be received.
   */
  public interface WebSocket
  {   
      /**
       * Called when a new websocket connection is accepted.
       * @param connection The Connection object to use to send messages.
       */
      void onOpen(Connection connection);
      
      /**
       * Called when an established websocket connection closes
       * @param closeCode
       * @param message
       */
      void onClose(int closeCode, String message);
  
      /**
       * A nested WebSocket interface for receiving text messages
       */
      interface OnTextMessage extends WebSocket
      {
          /**
           * Called with a complete text message when all fragments have been received.
           * The maximum size of text message that may be aggregated from multiple frames is set with {@link Connection#setMaxTextMessageSize(int)}.
           * @param data The message
           */
          void onMessage(String data);
      }
  
      /**
       * A nested WebSocket interface for receiving binary messages
       */
      interface OnBinaryMessage extends WebSocket
      {
          /**
           * Called with a complete binary message when all fragments have been received.
           * The maximum size of binary message that may be aggregated from multiple frames is set with {@link Connection#setMaxBinaryMessageSize(int)}.
           * @param data
           * @param offset
           * @param length
           */
          void onMessage(byte[] data, int offset, int length);
      }
      
      /**
       * A nested WebSocket interface for receiving control messages
       */
      interface OnControl extends WebSocket
      {
          /** 
           * Called when a control message has been received.
           * @param controlCode
           * @param data
           * @param offset
           * @param length
           * @return true if this call has completely handled the control message and no further processing is needed.
           */
          boolean onControl(byte controlCode,byte[] data, int offset, int length);
      }
      
      /**
       * A nested WebSocket interface for receiving any websocket frame
       */
      interface OnFrame extends WebSocket
      {
          /**
           * Called when any websocket frame is received.
           * @param flags
           * @param opcode
           * @param data
           * @param offset
           * @param length
           * @return true if this call has completely handled the frame and no further processing is needed (including aggregation and/or message delivery)
           */
          boolean onFrame(byte flags,byte opcode,byte[] data, int offset, int length);
          
          void onHandshake(FrameConnection connection);
      }
      
      /**
       * A  Connection interface is passed to a WebSocket instance via the {@link WebSocket#onOpen(Connection)} to 
       * give the application access to the specifics of the current connection.   This includes methods 
       * for sending frames and messages as well as methods for interpreting the flags and opcodes of the connection.
       */
      public interface Connection
      {
          String getProtocol();
          void sendMessage(String data) throws IOException;
          void sendMessage(byte[] data, int offset, int length) throws IOException;
          void disconnect();
          boolean isOpen();
  
          /**
           * @param size size<0 No aggregation of frames to messages, >=0 max size of text frame aggregation buffer in characters
           */
          void setMaxTextMessageSize(int size);
          
          /**
           * @param size size<0 no aggregation of binary frames, >=0 size of binary frame aggregation buffer
           */
          void setMaxBinaryMessageSize(int size);
          
          /**
           * Size in characters of the maximum text message to be received
           * @return size <0 No aggregation of frames to messages, >=0 max size of text frame aggregation buffer in characters
           */
          int getMaxTextMessageSize();
          
          /**
           * Size in bytes of the maximum binary message to be received
           * @return size <0 no aggregation of binary frames, >=0 size of binary frame aggregation buffer
           */
          int getMaxBinaryMessageSize();
      }
      
      /**
       * Frame Level Connection
       * <p>The Connection interface at the level of sending/receiving frames rather than messages.
       *
       */
      public interface FrameConnection extends Connection
      {
          boolean isMessageComplete(byte flags);
          void close(int closeCode,String message);
          byte binaryOpcode();
          byte textOpcode();
          byte continuationOpcode();
          byte finMask();
          
          boolean isControl(byte opcode);
          boolean isText(byte opcode);
          boolean isBinary(byte opcode);
          boolean isContinuation(byte opcode);
          boolean isClose(byte opcode);
          boolean isPing(byte opcode);
          boolean isPong(byte opcode);
          
          void sendControl(byte control,byte[] data, int offset, int length) throws IOException;
          void sendFrame(byte flags,byte opcode,byte[] data, int offset, int length) throws IOException;
      }
      
  }

  So now when you wish implement Jetty WebSocket you must choose the internal WebSocket interface that you wish implement. In our case text message is used for our chat application, so we will implement WebSocket.OnTextMessage :

  /**
   * A nested WebSocket interface for receiving text messages
  */
  interface OnTextMessage extends WebSocket
  {
      /**
       * Called with a complete text message when all fragments have been received.
       * The maximum size of text message that may be aggregated from multiple frames is set with {@link Connection#setMaxTextMessageSize(int)}.
       * @param data The message
       */
      void onMessage(String data);
  }

  Here hyerarchy of the Jetty 7.4 WebSocket interface :

  

  Modify org.samples.websockets.embeddingjetty.ChatWebSocketHandler like this :

  package org.samples.websockets.embeddingjetty;
  
  import javax.servlet.http.HttpServletRequest;
  
  import org.eclipse.jetty.websocket.WebSocket;
  import org.eclipse.jetty.websocket.WebSocketHandler;
  
  public class ChatWebSocketHandler extends WebSocketHandler {
  
  	public WebSocket doWebSocketConnect(HttpServletRequest request,
  			String protocol) {
  		return new ChatWebSocket();
  	}
  
  	private class ChatWebSocket implements WebSocket.OnTextMessage {
  
  		public void onOpen(Connection connection) {
  
  		}
  
  		public void onMessage(String data) {
  
  		}
  
  		public void onClose(int closeCode, String message) {
  
  		}
  	}
  }

  Implements ChatWebSocket

  At this step we must implement each methods of ChatWebSocket.To do that modify org.samples.websockets.embeddingjetty.ChatWebSocketHandler like this :

  package org.samples.websockets.embeddingjetty;
  
  import java.io.IOException;
  import java.util.Set;
  import java.util.concurrent.CopyOnWriteArraySet;
  
  import javax.servlet.http.HttpServletRequest;
  
  import org.eclipse.jetty.websocket.WebSocket;
  import org.eclipse.jetty.websocket.WebSocketHandler;
  
  public class ChatWebSocketHandler extends WebSocketHandler {
  
  	private final Set<ChatWebSocket> webSockets = new CopyOnWriteArraySet<ChatWebSocket>();
  
  	public WebSocket doWebSocketConnect(HttpServletRequest request,
  			String protocol) {
  		return new ChatWebSocket();
  	}
  
  	private class ChatWebSocket implements WebSocket.OnTextMessage {
  
  		private Connection connection;
  
  		public void onOpen(Connection connection) {
  			// Client (Browser) WebSockets has opened a connection.
  			// 1) Store the opened connection
  			this.connection = connection;
  			// 2) Add ChatWebSocket in the global list of ChatWebSocket
  			// instances
  			// instance.
  			webSockets.add(this);
  		}
  
  		public void onMessage(String data) {
  			// Loop for each instance of ChatWebSocket to send message server to
  			// each client WebSockets.
  			try {
  				for (ChatWebSocket webSocket : webSockets) {
  					// send a message to the current client WebSocket.
  					webSocket.connection.sendMessage(data);
  				}
  			} catch (IOException x) {
  				// Error was detected, close the ChatWebSocket client side
  				this.connection.disconnect();
  			}
  
  		}
  
  		public void onClose(int closeCode, String message) {
  			// Remove ChatWebSocket in the global list of ChatWebSocket
  			// instance.
  			webSockets.remove(this);
  		}
  	}
  }

  Register ChatWebSocketHandler in the Jetty Server

  At this step ChatWebSocketHandler is created and we must register it to the Jetty server instance like this:

  ChatWebSocketHandler chatWebSocketHandler = new ChatWebSocketHandler();
  			chatWebSocketHandler.setHandler(new DefaultHandler());
  			server.setHandler(chatWebSocketHandler);
  

  Modify org.samples.websockets.embeddingjetty.ChatWebSocketServer like this :

  package org.samples.websockets.embeddingjetty;
  
  import org.eclipse.jetty.server.Server;
  import org.eclipse.jetty.server.handler.DefaultHandler;
  
  public class ChatWebSocketServer {
  
  	public static void main(String[] args) {
  		try {
  			// 1) Create a Jetty server with the 8091 port.
  			Server server = new Server(8081);
  			// 2) Register ChatWebSocketHandler in the Jetty server instance.
  			ChatWebSocketHandler chatWebSocketHandler = new ChatWebSocketHandler();
  			chatWebSocketHandler.setHandler(new DefaultHandler());
  			server.setHandler(chatWebSocketHandler);
  			// 2) Start the Jetty server.
  			server.start();
  			// Jetty server is stopped when the Thread is interruped.
  			server.join();
  		} catch (Throwable e) {
  			e.printStackTrace();
  		}
  	}
  }
  

  Play with Chat Application!

  At this step you can play with the chat application. To do that start the Jetty Server and open chat.html in Google Chrome:

  

  Conclusion

  In this article we have seen how to develop Chat Application WebSockets on server side with Jetty-WebSocket. We are used an Embedding Jetty to start the Jetty server and configure it to support our Chat Application WebSockets with the ChatWebSocketHandler class. This class can be used in a Jetty server too. In the [step4] I see you how to use our Chat Jetty-WebSocket in another Java Server (Tomcat, WebShpere…) which doesn’t support WebSocket.

  
  ]]> http://angelozerr.wordpress.com/2011/07/26/websockets_jetty_step3/feed/ 9 akrogen http://angelozerr.wordpress.com/2011/07/25/websockets_jetty_step2/ http://angelozerr.wordpress.com/2011/07/25/websockets_jetty_step2/#comments Mon, 25 Jul 2011 22:44:06 +0000 angelozerr http://angelozerr.wordpress.com/?p=4859 ]]> In [step1] we have seen how WebSockets could be used in a chat application and introduce WebSockets component on client/server side.

  In this article we will create chat application on client side with JavaScript WebSocket component. Google Chrome implements WebSocket so our chat application will be tested with this browser.

  Jetty distribution provides a sample with chat.html. This article will explain step by step how to create chat application on client side with chat.html. In the next article [step3], we will create a Jetty server which will start to the 8081 port. The Chat WebSocket server will be available at ws://localhost:8081. You can notice
  that URL is ws://localhost:8081/ and not http://localhost:8081/. ws:// is WebSocket protocol. For secured protocol (like https://), wss:// must be used.

  Once WebSockets will be finished on client side (explained in this article) and server side (explained in [step3]), chat application will look like this :

  

  Download

  You can display (and download) chat.html explained in this article.

  WebSocket Chat – Overview

  Before explaining step by step how to create our chat application with chat.html, it’s interesting to see in action the chat features provided by Jetty distribution.

  Check WebSocket support

  The Jetty chat.html test if Web Browser supports JavaScript WebSocket component. For instance if you will open chat.html with FireFox you will see this alert :

  

  Chat connection

  When you will open chat.html with Google Chrome, you will see that the chat application will display Username field and “Join” button :

  

  To start a chat, you must fill Username field with an User and click on “Join” button or press Enter :

  

  This action creates a JavaScript WebSocket which connect to the server. “Username” label is changed with “Chat” label, “Join” button label is changed with “Send” and Chat area display the new User who has joined the chat :

  

  If you open a new chat application in new tab and you join the chat, you can see that :

  

  If you go the first chat application you will see that the second user has joined the chat :

  

  Chat communication

  If the first user type “hello” and press Enter or click on “Send” button, message is sent :

  

  You can check that the first user has received “hello” message from him :

  

  You can check that the second user has received “hello” message from the first user :

  

  UI Chat Application

  At this step we create a chat.html file to create the UI chat application.

  UI Chat Application – HTML

  UI chat application is composed with 3 areas :

  • an HTML div which contains messages. This div is identified with “chat” id.
  • an HTML div which displays Username field and “Join” button. This div is identified with “join” id. This div is displayed at first time. Once User is connected after joining the chat, this div is hidden.
  • an HTML div which displays Chat field and “Send” button. This div is identified with “joined” id. This div is hidden at first time. Once User is connected after joining the chat, this div is displayed.

  Create a chat.html file with this content :

  <html>
  <head>
  <title>WebSocket Chat</title>
  </head>
  <body>
  	<div id="chat"></div>
  	<div id="input">
  		<div id="join">
  			Username:&nbsp;
  			<input id="username" type="text" /><input id="joinB"
  				class="button" type="submit" name="join" value="Join" />
  		</div>
  		<div id="joined" class="hidden">
  			Chat:&nbsp;<input id="phrase" type="text" /> <input id="sendB"
  				class="button" type="submit" name="join" value="Send" />
  		</div>
  	</div>
  </body>
  </html>

  CSS hidden class will manage the hidden of the div when CSS styles will be added. If you open chat.html with Google Chrome, you will see that :

  

  UI Chat Application – CSS Styles

  Now you can style chat application by modifying chat.html like this :

  <html>
  <head>
  <title>WebSocket Chat</title>
  <style type='text/css'>
  div {
  	border: 0px solid black;
  }
  
  div#chat {
  	clear: both;
  	width: 40em;
  	height: 20ex;
  	overflow: auto;
  	background-color: #f0f0f0;
  	padding: 4px;
  	border: 1px solid black;
  }
  
  div#input {
  	clear: both;
  	width: 40em;
  	padding: 4px;
  	background-color: #e0e0e0;
  	border: 1px solid black;
  	border-top: 0px
  }
  
  input#phrase {
  	width: 30em;
  	background-color: #e0f0f0;
  }
  
  input#username {
  	width: 14em;
  	background-color: #e0f0f0;
  }
  
  div.hidden {
  	display: none;
  }
  
  span.from {
  	font-weight: bold;
  }
  </style>
  </head>
  <body>
  	<div id="chat"></div>
  	<div id="input">
  		<div id="join">
  			Username:&nbsp;
  			<input id="username" type="text" /><input id="joinB"
  				class="button" type="submit" name="join" value="Join" />
  		</div>
  		<div id="joined" class="hidden">
  			Chat:&nbsp;<input id="phrase" type="text" /> <input id="sendB"
  				class="button" type="submit" name="join" value="Send" />
  		</div>
  	</div>
  </body>
  </html>

  If you open chat.html with Google Chrome, you will see that :

  

  Chat logic with JavaScript WebSocket

  At this step we can manage the logic of the chat application with JavaScript by using JavaScript WebSocket component. The WebSocket interface defines several methods :

  [Constructor(in DOMString url, in optional DOMString protocols),
   Constructor(in DOMString url, in optional DOMString[] protocols)]
  interface WebSocket {
    readonly attribute DOMString url;
  
    // ready state
    const unsigned short CONNECTING = 0;
    const unsigned short OPEN = 1;
    const unsigned short CLOSING = 2;
    const unsigned short CLOSED = 3;
    readonly attribute unsigned short readyState;
    readonly attribute unsigned long bufferedAmount;
  
    // networking
             attribute Function? onopen;
             attribute Function? onerror;
             attribute Function? onclose;
    readonly attribute DOMString extensions;
    readonly attribute DOMString protocol;
    void close([Clamp] in optional unsigned short code, in optional DOMString reason);
  
    // messaging
             attribute Function? onmessage;
             attribute DOMString binaryType;
    void send(in DOMString data);
    void send(in ArrayBuffer data);
    void send(in Blob data);
  };
  WebSocket implements EventTarget;

  Scripts before loading page.

  At this step, we define JavaScript functions which manages chat application with JavaScript WebSocket. The Chat WebSocket server will be available at ws://localhost:8081. After the HTML content :

  <html>
  <head>
  <title>WebSocket Chat</title>
  

  Add this script :

  <script type="text/javascript">
  	if (!window.WebSocket)
  		alert("WebSocket not supported by this browser");
  
  	function $() {
  		return document.getElementById(arguments[0]);
  	}
  	function $F() {
  		return document.getElementById(arguments[0]).value;
  	}
  
  	function getKeyCode(ev) {
  		if (window.event)
  			return window.event.keyCode;
  		return ev.keyCode;
  	}
  	
  	var room = {
  		join : function(name) {
  			this._username = name;
  			//var location = document.location.toString().replace('http://',
  			//		'ws://').replace('https://', 'wss://');
  			var location = "ws://localhost:8081/"
  			this._ws = new WebSocket(location);
  			this._ws.onopen = this._onopen;
  			this._ws.onmessage = this._onmessage;
  			this._ws.onclose = this._onclose;
  			this._ws.onerror = this._onerror;
  		},
  
  		chat : function(text) {
  			if (text != null && text.length > 0)
  				room._send(room._username, text);
  		},
  
  		_onopen : function() {			
  			$('join').className = 'hidden';
  			$('joined').className = '';
  			$('phrase').focus();
  			room._send(room._username, 'has joined!');
  		},
  
  		_onmessage : function(m) {
  			if (m.data) {
  				var c = m.data.indexOf(':');
  				var from = m.data.substring(0, c).replace('<', '&lt;').replace(
  						'>', '&gt;');
  				var text = m.data.substring(c + 1).replace('<', '&lt;')
  						.replace('>', '&gt;');
  
  				var chat = $('chat');
  				var spanFrom = document.createElement('span');
  				spanFrom.className = 'from';
  				spanFrom.innerHTML = from + ':&nbsp;';
  				var spanText = document.createElement('span');
  				spanText.className = 'text';
  				spanText.innerHTML = text;
  				var lineBreak = document.createElement('br');
  				chat.appendChild(spanFrom);
  				chat.appendChild(spanText);
  				chat.appendChild(lineBreak);
  				chat.scrollTop = chat.scrollHeight - chat.clientHeight;
  			}
  		},
  
  		_onclose : function(m) {
  			this._ws = null;
  			$('join').className = '';
  			$('joined').className = 'hidden';
  			$('username').focus();
  			$('chat').innerHTML = '';
  		},
  
  		_onerror : function(e) {
  			alert(e);
  		},
  		
  		_send : function(user, message) {
  			user = user.replace(':', '_');
  			if (this._ws)
  				this._ws.send(user + ':' + message);
  		}
  	};
  </script>
  

  Here some explanation about this script :

  1. Before loading the page, we must check if WebSocket is supported by the Web Browser :
     

     if (!window.WebSocket)
       alert("WebSocket not supported by this browser");
     

  2. room JavaScript variable (var room = {…}) is declared to define 2 methods :
     1. room.join(name) which is called when user clicks on “Join” button or types Enter in the username field. This method create a JavaScript WebSocket with the URL ws://localhost:8081/ :
        

        var location = "ws://localhost:8081/"
        this._ws = new WebSocket(location);

        
        You can notice that URL is ws://localhost:8081/ and not http://localhost:8081/. ws:// is WebSocket protocol. For secured protocol (like https://), wss:// must be used. After WebSocket creation, room.join(name) defines a private function for each methods of WebSocket :
        

        this._ws.onopen = this._onopen;
        this._ws.onmessage = this._onmessage;
        this._ws.onclose = this._onclose;
        this._ws.onerror = this._onerror;

        
        Here description of each methods :
        • WebSocket#onopen is called once User is connected. This function hide the ‘join’ div, display the ‘joined’ div and send a message to tell that user has joined :
          

          _onopen : function() {			
            $('join').className = 'hidden';
            $('joined').className = '';
            $('phrase').focus();
            room._send(room._username, 'has joined!');
          }

          
          send message is done by calling room._send which sends a message with WebSocket#send(in DOMString data) like this :
          

          _send : function(user, message) {
          	user = user.replace(':', '_');
          	if (this._ws)
          		this._ws.send(user + ':' + message);
          }

        • WebSocket#onmessage is called when message is received. This function add the received message in the ‘chat’ div. :
          

          _onmessage : function(m) {
          	if (m.data) {
          		var c = m.data.indexOf(':');
          		var from = m.data.substring(0, c).replace('<', '&lt;').replace('>', '&gt;');
          		var text = m.data.substring(c + 1).replace('<', '&lt;').replace('>', '&gt;');
          
          		var chat = $('chat');
          		var spanFrom = document.createElement('span');
          		spanFrom.className = 'from';
          		spanFrom.innerHTML = from + ':&nbsp;';
          		var spanText = document.createElement('span');
          		spanText.className = 'text';
          		spanText.innerHTML = text;
          		var lineBreak = document.createElement('br');
          		chat.appendChild(spanFrom);
          		chat.appendChild(spanText);
          		chat.appendChild(lineBreak);
          		chat.scrollTop = chat.scrollHeight - chat.clientHeight;
          	}
          }
          

        • WebSocket#onclose is called when WebSocket is closed. This function displays the ‘join’ div and hides the ‘joined’ div :
          

          _onclose : function(m) {
          	this._ws = null;
          	$('join').className = '';
          	$('joined').className = 'hidden';
          	$('username').focus();
          	$('chat').innerHTML = '';
          }

     2. room.chat(text) which is called when user clicks on “Send” button or type Enter in the phrase field (available when user has joined the chat). This method sends the content of the ‘phrase’ field with WebSocket#send(in DOMString data) like this :
        

        chat : function(text) {
        	if (text != null && text.length > 0)
        		room._send(room._username, text);
        }

  Scripts after loading page.

  At this step room variable which defines room.join(name) which create WebSocket and room.chat(text) which use WebSocket to send message is finished. Now we can call this room variable in click event button (“Join” and “Send”) and Enter event of the fields (“username” and “phrase”). To add events to the UI widgets button and input fields, add this script after the creation of the UI (after the last HTML div) :

  <script type="text/javascript">	
  		// 1) When user is NOT connected, 'join' div is displayed with Username input + Join button
  		$('username').setAttribute('autocomplete', 'OFF');
  		// Enter in the username field, opens Chat WebSockets
  		$('username').onkeyup = function(ev) {
  			var keyc = getKeyCode(ev);
  			if (keyc == 13 || keyc == 10) {
  				room.join($F('username'));
  				return false;
  			}
  			return true;
  		};
  		// "Join" button click opens Chat WebSockets
  		$('joinB').onclick = function(event) {
  			room.join($F('username'));
  			return false;
  		};
  		
  		// 2) When user is connected, 'phrase' div is displayed with Chat input + Send button		
  		$('phrase').setAttribute('autocomplete', 'OFF');
  		// Enter in the 'phrase' field send the message
  		$('phrase').onkeyup = function(ev) {
  			var keyc = getKeyCode(ev);
  			if (keyc == 13 || keyc == 10) {
  				room.chat($F('phrase'));
  				$('phrase').value = '';
  				return false;
  			}
  			return true;
  		};
  		// "Send" button click send the message
  		$('sendB').onclick = function(event) {
  			room.chat($F('phrase'));
  			$('phrase').value = '';
  			return false;
  		};
  	</script>

  This scripts is not very difficult to understand. It add events to the input fields and buttons to call the room.join(name) or room.chat(text).

  chat.html

  Here the full code of the chat.html :

  <html>
  <head>
  <title>WebSocket Chat</title>
  <script type="text/javascript">
  	if (!window.WebSocket)
  		alert("WebSocket not supported by this browser");
  
  	function $() {
  		return document.getElementById(arguments[0]);
  	}
  	function $F() {
  		return document.getElementById(arguments[0]).value;
  	}
  
  	function getKeyCode(ev) {
  		if (window.event)
  			return window.event.keyCode;
  		return ev.keyCode;
  	}
  	
  	var room = {
  		join : function(name) {
  			this._username = name;
  			//var location = document.location.toString().replace('http://',
  			//		'ws://').replace('https://', 'wss://');
  			var location = "ws://localhost:8081/"
  			this._ws = new WebSocket(location);
  			this._ws.onopen = this._onopen;
  			this._ws.onmessage = this._onmessage;
  			this._ws.onclose = this._onclose;
  			this._ws.onerror = this._onerror;
  		},
  
  		chat : function(text) {
  			if (text != null && text.length > 0)
  				room._send(room._username, text);
  		},
  
  		_onopen : function() {			
  			$('join').className = 'hidden';
  			$('joined').className = '';
  			$('phrase').focus();
  			room._send(room._username, 'has joined!');
  		},
  
  		_onmessage : function(m) {
  			if (m.data) {
  				var c = m.data.indexOf(':');
  				var from = m.data.substring(0, c).replace('<', '&lt;').replace(
  						'>', '&gt;');
  				var text = m.data.substring(c + 1).replace('<', '&lt;')
  						.replace('>', '&gt;');
  
  				var chat = $('chat');
  				var spanFrom = document.createElement('span');
  				spanFrom.className = 'from';
  				spanFrom.innerHTML = from + ':&nbsp;';
  				var spanText = document.createElement('span');
  				spanText.className = 'text';
  				spanText.innerHTML = text;
  				var lineBreak = document.createElement('br');
  				chat.appendChild(spanFrom);
  				chat.appendChild(spanText);
  				chat.appendChild(lineBreak);
  				chat.scrollTop = chat.scrollHeight - chat.clientHeight;
  			}
  		},
  
  		_onclose : function(m) {
  			this._ws = null;
  			$('join').className = '';
  			$('joined').className = 'hidden';
  			$('username').focus();
  			$('chat').innerHTML = '';
  		},
  
  		_onerror : function(e) {
  			alert(e);
  		},
  		
  		_send : function(user, message) {
  			user = user.replace(':', '_');
  			if (this._ws)
  				this._ws.send(user + ':' + message);
  		}
  	};
  </script>
  <style type='text/css'>
  div {
  	border: 0px solid black;
  }
  
  div#chat {
  	clear: both;
  	width: 40em;
  	height: 20ex;
  	overflow: auto;
  	background-color: #f0f0f0;
  	padding: 4px;
  	border: 1px solid black;
  }
  
  div#input {
  	clear: both;
  	width: 40em;
  	padding: 4px;
  	background-color: #e0e0e0;
  	border: 1px solid black;
  	border-top: 0px
  }
  
  input#phrase {
  	width: 30em;
  	background-color: #e0f0f0;
  }
  
  input#username {
  	width: 14em;
  	background-color: #e0f0f0;
  }
  
  div.hidden {
  	display: none;
  }
  
  span.from {
  	font-weight: bold;
  }
  </style>
  </head>
  <body>
  	<div id="chat"></div>
  	<div id="input">
  		<div id="join">
  			Username:&nbsp;
  			<input id="username" type="text" /><input id="joinB"
  				class="button" type="submit" name="join" value="Join" />
  		</div>
  		<div id="joined" class="hidden">
  			Chat:&nbsp;<input id="phrase" type="text" /> <input id="sendB"
  				class="button" type="submit" name="join" value="Send" />
  		</div>
  	</div>
  	
  	<script type="text/javascript">	
  		// 1) When user is NOT connected, 'join' div is displayed with Username input + Join button
  		$('username').setAttribute('autocomplete', 'OFF');
  		// Enter in the username field, opens Chat WebSockets
  		$('username').onkeyup = function(ev) {
  			var keyc = getKeyCode(ev);
  			if (keyc == 13 || keyc == 10) {
  				room.join($F('username'));
  				return false;
  			}
  			return true;
  		};
  		// "Join" button click opens Chat WebSockets
  		$('joinB').onclick = function(event) {
  			room.join($F('username'));
  			return false;
  		};
  		
  		// 2) When user is connected, 'phrase' div is displayed with Chat input + Send button		
  		$('phrase').setAttribute('autocomplete', 'OFF');
  		// Enter in the 'phrase' field send the message
  		$('phrase').onkeyup = function(ev) {
  			var keyc = getKeyCode(ev);
  			if (keyc == 13 || keyc == 10) {
  				room.chat($F('phrase'));
  				$('phrase').value = '';
  				return false;
  			}
  			return true;
  		};
  		// "Send" button click send the message
  		$('sendB').onclick = function(event) {
  			room.chat($F('phrase'));
  			$('phrase').value = '';
  			return false;
  		};
  	</script>
  		
  </body>
  </html>
  

  Conclusion

  In this article we have implemented chat application on client side with JavaScript WebSocket. In the next step [step3] we will implement WebSockets on server side with Jetty-WebSocket and we will start the server with a Java main with Embedding Jetty.

  
  ]]> http://angelozerr.wordpress.com/2011/07/25/websockets_jetty_step2/feed/ 7 akrogen http://angelozerr.wordpress.com/2011/07/23/websockets_jetty_step1/ http://angelozerr.wordpress.com/2011/07/23/websockets_jetty_step1/#comments Sat, 23 Jul 2011 14:30:30 +0000 angelozerr http://angelozerr.wordpress.com/?p=4750 ]]> Since several years, WEB Application are more and more improved by using AJAX (Asynchronous JavaScript Technology and XML) to provide the same features than a Fat client (Swing, SWT Application). With AJAX, the client WEB Browser can communicate to server side with Javascript and can refresh only a fragment of the WEB Page and not the all page. A good sample of this feature is the GTalk which is the Google GMail Chat Application.

  Chat Application with XMLHttpRequest (AJAX)

  AJAX is based on XMLHttpRequest which is W3C specification :

  The XMLHttpRequest specification defines an API that provides scripted client functionality for transferring data between a client and a server.

  Here a screen which shows you communication between client and server for GTalk Chat Application with AJAX :

  

  This schema shows you that there are 3 communications :

  • [1] : Chat Application 1 send hello message.
  • [2] : Chat Application 2 poll the server to check if there are received messages.
  • [3] : Chat Application 2 receives the message (response of the [2] communication).

  You can see that in the Chat Application context with AJAX, there are a lot of communications between client and server side to check if there are received messages ([2] communication). WEB browser client must check every time if there are new received messages by polling the server (ex : the WEB Browser send every 5 seconds a request XMLHttpRequest to the server side to check if new messages are received). This solution can deteriorate the server performance because there are a lot of request just to check if they are new received messages (if they are no received messages, the response of this communication is not used).

  Chat Application with WebSockets

  To avoid a lot of communications between client and server side, the solution is that server should send a message to the client side as soon as it receives message without the client side polls the server. For his feature, HTML5 specify a new component called WebSockets:

  This specification defines an API that enables Web pages to use the WebSocket protocol for two-way communication with a remote host.

  Here a screen which shows you communication between client and server for GTalk Chat Application with WebSockets :

  

  This schema shows you that there 3 comunications :

  1. [1] : Chat Application 1 send hello message
  2. [2] : Chat Application 2 receives the message. The client NOT need to poll the server to check if new messages are received.

  Chat Application Implementation

  WebSockets features are cool, but how to implement that? I will try to explain step by step how to develop a Chat Application on client/server side which will work in any JEE Server. I will use Google Chrome, a WEB Browser which supports WebSockets, to test the Chat Application.

  Chat Application Implementation

  To implement a Chat Application with WebSockets you need to manage :

  • WebSockets on client side. For that the WEB Browser must support WebSockets which is a Javascript object. Today Google Chrome implements this component. I have not studied the other WEB Browser which support WebSockets.
  • WebSockets on server side. When I have started to study WebSockets, this point was very difficult for me because there is not a real specification. Each JEE Server implements WebSockets with their own solution (I think Servlet 3 specification should resolve that). Today it exists several solutions but for Java the only solution that I have done with success is Jetty Server (I was not able to to manage WebSockets with Grizzly (Glassfish) for instance). To manage WebSockets on server side, the server must manage asynchronous HTTP response.

  I was able to manage WebSockets only with Jetty Server. But how to manage WebSockets with another JEE server? Indeed in professional job, the JEE server is often forced (in my case I must use WebSphere -(). I know that the goal of Atmosphere is to support the HTML5 WebSockets specification, but I have the impression this Framework use native WebSockets implementation of the JEE Server.

  To manage WebSockets in any JEE Server, I have found a solution by using Embedding Jetty. Embedding Jetty means that you can create, start and stop a Jetty Server with Java code. So you can create, start and stop a Jetty Server with few code in a Java main. The solution is very simply and I would like share you my idea with articles called WebSockets with Embedding Jetty (you can find the plan in this link) by explaining step by step how to manage a Chat Application with Jetty-WebSockets and use a Tomcat Server as JEE Server. I will explain you :

  • how to create Chat Application on client side. I will use Google Chrome to test the application.
  • how to create Chat Application on server side with Jetty-WebSockets.
  • how to start the Chat Application on server side with Java main with Embedding Jetty.
  • how to integrate Embedding Jetty in another JEE Server. I will use Tomcat.

  This idea follow the same idea than WebSockets for GWT with the JettyLauncher.

  Why I love Jetty?

  Before starting WebSockets with Embedding Jetty articles, I would like just tell you why I love Jetty Server :

  • Jetty is light (like Tomcat).
  • Jetty can be used in several context :
    1. as JEE Server.
    2. in OSGi context.
    3. in a Java Main with Embedding Jetty.
  • Jetty can be configured with several means :
    1. Jetty XML files.
    2. Spring XML files.
    3. Java code. (Embedding Jetty)
  • Jetty Tools :
    1. Tools for OSGi context. Eclipse RAP use Jetty by default to start the Application.
    2. Tools for standard JEE : Jetty WTP Adaptor can be used in a Eclipse WTP to start/stop debug WEB Application deployed in a Jetty Server.
  • Jetty support WebSockets.
  • For JUnit Tests WEB components (Servlet, Filter, Web Services….), Embedding Jetty can be used to create JUnit Tests (to start a Jetty server and do the tests). For instance Apache CXF uses Embedding Jetty to tests WebServices, Rest services….
  • Jetty is Open Source (Eclipse)
  • Jetty Team is very enthusiasm and the Jetty the community is responsive.

  Conclusion

  In this article we have seen how WebSockets could be used in a Chat Application and introduce WebSockets component on client/server side. In the next articles, I will explain you step by step how to develop Chat Application on client side (in the [step2]) and server side with Jetty-WebSockets (in the [step3]). Embedding Jetty will be used to start/stop the server with Java main (no need to install a Jetty Server).

  
  ]]> http://angelozerr.wordpress.com/2011/07/23/websockets_jetty_step1/feed/ 2 akrogen http://angelozerr.wordpress.com/2011/05/31/rap_step6/ http://angelozerr.wordpress.com/2011/05/31/rap_step6/#comments Tue, 31 May 2011 13:51:40 +0000 angelozerr http://angelozerr.wordpress.com/?p=4121 ]]> In step5, we have explained the generated code of the RAP Hello World Application. In this step we will improve our RAP Application to add basic user-interface (UI). At the end of this article, our RAP Application will look like this :

  

  In RAP/RCP Application, UI is managed with SWT (Standard Widget Toolkit) :

  SWT is an open source widget toolkit for Java designed to provide efficient, portable access to the user-interface facilities of the operating systems on which it is implemented.

  SWT is an API to manage UI. There are several implementation of SWT :

  • for RCP Application, the basic idea of SWT is to use the operating systems (OS) native widget to render UI. There is an implementation of SWT for each OS (Windows, Linux…). Swing for instance emulates the UI widgets, that’s why the look and feel of Swing Application are the same for any OS, although look and feel of SWT Application change according to the OS (a button in SWT Application use Windows button look and feel if the SWT Application runs on Windows, use Linux button look and feel if the SWT Application runs on Linux..)..
  • for RAP Application, SWT is implemented with Qooxdoo Javascript widgets. The SWT implementation in RAP Application is called RWT (Rich Widget Toolkit). We will study it in the next article.

  Download

  You can download rap_step6.zip which contains the following explained projects :

  • org.akrogen.dynaresume.raphelloworld which is the generated Eclipse “RAP Hello World” explained in this article.

  Add UI SWT Text/Label

  In this section we will add the UI Text and Label to our RAP Application. In a RAP Application, UI Text, Label… widgets are managed with SWT API like RCP Application. The difference between RAP Application and RCP Application is the implementation of the SWT :

  • in RCP Application, SWT is implemented with the OS native widgets. For instance for Windows OS, org.eclipse.swt.win32.win32.x86 Plug-In is used.
  • in RCP Application, SWT is implemented with RWT which generates Javascript Qooxdoo widgets. org.eclipse.rap.rwt Plug-In is the SWT RAP widgets.

  To add UI widgets in our RAP Application, we must (like RCP Application) :

  1. create a View which hosts SWT Text/Label.
  2. link the View to the default Perspective.

  Create UserDetailView View

  Creating the View consists of :

  • declaring the view linked to the View class in the plugin.xml as extension point. An extension point is used to extend your RAP/RCP Application. In our case we want to extend our RAP Application to add a new View.
  • creating the org.akrogen.dynaresume.raphelloworld.UserDetailView View class which extends org.eclipse.ui.part.ViewPart.

  Declare View in the plugin.xml

  Declare our view in the plugin.xml will be done like this :

  <extension
        point="org.eclipse.ui.views">
     <view
           class="org.akrogen.dynaresume.raphelloworld.UserDetailView"
           id="org.akrogen.dynaresume.raphelloworld.userdetailview"
           name="User Detail View"
           restorable="true">
     </view>
  </extension>
  

  but it’s interesting to use PDE Tools to generate the View. To do that, open the org.akrogen.dynaresume.raphelloworld/plugin.xml, go to the Extrensions tab and click on Add… button of the All Extensions section :

  

  This action opens the New Extension dialogue :

  

  This dialogue shows you all the extension points that you can use in your RAP Application. In our case we must use org.eclipse.ui.views. To do that, type *view in the Extension Point filter, 2 (or more) extension points must appear :

  

  Select org.eclipse.ui.views item and click on Finish button. This action add this extension :

  

  If you go to the plugin.xml, you will see the new extension point :

  

  Now we must link the View extension point to our View class. To do that select org.eclipse.ui.views node, click on the right mouse button to open the contextual menu and click on view node :

  

  This action generates you the content of the org.eclipse.ui.views extension point :

  

  Change fields values :

  • id field with org.akrogen.dynaresume.raphelloworld.userdetailview value.
  • name field with User Detail View value.
  • class field with org.akrogen.dynaresume.raphelloworld.UserDetailView value.

  

  If you go to the plugin.xml, you will see the new extension point :

  

  UserDetailView Class

  In this section we will create the org.akrogen.dynaresume.raphelloworld.UserDetailView View class. Click on class* link :

  

  This action opens the New Java Class wizard :

  

  Click on Finish button, the wizard generates you org.akrogen.dynaresume.raphelloworld.UserDetailView class like this :

  package org.akrogen.dynaresume.raphelloworld;
  
  import org.eclipse.swt.widgets.Composite;
  import org.eclipse.ui.part.ViewPart;
  
  public class UserDetailView extends ViewPart {
  
  	public UserDetailView() {
  		// TODO Auto-generated constructor stub
  	}
  
  	@Override
  	public void createPartControl(Composite parent) {
  		// TODO Auto-generated method stub
  
  	}
  
  	@Override
  	public void setFocus() {
  		// TODO Auto-generated method stub
  
  	}
  
  }

  Link View with Perspective

  Now we must link Perspective with the UserDetailView, the id org.akrogen.dynaresume.raphelloworld.userdetailview of the view declared in the plugin.xml will be used.

  Modify UserDetailView

  Modify the org.akrogen.dynaresume.raphelloworld.UserDetailView class to add the view ID in the Java code :

  public static final String ID = "org.akrogen.dynaresume.raphelloworld.userdetailview";

  Here is the full code of org.akrogen.dynaresume.raphelloworld.UserDetailView :

  package org.akrogen.dynaresume.raphelloworld;
  
  import org.eclipse.swt.widgets.Composite;
  import org.eclipse.ui.part.ViewPart;
  
  public class UserDetailView extends ViewPart {
  
  	public static final String ID = "org.akrogen.dynaresume.raphelloworld.userdetailview";
  	
  	public UserDetailView() {
  		// TODO Auto-generated constructor stub
  	}
  
  	@Override
  	public void createPartControl(Composite parent) {
  		// TODO Auto-generated method stub
  
  	}
  
  	@Override
  	public void setFocus() {
  		// TODO Auto-generated method stub
  
  	}
  
  }

  Modify Perspective

  Modify org.akrogen.dynaresume.raphelloworld.Perspective like this :

  package org.akrogen.dynaresume.raphelloworld;
  
  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.setFixed(true);
  
      layout.addStandaloneView(UserDetailView.ID, false, IPageLayout.LEFT,
          1.0f, editorArea);
    }
  }

  Here we have linked the view to the Perspective with Java code.

  RWT Text/Label

  At this step the Perspective hosts the UserDetailView View. Now we can add UI widgets to the View by implementing UserDetailView#createPartControl(Composite parent). When you want to manage UI with SWT you can use :

  • SWT widgets to displays Text, Label….
  • SWT layout to manage layout of the parent container of the widgets.
  • SWT layouts data to customize layout for a widgets which belongs to an host container.
  • SWT listener to add/remove listener to the widget if you want to observe some events of the widget (text changed, focus in/out…).

  SWT widgets

  SWT provides rich widgets which extend org.eclipse.swt.widgets.Widget (Text, Label, Tree, Table….). You can see the screen of SWT Widgets here.

  In our case, implement UserDetailView#createPartControl(Composite parent) like this :

  @Override
  public void createPartControl(Composite parent) {
  	// User name
  	Label nameLabel = new Label(parent, SWT.NONE);
  	nameLabel.setText("Name:");
  	Text nameText = new Text(parent, SWT.BORDER);
  
  	// User lastName
  	Label lastNameLabel = new Label(parent, SWT.NONE);
  	lastNameLabel.setText("Last name:");
  	Text lastNameText = new Text(parent, SWT.BORDER);
  }

  The SWT.BORDER set a border for SWT Text.

  Here is the full code of org.akrogen.dynaresume.raphelloworld.UserDetailView :

  package org.akrogen.dynaresume.raphelloworld;
  
  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 UserDetailView extends ViewPart {
  
  	public static final String ID = "org.akrogen.dynaresume.raphelloworld.userdetailview";
  	
  	public UserDetailView() {
  		// TODO Auto-generated constructor stub
  	}
  
  	@Override
  	public void createPartControl(Composite parent) {
  		// User name
  		Label nameLabel = new Label(parent, SWT.NONE);
  		nameLabel.setText("Name:");
  		Text nameText = new Text(parent, SWT.BORDER);
  
  		// User lastName
  		Label lastNameLabel = new Label(parent, SWT.NONE);
  		lastNameLabel.setText("Last name:");
  		Text lastNameText = new Text(parent, SWT.BORDER);
  
  	}
  
  	@Override
  	public void setFocus() {
  		// TODO Auto-generated method stub
  
  	}
  
  }

  Launch the RAP Application and you will see our basic UI composed with RWT Text and Label :

  

  This render is not very pretty because we didn’t use SWT Layout to position the widgets.

  SWT Layout

  In this section we will use SWT Layout to position as we want the SWT widgets Label and Text. All SWT Layouts extend the abstract org.eclipse.swt.widgets.Layout class.

  I suggest you to read Understanding Layouts in SWT if you want to learn more about SWT Layout. The SWT Layout that I use is the org.eclipse.swt.layout.GridLayout which manages a lot of case. GridLayout can be compared to the layout used for HTML table. In this section we will use org.eclipse.swt.widgets.GridLayout to have this render :

  

  Modify UserDetailView#createPartControl(Composite parent) like this :

  @Override
  public void createPartControl(Composite parent) {
  
  	Composite composite = new Composite(parent, SWT.NONE);
  	composite.setLayout(new GridLayout(2, false));
  
  	// User name
  	Label nameLabel = new Label(composite, SWT.NONE);
  	nameLabel.setText("Name:");
  	Text nameText = new Text(composite, SWT.BORDER);
  
  	// User lastName
  	Label lastNameLabel = new Label(composite, SWT.NONE);
  	lastNameLabel.setText("Last name:");
  	Text lastNameText = new Text(composite, SWT.BORDER);
  }

  It’s important to create a new Composite parent instead of using the Composite parent coming from createPartControl, because this last has already a layout (FillLayout). If you change the Layout of the Composite parent coming from createPartControl you could have some problems with SWT LayoutData ClassCastException (please see SWT Layout Data section).

  Here is the full code of the org.akrogen.dynaresume.raphelloworld.UserDetailView :

  package org.akrogen.dynaresume.raphelloworld;
  
  import org.eclipse.swt.SWT;
  import org.eclipse.swt.layout.GridLayout;
  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 UserDetailView extends ViewPart {
  
  	public static final String ID = "org.akrogen.dynaresume.raphelloworld.userdetailview";
  
  	public UserDetailView() {
  		// TODO Auto-generated constructor stub
  	}
  
  	@Override
  	public void createPartControl(Composite parent) {
  
  		Composite composite = new Composite(parent, SWT.NONE);
  		composite.setLayout(new GridLayout(2, false));
  
  		// User name
  		Label nameLabel = new Label(composite, SWT.NONE);
  		nameLabel.setText("Name:");
  		Text nameText = new Text(composite, SWT.BORDER);
  
  		// User lastName
  		Label lastNameLabel = new Label(composite, SWT.NONE);
  		lastNameLabel.setText("Last name:");
  		Text lastNameText = new Text(composite, SWT.BORDER);
  	}
  
  	@Override
  	public void setFocus() {
  		// TODO Auto-generated method stub
  
  	}
  
  }

  Launch the RAP Application and you will see our basic UI composed with RWT Text and Label :

  

  SWT Layout Data

  If you want to customize the layout for a widget, you must use Layout Data. A Layout Data is linked to the SWT Layout which is used for the Composite which hosts widgets. You cannot use for instance RowData in the widget where Composite parent use GridLayout. In our case we will use org.eclipse.swt.layout.GridData for SWT Text so those widgets will take the full space :

  

  Modify UserDetailView#createPartControl(Composite parent) like this :

  @Override
  public void createPartControl(Composite parent) {
  
  	Composite composite = new Composite(parent, SWT.NONE);
  	composite.setLayout(new GridLayout(2, false));
  
  	// User name
  	Label nameLabel = new Label(composite, SWT.NONE);
  	nameLabel.setText("Name:");
  	Text nameText = new Text(composite, SWT.BORDER);
  	nameText.setLayoutData(new GridData(GridData.FILL_HORIZONTAL));
  
  	// User lastName
  	Label lastNameLabel = new Label(composite, SWT.NONE);
  	lastNameLabel.setText("Last name:");
  	Text lastNameText = new Text(composite, SWT.BORDER);
  	lastNameText.setLayoutData(new GridData(GridData.FILL_HORIZONTAL));
  }

  Here is the full code of the org.akrogen.dynaresume.raphelloworld.UserDetailView :

  package org.akrogen.dynaresume.raphelloworld;
  
  import org.eclipse.swt.SWT;
  import org.eclipse.swt.layout.GridData;
  import org.eclipse.swt.layout.GridLayout;
  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 UserDetailView extends ViewPart {
  
  	public static final String ID = "org.akrogen.dynaresume.raphelloworld.userdetailview";
  
  	public UserDetailView() {
  		// TODO Auto-generated constructor stub
  	}
  
  	@Override
  	public void createPartControl(Composite parent) {
  
  		Composite composite = new Composite(parent, SWT.NONE);
  		composite.setLayout(new GridLayout(2, false));
  
  		// User name
  		Label nameLabel = new Label(composite, SWT.NONE);
  		nameLabel.setText("Name:");
  		Text nameText = new Text(composite, SWT.BORDER);
  		nameText.setLayoutData(new GridData(GridData.FILL_HORIZONTAL));
  
  		// User lastName
  		Label lastNameLabel = new Label(composite, SWT.NONE);
  		lastNameLabel.setText("Last name:");
  		Text lastNameText = new Text(composite, SWT.BORDER);
  		lastNameText.setLayoutData(new GridData(GridData.FILL_HORIZONTAL));
  	}
  
  	@Override
  	public void setFocus() {
  		// TODO Auto-generated method stub
  
  	}
  
  }

  Launch the RAP Application and you will see our basic UI composed with RWT Text and Label :

  

  SWT Listener

  Sometimes you want to observe with listener the change of state of the widgets. This is done with SWT Listener. In our case, we will add a new Label on the top of the UI and display the Name+Last Name as soon as the user types a content in the SWT Text.

  Modify org.akrogen.dynaresume.raphelloworld.UserDetailView class like this :

  @Override
  public void createPartControl(Composite parent) {
  
  	Composite composite = new Composite(parent, SWT.NONE);
  	composite.setLayout(new GridLayout(2, false));
  
  	// User 
  	final Label userLabel = new Label(composite, SWT.NONE);
  	GridData gridData = new GridData(GridData.FILL_HORIZONTAL);
  	gridData.horizontalSpan = 2;
  	userLabel.setLayoutData(gridData);
  		
  	// User name
  	Label nameLabel = new Label(composite, SWT.NONE);
  	nameLabel.setText("Name:");
  	final Text nameText = new Text(composite, SWT.BORDER);
  	nameText.setLayoutData(new GridData(GridData.FILL_HORIZONTAL));
  	//nameText.setLayoutData(new GridData(SWT.FILL, 1, true, false));
  
  	// User lastName
  	Label lastNameLabel = new Label(composite, SWT.NONE);
  	lastNameLabel.setText("Last name:");
  	final Text lastNameText = new Text(composite, SWT.BORDER);
  	lastNameText.setLayoutData(new GridData(GridData.FILL_HORIZONTAL));
  		
  	// Add Listener
  	nameText.addModifyListener(new ModifyListener() {			
  		@Override
  		public void modifyText(ModifyEvent event) {
  			userLabel.setText(nameText.getText() + " " + lastNameText.getText());
  		}
  	});
  	// Add Listener
  	lastNameText.addModifyListener(new ModifyListener() {			
  		@Override
  		public void modifyText(ModifyEvent event) {
  			userLabel.setText(nameText.getText() + " " + lastNameText.getText());
  		}
  	});
  }

  You can notice that :

  • SWT Text are final because they are used in the inner class of the SWT event listener.
  • SWT Label User (first label) use gridData.horizontalSpan = 2; which shows you another case with SWT GridLayout which is enable to support span.

  Here is the full code of org.akrogen.dynaresume.raphelloworld.UserDetailView :

  package org.akrogen.dynaresume.raphelloworld;
  
  import org.eclipse.swt.SWT;
  import org.eclipse.swt.events.ModifyEvent;
  import org.eclipse.swt.events.ModifyListener;
  import org.eclipse.swt.layout.GridData;
  import org.eclipse.swt.layout.GridLayout;
  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 UserDetailView extends ViewPart {
  
  	public static final String ID = "org.akrogen.dynaresume.raphelloworld.userdetailview";
  
  	public UserDetailView() {
  		// TODO Auto-generated constructor stub
  	}
  
  	@Override
  	public void createPartControl(Composite parent) {
  
  		Composite composite = new Composite(parent, SWT.NONE);
  		composite.setLayout(new GridLayout(2, false));
  
  		// User 
  		final Label userLabel = new Label(composite, SWT.NONE);
  		GridData gridData = new GridData(GridData.FILL_HORIZONTAL);
  		gridData.horizontalSpan = 2;
  		userLabel.setLayoutData(gridData);
  		
  		// User name
  		Label nameLabel = new Label(composite, SWT.NONE);
  		nameLabel.setText("Name:");
  		final Text nameText = new Text(composite, SWT.BORDER);
  		nameText.setLayoutData(new GridData(GridData.FILL_HORIZONTAL));
  		//nameText.setLayoutData(new GridData(SWT.FILL, 1, true, false));
  
  		// User lastName
  		Label lastNameLabel = new Label(composite, SWT.NONE);
  		lastNameLabel.setText("Last name:");
  		final Text lastNameText = new Text(composite, SWT.BORDER);
  		lastNameText.setLayoutData(new GridData(GridData.FILL_HORIZONTAL));
  		
  		// Add Listener
  		nameText.addModifyListener(new ModifyListener() {			
  			@Override
  			public void modifyText(ModifyEvent event) {
  				userLabel.setText(nameText.getText() + " " + lastNameText.getText());
  			}
  		});
  		// Add Listener
  		lastNameText.addModifyListener(new ModifyListener() {			
  			@Override
  			public void modifyText(ModifyEvent event) {
  				userLabel.setText(nameText.getText() + " " + lastNameText.getText());
  			}
  		});
  	}
  
  	@Override
  	public void setFocus() {
  		// TODO Auto-generated method stub
  
  	}
  
  }

  Launch the RAP Application and type content in the “Name” text widget:

  

  You will see that the Label User is refreshed with SWT Text Name content. Type content in the “Last name” text widget: You will see that the Label User is refreshed with SWT Text Name+SWT Text “Last Name” content.

  

  Conclusion

  In this article we have seen how to manage UI in RAP Application with only Java code (RWT which is SWT implementation for RAP). RCP Application manage also UI with SWT, so it’s very easy to manage Single Sourcing to have with the same code a RCP/RAP Application.

  Creating UI manually can be boring, but fortunately there is an Eclipse Plug-In WindowBuilder which provides SWT Designer to help you create UI with design way. WindowBuilder – SWT GridLayout section shows you how it’s possible to design UI with SWT GridLayout.

  In the next article [step7] : create RAP Application with a view by using RAP 1.4, create RCP Application with a view and compare it with RAP Application.

  
  ]]> http://angelozerr.wordpress.com/2011/05/31/rap_step6/feed/ 3 akrogen