Tiles - Exemple

<table cellspacing="0" cellpadding="5" border="0" width="100%">
<tr>
<td>
      <font color="#000088">
    <H1><B><i>Premier pas avec Tiles </i></b><br/></H1></font>
    <hr>
</td>
</tr>
</table>

Fichier : header.jsp

<%@ taglib uri="/WEB-INF/struts-tiles.tld" prefix="tiles" %>

<table cellspacing="2" cellpadding="2" border="0" width="15%">
<tr>
    <td bgcolor="#336699">Documentation</td>
</tr>
<tr>
    <td align="right"><a href="<%=request.getContextPath()%>/index.jsp" >Menu 1</a></td>
</tr>
<tr>
    <td align="right"><a href="<%=request.getContextPath()%>/index.jsp" >Menu 2</a></td>
</tr>
<tr>
    <td align="right"><a href="<%=request.getContextPath()%>/index.jsp" >Menu 3</a></td>
</tr>
</table>

Fichier : menu.jsp

<%@ taglib uri="/WEB-INF/struts-tiles.tld" prefix="tiles" %>

<table cellspacing="2" cellpadding="2" border="0" width="100%" align="center">
<tr>
    <td align="center" >
    <font color="#023264" size="+2">
        <em>                  Ceci est un exemple de BODY!               </em>
        <br>

        <em>                                                  </em>
        Cet exemple ne contient que des parties statiques.
    </font>
    </td>
</tr>
</table>
<br><br><br><br><br><br>

Fichier : body.jsp

<hr>
<div align="center">
<font color="#023264" size="-1">
    <em>         Copyright © 2002, Apache Software Foundation and Cedric Dumoulin       </em>
    <br>
    <em>                   Exemple présenté dans le cadre d'un exposé                        </em>
    <br>
    <em>                       supervisé par M. Dominique Revuz                              </em>
</font>
</div>
<img src="<%=request.getContextPath()%>/images/struts-power.gif" align="right" border="0">

Fichier : footer.jsp

Nous remarquerons que dans ces tiles nous utilisons l'instruction jsp : request.getContextPath(). Cette instruction permet de récupérer le contexte de la page (son url) ce qui nous permet d'avoir une arborescence transparente au niveau des URL des images ou des liens.

Le template d'affichage

Jusqu'à présent nous n'avons rien vu d'extrênement compliqué et qui recquiert une quelconque connaissance dans le langage Tiles. Maintenant nous allons voir la méthode qui va permettre d'agencer les différents composants. Cette méthode est la création d'un template voici celui qui sera utilisé pour notre exemple. Les parties en gras seront ensuite redétaillées.

<%@ taglib uri="/WEB-INF/struts-tiles.tld" prefix="tiles" %>

<HTML>
<HEAD>
    <%-- <link rel=stylesheet href="<%=request.getContextPath()%>/layouts/stylesheet.css" type="text/css"> --%>
        <title>titre</title>
</HEAD>

<body bgcolor="#ffffff" text="#000000" link="#023264" alink="#023264" vlink="#023264">
<table border="0" width="100%" cellspacing="5">
<tr>
<td colspan="2"><tiles:insert attribute="header" /></td>
</tr>
<tr>
<td width="140" valign="top">
    <tiles:insert attribute='menu'/>
</td>
<td valign="top" align="left">
    <tiles:insert attribute='body' />
</td>
</tr>
<tr>
<td colspan="2">
    <tiles:insert attribute="footer" />
</td>
</tr>
</table>
</body>
</html>

Fichier : template.jsp

<%@ taglib uri="/WEB-INF/struts-tiles.tld" prefix="tiles" %> :

C'est une balise obligatoire pour inclure la bibliothèque de balise Tiles dans le contexte associé à la page web. Cette définition est obligatoire et va nous permettre d'utiliser les appels Tiles.

<tiles:insert attribute="header" />

insère le contenu de l'attribut header à l'endroit ou cette commande est effectuée. Lorsque la page sera appelé, un certain nombre de paramètres devront lui être donnés (comme nous le verrons plus tard). L'insertion va allez chercher le contenu qu'il soit une page, un autre template, ou simple une chaine de caractère et l'affichera directement dans le code du template.

L'affichage de la page :

Jusqu'à présent nous avons dessiné les différents composants, nous les avons agencés, il ne nous reste plus qu'à demander l'affichage de la page. Ceci va être fait grâce à la page index.jsp. En effet dans le fichier de configuration nous avons expressement demandé à ce que cette page soit la première à être afficher lorsque le client se connectera sur notre site web. Voici donc le code de la page index.jsp :

<%@ taglib uri="/WEB-INF/struts-tiles.tld" prefix="tiles" %>

<tiles:insert page="/tiles-layout/Layout.jsp" flush="true">
<tiles:put name="title" value="Tiles exemple 1" />
<tiles:put name="header" value="/tiles-component/header.jsp" />
<tiles:put name="footer" value="/tiles-component/footer.jsp" />
<tiles:put name="menu" value="/tiles-component/Menu.jsp" />
<tiles:put name="body" value="/tiles-component/body.jsp" />
</tiles:insert>

Fichier : index.jsp

On peut remarquer qu'à la première ligne on effectue la même configuration que pour le fichier template.jsp à savoir l'inclusion de la blibliothèque de balise Tiles afin de pouvoir ajouter des commandes Tiles. Ensuite nous allons inclure le template dans la page index.jsp ce qui va pour effet d'afficher le template avec tous ces composants. Les composants sont par ailleurs donnés en argument grâce à la balise "put" qui fait correspondre un champ (hrader, footer, ...) a une page jsp.

Premier exemple : Utilisation des templates et de Tiles