Creating a Portlet using GWT and deploy into liferay

1. GWT with Liferay Portal
Creating JSR-168/JSR-286 Portlets with Google Web
Toolkit (GWT) using Liferay Portal
If you are starting from scratch, follow these steps. I’m using the Eclipse Indigo IDE, although
you could try something else, such as NetBeans. I’m also working on Windows, but I’m sure you
could do the same on Mac or Linux. (Note that as of this writing, on the Mac you need a
Leopard or Snow Leopard to run GWT 2.0). Note that if you’re following all these install steps,
the downloads could take some time as it totals about 300MB.
Contents:
1. Install Eclipse
2. Install GWT
3. Install a Java JDK
4. Install Ant 1.8 or later
5. Set Environment Variables
6. Install the Liferay Server (a Portal Server)
7. Create a Portlet
8. Install PortalPack for Eclipse
9. Deploy the Portlet
10. Add GWT to the Portlet
11. Try it Out
1. Install Eclipse - Download Eclipse Java EE IDE (current version is 3.7.2).
http://www.eclipse.org/downloads/
Extract the zip file into your Development directory. I created a folder for all my development
work “C:Practice”. e.g. don’t use the “Program Files” directory.
- Run Eclipse. I created a workspace folder in my C:Practice directory called practice_workspace
to keep things straightforward and organized. Or you can accept the default workspace.
Developed by EWT-Practice team

2. GWT with Liferay Portal
2. Install GWT
- In Eclipse, go to the “Workbench” (the main development screen).
- From the Help menu, choose “Install New Software…”
- Enter “http://dl.google.com/eclipse/plugin/3.7″, click Add. Give it a name like GWT or whatever makes
sense to you.
- It will give you the option to add the Plugin, and 2 items under SDKs. Check at least the Google Plugin
and the Google Web Toolkit SDK. The Google App Engine is optional — you might want it if you need to
deploy a highly scalable web app. I don’t use it here.
Developed by EWT-Practice team

3. GWT with Liferay Portal
- click Next, Next, accept the license agreement, and Finish. It should install the pieces you selected, and
the download could take some time.
3.Install a Java JDK
- The Java JDK download is here: http://java.sun.com/javase/downloads/index.jsp
I chose just the JDK+Java EE bundle, but you should be fine with just the JDK.
- Run the installer. I installed to C:Practice. Make sure it is installing everything in the Development
directory. Click on all 4 items and change them to your Practice directory if they do not point there.
4. Install Ant 1.7 or later
- Donwload: http://ant.apache.org/bindownload.cgi
- Unzip the download to an appropriate directory. I used C:PracticeAnt.
5. Set Environment Variables
- set the ANT_HOME environment variable to point to the Ant installation directory.
- set the JAVA_HOME environment variable to point to your Java JDK installation directory.
6. Install the Liferay Server (a Portal Server)
Why Liferay
Liferay is the only open source portal rated by Gartner as a leader in its Magic Quadrant for
horizontal portal segment at par with IBM, Microsoft, Oracle & SAP.
Developed by EWT-Practice team

4. GWT with Liferay Portal
Liferay Portal equips you with the features, scalability, and modularity of the world’s leading
open source enterprise portal platform to realize your goals. Various companies have leveraged
Liferay Portal for their solution-building needs to propel their businesses and organizations to
the next level.
Liferay IDE provides the best-of-breed eclipse tooling for Liferay Portal development platform for
versions 6.0 and 6.1.
- In Eclipse, go to the “Workbench” (the main development screen).
- From the Help menu, choose “Install New Software…”
- Enter “http://marketplace.eclipse.org/content/liferay-ide″, click Add. Give it a name like Liferay or
whatever makes sense to you.
For more information on the latest release of the Liferay IDE see below:
http://www.liferay.com/web/gregory.amerson/blog/-/blogs/liferay-ide-1-5-release
Also the main documentation and community information about the Liferay IDE is located on the
following page:
http://www.liferay.com/community/wiki/-/wiki/Main/Liferay+IDE
Once you completed the installation, - In Eclipse, go to the “Workbench” (the main development
screen).
Developed by EWT-Practice team

5. GWT with Liferay Portal
- From the Help menu, choose “About Eclipse”  “Installation Details”
7. Create a Portlet
The way that the PortalPack works is that first you create a Liferay Project that supports portlets, and
then you add a portlet to it, rather than just creating a Portlet project from the beginning.
- Choose File–>New and choose Liferay Project. Specify the Target runtime as Liferay v6.0 CE Server.
Under Configuration, choose Portlet 2.0 Support (you may have to scroll down to see that option). Or
choose Portlet 1.0 support if you are making a JSR-168, and specifically not a JSR-286 portlet.
I named my project EWTPortalProject
- Click Finish, and the project will be created.
- Choose File –> New, and Other… (at the bottom of the menu). Open up the Portlet Folder, and choose
EWTGWTPortlet. Click Next.
- Enter a package name for the portlet, and a Class Name. Leave all the boxes checked for Create JSP,
Edit, and Help. Click Finish.
8. Install PortalPack for Eclipse
Download of liferay-plugins-sdk-6.0.2.zip (9,181,832 bytes/MD5:d89f17114811bceae59db7bb31852c42)
http://en.sourceforge.jp/projects/sfnet_lportal/downloads/Liferay%20Portal/6.0.2/liferay-plugins-sdk-
6.0.2.zip/
Extract the zip file into your Development directory. I created a folder for all my development work
“C:Practice”.
Developed by EWT-Practice team

6. GWT with Liferay Portal
Right click on your project, I am using EWTPortalProject  Properties  Java Build Path  Add
External Jars
9. Deploy the Portlet
- to run the portlet, make sure that you have shut down the Liferay server, if you’re following these
instructions step-by-step. Then right-click on the project title, and choose Run As –> Run On Server.
This should cause Liferay server to start up. After it’s started, Eclipse might try to open the project in a
browser, but this won’t work since it uses the project name as the Context in the URL. Instead, once
Liferay has started, go to a browser window, and open Liferay Portal at “http://localhost:8080″. Now
wait.
In my case
http://localhost:8089/web/ewtpractice/home
Developed by EWT-Practice team

7. GWT with Liferay Portal
- It might take a minute or two, and then you will see the Welcome screen. Click the link “Express login
as test” to login to the portal.
- Add a new page to the portal by clicking on Add Page in the upper right. Then click on the new page’s
tab to get to the page.
- Drop down the menu to the right of the words “Welcome Admin User!” and choose Add Application. A
dialog listing portlet categories will appear.
- The user-interface of this screen is a bit misleading. Just type the first few letters of the name of your
portlet. For my example, I type “EWT”. It then shows “EWTPortlet” and I can click Add to add it to the
page.
10. Add GWT to the Portlet
Now we will add GWT to the portlet. I’m sure there are other (and probably better) ways to do this, but
I’ll describe what worked for me.
- create a GWT project. In Eclipse, choose File–>New, and Web Application Project (with the little blue
GWT icon). You must give it a name, and a package. I named mine GWTApp and gave it the same
package name as my portlet above (just “test” for simplicity). I also unchecked “Use Google App Engine”
since this is just a simple test. Click Finish and the project will be created.
Developed by EWT-Practice team

8. GWT with Liferay Portal
You might want to test your GWT app. There are 2 modes in which you can run it — Development and
Production. To test it in Development mode, right-click and choose Run As… or Debug As… and then
Web Application. GWT will start a Jetty server and give you a URL you can paste into a web browser. If
you are doing this for the first time, GWT will prompt you to download the Development plugin for your
browser. I discovered that the Dev plugin is not compatible with Firefox 3.6 (as of this writing), so make
sure you have an older Firefox, if that’s what you’re using. And it also only works with Chrome 4.0 which
is not generally available. I didn’t try Exploder or Safari.
- compile the GWT app: Once you are done testing, right-click on the GWT app, and choose Google–
>GWT Compile. The settings you choose don’t matter too much. I like the Output Style to be “Pretty”
so I can read the resulting Javascript.
Developed by EWT-Practice team

9. GWT with Liferay Portal
Now we will copy the necessary components over to the Portlet. This is probably more easily done in
Navigator View. To see Navigator View, from the Window menu, choose Show View, and then
Navigator.
- copy over all the source files, which you should find in <your-package-name>.client and <your-package-name>.
server. Also copy the <GWT-App-Name>.gwt.xml file that you find in the package. You can right
click on the folders, and copy them. Then paste into the Portlet project src/<package-name> folder.
This is where it comes in handy to have the same package names in both projects.
- compiling the GWT app should have created a subfolder under the “war” folder with the name of your
project. For me, it was called “gwtapp”. Copy this entire folder into the “WebContent” folder of your
Portlet project.
You may get a compile error once you have copied over the src. That’s because the Portlet project
doesn’t have all the right JAR/library files yet.
- copy war/WEB-INF/lib/gwt-servlet.jar to WebContent/WEB-INF/lib in the Portlet project.
- There are 2 library jars that are referenced in the GWT app that we need to add to the Portlet project.
If you switch back to the Project Explorer View in Eclipse, you can see them under GWT SDK. They are
gwt-user.jar and gwt-dev.jar. The view should show where they are located. You need to know this as
you will have to find them via a file system dialog. Also, you can right-click on one, and choose “Copy
Qualified Name” if you want to paste the location somewhere else.
Developed by EWT-Practice team

10. GWT with Liferay Portal
- Now, right-click on the Portlet project, and choose Properties at the bottom of the menu. Then click
“Java Build Path”. Click the Libraries tab, and the button “Add External Jars…”. Now you have to find
the gwt-dev.jar and gwt-user.jar files in the file system. Add both jars to the build path. This should
make any compile errors go away (when Eclipse recompiles).
- If you want to use the GWT style sheet, copy the war/<project-name>.css file to the Portlet project’s
WebContent directory.
- Next we need to add the Servlet references from the GWT app to the Portlet project. Open the
web.xml files from both projects. Copy the Servlet definition and mapping from the GWT App’s web.xml
into the Portlet project’s XML. That means everything under <!– Servlets –>.
- Finally, we need to update the View JSP so that it will use the GWT code. Open the war/<project-name>.
html file in your GWT app. Also open the WebContent/WEB-INF/jsp/<project-name>_view.jsp
file in your Portlet project.
- in the GWT html file, copy the line that refers to the CSS and paste it into your view.jsp. Put it above
the beginning of the regular HTML, but below the @page directives.
- in the GWT html file, copy the line that includes a javascript file where the src ends in “nocache.js”.
- copy the HTML from the beginning of the table tag to the closing table tag, and put it at the bottom of
your view.jsp file.
- finally, we need to update the file references in the view.jsp to include the context root of the Portlet
project. This will normally be the name of your project. So, for me, I changed
src=”gwtapp/gwtapp.nocache.js”
to
src=”/EWTPortalProject/gwtapp/gwtapp.nocache.js”
Likewise for the CSS reference, I changed “GWTApp.css” to “/EWTPortalProject/GWTApp.css”
- Save the view.jsp file. This should (eventually) automatically publish to your Liferay server, if you’ve
left the Liferay server running. Otherwise, you can choose Run As… –> Run On Server
11. Try It Out
Go to your browser, and enter http://localhost:8080. Login as Admin, and go to your Test Page with the
test portlet. You should see the GWT-generated input box, and Send button. When you click Send, it
should get a response and show a dialog that shows it’s running on Liferay!
Developed by EWT-Practice team

11. GWT with Liferay Portal
That’s it. Now you can play around with creating more complex behaviour via GWT, and adding it into a
Portlet. It would be nice if it all worked in a single project in Eclipse
EWTPortal BlankPage
Now I added the EWTGWTPortlet into the page
Developed by EWT-Practice team

12. GWT with Liferay Portal
You should see the GWT-generated input box, and Send button. When you click Send, it should get a
response and show a dialog that shows it’s running on Liferay!
I hope this was helpful to some associates, and let me know if you encounter any errors in the above.
Cheers!
Developed by EWT-Practice team