Laurent’s Weblog

It’s now 2 months i’m investigating in eXo for a future project.

We began first with ECM module because of our first needs for paper documents “dematerialization” … but pushing artifacts into a ECM repository is one thing: we should think on how users will consume documents from the content repository: from web applications content-oriented integrated as portlets/gadgets in the eXo portal, or even from other legacy applications (Desktop,  ERP, home made or not).

eXo is to my mind a wonderful platform, that firstly respects many standards (JSRs for portlets + ECM, support third party standard components that could exist in the enterprise infrastructure : Databases, LDAP, SSO/CAS, NTLM, WebDav, CIFS, Workflow, MSFT Office/OpenOffice, and more…); it is technically a jewel of architecture (huge modularity, extension/customization possibilities with Groovy,…).

We can congratulate all the eXo team for their hard work,  the community supporting them in requesting features and helping them in testing), and eXo’s partners in helping companies/government institutions to integrate the eXo platform in their infrastructure.

There are so many things to say about different modules from eXo (ECM, WCM, Portal, WebOS, CS, Liveroom, and all social features to come next 2009 Q1), and thus will done regularly i hope in future articles in parallel of my next investigations.

The goal of this article is not to describe eXo architecture in the details (i do not have the pretention to know everything after 2months of investigation in 2 modules of all existing ones), eXo platform wiki is very well made and contains lots of informations about this.

The goal of this article is just to show how to deploy a Google OpenSocial gadget, initially made with GWT,  into eXo Portal 2.5.

eXo portal offers now to deploy a gadget as “remote” or “local” : what will be shown first in this article is a remote Gadget (stored on GoogleCode SVN) integration in eXo portal.

Pre-requisities :

- JDK 5/6 : this exercise has been made on a MacBook (first generation CoreDuo 32bits) using the pre installed JDK 5 on Mac OS X Leopard.

- Subversion client

- Maven 2 especially for dependencies in eXo , needed for the build

- Ant for GWT application compilation.

- eXo Portal last head revision > for this you should build eXo Portal from the source code, checkouting HEAD revision (even if it’s still not a stable release… for what we need to do it’s enough, and it shows a good overview of the functionnality present in the coming soon 2.5 release of eXo portal) . Follow the steps described in the Wiki for this.

- GWT (Google Web Toolkit)

- Create  a personal project “*Gadget” on Google Code

1) First create your project tree :

cd ~/Developments/Projects/
mkdir HelloGadget
mkdir HelloGadget/lib

2) add gwt-gadgets.jar to the lib folder :

Download from gwt-google-apis and extract gwt-gadgets-xxx.tar.gz into  ~/Developments/Projects/HelloGagdet/lib

3) Create your GWT application :

in my case i installed gwt into /usr/local ; launch the commands :

/usr/local/gwt/projectCreator -ant HelloGadget -eclipse HelloGadget -out ~/Developments/Projects/HelloGadget/ -addToClassPath ~/Developments/Projects/HelloGadget/lib/gwt-gadgets.jar

/usr/local/gwt/applicationCreator -eclipse HelloGadget -out ~/Developments/Projects/HelloGadget/ -addToClassPath ~/Developments/Projects/HelloGadget/lib/gwt-gadgets.jar your-domain.gadget.gwt.client.HelloGadget

4) Add Gadget compliance :

Edit HelloGadget.gwt.xml and add the following line:
<inherits name=”com.google.gwt.gadgets.Gadgets” />

5) Transform your GWT application into a Gadget:

Edit HelloGadget.java:

The original looks like :
public class HelloGadget implements EntryPoint {

/**
* This is the entry point method.
*/
public void onModuleLoad() {

5.a) Add imports:
import com.google.gwt.gadgets.client.Gadget;
import com.google.gwt.gadgets.client.UserPreferences;
import com.google.gwt.gadgets.client.Gadget.ModulePrefs;

5.b) Change then :
@ModulePrefs(title = “HelloGadget”, author = “Firstname Lastname”, author_email = “firstname.lastname@domain”, height = 300, description = “A simple gadget.”)
public class HelloGadget extends Gadget<UserPreferences> {

/**
* This is the entry point method.
*/
@Override
protected void init(UserPreferences preferences) {

6) Compile & Link the module HelloGadget

Launch ~/Developments/Projects/HelloGadget/HelloGadget-compile

7) Test the GWT application :

Launch ~/Developments/Projects/HelloGadget/HelloGadget-shell

Make it OpenSocial compliant:

Edit www/your-domain.gadget.gwt.HelloGadget/your-domain.gadget.gwt.client.HelloGadget.gadget.xml

Replace <ModulePrefs title=”MyGadget” scrolling=”true” />

By

<ModulePrefs title=”MyGadget” scrolling=”true” >
<Require feature=”opensocial-0.8″ />
</ModulePrefs>

9) Deploy your application to your Google Code project SVN repository

Follow these steps to create your project and make your first checkout

We’ll create the working copy (gadgets-test) under the ~/Developments/Projects/ folder.

svn checkout https://<project-name>.googlecode.com/svn/trunk/ gadgets-test --username <username>

Copy ~/Developments/Projects/HelloGadget into ~/Developments/Projects/gadgets-test

Then:

cd ~/Developments/Projects/gadgets-test

svn add HelloGadget

If you’ve not set auto-properties in your svn configuration file then move into www subfolders and apply :

svn propset svn:mime-type “text/html” *.html

svn propset svn:mime-type “text/javascript” *.js

svn propset svn:mime-type “text/xml” *.xml

svn propset svn:mime-type “text/css” *.css

svn propset svn:mime-type “image/png” *.png

svn propset svn:mime-type “image/gif” *.gif

svn propset svn:mime-type “image/jpeg” *.jpg

svn commit -m “Add properties svn:mime-type to artifacts”

svn commit -m “Import my project”

10) Use GModules (owned by Google) to test your gadget.

Open a browser window then go to : http://gmodules.com/gadgets/ifr?url=http://gadgets-test.googlecode.com/svn/trunk/HelloGadget/www/your-domain.gadget.gwt.HelloGadget/your-domain.gadget.gwt.client.HelloGadget.gadget.xml

Nota: You can try it also in your iGoogle personalized page (the gadget is run by GModules behind the scenes)

Once you’ve developed, tested, internationalized (if needed) your gadget, publish your gadget.

There are many other ways to publish your Gadget

Now let’s publish the Gadget on eXo portal (2.5) :

Before to do it, we should changed some paths and filenames in the www folder. I do not know if it’s a normal behaviour from eXo (i will submit this  limitation in eXo platform JIRA to know) :

When developing a gadget with GWT, after compilation, the package + your class becomes your module :

your gadget is accessible under the www/your-domain.gadget.gwt.HelloGadget folder , and the module XML file is named “your-domain.gadget.gwt.client.HelloGadget.gadget.xml”

Having dots in the URI fires a Warning alert when adding your remote Gadget in the Application registry from eXo, and the gadget is not added.

Nota: you can not add a “remote gadget” deployed locally (so having “localhost” as a hostname), but this can be understood.

So i should do :

cd ~/Developments/Projects/gadgets-test/HelloGadget/www

svn –force move your-domain.gadget.gwt.HelloGadget gadget

svn commit -m “[...]“

cd gadget

svn –force move your-domain.gadget.gwt.client.HelloGadget.gadget.xml HelloGadget.xml

svn commit -m “[...]“

Connect to your eXo portal as root/exo.

Administration -> Manage Applications -> Gadget -> Add a remote gadget

Once gadget has been added to application registry, and set permissions, choose “Organize” , and click auto import.

Click on the thin yellow vertical line on the left to make slide the dock for gadgets and Menu.

Click (+) and choose the HelloGadget

I also added the StockWatcher GWT application (Google tutorial) as a Gadget in the user’s workspace

Another way to expose a Gadget in the eXo portal could be in a Dashboard page.

For this we’ll do :

- Add a new page in the portal

- Add the Dashboard portlet in this page

- Personlize the Dasboard Portlet to add our gadget

a) Add a new page : From the “Start Menu” -> Administration -> Basic -> Page creation assistant

Then follow several steps :

Step 1 :

Click Next

Step 2 :

Choose “Portal Navigation” in the combo for branching the page

Fill the form with Name (My_Dashboard) and display name (My Dashboard)

Click Next

Step 3:

Choose the layout… leave simple “empty layout”

Last step : Reorganize the page and add the portlet

In the user workspace on the left, chose “dashboard” in the combo box : GadgetPortlet and DashboardPortlet should appear. Drag and Drop the DashboardPortlet in the content of your page.

Click “Save”

Now the “My Dashboard” page should be accessible from the horizontal menu

Now add your HelloGadget by clicking on the link “Add gadgets”

Drag and Drop “HelloGadget” from the list to the page (you coould then reoganize gadgets disposition in the layout)

Close the gadgets panel on the left:

Now let’s say you work with eXo WebOS, and you want to add your Gadget as an application in the WebOS

Rebuild the module “webos” from the source if necessary.

Open a browser then start from http://localhost:8080/portal , follow the apllication “Connexion” in the Dock

Connect as root/exo.

Load “Admin” environment :

Open the “Application Registry” Portlet (Icon in the Dock)

Click on “Add remote gadget” and insert the URL to your Gadget XML Module in Google Code.

Click on “Organize” button, then “Auto Import”

Now Add the Gadget as an Application (second icon from the left in the Dock)

Finally enjoy your gadget on the Desktop

Conclusion

The Gadget container provided by eXo (especially Google OpenSocial) opens many doors when used in an enterprise :

1st with  Google Gadgets, you can benefit from many interesting gadgets provided from the shelf by the Google Gadget Directory, that you will include for your users (Weather, Stock Quotes, Currency converter, Newsfeeds, …)

You’ll can develop new little applications with GWT (or not), more focused on the business of your enterprise, that you’ll can integrate in the eXo Portal and/or WebOS as Gadget.

About Gadget itself, focus should be made on the UI, ideally use EyeCandy graphics (and for this GWT is not a pre-requisit, but ask for a talented designer if you don’t have the skills). But GWT is a powerful toolkit that can help Java developers who don’t know all the tips & tricks in Javascript (working with the DOM, Async RPC calls, …).

In further articles i’ll focus on a more complex Gadget coupled with a server side RESTful application, and deployed locally in the Servlet/J2EE container (if done with Java). An example will be also done with a RESTful server side application developped with RAILS , called from the front-end Gadget.

Resources

Google API

Didier Girard’s presentation on GWT+OpenSocial in Javapolis

eXo Platform Wiki