Cacher is the code snippet organizer for pro developers

Les composants Richfaces sont des composants graphiques avancés qui possèdent différentes fonctionnalités Ajax. Ce sont des composants prêts à l'emploi, contrairement aux composants a4j qui laissent au développeur le soin de spécifier l'événement Ajax à traiter, la partie de la page à envoyer dans la requête et celle à réactualiser au retour.

rich:tabPanel

Principe d'affichage par onglets, supporte trois modes de navigation : server, ajax, client.

<rich:tabPanel>
    <rich:tab label="Client">
         composants pour le client 
      </rich:tab>
    <rich:tab label="Commandes ">
          composants pour commandes 
      </rich:tab>
    <rich:tab label="Livraison">
          Composants pour livraison
      </rich:tab>
</rich:tabPanel>

rich:panel

Représente une zone rectangulaire qui peut inclure d'autres composants y compris d'autres panels.Il est possible de lui ajouter un en-tête avec un titre à l'aide d'un facet.

<rich:panel>
    <f:facet name="header">
      Rich Panel
      </f:facet>
    <h:outputText value="Exemple panel" />
</rich:panel>

rich:panelBar

<rich:panelBar height="150" width="500">
    <rich:panelBarItem label="Panel Client">            
          Clients
      </rich:panelBarItem>
    <rich:panelBarItem label="Panel Commandes">            
          commandes
      </rich:panelBarItem>
</rich:panelBar>

rich:simpleTogglePanel

Représente un panel dont le contenu peut être affiché ou caché, grâce à un clic sur son titre.

<rich:simpleTogglePanel label="simpleTogglePanel">
    content
</rich:simpleTogglePanel>

rich:modalPanel

modalPanel est un composant en forme de popup modale, lorsque le modalPanel est affiché, la page parente devient inutilisable. Elle admet un facet header pour ajouter un en-tête ainsi qu'un facet controls pour ajouter un composant de contrôle dans l'en-tête.

Important: Pour envoyer un formulaire à l'intérieur du modalPanel, il faut absolument respecter les règles suivantes :

• modalPanel doit avoir son propre form qui comporte ses éléments de type input
• modalPanel ne doit nullement se trouver à l'intérieur d'un form.

<!-- Controle de l'ouverture du modal -->
<h:outputLink value="#" id="lien" onclick="#{rich:component('_panel_test')}.show()">Ouvrir le modal</h:outputLink>

<rich:modalPanel id="_panel_test" height="110" width="550">
    <f:facet name="header">Richfaces modalPanel</f:facet>
    <f:facet name="controls">
        <h:commandButton value="X" style="cursor:pointer" onclick="Richfaces.hideModalPanel('_panel_test')" />
    </f:facet>
    <rich:panel style="border:0;height:100px">
        <h:outputText value="Bonjour!!" />
    </rich:panel>
</rich:modalPanel>

rich:dataTable

rich:dataTable apporte plusieurs fonctionnalités absentes dans le composant standard h:dataTable. En effet, rich:dataTable dispose des facets header et footer, il implémente les paramètres HTML rowspan et colspan. De plus, il peut contenir des sub-tables, et fournit des outils pour filtrer et ordonner les colonnes.

<rich:dataTable cellpadding="0" cellspacing="0" border="0"
                var="list" value="#{users.userList}" id="table"
                style="text-align:center;" rows="5" width="100%">
    <rich:column>
        <f:facet name="header">Name</f:facet>
        <h:outputText value="#{list.name}"/>
        <f:facet name="footer">State Flag</f:facet>
    </rich:column>
</rich:dataTable>

L'exemple suivant présente l'utilisation de l'événement onRowClick pour afficher le contenu de la ligne sélectionnée dans une pop-up, ou récupérer l'objet correspondant dans le but de réaliser un traitement coté serveur. Notez l'utilisation de f:setPropertyActionListener pour envoyer l'objet correspondant à la ligne en cours au serveur lors de la requête Ajax et dont la valeur est la propriété selectedRow du bean. D'autres méthodes pour retrouver la ligne courante coté serveur sont expliquées dans la FAQ JSF.

<rich:dataTable border="0" var="list"
    value="#{managedBean.dataTableRows}" id="table">
    <a4j:support event="onRowClick"
        action="#{managedBean.processRowUpdate}"
        oncomplete="javascript:Richfaces.showModalPanel('_panel_Row_Details',{left:'auto', top:'auto'})">
        <f:setPropertyActionListener value="#{list}"
            target="#{managedBean.selectedRow}" />
    </a4j:support>
    
    <!-- déclaration des colonnes -->
</rich:dataTable>

rich:DataTableScroller

Ce composant est associé à rich:dataTable pour faire la pagination de la table à l'aide des requêtes Ajax

<rich:datascroller id="scroller1" for="table" reRender="scroller2" align="center" renderIfSinglePage="false" />