Displaytag TableDecorator Tutorial

A "decorator" is a design pattern where one object provides the functionality to decorate an other object. Its a better to have all the formatting code seperately in a decorator class instead of having it along with the business logic. The decorator can also be used to provide dynamic links based on the value of each property. In this example we will see how to create dynamic links using decorators in display tag.

The following jar files should be placed in the WEB-INF/lib directory

• antlr
• commons-beanutils
• commons-beanutils-1.7.0
• commons-collections-3.1
• commons-digester
• commons-fileupload-1.0
• commons-lang-2.3
• commons-logging
• commons-validator
• displaytag-1.2
• displaytag-export-poi-1.2
• displaytag-portlet-1.2
• itext-1.3
• jakarta-oro
• log4j-1.2.13
• struts

The following taglib directive should be placed in each JSP page that uses the display taglib.

<%@ taglib uri="http://displaytag.sf.net" prefix="display" %>

In this example we will display a list of actor's details like name, email Id and the TV show in which they performed. Our ActorData class stores the actor's details like name, email id and the tv show. The ActorData class has a loadData() method which returns an ArrayList of all the actor details.

The following attributes and methods are present in the ActorData class.

public class ActorData
{
    private String tvShow;
    private String userName;
    private String emailId;
    public ActorData(String tvShow, String userName, String emailId)
    {
        this.tvShow = tvShow;
        this.userName = userName;
        this.emailId = emailId;
    }
    public ArrayList loadData()
    {
        ArrayList userList = new ArrayList();
        userList.add(new ActorData("The Office","Michael Scott",
        "michael.scott@dundermifflin.com"));
        userList.add(new ActorData("The Office","Dwight Schrute",
        "dwight.schrute@dundermifflin.com"));
        userList.add(new ActorData("The Office","Jim Halpert",
        "jim.halpert@dundermifflin.com"));
        userList.add(new ActorData("The Office","Pam Beesly",
        "pam.beesly@dundermifflin.com"));
        userList.add(new ActorData("The Office","Andy Bernad",
        "andy.bernad@dundermifflin.com"));
        userList.add(new ActorData("The Office","Angela Martin",
        "angela.martin@dundermifflin.com"));
        userList.add(new ActorData("Friends","Rachel Green",
        "rachel.green@friends.com"));
        userList.add(new ActorData("Friends","Monica Geller",
        "monica.geller@friends.com"));
        userList.add(new ActorData("Friends","Phoebe Buffay",
        "phoebe.buffay@friends.com"));
        userList.add(new ActorData("Friends","Joey Tribbiani",
        "joey.tribbiani@friends.com"));
        userList.add(new ActorData("Friends","Chandler Bing",
        "chandler.bing@friends.com"));
        userList.add(new ActorData("Friends","Ross Geller",
        "ross.geller@friends.com"));
        return userList;
    }
    public String getTvShow() {
        return tvShow;
    }
    public String getUserName() {
        return userName;
    }
    public String getEmailId() {
        return emailId;
    }

}

Inside the execute() method in UserAction, the loadData() method of ActorData class is called. This method will return an ArrayList of actors, that ArrayList is stored in the actorList attribute of the UserForm class.

public ActionForward execute(ActionMapping mapping, ActionForm form,HttpServletRequest request, HttpServletResponse response) throws Exception {
    UserForm userForm = (UserForm) form;
    ActorData actorData = new ActorData();
    userForm.setActorList(actorData.loadData());
    return mapping.findForward(SUCCESS);
}

To create dynamic links for the email ids, we will create a decorator class which extends TableDecorator. The decorator attribute of the table tag should hold the path of the decorator class.

<display:table id="data" name="sessionScope.UserForm.actorList" requestURI="/userAction.do" pagesize="6" decorator="com.vaannila.ActorDecorator">
    <display:column property="tvShow" title="TV Show" />
    <display:column property="userName" title="User Name" />
    <display:column property="emailId" title="Email Id" />
</display:table>

In the decorator class the getCurrentRowObject() method returns an instance of the object present in the list. Our actorList in the form contains a list of ActorData, so the object returned by the getCurrentRowObject() method will be of type ActorData. We first need to typecaste the object to ActorData and then we can access the attributes using the getter and setter methods.

public class ActorDecorator extends TableDecorator {

    public String getTvShow()
    {
        ActorData actorData = (ActorData)getCurrentRowObject();
        return actorData.getTvShow();
    }

    public String getUserName()
    {
        ActorData actorData = (ActorData)getCurrentRowObject();
        return actorData.getUserName();
    }

    public String getEmailId()
    {
        ActorData actorData = (ActorData)getCurrentRowObject();
        String emailId = "<a href=\"mailto:"+actorData.getEmailId()+"\">"+actorData.getEmailId()+ "</a>";
        return emailId;
    }

}

The getter methods for the properties in the ActorData class should be specified in the ActorDecorator class. If specified the getter method present in the ActorDecorator class will be invoked, if not the one in the ActorData class will be invoked. The getTvShow() and getUserName() methods need not be specified here since they are just returning the property values. If you want to do any formatting before displaying the data, then it can be done in the corresponding getter method of that property in the decorator class.

On clicking the email id a mail will be triggered to the corresponding person. This is achieved by using the <a> tag. In this way dynamic links can be added to data grid based on the property values.

The data gid with the dynamic links for the email id is displayed below.

On clicking the email id a mail will be sent to the corresponding user.

You can download the source code of the Displaytag TableDecorator example by clicking on the Download link below.

Source: Download

Source + Lib: Download