To extend the portlet, you need to create a new XML configuration file for WebUI, add the path of this file in the init parameters of your portlet.xml file, and modify your portlet class.

Here are the basic steps to create a WebUI in an existing project:

Now you are ready to work with WebUI.

The PortletApplicationController does the initial work. This class extends the JSR 286 GenericPortlet and wraps WebUI behind the configuration done in the portlet.xml.

The PortletApplicationController passes the webui.configuration to the internal Configuration Manager of WebUI, which will process the configuration described in the configuration.xml.

In configuration.xml, we have the following two blocks:

In the example, a State Manager is assigned to the application. The State Manager is mandatory in the configuration and manages the saving and the loading of the state of the components. The State Manager provides three operations. They are described in the main class, org.exoplatform.webui.application.StateManager:

abstract public class StateManager
{
   abstract public UIApplication restoreUIRootComponent(WebuiRequestContext context) throws Exception;

   abstract public void storeUIRootComponent(WebuiRequestContext context) throws Exception;

   abstract public void expire(String sessionId, WebuiApplication app) throws Exception;
}

The State Manager is hierarchic. It will be used by all components and parent components. It is due to the State Manager that you will see the correct representation of the components in the page.

There are two implementations of State Manager:

org.exoplatform.portal.application.PortalStateManager

org.exoplatform.webui.application.portlet.ParentAppStateManager

The ParentAppStateManager is a wrapper for the PortalStateManager. Always set the ParentAppStateManager method in your configuration. Since this class is a wrapper, you can use this class in GateIn 3.2, 3.3, 3.4, and so on.

You will now see some details of the base configuration seen in the preceding paragraph.

@ComponentConfig(
  type = MyPortlet.class, 
  lifecycle = UIApplicationLifecycle.class)
public class MyPortlet extends UIPortletApplication  {

    ...
}

@ComponentConfigs({
   @ComponentConfig(...),
   @ComponentConfig(...)
})

public class Lifecycle<E extends UIComponent>
{
   ... processDecode(...) 
// generic operations of decode of the outputStream

   ... processAction(...) 
// processor for the actions. For example can read the http url and pass the parameters to the action class

   ... processRender(...) 
// executes the rendering of the page, for example adding custom html div or javascript contents

   ... renderTemplate(...) 
// executes the rendering of a view loading a groovy template through a templating service

}