Eclipse Nebula Pagination Control

In business application with large data, display data in a table with navigation page can be really helpful. In our XDocReport project, we need this feature in our Eclipse RCP/RAP XDocReport application for instance to select resumes to open in the Search Resume Dialog :

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.

Eclipse Nebula Picture Control

In some business application, your model (domain) contains sometimes image byte array (ex : photo for person model, logo for project model, etc). In our XDocReport project, we need to manage photo byte array with SWT control for the person model in our Eclipse RCP/RAP XDocReport, in the resume editor :

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.

JAX-WS with Apache CXF and Eclipse [step2]

In [step1], we have configured CXF Eclipse Plugin to use CXF 2.4.2 and created an empty Dynamic Web project with Tomcat 7.

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.

JAX-WS with Apache CXF and Eclipse [step1]

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.

My first steps with Eclipse RAP [step7]

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).

WebSockets with Embedding Jetty [step4]

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.

WebSockets with Embedding Jetty [step3]

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:

WebSockets with Embedding Jetty [step2]

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 :

WebSockets with Embedding Jetty [step1]

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.

My first steps with Eclipse RAP [step6]

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.