Utilisation d’Ajax avec DisplayTag pour externaliser pagination et tri (Struts ou DWR)

Présentation

Dans quasiment toutes les applications web J2EE que nous devons développer, il nous a été demandé d’afficher une série d’enregistrements provenant d’une base de données ou une liste d’objets sous forme de tableaux (balise <table>). Il faut pour cela itérer sur la liste, gérer la première ligne d’entête du tableau et assurer la pagination. Cela devient vite lourd et répétitif.

C’est pourquoi j’aimerai vous présenter la bibliothèque DisplayTag qui offre une solution rapide, pratique et efficace à ce problème. Cette Taglib offre un mécanisme très simple d’itération sur une collection, celui-ci s’exécutant directement depuis le code d’une JSP. Le résultat donne l’affichage d’un tableau html avec une quantité d’options telles que les tris sur les colonnes, la pagination, le regroupement de données ou encore l’export du tableau aux formats csv, excel, xml, pdf ou rtf.

L’exemple décrit dans cette article porte sur l’ajaxification de DisplayTag avec Struts mais cela reste simple à porter vers DWR : la rubrique « Sources » plus bas vous donnera un exemple pour les deux.

DisplayTag

Problème

Il est plus convivial d’actualiser uniquement les données de nos tableaux, en utilisation la technologie Ajax (voir précédent article : Ajax, comment a-t’il révolutionné le Web), pourtant la bibliothèque DisplayTag ne le permet pas, elle fait une requête au contrôleur pour chacune des actions qui lui sont permises comme le tri et la pagination, cela se traduisant par un rafraîchissement complet de la page.

Nous allons donc dans cet article vous proposer une solution afin de contourner ce problème en mettant en place une bibliothèque de balises JSP : une TagLib. Celle-ci nous évitera le rafraîchissement de la page entière et permettra de rafraîchir uniquement le tableau.

Contournement

Le but de l’exercice consiste donc à changer dynamiquement le code source généré par DisplayTag, plus précisément transformer les liens <a href= »URI?page=1&sort=3… »> en des liens <a href= »javascript:methodName(page:1, sort:3…). La méthode ‘methodName’ utilise Ajax dans l’appel de son action Struts afin de récupérer le nouveau tableau généré.
Je vous renvoie à mon article précédent pour comprendre ce mécanisme : Struts, comment récupérer nos JSP en Ajax.

• écriture de la TagLib qui va permettre cette manipulation du code source généré (fichier customization.tld à déposer dans /WEB-INF/tld). Cet TagLib va utiliser le parseur HTML Jericho, prévoyez donc d’inclure ce jar dans votre projet.

<?xml version="1.0" encoding="ISO-8859-1" ?>
<!DOCTYPE taglib
  PUBLIC "-//Sun Microsystems, Inc.//DTD JSP Tag Library 1.1//EN"
  "http://java.sun.com/j2ee/dtds/web-jsptaglibrary_1_1.dtd">
<taglib>
	<!-- ============== Tag Library Description Elements ============= -->
	<tlibversion>1.0</tlibversion>
	<jspversion>1.1</jspversion>
	<!-- ===================== Control Flow Tags ====================== -->
	<tag>
		<name>displayTag</name>
		<tagclass>fr.geeks.presentation.taglib.CustomDisplayTag</tagclass>
		<bodycontent>JSP</bodycontent>
		<attribute>
			<name>pagerMethodName</name>
			<required>true</required>
			<rtexprvalue>true</rtexprvalue>
		</attribute>
	</tag>
</taglib>

– classe CustomDisplayTag

package fr.geeks.presentation.taglib;
import java.io.IOException;
import java.util.Iterator;
import java.util.List;
import java.util.Map;
import javax.servlet.jsp.JspException;
import javax.servlet.jsp.JspWriter;
import javax.servlet.jsp.tagext.BodyTagSupport;
import au.id.jericho.lib.html.Attribute;
import au.id.jericho.lib.html.Attributes;
import au.id.jericho.lib.html.Element;
import au.id.jericho.lib.html.HTMLElementName;
import au.id.jericho.lib.html.OutputDocument;
import au.id.jericho.lib.html.Segment;
import au.id.jericho.lib.html.Source;
import au.id.jericho.lib.html.StartTag;
/**
 * Utilise le parseur HTML Jericho pour récupérer le code source généré par DisplayTag et le remanier
 */
public class CustomDisplayTag extends BodyTagSupport {
    /** method name of pager */
    private String pagerMethodName;
    /**
     * (non-Javadoc)
     *
     * @see javax.servlet.jsp.tagext.Tag#doEndTag()
     */
    public int doEndTag() throws JspException {
        JspWriter out = pageContext.getOut();
        String body = bodyContent.getString();
        Source source = new Source(body);
        OutputDocument outputDocument = new OutputDocument(source);
        // interception des liens de pagination
        List spanElements = source.findAllElements(HTMLElementName.SPAN);
        Iterator iterSpanElements = spanElements.iterator();
        while (iterSpanElements.hasNext()) {
            Element spanElement = (Element) iterSpanElements.next();
            Attributes spanAttributes = spanElement.getAttributes();
            Attribute classAttribute = spanAttributes.get("class");
            if (classAttribute != null && classAttribute.getValue() != null && classAttribute.getValue().equalsIgnoreCase("pagelinks")) {
                rewriteAnchors(spanElement, outputDocument);
            }
        }
        // interception des liens de tri
        List thElements = source.findAllElements(HTMLElementName.TH);
        Iterator iterThElements = thElements.iterator();
        while (iterThElements.hasNext()) {
            Element thElement = (Element) iterThElements.next();
            Attributes spanAttributes = thElement.getAttributes();
            Attribute classAttribute = spanAttributes.get("class");
            if (classAttribute != null && classAttribute.getValue() != null && classAttribute.getValue().contains("sortable")) {
                rewriteAnchors(thElement, outputDocument);
            }
        }
        try {
            out.println(outputDocument.toString());
        } catch (IOException e) {
            throw new JspException(e.getMessage());
        }
        return SKIP_PAGE;
    }
    /**
     * (non-Javadoc)
     *
     * @see javax.servlet.jsp.tagext.Tag#doStartTag()
     */
    public int doStartTag() throws JspException {
        return EVAL_BODY_BUFFERED;
    }
    /**
     * Relace href redirection to onclick call method
     *
     * @param segment Html Element
     * @param outputDocument The output document
     */
    private void rewriteAnchors(Segment segment, OutputDocument outputDocument) {
        List anchors = segment.findAllStartTags(HTMLElementName.A);
        for (Iterator i = anchors.iterator(); i.hasNext();) {
            StartTag anchorTag = (StartTag) i.next();
            Attributes attributes = anchorTag.getAttributes();
            Attribute hrefAttribute = attributes.get("href");
            if (hrefAttribute == null) {
                continue;
            }
            String href = hrefAttribute.getValue();
            if (href == null) {
                continue;
            }
            Map attrreplace = outputDocument.replace(attributes, true);
            OptionBuilder onclickOptions = getOptions(href);
            attrreplace.put("href", "javascript://nop/");
            attrreplace.put("onclick", getOnclickAjaxInvokePreFunction(onclickOptions));
        }
    }
    /**
     * Constucts javascript called method with href option into parameters
     *
     * @param options
     * @return
     */
    private String getOnclickAjaxInvokePreFunction(OptionBuilder options) {
        StringBuffer onclick = new StringBuffer(this.getPagerMethodName() + "(");
        onclick.append("{");
        onclick.append(options.toString());
        onclick.append("}");
        onclick.append("); return false;");
        return onclick.toString();
    }
    /**
     * Extract parameters to href string
     *
     * @param href
     * @return
     */
    private OptionBuilder getOptions(String href) {
        OptionBuilder options = new OptionBuilder();
        href = href.substring(href.indexOf("?"));
        href = href.substring(1);
        String[] optionList = href.split("[&]");
        for (int i = 0; i < optionList.length; i++) {
            String[] option = optionList[i].split("[=]");
            String value = "";
            if (option.length > 1) {
                value = option[1];
            }
            options.add(option[0], value, true);
        }
        return options;
    }
    public String getPagerMethodName() { return pagerMethodName; }
    public void setPagerMethodName(String methodName) { this.pagerMethodName = methodName; }
}

– class OptionBuilder utilisé ci-dessus

package fr.geeks.presentation.taglib;
import java.util.HashMap;
import java.util.Iterator;
import java.util.Map;
/**
 * Permet de construire les paramètres à injecter dans notre méthode javascript qui fera l'appel ajax
 */
public class OptionBuilder {
    private Map parameters = new HashMap();
    private Map parameterQuotes = new HashMap();
    public OptionBuilder add(String parameter, String value, boolean quoted) {
        this.parameters.put(parameter, value);
        this.parameterQuotes.put(parameter, Boolean.valueOf(quoted));
        return this;
    }
    public OptionBuilder remove(String parameter) {
        this.parameters.remove(parameter);
        this.parameterQuotes.remove(parameter);
        return this;
    }
    public String toString() {
        StringBuffer sb = new StringBuffer();
        for (Iterator iter = this.parameters.keySet().iterator(); iter.hasNext();) {
            String key = (String) iter.next();
            String value = (String) this.parameters.get(key);
            boolean quoted = ((Boolean) this.parameterQuotes.get(key)).booleanValue();
            sb.append(key).append(": ");
            if (quoted) {
                sb.append("\"").append(value).append("\"");
            } else {
                sb.append(value);
            }
            if (iter.hasNext()) {
                sb.append(",");
            }
            sb.append("\n");
        }
        return sb.toString();
    }
}

• une action Struts permet de récupérer la liste d’objets à afficher selon les paramètres envoyés par DisplayTag, à savoir le tri, la page et la direction. Attention il faut absolument que l’objet utilisé par displayTag implémente la classe suivante org.displaytag.pagination.PaginatedList

package fr.geeks.presentation.action;
import java.util.List;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.apache.commons.lang.StringUtils;
import org.apache.struts.action.Action;
import org.apache.struts.action.ActionForm;
import org.apache.struts.action.ActionForward;
import org.apache.struts.action.ActionMapping;
import fr.geeks.metier.bean.TablePaginatedList;
import fr.geeks.metier.service.ServiceMetier;
public class GeekAction extends Action {
    public ActionForward execute(ActionMapping mapping, ActionForm actionForm, HttpServletRequest request, HttpServletResponse response) throws Exception {
        // récupération des paramètres du tableau
        String page = request.getParameter("page");
        String sort = request.getParameter("sort");
        String dir = request.getParameter("dir");
        // construction de la liste paginée
        TablePaginatedList tablePaginatedList = new TablePaginatedList();
        tablePaginatedList.setPageNumber(StringUtils.isBlank(page) ? 1 : Integer.parseInt(page));
        tablePaginatedList.setSortCriterion(StringUtils.isBlank(sort) ? TablePaginatedList.DEFAULT_SORT_CRITERION : sort);
        tablePaginatedList.setSortDirection(StringUtils.isBlank(dir) ? TablePaginatedList.DESCENDING_SORT : (dir.equals(TablePaginatedList.DESCENDING_SORT) ? TablePaginatedList.DESCENDING_SORT : TablePaginatedList.ASCENDING_SORT));
        // appel métier pour récupérer la liste des enregistrements selon les paramètres précédents
        // le métier n'est pas décrit dans cet article mais c'est une méthode qui attaque la base de données et renvoie les données sous forme d'une liste
        // dans les sources présentées plus bas vous verrez un exemple à partir d'un tableau en dur
        int fullObjectsList = ServiceMetier.getFullObjectsListSize();
        tablePaginatedList.setFullListSize(fullObjectsList);
        // index
		int startIndex = (tablePaginatedList.getPageNumber() - 1) * tablePaginatedList.getObjectsPerPage() + 1;
		int stopIndex = startIndex + tablePaginatedList.getObjectsPerPage() - 1;
        List partialObjectsList = ServiceMetier.getPartialObjectsList(startIndex, stopIndex, tablePaginatedList.getSortCriterion(), tablePaginatedList.getSortDirection().getName());
        tablePaginatedList.setPartialList(partialObjectsList);
        // envoi de données à la JSP recevante
        request.setAttribute("objectsList", tablePaginatedList);
        request.setAttribute("pageSize", tablePaginatedList.getObjectsPerPage());
        request.setAttribute("resultSize", fullObjectsList);
        return mapping.findForward("success");
    }
}

• cette action Struts renvoie sur une JSP qui affiche la liste d’objets reçus sous forme de tableau ajaxifié

<%@ page language="java" pageEncoding="UTF-8" contentType="text/html; charset=utf-8"%>
<%@ taglib uri="http://displaytag.sf.net" prefix="display"%>
<%@ taglib uri="/WEB-INF/tld/customization.tld" prefix="custom"%>
<%-- surchage du displaytag pour externaliser la pagination --%>
<custom:displayTag pagerMethodName="changePage">
    <%-- displaytag normal --%>
    <display:table name="objectsList" pagesize="2" partialList="true"
    	pagesize="${requestScope.pageSize}" size="${requestScope.resultSize}" sort="external">
        <display:column property="id" title="N°" sortable="true" />
        <display:column property="nom" title="Nom" sortable="true" />
        <display:column property="prenom" title="Prénom" />
        <display:column property="email" title="Email" />
    </display:table>
</custom:displayTag>

• voici la fameuse méthode JavaScript (paramétré via le tag « custom:DisplayTag ») qui nous permet de ne plus rafraichir la page entière lors que l’utilisateur passe de page en page dans son tableau ou lorsqu’il le tri

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<%@ page language="java" pageEncoding="UTF-8" contentType="text/html; charset=utf-8"%>
<% request.setAttribute("ctx", request.getContextPath()); %>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
    <script type="text/javascript" src="${ctx}/scripts/prototype.js"></script>
</head>
<body>
<script type="text/javascript">
	// affiche la table au chargement de la page
	function displayTable() {
		var url = "${ctx}/table.do";
		ajaxRequest(url);
	}
	// fonction lors de la pagination du tableau
	function changePage(params) {
	    var url = "${ctx}/table.do?";
	    if (params['page']) { url += "&page="+params['page']; }
	    if (params['sort']) { url += "&sort="+params['sort']; }
	    if (params['dir']) { url += "&dir="+params['dir']; }
	    ajaxRequest(url);
	}
	// requête au serveur de façon asynchrone
	function ajaxRequest(url) {
		// make a HTTP request to the specified URL
	    new Ajax.Request(url, {
	        method:'get',
	        asynchronous:true,
	        onSuccess: function(xhr) {
	            $("DIV_TABLE_OBJECTS").innerHTML = xhr.responseText;
	        }
	    });
	}
	// au chargement de la page
	window.onload = function() {
		displayTable();
	}
</script>
<!-- endroit où le tableau sera affiché dans la page courante -->
<div id="DIV_TABLE_OBJECTS"></div>
</body>
</html>

• côté Struts le strict minimum à savoir :

<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE struts-config PUBLIC "-//Apache Software Foundation//DTD Struts Configuration 1.1//EN"
"http://jakarta.apache.org/struts/dtds/struts-config_1_1.dtd">
<struts-config>
	<!-- Data Sources -->
	<data-sources></data-sources>
	<!-- Form Beans -->
	<form-beans></form-beans>
	<!-- Global Exceptions -->
	<global-exceptions></global-exceptions>
	<!-- Global Forwards -->
	<global-forwards></global-forwards>
	<!-- Action Mappings -->
	<action-mappings>
		<!-- Home page -->
		<action path="/table" type="fr.geeks.presentation.action.GeekAction">
			<forward name="success" path="/WEB-INF/jsp/ajaxTable.jsp" />
		</action>
	</action-mappings>
	<!-- Message Resources -->
	<message-resources parameter="ApplicationResources" />
</struts-config>

Avantages

1. Facilité d’utilisation : il suffit de rajouter une seule ligne pour surcharger le DisplayTag original et de profiter de la puissance d’Ajax
2. Facilité de réutilisation : une TagLib pourra se réutiliser dans n’importe quel projet, il suffit d’en faire un .jar

Sources

• Ajax DisplayTag avec Struts : Disponibles ici
• Ajax DisplayTag avec DWR : Disponibles là

Cet article a été écrit par :

Mimie – qui a déjà rédigé 123 posts sur Des Geeks et des lettres.

Passionné d'informatique et développeur JavaEE de métier, je me consacre principalement à écrire des billets sur les sujets du Web et de la programmation Web. Ce blog est un espace qui me permet de partager mes découvertes avec vous et me sert accessoirement de pense bête !

Contacter l'auteur

Jetez aussi un oeil sur :

• MySQL : Enregistrement et récupération d’images pour afficher dans une JSP
• Rotation d’une bannière publicitaire au contenu dynamique en AJAX
• Struts : comment renvoyer des données JSON en AJAX
• Struts : comment récupérer nos JSP en AJAX
• DWR : validation élégante côté serveur d’un formulaire en AJAX