C'est bien joli de faire des beaux billets de blog, mais t'aurais pu commencer par "Installer ICEfaces pour les nuls" :D

Martin

Et me voilà encore lancé dans un billet sur ICEfaces. Au programme aujourd'hui, l'installation de cette magnifique librairie.

Étape 1 : Création d'un projet Web sous NetBeans

On commence par créer un projet :

• Nouveau projet
• Projet Web
• Web application
• On lui donne on nom (ICEcalendar de mon coté)
• Un emplacement (/home/viv/Desktop de mon coté [j'aime bien remplir mon bureau])
• On lui donne un serveur d'application pour se déployer (GlassFish v2ur1 de mon coté)
• On choisit les frameworks : JSF
• Et on clique sur "Finish"

Étape 2 : Ajout des librairies

Pour commencer, il va falloir télécharger la librarie sur le site de ICEfaces (attention, inscription obligatoire).

Une fois l'archive ICEfaces-1.7.0-bin.zip téléchargée, nous allons récupérer les archives JAR de ICEfaces et les inclure dans notre projet. Nous allons donc extraire l'archive et copier tous les .jar situés dans /icefaces/lib vers notre projet NetBeans. Pour ce faire : Dans le projet, sur "Librairies" : Clic droit, "Add JAR/Folder...", et sélectionner tous les .jar à rajouter.

Étape 3 : Configuration de ICEfaces

Enfin, une fois les librairies ajoutées, passons à la configuration.

La seule véritable configuration à faire réside dans web.xml. Il faut configurer correctement les servlets de ICEfaces afin qu'elles puissent intercepter les requêtes des utilisateurs.

Personnellement, je pense que ce fichier de configuration est amplement suffisant pour travailler uniquement avec ICEfaces et JSF. À modifier en fonction des besoin de votre application (servlets personnalisées à rajouter le cas échéant, etc...).

Notes sur le fichier de configuration ci dessus :

• La servlet de ICEfaces est configurée pour écouter les requêtes *.iface. L'URL pour accéder à /ma/page.jsp en utilisant ICEfaces sera donc /ma/page.iface.
• La servlet de JSF est configurée pour écouter les requêtes *.jsf.

Étape 4 : Utilisation de ICEfaces

Quelques étapes à réaliser pour pouvoir utiliser ICEfaces dans vos pages JSP :

• Pensez à importer la taglib dans chacune de vos JSP. L'URI complète de la taglib est http://www.icesoft.com/icefaces/component
• Pensez aussi à importer les feuilles de style CSS de ICEfaces, grâce à la ligne <link href="./xmlhttp/css/rime/rime.css" rel="stylesheet" type="text/css" />. La feuille de style rime est ma préférée, mais d'autres sont disponibles.

Il est maintenant temps de tester notre installation de ICEfaces. Pour cela, quoi de mieux que d'essayer d'utiliser un calendrier ou de l'auto-complétion ?

En bonus, voici joint :

• Le fichier de configuration web.xml que j'ai utilisé
• Une copie de mon projet NetBeans (les librairies ont été enlevées)

stoi la face de glaçon

Makkhdyn

Sur cette magnifique citation, je me suis remis à ICEfaces. Au programme aujourd'hui : le calendrier.



J'ai choisi le calendrier pensant m'attaquer à un composant un peu plus difficile que l'auto-complétion. C'était mal connaître ICEfaces. Une fois de plus, la facilité à été au rendez-vous.

Première étape : la création d'un JavaBean. Rien de bien compliqué, juste deux champs, et les getters / setters associés. Et c'est tout.

package com.aperigeek.icefaces.calendar;

import java.util.Date;
import java.util.TimeZone;

public class CalendarBean {

    private Date date = new Date();
    
    private TimeZone timeZone = TimeZone.getDefault();

    public Date getDate() {
        return date;
    }

    public void setDate(Date date) {
        this.date = date;
    }

    public TimeZone getTimeZone() {
        return timeZone;
    }

    public void setTimeZone(TimeZone timeZone) {
        this.timeZone = timeZone;
    }

}

Une petite déclaration dans faces-config.xml :

<managed-bean>
    <managed-bean-name>calendarBean</managed-bean-name>
    <managed-bean-class>com.aperigeek.icefaces.calendar.CalendarBean</managed-bean-class>
    <managed-bean-scope>request</managed-bean-scope>
</managed-bean>

Et il n'y a plus qu'à l'utiliser :

<ice:selectInputDate id="calendar" value="#{calendarBean.date}">
    <f:convertDateTime timeZone="#{calendarBean.timeZone}" />
</ice:selectInputDate>

La seule difficulté dans ce code réside dans la balise <f:convertDateTime />. Il est très important de spécifier un attribut timeZone, sans lequel votre composant <ice:selectInputDate /> lèvera une NullPointerException !

---

Après investigation, il semblerais que l'attribut timeZone soit obligatoire si et seulement si vous insérez une balise f:convertDateTime dans votre calendrier. Le code suivant est conc suffisant :

<ice:selectInputDate id="calendar" value="#{calendarBean.date}" />

ICEfaces est sorti en version 1.7. Une nouvelle occasion pour moi de tester cette librairie de composants JSF.

La dernière fois, ICEfaces ne m'avais vraiment pas convaincu. Trop compliqué à mon goût. Peut-être que je n'avais pas fait assez d'efforts.

C'est parti. Cette fois, je me promet d'y mettre du mien. D'essayer un peu plus, et de ne pas me contenter d'attendre que ça marche :)

Je commence avec un composant qui à l'air plutôt simple. L'auto-complétion. Ce fameux composant, assez classique dans le "monde Ajax".

Je me lance. Première chose à faire, un JavaBean qui sera capable de :

• Stocker la valeur du champ de saisie
• Renvoyer une liste de valeurs à proposer à l'utilisateur
• Être prévenu de la mise à jour du champ pour modifier la liste de valeurs à proposer

Voici la traduction des trois points ce dessus en code Java :

package com.aperigeek.icefaces.autocomplete;

import java.util.ArrayList;
import java.util.List;
import javax.faces.event.ValueChangeEvent;
import javax.faces.model.SelectItem;

public class AutoCompleteBean {
    
    private static final List<String> DEFAULT_VALUES;
    
    static {
        DEFAULT_VALUES = new ArrayList<String>();
        for (int i = 0; i < 10; i++) {
            DEFAULT_VALUES.add("Object " + i);
        }
    }
    
    private String userValue;
    
    private List<SelectItem> selectItems;
    
    public void valueChange(ValueChangeEvent evt) {
        setUserValue(evt.getNewValue().toString());
        List<SelectItem> newSelectItems = new ArrayList<SelectItem>();
        for (String s : DEFAULT_VALUES) {
            if (s.startsWith(getUserValue())) {
                newSelectItems.add(new SelectItem(s));
            }
        }
        setSelectItems(newSelectItems);
    }

    public String getUserValue() {
        return userValue;
    }

    public void setUserValue(String userValue) {
        this.userValue = userValue;
    }

    public List<SelectItem> getSelectItems() {
        return selectItems;
    }

    public void setSelectItems(List<SelectItem> selectItems) {
        this.selectItems = selectItems;
    }

}

Pour résumer, nous avons donc :

• Une méthode valueChange, qui est appelée par le composant à chaque fois que la valeur du champ de texte est modifiée.
• Un attribut userValue (et ses getters / setters), qui contient la valeur saisie par l'utilisateur
• Un attribut selectItems (et ses getters / setters), qui contient la liste des valeurs proposées à l'utilisateur

Quelques particularités à noter sur ce code :

• La méthode valueChange s'occupe elle même de modifier la valeur de l'attribut userValue.
• Cette même méthode s'occupe aussi de modifier le contenu de la liste selectItems. Celà permet de modifier le contenu de notre liste à chaque fois que la valeur saisie par l'utilisateur change.

Il va maintenant falloir déclarer ce bean à JSF. Rien de bien spécifique à ICEfaces, juste une simple déclaration de managed-bean, à la JSF (dans faces-config.xml) :

<managed-bean>
    <managed-bean-name>autoComplete</managed-bean-name>
    <managed-bean-class>com.aperigeek.icefaces.autocomplete.AutoCompleteBean</managed-bean-class>
    <managed-bean-scope>request</managed-bean-scope>
</managed-bean>

Et enfin, la JSP. Ce que nous avons à faire :

• Déclarer un composant <ice:form />. Le composant d'auto-complétion d'ICEfaces doit être situé à l'intérieur.
• Déclarer un composant <ice:selectInputText />. Le composant ICEfaces qui permet de faire de l'auto-complétion.
• Donner une liste d'objets à proposer à l'utilisateur, via la balise <f:selectItems />.

Ce qui nous donne le code suivant :

<ice:form>
    <ice:selectInputText valueChangeListener="#{autoComplete.valueChange}">
        <f:selectItems value="#{autoComplete.selectItems}" />
    </ice:selectInputText>
</ice:form>

Et voilà le résultat :)

Conclusion :
J'ai été étonné de la simplicité de développement en utilisant ce composant. Je me souvenais d'un framework bien plus complexe à utiliser. Je sens que je vais utiliser cette librairie de composants pendant un petit bout de temps :)