craven.fr (.ox.ac.uk)

Dans le premier article de cette série, j'ai décrit les étapes nécessaires pour créer la première classe qu'il faut écrire pour faire son propre composant JSF, la classe Tag. Maintenant on va continuer avec le vrai cœur d'un composant JSF, la classe UI. Je rappelle que nous sommes en train de créer un composant exemple simple qui s'appelle Tableau, et on peut visualiser le produit final ici.

Pour la classe UI donc, on a le choix entre trois classes mères possibles, selon le type de composant qu'on est en train de créer :

• Est-ce que le composant se comporte comme un bouton ou un lien? Utiliser UICommand.
• Est-ce que le composant affiche des quelque chose qui n'est pas modifiable? Utiliser UIOutput.
• Est-ce que le composant saisit un valeur de l'utilisateur? Utiliser UIInput.

Notre exemple, un tableau qui se lie à un List<Object[]> pour son contenu, étend donc UIOutput. Ensuite on va coder la méthode qui produit l'html qui sortira sur la page :

public void encodeBegin(FacesContext context) throws IOException {
    ResponseWriter writer = context.getResponseWriter();
    String id = getClientId(context);
    List<Object[]> rangees = (List<Object[]>)
        getAttributes().get("contenu");
    String style = (String) getAttributes().get("styleClass");
    writer.startElement("table", this);
    writer.writeAttribute("class", style, null);
    int rowCtr = 0;
    for (Object[] cellules : rangees) {
        int cellCtr = 0;
        writer.startElement("tr", this);
        writer.writeAttribute("class", style, null);
        for (Object cellule : cellules) {
            writer.startElement("td", this);
            writer.writeAttribute("class", style, null);
            writer.writeAttribute("name", 
                id + rowCtr + "@" + cellCtr, 
                null);
            writer.writeText(cellule, null);
            writer.endElement("td");
            cellCtr++;
        }
        writer.endElement("tr");
        rowCtr++;
    }
    writer.endElement("table");
    return;
}

La première ligne procure un ResponseWriter, qui simplifie la génération des balises html, et la deuxième donne un identifiant client, qu'on peut utiliser dans les attributs id ou name de nos balises html. Ce n'est pas très important pour notre tableau exemple actuel, mais si plus tard on veut l'aggrandir (en rendant cliquable les cellules, par exemple) on en aurait besoin.

Et voilà, nous avons créé un composant JSF ! Il ne fait pas beaucoup, c'est vrai, et il faudra beaucoup de travail pour le rendre aussi utile que le tableau proposé par Java Studio Creator, mais j'espère que les principes sont tous apparants par ce petit exemple. En plus, si vous voulez reprendre un composant existant et en modifier ou ajouter des fonctionnalité, vous avez maintenant une vue globale sur ce qu'il ne faut pas casser!

L'installation n'est pas trop complexe, mais il faut vérifier que vous n'oubliez pas une étape.

1. Mettre TableauTag.class et UITableau.class dans le classpath de l'application.
2. Mettre votre .tld dans /WEB-INF ou le classpath
3. Enscrire votre .tld dans web.xml
4. Enscrire votre composant dans faces-config.xml

Toutes ces étapes sauf la dernière sont déjà bien connues par les dévelloppeurs Java EE. L'inscription dans faces-config.xml est très simple, il suffit d'ajouter les lignes suivantes :

  <component>
      <component-type>fr.craven.test.jsf.Tableau</component-type>      
      <component-class>fr.craven.test.jsf.UITableau</component-class>
  </component>

(Veillez à ce que component-type s'accorde avec la valeur que votre classe Tag retourne dans sa méthode getComponentType().)

Pour voir notre beau tableau en action si vous ne l'avez pas déjà fait, cliquer ici ; la code source du jsp exemple est visible ici. Il reste un dernier morceau au puzzle : l'intégration dans l'EDI pour pouvoir travailler visuellement avec notre composant. Cela attendra le troisième volet de cette série, où je montrerai comment ajouter notre composant Tableau dans la palette NetBeans.

Comme toujours, laissez un commentaire si vous avez des questions, ou si quelque chose n'est pas clair!