gwt portlet

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



- 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:\Practice\Ant.

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.



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



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


http://en.sourceforge.jp/projects/sfnet_lportal/downloads/Liferay%20Portal/6.0.2/liferay-plugins-sdk-6.0.2.zip/

http://en.sourceforge.jp/projects/sfnet_lportal/downloads/Liferay%20Portal/6.0.2/liferay-plugins-sdk-6.0.2.zip/


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


http://localhost:8089/web/ewtpractice/home


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



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.



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.



- 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!



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



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!


gwt portlet

Technology

liferay ide

liferay project

liferay server

liferay portalliferay

install steps

liferay v6

liferay portalif

liferay orwhatever