Introduction to Display Tag

To provide a sorting function on each property of an object in the UI could be a nightmare, if you are not expecting a third party library. Fortunately, Display Tag is there to save you out of the hell. The display tag library is an open source suite of custom tags that provide high-level web presentation patterns which will work in an MVC model. The library provides a significant amount of functionality while still being easy to use.

 

Basic Usage

The simplest possible usage of the table tag is to point the table tag at a java.util.List implementation and do nothing else. The table tag will iterate through the list and display a column for each property contained in the objects. W

<% request.setAttribute( "test", new TestList(10, false) ); %>

<display:table name="test" />

 

If you would like to specify which particular property you would like to display in the table, you can simply use something like the following code.

<% request.setAttribute( "test", new TestList(10, false) ); %>

<display:table name="test">

  <display:column property="id" title="ID" />

  <display:column property="name" />

  <display:column property="email" />

  <display:column property="status" />

  <display:column property="description" title="Comments"/>

</display:table>

 

Advanced Usage

Let’s explain the usage of Display Tag by going through the following example

<display:table id="displayTest" name="${ displayTest TableList}" class="pubMetaDataList"

               decorator="com.informa.professional.ilaw.web.displaytag.DisplayTest TableDecorator">

……

……

</display:table>

 

The value of name attribute for display:table tag indicate which collection object (ie "${ displayTest TableList}"  ) that will be pulled out to display in this table.

 

Now we come to one the features of Display Tag, the decorator. Let’s assume you have list of business objects that you want to display, and the objects contain properties that don’t return native Strings, and you want control over how they get displayed in the list (for example, Dates, money, numbers, etc…). It would be bad form to put this type of formatting code inside your business objects, so instead create a Decorator that formats the data according to your needs.

 

The following example demonstrate how you write your own decorator to create the HTML code that displaying an image and hyperlinked text.

public class DisplayTest TableDecorator extends TableDecorator implements Serializable {

    public CaseInSensitiveAnchor getLegsUrl() {

        StringBuilder sb = new StringBuilder();

        DisplayTest item = (DisplayTest) this.getCurrentRowObject();

        sb.append("<img src=\"");

        sb.append(getPageContext().getSession().getAttribute("imageRoot"));

        sb.append(item.getImageLocation());

        sb.append("\" alt=\"Crest\" title=\"Crest\" style=\"float:left;\">");

        sb.append("<div class=\"Title\">");

        sb.append(item.getGrouping());

        sb.append("</div>");

        sb.append("<A HREF=\"/ilaw/doc/view.htm?id=");

        sb.append(item.getDocumentId());

        sb.append("\">");

        sb.append(item.getTitle());

        sb.append("</A>");

 

        CaseInSensitiveAnchor caseInSensitiveAnchor = new CaseInSensitiveAnchor(sb.toString(), String.valueOf(item.getDocumentId()));

        return caseInSensitiveAnchor;

    }

}   

 

Three things we need to be aware. First, the this.getCurrentRowObject() method is used to get the row object from your collection object. You need to cast it to the type they belong to, as the method only returns Object type. You also need to be careful with what object type that Display Tags support, especially if your collection object is a persistent entity associated with data base. http://displaytag.sourceforge.net/1.2/tut_sources.html

 

Second, if you want to use any variables that used in the derived jsp page, you can use the getPageContext() method to get an instance of PageContext. For example, getPageContext().getSession().getAttribute("imageRoot")

 

Third, the method getUrl() above is actually to you create a new property your table. Therefore, your method name must have the prefix “get”

 

    <display:column class="publication_column" title="Name" sortable="true" property="legsUrl"></display:column>

 

The property="legsUrl" above is indicating that property legsUrl will be popped in this column. Besides and obviously, the sortable=”true” tells that the column could be sorted.

 

What if you don’t want to be bothered to write a decorator class to provide a hyperlink with parameter? Here is the solution.

    <display:column class="publication_column" title="Practice Areas" sortable="true"

               href="${pageContext.request.contextPath}/displayTest List.htm" paramId="querySector"

                    paramProperty="metaName">${ displayTest.metaName}</display:column>

 

  • href – the base URL used to construct the dynamic link paramId the name of the parameter that gets added to the URL specified above
  • paramProperty – property to call on the object specified above to return the value that gets tacked onto the URL.
  • paramScope – specific scope where the databean lives, typically null

 

To find further reference and download the library you can visit Display’s official web site.

http://displaytag.sourceforge.net/1.2/download.html

 

Advertisements
This entry was posted in Style Control. Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s