IceFaces : Auto-complétion (très) facile
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 :
Voici la traduction des trois points ce dessus en code Java :
Pour résumer, nous avons donc :
Quelques particularités à noter sur ce code :
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) :
Et enfin, la JSP. Ce que nous avons à faire :
Ce qui nous donne le code suivant :
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 :)
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
valueChanges'occupe elle même de modifier la valeur de l'attributuserValue. - 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 :)