Google Web Toolkit (GWT) modules as Portlets In the Open Source Portlet Container

For developing GWT modules and creating web applications from these module projects see this entry from my blog.

There are so many of these GWT modules out there, and being involved in portal technologies, what I wanted to do is, see if I can convert those modules to portlets and have them work on my portal server. I wanted to get this done, and so I dived into it equipped with the following tools.

• GWT toolkit


• Portalpack Plugin for Eclipse ( Since I used Eclipse, if you use Netbeans you can use the Netbeans Portal Pack )


• Open Source Portlet Container.This comes with a lightweight 'driver' which emulates a very basic portal.

With the above tools in my toolkit, I was prepared to convert my sample GWT LiveSearch Module into a JSR-168 Portlet. I talked about the sample LiveSearch in my previous blog entry

How it works?

When you create a new GWT module, the entry point to that module is defined in the GWT module definition file. For the example LiveSearch module that I described in the previous blog it is in the file LiveSearchPanel.gwt.xml and is as follows:

<entry-point class='com.sun.portal.gwt.poc.client.LiveSearchPanel'/>

The above class com.sun.portal.gwt.poc.client.LiveSearchPanel will be the one that will setup the UI in its onModuleLoad() method. In this method one typically gets a handle to the RootPanel and then adds GWT UI widgets to this panel. The RootPanel is retrieved by making a call to RootPanel.get() function. The interesting part is, that the get() method is overloaded and takes a String parameter. This String parameter needs to be a DIV ID, which needs to be defined in the page hosting this GWT module. The UI that you define in the entry point class for the module then gets placed under this DIV.

So we will setup the view of our GWT portlet to have a unique DIV ID in its view mode HTML. We will modify the GWT entry point class to add the UI under this unique DIV ID.

Having known that, this is how we proceed.

1. Create a Portlet Web Application Project project and add a portlet to this project. You can use the Eclipse Portalpack or the Netbeans Portalpack to achieve this.


2. If you followed my previous blog entry and ran the make-war-from-gwt.xml ant build file to generate a web application project then you should have a "dist" folder under your module project directory. Copy the contents of this directory (dist) to your portlet projects web source directory. If you used Eclipse PortalPack this would be a directory called "web" under your project root.


3. In your portlet class'es doView() method, have a simple RequestDispatcher call to include the view JSP page. So if your view.jsp is the view page the doView() method would be like :
   

   
   

   
   

   
   

   PortletRequestDispatcher dispatcher = context.getRequestDispatcher("/view.jsp");
   try {
      dispatcher.include(portletRequest, portletResponse);
   } catch (IOException e) {
      e.printStackTrace();
   }
   

   
   

   
   

   
   

   
   

   The view.jsp looks like this. Note the DIV ID we defined here, this is where we want the GWT to put the UI we built in the com.sun.portal.gwt.poc.client.LiveSearchPanel class. This was explained above.

   
   

    <meta name='gwt:module' content='/TestPortlet/com.sun.portal.gwt.poc.LiveSearchPanel'/>
    <div id="TEST_PORTLET_DIV"> </div>

   
   

   
   


4. 
   Lastly, the glue that holds the whole thing together is the gwt.js file that was generated by the LiveSearchPanel-compile.cmd (see previous blog entry) and can be found in the www directory of the module project. This file is common across all the GWT modules and contains code that loads the GWT modules from your view.jsp file. Typically you want this gwt.js file to be accessible to all the GWT portlets that are there on your portal. So you can make this gwt.js file a part of the portal. For our case I am using the Open Source Portlet Container, and I will add a reference to the gwt.js file in the desktop.jsp file of the Open Source Portlet Container Driver(OSPC) . If you deployed the OSPC on Glassfish in the default domain (domain1) on Windows then you can find the OSPC Driver desktop.jsp under GLASSFISH_HOME\domains\domain1\applications\j2ee-modules\portletdriver.



Remember that the call to gwt.js file needs to be made after all the GWT modules are defined using the <meta> tags as shown in point 3 above. desktop.jsp iterates over all the portets and many of them could be GWT portlets ( I hope after reading this article ;-) ) so you need to make a call to gwt.js right at the end of calls to all these portlets. So, copy the gwt.js file into the portletdriver directory at GLASSFISH_HOME\domains\domain1\applications\j2ee-modules\portletdriver and add the following line to the end of desktop.jsp right above the </body> tag.




<script language="javascript" src="gwt.js"></script>




This will make sure that the OSPC Portlet driver will call into gwt.js after all the module definitions are loaded via their appropriate view.jsp files.




I have shown the method to add gwt.js file a part of the OSPC so that there is only one copy of this file and is accessible to all portlets. You can leave this gwt.js file in each GWT module WAR also, but in that case you will have to add the appropriate URL to call into the gwt.js from your view.jsp file. Be aware that this will make you have multiple copies of thie gwt.js file, one in each GWT module exposed as a portlet and being loaded from different URL's.




That's it. Build the WAR file for the portlet project and deploy it on your Open Source Porltet Container and you have the same GWT module that I showed in my previous blog exposed as a portlet application.

The steps I showed are for the OSPC but can be very easily adapted to any portal server in general.

Google Web Toolkit modules as Web Applications

Recently I tried using the Google Web Toolkit for leverging its rich client widgets and AJAX functionality. I use Eclipse a lot and luckily GWT comes with builtin support for creating Eclipse projects supporting GWT. I created the Eclipse project using the GWT command line utilities in a jiffy and imported it into Eclipse easily. Reading the documentation on GWT I was able to start coding my application immediately.

 I quickly put together a sample LiveSearch GWT module. This module, will present the users with a search text field, and will detect the users keypress events, and will asynchronously send the keystrokes to the server using the GWT framework. The server side code, will perform the search on these keystrokes and send the search results back to the client (browser). So you instantly see the search results without any page refreshes ( that is AJAX and you don't write any JavaScript, it is taken care for you by the GWT). Very cool indeed!.

In the first part of this blog entry I will show you how easy it is to develop the GWT module using the GWT toolkit. GWT Toolkit comes with an embedded browser and a light tomcat container on which you can test and debug your GWT module. I will talk about how to convert this GWT module app into a web application that you can deploy on a web container.

First step is to download and install the GWT.

Suppose the GWT is installed in GWT_HOME.

• GWT_HOME\projectCreator.cmd -out LiveSearch -eclipse LiveSearch
  
  This will create a directory called LiveSearch ( -out parameter ) and in this directory will create an Eclipse Project called LiveSearch ( -eclipse parameter ).


• GWT_HOME\applicationCreator.cmd -out LiveSearch -eclipse LiveSearch com.sun.portal.gwt.poc.client.LiveSearchPanel
  
  The above command will create the directory structure for GWT application module called com.sun.portal.gwt.poc.client.LiveSearchPanel in the directory called LiveSearch ( -out parameter ) and create a skeletal GWT module.


• Go ahead and create the GWT module and remote service as needed.


• Once you write your module code and write the remote service code, you can compile your application using the LiveSearchPanel-compile.cmd script and launch the module using the LiveSearchPanel-shell.cmd. Both these scripts are created by the applicationCreator.cmd script we ran in the steps above.


• Source code for this sample LiveSearch is available here.

What follows now are steps to convert this to a Web Application. I have included a ANT build file ( make-war-from-gwt.xml ) in the source code download which will convert the module into a Web Application and will allow you to deploy it to a Web Container. It includes a sample-web.xml in the root folder. The make-war-from-gwt.xml and the sample-web.xml should be pretty much usable across all the GWT modules you write and want to use them as a web applications. Just tweak the entries in these files as per needs of your new module. The entries needing modications are marked by appropriate comments.

 Now that we know how to write a GWT module and build a WAR file from it, we can easily deploy the module to a web container.