Difference between revisions of "Developing gCube Portlets Guide"

Revision as of 17:38, 25 June 2010

Development of a gCube Portlet

Prerequisites

• IDE: Eclipse 3.4+ J2EE with the following plugins installed
  • Portal Pack 2.0.1 [PPAC] get PPAC Eclipse Plugin
  • Google Eclipse Plugin [GECLIPSE] (If you want your portlet to use GWT) get GECLIPSE
  • GWT 2.03 (Bundled with the above Plugin)

Creating an empty Portlet Project

• Create a new Dynamic Web Project using eclipse

• In the Wizard next step we are going to add support for Porlet 2.0. and specify Tomcat 5.5 as Target Runtime (Optional)

• Finally in the Wizard last step we change "Web Content" to "war" as Content Directory (To have ETICS and GWT2 Projects compatibility)

Portlet creation

To create your portlet using eclipse, click on your newly created project > New -> Other -> JavaPortlet.

You are also required to change your project default output folder from <MyGCubePortletName>/build/classes to <MyGCubePortletName>/war/WEB-INF/classes

If you performed the above procedure correctly now your project should look similar to the picture below:

You have created a Standard Portlet Project, to generate a war simple use the Eclipse Export > War Wizard

Adapting your Portlet to Liferay Portal

D4Science II Project as chosen to move to Liferay Portal from its 1.9 release. In order to make your portlet be deployable on Liferay you need to add some Liferay Portal specific deployment descriptor xml and property files.

Create two empty xml files into your project war WEB-INF folder and name them

• liferay-portlet.xml
• liferay-display.xml

Create 1 empty xml file into your project war WEB-INF folder and name it

• liferay-plugin-package.properties

Content for the above files

<MyGCubePortletName> has to be changed with your actual portlet name

• liferay-portlet.xml

The elements that should be placed in that file must follow the exact order

  <portlet>
     <portlet-name><MyGCubePortletName></portlet-name>
     <icon>/icon.png</icon> //optional 
     <layout-cacheable>false</layout-cacheable>  //for loading the new portlet
     <instanceable>false</instanceable>  //to use one portlet instance for the D4S portal
     <ajaxable>false</ajaxable>  //it is need for the correct rendering of the GWT portlet
     <header-portlet-css>/css/test.css</header-portlet-css>
  </portlet>

• liferay-display.xml

The element 'category' is recommended to use the name "gCube Applications"

  <display>
     <category name="gCube Applications">
        <portlet id="<MyGCubePortletName>" />
     </category>
  </display>

• liferay-plugin-package.properties

name=<MyGCubePortletName>
module-group-id=liferay
module-incremental-version=1
tags=
short-description=
change-log=
page-url=http://www.d4science.eu
author=D4Science EU
licenses=

If you performed the above procedure correctly now your project should look similar to the picture below:

Writing a GWT application

You can find useful information about how to write a gwt application on the Google Web Toolkit's official site: http://code.google.com/webtoolkit/.

! IMPORTANT INFO

In the entrypoint-class, in the onModuleLoad() method: When you are about to add your widget in the main page,
instead of writing:

RootPanel.get().add(<your widget>);

you must write:

RootPanel.get(<a unique id for the DIV>).add(<your widget>);

So, the generated html will be placed in the predefined div instead of being placed in an unspecified location.

Integrate a GWT2 Web Application Project

Adapting your GWT2 Project is now a straightforward procedure. (We assume you have the GWT Eclipse Plugin Installed)

To add GWT support to your project go to your Project Properties: Google -> Web Toolkit -> Use Google Web Toolkit

Now you have to copy some files from the GWT Project to the portlet project:

• copy your GWT src packages into your yet created Portlet Project
• copy your GWT war folder files into your war folder of the yet created Portlet Project e.g. .html,.css and the other folders of the war, except for WEB-INF
• Copy your GWT WEB-INF/web.xml file into your portlet war/WEB-INF/web.xml

You also have to edit the following files:

• In your GWT Project html file seek the following part:

<!--                                           -->
    <!-- This script loads your compiled module.   -->
    <!-- If you add any GWT meta tags, they must   -->
    <!-- be added before this line.                -->
    <!--                                           -->
    <script type="text/javascript" language="javascript" src="mygwtproject/mygwtproject.nocache.js"></script>

• Open your ./war/WEB-INF/jsp/LoginPortlet_view.jsp file and add the content of the <script> element above as shown below
  • Notice that request.getContextPath is added, together with the div using as id the unique name you specified in your entrypoint class

<portlet:defineObjects />
--%>
<script type="text/javascript" language="javascript" src='<%=request.getContextPath()%>/mygwtproject/mygwtproject.nocache.js'></script>

<div id="a unique id for the DIV">
</div>

• The CSS file Location of your GWT application must be set into the <header-portlet-css> element of the liferay-portlet.xml file as shown below (mygwtproject.css is in the war/ folder in this example)

<liferay-portlet-app>
	<portlet>
		<portlet-name>WebLogin</portlet-name>
		<icon>/icon.png</icon>
		<layout-cacheable>false</layout-cacheable>
		<instanceable>false</instanceable>
		<ajaxable>false</ajaxable> 
		<!-- LOCATION CSS HERE -->
                <header-portlet-css>/mygwtproject.css</header-portlet-css>
	</portlet>
	<role-mapper>
		<role-name>administrator</role-name>
		<role-link>Administrator</role-link>
	</role-mapper>
</liferay-portlet-app>

You can now compile your GWT Application (Inside the portlet Project) by using the Eclipse Plugin as shown below

You can now create the Web Application Archive (WAR) using the export feature of Eclipse