Hello World with GridSphere Visual UI Beans - GridSphere Portal v3.0

Hint

This is part 2 of a series on how to develop portlets with GridSphere. Please make sure you read the previous chapters before. See the Portlet Development Guide.

Let's bring a little more action into the example. Now we want to use the GridSphere UI Beans to code up a bit more advanced examples.

The GridSphere UI Beans provide a simple to use taglibrary and beans combination to ease the development of portlets. The main advantages are

Intuitive tag/bean combinations which match all standard html elements
You operate on java objects in your javacode to populate values for the presentation
HTML forms do call methods directly, no need for a catch all switching method to decides what to do
All tags are css style according to the JSR specification

Let us recode the above example (and make it a bit more complex). Create the following file in src/org/gridsphere/gsexamples/portlets/UiHelloWorld.java.

src/org/gridsphere/gsexamples/portlets/UiHelloWorld.java

package org.gridsphere.gsexamples.portlets;

import org.gridsphere.provider.portlet.jsr.ActionPortlet;
import org.gridsphere.provider.event.jsr.RenderFormEvent;
import org.gridsphere.provider.event.jsr.ActionFormEvent;
import org.gridsphere.provider.event.jsr.FormEvent;
import org.gridsphere.provider.portletui.beans.TextBean;
import org.gridsphere.provider.portletui.beans.TextFieldBean;

import javax.portlet.PortletConfig;
import javax.portlet.PortletException;

public class UiHelloWorld extends ActionPortlet {

    private static final String DISPLAY_PAGE = "uihelloworld.jsp";

    public void init(PortletConfig config) 
     throws PortletException {
        super.init(config);
        DEFAULT_VIEW_PAGE = "prepare";
    }

    private void greet(FormEvent event) {
        TextBean hellobye = event.getTextBean("hellobye");
        hellobye.setValue("Hello");
        TextFieldBean name = event.getTextFieldBean("name");
        TextBean greeting = event.getTextBean("greeting");
        if (name.getValue()==null) name.setValue("stranger");
        greeting.setValue(name.getValue());
    }

    public void prepare(RenderFormEvent event) 
      throws PortletException {
        greet(event);
        setNextState(event.getRenderRequest(), DISPLAY_PAGE);
    }

    public void sayHello(ActionFormEvent event) 
      throws PortletException {
        greet(event);
        setNextState(event.getActionRequest(), DISPLAY_PAGE);
    }

    public void sayGoodBye(ActionFormEvent event) 
      throws PortletException {
        greet(event);
        TextBean hellobye = event.getTextBean("hellobye");
        hellobye.setValue("Good Bye");
        setNextState(event.getActionRequest(), DISPLAY_PAGE);
    }
}

This portlet says 'hello' or 'goodbye' to the name entered.

Line 20 defines which method should be called if the portlet is rendered for the first time with no action attached (read: in RenderMode). The prepare method calls greet to do the actual work. Now we get to the interesting part. A TextBean (a ui bean representing a normal text element) is created with an id (hellobye) and the value is set to 'hello'. In Line 26 a TextFieldBean is initialized with the name 'name'. The UiTags will automagically fill in the correct value for this field if it was part of an Actionrequest with that value coming from the JSP. Finally a greeting is set to the name of the TextFieldBean name (or 'stranger' if it did not contain anything, e.g. in the RenderRequest phase).
At the end the request is forwareded to the jsp file uihelloworld.jsp to display the data.

See the difference

This portlet extends ActionPortlet
The string DISPLAY_PAGE does not contain jsp or any directory. By default the setNextState method assumes the jsp files are in a subdirectory called jsp.

webapp/jsp/uihelloworld.jsp

<%@ taglib uri="/portletUI" prefix="ui" %>
<%@ taglib uri="http://java.sun.com/portlet" prefix="portlet" %>

<portlet:defineObjects/>
<ui:form>
    <ui:text beanId="hellobye"/> <ui:text beanId="greeting"/> !
    <ui:textfield size="20" beanId="name"/>
    <ui:actionsubmit action="sayHello" value="Say Hello!"/>
    <ui:actionsubmit action="sayGoodBye" value="Say GoodBye!"/>
</ui:form>

As you can see in the file jsp/uihelloworld.jsp in line 6 the TextBeans are used to output the greeting and the name, line 7 will create an input field with the size of 20 and line 8 and 9 will trigger the appropriate actions (and will call sayHello or sayGoodBye in the portlet code).

Finally all what is left (as usual) adding the right segements to the deployement descriptor file.

webapp/WEB-INF/portlet.xml

<portlet>
   <description xml:lang="en">
      An Ui Hello World example
   </description>
   <portlet-name>UiHelloWorld</portlet-name>
   <display-name xml:lang="en">Ui Hello World</display-name>
   <portlet-class>
      org.gridsphere.gsexamples.portlets.UiHelloWorld
   </portlet-class>
   <expiration-cache>0</expiration-cache>
   <supports>
      <mime-type>text/html</mime-type>
   </supports>
   <supported-locale>en</supported-locale>
   <portlet-info>
      <title>Ui Hello World</title>
      <short-title>Ui Hello World</short-title>
      <keywords>hello, ui, world</keywords>
   </portlet-info>
</portlet>

Reload the portlet application via the Portlet Manager Portlet.

You can download the code for the gsexamples.zip.