Comment recharger partiellement une interface utilisateur: répéter?

Nous avons une application Web construite sur JBoss 7.1 avec JSF2 et Primefaces 3.3.

Sur l’une de nos pages, il y a un ui:repeat affichant 10 items; Ensuite, l’utilisateur peut cliquer sur une sorte de bouton “afficher plus” et 10 autres éléments sont affichés via ajax. L’utilisateur peut cliquer sur le bouton “Afficher plus” jusqu’à ce qu’il n’y ait plus d’éléments à afficher. Note: Ce n’est pas de la pagination, la liste affichée s’allonge avec chaque clic sur “show more”.

En fait, lorsque l’utilisateur clique sur le bouton, le serveur renvoie les anciens et les nouveaux éléments, et le côté client de JSF doit reconstruire l’ensemble du répéteur via jQuery à chaque fois.

Nous aimerions trouver une solution meilleure et plus performante. Les anciens éléments ne changent pas entre les appels n-1 et n , il serait donc plus efficace que le serveur ne puisse retourner que par ajax les 10 nouveaux éléments.

Est-ce possible dans JSF2? JSF ne semble pas vraiment conforme à ce type de rendu récursif. Le seul composant qui pourrait peut-être nous aider serait un composant TreeNode, mais il semble un peu un hack: – /

Il n’y a rien de tel dans l’API JSF standard. De plus, rien ne vient à l’esprit dans PrimeFaces.

Les OmniFaces peuvent cependant être exactement ce que vous recherchez. Il vous permet de laisser JSF rendre uniquement un sous-ensemble de l’arborescence des composants en fonction d’un paramètre de requête spécifique, qui peut être un ID de composant ou un identifiant de client. Vous pouvez simplement utiliser $.get() de jQuery pour recharger le avec l’index de démarrage en tant que paramètre de requête et utiliser $.append() de jQuery pour l’append au DOM HTML.

Voici un exemple de coup d’envoi complet. La vue:

       Stack Overflow Question 11364006     
  • #{item}
$("#showMore").click(function() { $items = $("#items"); var params = { start: $items.find("li").length, componentId: "itemsRepeater" }; $.get(location, params, function(html) { $items.append(html); }); });

Le haricot de renfort:

 @ManagedBean @RequestScoped public class Bean { private List items; @ManagedProperty("#{param.start}") private int start; @PostConstruct public void init() { // Just a stub. Do your thing to fill the items. items = new ArrayList(); int size = start + 10; for (int i = start; i < size; i++) { items.add("item " + (i + 1)); } } public void setStart(int start) { this.start = start; } public List getItems() { return items; } } 

Mise à jour : une démonstration en direct peut être trouvée dans l’exemple “Liste extensible” de la page de l’application visortingne actuelle .

Pour des situations comme celle-ci, je contourne complètement JSF et utilise le service JAX-RS avec jQuery AJAX. Cette approche vous aidera à créer de bien meilleures applications que le simple support AJAX de JSF. Voici la technique de base.

Dans la page XHTML, il suffit d’avoir un espace réservé pour la liste:

 
Load more...

Lorsque la page se charge, faites une demande AJAX pour remplir la liste initiale. Voici un exemple de code. Il peut y avoir des fautes de frappe, mais vous avez l’idée.

 var nextStart = 0; $(function() { loadNext(); }); function loadNext() { $.ajax({ type: "GET", url: "api/items?start=" + nextStart, success: function(data) { appendToList(data); nextStart += data.length; } }); } function appendToList(data) { //Iterate through data and add to DOM for (var i = 0; i < data.length; ++i) { $("#item_list").append($("

", {text: data.productName})); } }