eXo Platform - Portal - Create a Portlet

1 How to create a WebUI portlet.

For this example, I'm based on the testPortlet in portal/trunk/portlet/test.

1/ On Eclipse, create a new Java Project, and create this folder tree :

src
 |  main
 |   |  java
 |   |  resources
 |   |  webapp

2/ Create the pom.xml, at root level of the project, like this :

<project>
  <parent>
    <groupId>org.exoplatform.portal</groupId>
    <artifactId>config</artifactId>
    <version>trunk</version>
  </parent>
  <modelVersion>4.0.0</modelVersion>
  <artifactId>exo.portal.portlet.testRomain</artifactId>
  <packaging>war</packaging>
  <version>${org.exoplatform.portal.version}</version>
  <name>exo-portal.portlets.test Romain</name>
  <url>http://www.exoplatform.org</url>
  <description>Romain Test Portlet</description>
  <dependencies>
    <dependency>
      <groupId>org.exoplatform.portal</groupId>
      <artifactId>exo.portal.webui.portal</artifactId>
      <version>${org.exoplatform.portal.version}</version>
      <scope>provided</scope>
    </dependency>
    <dependency>
      <groupId>org.exoplatform.portal</groupId>
      <artifactId>exo.portal.webui.eXo</artifactId>
      <version>${org.exoplatform.portal.version}</version>
      <scope>provided</scope>
    </dependency>
  </dependencies>
  <build>
    <finalName>testRomain</finalName>
  </build>
</project>

3/ In java/testRomain/portlet/component/, we will create the UITestRomainPortlet.java file of the portlet :

package testRomain.portlet.component;


import org.exoplatform.webui.config.annotation.ComponentConfig;
import org.exoplatform.webui.core.lifecycle.UIApplicationLifecycle;
import org.exoplatform.webui.core.UIPortletApplication;


//this part is configuration of the portlet, we set the path to the template groovy.
 @ComponentConfig(
    lifecycle = UIApplicationLifecycle.class,
    template = "app:/groovy/testRomain/portlet/UITestRomainPortlet.gtmpl"
  )


public class UITestRomainPortlet extends UIPortletApplication {

 
  public UITestRomainPortlet() throws Exception {   
  }
}

4/ In src/main/resources/tomcat/, create a testRomain.xml file :

<Context path="/test" docBase="../../../eXoProjects/portal/trunk/portlet/testPortletRomain/src/main/webapp" 
         debug="0" reloadable="true" />

docBase must be set to webapp path of the portlet when you are in the tomcat bin directory.

5/ In src/main/webapp, create the groovy template for the portlet. The path to this file must match the path you set in the java file, in our case : groovy/testRomain/portlet/UITestRomainPortlet.gtmpl

<div id="<%=uicomponent.getId();%>">
	HelloWorld !!!
</div>

6/ Create the folder skin in src/main/webapp. We don't fill it now, but in this folder, you can put css stylesheet and images.

7/ Create the folder WEB-INF/classes/locale in src/main/webapp. We don't fill it now, but in this folder, you can put language properties files.

8/ Create the file configuration.xml in WEB-INF/conf/portlet/testPortletRomain/. Content of tag <ui-component-root> must match your package organization.

<webui-configuration>   
  <application>     
    <ui-component-root>testRomain.portlet.component.UITestRomainPortlet</ui-component-root>
    <state-manager>org.exoplatform.webui.application.portlet.ParentAppStateManager</state-manager>
  </application>
</webui-configuration>

9/ In WEB-INF, create file portlet.xml :

<?xml version="1.0" encoding="UTF-8"?>
<portlet-app version="1.0" xmlns="http://java.sun.com/xml/ns/portlet/portlet-app_1_0.xsd"
             xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
             xsi:schemaLocation="http://java.sun.com/xml/ns/portlet/portlet-app_1_0.xsd http://java.sun.com/xml/ns/portlet/portlet-app_1_0.xsd"> 
  <portlet>
    <description xml:lang="EN">Test Portlet Romain</description>
    <portlet-name>TestRomain</portlet-name>
    <display-name xml:lang="EN">Test Portlet Romain</display-name>
    <portlet-class>org.exoplatform.webui.application.portlet.PortletApplicationController</portlet-class>
    <init-param>
      <name>webui.configuration</name>
      <!-- must match the path to configuration file -->
      <value>/WEB-INF/conf/portlet/testPortletRomain/configuration.xml</value>
    </init-param>    
    <expiration-cache>0</expiration-cache>
    <supports>
      <mime-type>text/html</mime-type>
      <portlet-mode>help</portlet-mode>
    </supports>
    <supported-locale>en</supported-locale>
    <resource-bundle>locale.testRomainPortlet</resource-bundle>     
    <portlet-info>
      <title>TestPortletRomain</title>
      <short-title>TestPortlet</short-title>
      <keywords>test</keywords>
    </portlet-info>     
  </portlet>
</portlet-app>

10/ In WEB-INF, create file web.xml :

<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE web-app PUBLIC "-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN" "http://java.sun.com/dtd/web-app_2_3.dtd">
<web-app> 
  <!--If define the Portlet Application name MUST end with .par--> 
  <display-name>test</display-name>
  <description> This application is a portlet. It can not be used outside a portal. 
  This web.xml file is mandatory in each .par archive file. </description>
  <listener> 
    <listener-class>org.exoplatform.services.portletcontainer.impl.servlet.PortletApplicationListener</listener-class>
  </listener>
  <servlet>
    <servlet-name>PortletWrapper</servlet-name>
	<servlet-class>org.exoplatform.services.portletcontainer.impl.servlet.ServletWrapper</servlet-class>
  </servlet>
  <servlet-mapping>
    <servlet-name>PortletWrapper</servlet-name>
	<url-pattern>/PortletWrapper</url-pattern>
  </servlet-mapping>
</web-app>

11/ Compile your portlet, deploy it, and add it to the portal.

Now, we will add a button in the portlet. This button will open a popup with a message inside.

12/ Add the button. In the groovy template, add this code :

<div class="UIAction"> 
  <div class="ActionContainer">
    <div class="ActionButton"> 
      <div class="LightBlueStyle">
        <div class="ButtonLeft">
          <div class="ButtonRight">
            <div class="ButtonMiddle">
              <a href="<%=uicomponent.event("OpenPopup", "")%>">Open Popup</a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div> 
</div>

13/ Add the listener In the java file, in @ComponentConfig, add this code :

events = {
	@EventConfig(listeners = UITestRomainPortlet.OpenPopupActionListener.class)
}

Remark : XXXActionLister.class XXX must match the name you set for the event in the groovy.

static public class OpenPopupActionListener extends EventListener<UITestRomainPortlet> {
    public void execute(Event<UITestRomainPortlet> event) throws Exception {
        System.out.println("HelloWorld");
    }
}

14/ Redeploy the portlet and click on the button. You will see "HelloWorld" in your console. If you don't change in the portlet, try to redeploy and reboot the tomcat server.

15/ Now, we will add a popup which say "HelloWorld" when you click on the button First, create the groovy template of the popup : in webapp/groovy/testRomain/portlet, create UIHelloWorldPopupContent.gtmpl :

<div id="<%=uicomponent.getId();%>">
	HelloWorld in a popup !!!
</div>

16/ In java/testRomain/portlet/component, create the java file for the popup look like :

package testRomain.portlet.component;

import org.exoplatform.webui.config.annotation.ComponentConfig;
import org.exoplatform.webui.core.UIComponent;
import org.exoplatform.webui.core.lifecycle.UIApplicationLifecycle;

  @ComponentConfig(
      lifecycle = UIApplicationLifecycle.class,
      template = "app:/groovy/testRomain/portlet/UIHelloWorldPopupContent.gtmpl"
    )

public class UIHelloWorldPopupContent extends UIComponent {
    
  public UIHelloWorldPopupContent() throws Exception {
  }
}

17/ In UITestRomainPortlet.java, we will create the popup at the portlet creation (in the contructor) :

public UITestRomainPortlet() throws Exception {
    UIPopupWindow popup = addChild(UIPopupWindow.class, null, null);
    popup.setWindowSize(400, 300);

    UIHelloWorldPopupContent popupContent = createUIComponent(UIHelloWorldPopupContent.class, null, null);
    popup.setUIComponent(popupContent);
    popup.setRendered(false);
}

At begining, we set the popup not visible. As you see, we add a children to the Portlet. So, if we want to see the content of it, we must add this in UITestPortletRomain.gtmpl :

<% uicomponent.renderChildren(); %>

This allows the portlet to generate the content of the child.

18/ Change the treatment of the event, replace the println by :

public static class OpenPopupActionListener extends EventListener<UITestRomainPortlet> {
    public void execute(Event<UITestRomainPortlet> event) throws Exception {
        UITestRomainPortlet portlet = event.getSource();
        UIPopupWindow popup = portlet.getChild(UIPopupWindow.class);
        popup.setRendered(true);
        popup.setShow(true);
    }
}

When user clicks on the button, the popup is shown.

19/ Redeploy the portlet and click on the button. You will see "HelloWorld in a popup" in a popup. If you don't change in the portlet, try to redeploy and reboot the tomcat server.

last modified by Dénarié Romain on 29/10/2008 at 11:04

Create a Portlet

Top Menu

Search

Navigation