RichFaces - Composants de sortie

Dans le chapitre précédent, nous avons découvert différents champs de saisie ou balises qui aident l'utilisateur à fournir les entrées via le navigateur. Dans ce chapitre, nous découvrirons les différents composants de sortie fournis par RichFaces.

<riche: Panel>

Dans certains de nos exemples précédents, nous avons déjà rencontré la balise panel. <rich: panel> crée une zone rectangulaire à l'intérieur de la page Web, qui peut contenir n'importe quelle information. Vous pouvez inclure d'autres panneaux, images et tout autre composant riche dans un panneau.

Dans l'exemple suivant, nous allons créer un panneau personnalisé selon le choix et nous fournirons un en-tête à notre panneau en utilisant l'attribut «header». Veuillez créer un fichier xhtml et nommez-le «richPanelExamlple.xhtml». Placez le code suivant à l'intérieur.

<?xml version = "1.0" encoding = "UTF-8"?>  
<!DOCTYPE html> 
<html xmlns = "http://www.w3.org/1999/xhtml"   
   xmlns:h = "http://java.sun.com/jsf/html"   
   xmlns:f = "http://java.sun.com/jsf/core"   
   xmlns:ui = "http://java.sun.com/jsf/facelets"   
   xmlns:a4j = "http://richfaces.org/a4j"   
   xmlns:rich = "http://richfaces.org/rich"> 
   
   <h:head> 
      <title>Panel Example</title> 
   </h:head> 
   
   <h:body> 
      <rich:panel header = "RichFace Tutorials " style = "font-size: 500px; 
         align-items:center; background-color: activecaption"> 
         
         RichFace Tutorials Presented by TutorialsPoint.com.      
      </rich:panel> 
   </h:body>
</html>

Le morceau de code ci-dessus donnera la sortie suivante dans le navigateur.

<rich: simpleTogglePanel>

Le simpleTogglePanel offre la possibilité aux développeurs de changer le contenu du panneau de manière dynamique. Cependant, dans RichFaces 4, cette balise a été supprimée. JBoss a introduit des balises avancées telles que <rich: togglePanel>, <rich: tab> et <rich: tabPanel>. Il est recommandé d'utiliser la version mise à jour des balises RichFaces pour plus de fonctionnalités et de fonctionnalités. Si vous utilisez toujours RichFaces 3, vous pouvez utiliser la balise suivante.

<ui:composition xmlns = "http://www.w3.org/1999/xhtml" 
   xmlns:ui = "http://java.sun.com/jsf/facelets" 
   xmlns:h = "http://java.sun.com/jsf/html" 
   xmlns:f = "http://java.sun.com/jsf/core" 
   xmlns:a4j = "http://richfaces.org/a4j" 
   xmlns:rich = "http://richfaces.org/rich"> 
   
   <rich:simpleTogglePanel switchType = "client" label = "SimpleToggle"> 
      The simple example of SimpleToggle tag 
   </rich:simpleTogglePanel>    
</ui:composition>

<rich: tabPanel>

Cette balise aide les développeurs à créer différents onglets dans un panneau. Nous avons utilisé cette balise dans notre chapitre skin, où nous avons créé deux balises distinctes dans un autre panneau. Le code suivant décrira comment nous utilisons <rich: tabPanel>.

<?xml version = '1.0' encoding = 'UTF-8' ?>    
<ui:composition xmlns = "http://www.w3.org/1999/xhtml"   
   xmlns:h = "http://java.sun.com/jsf/html"   
   xmlns:f = "http://java.sun.com/jsf/core"   
   xmlns:ui = "http://java.sun.com/jsf/facelets"   
   xmlns:a4j = "http://richfaces.org/a4j"   
   xmlns:rich = "http://richfaces.org/rich">   
   
   <f:view>   
      <h:head>   
         <title>Rich Faces Tab Example</title>   
      </h:head>   
      
      <h:body>   
         <h:form>   
            <rich:panel style = "width:60%"> 
               
               <rich:tabPanel switchType = "AJAX"> 
                  <rich:tab header = "Name"> 
                     Tutorials Point----This is Tab Number 1 
                  </rich:tab> 
                  
                  <rich:tab header = "Features"> 
                     Best Place to learn -------This is Tab Number 2 
                  </rich:tab> 
               </rich:tabPanel> 
            </rich:panel>  
            
         </h:form>   
      </h:body> 
      
   </f:view>   
</ui:composition>

Dans cet exemple, nous avons créé deux onglets avec des en-têtes différents appelés «Nom» et «Fonctionnalités». Ces deux balises seront créées à l'intérieur du <rich: panel>. Le code ci-dessus donnera la sortie suivante.

<rich: panelBar>

Comme simpleToggleBar, il permet aux développeurs d'implémenter le basculement vertical en fonction d'un événement JS. Cette balise est également supprimée dans RichFaces 4. Cependant, vous pouvez l'utiliser comme indiqué ci-dessous si vous utilisez RichFaces 3.0. .

<ui:composition xmlns = "http://www.w3.org/1999/xhtml" 
   xmlns:ui = "http://java.sun.com/jsf/facelets" 
   xmlns:h = "http://java.sun.com/jsf/html" 
   xmlns:f = "http://java.sun.com/jsf/core" 
   xmlns:a4j = "http://richfaces.org/a4j" 
   xmlns:rich = "http://richfaces.org/rich">  
   
   <rich:panelBar height = "400" width = "500"> 
      <rich:panelBarItem   label = "Toggle1”> 
         First vertical toggle 
      </rich:panelBarItem> 
      
      <rich:panelBarItem  label = ”Toggle2”> 
         Second Vertical Toggle 
      </rich:panelBarItem> 
   </rich:panelBar >
   
</ ui:composition >

Dans RichFaces 4, la même fonctionnalité a été implémentée à l'aide de la balise <rich: PanelMenu>.

<riche: tab>

Nous connaissons déjà cette balise. Dans l'exemple de <rich: tabPanel>, nous avons créé différents onglets avec cette balise. Dans l'exemple suivant, nous avons créé deux balises.

<?xml version = '1.0' encoding = 'UTF-8' ?>    
<ui:composition xmlns = "http://www.w3.org/1999/xhtml"   
   xmlns:h = "http://java.sun.com/jsf/html"   
   xmlns:f = "http://java.sun.com/jsf/core"   
   xmlns:ui = "http://java.sun.com/jsf/facelets"   
   xmlns:a4j = "http://richfaces.org/a4j"   
   xmlns:rich = "http://richfaces.org/rich">   
   
   <f:view>   
      <h:head>   
         <title>Rich Faces Tab Example</title>   
      </h:head>   
      
      <h:body>   
         <h:form>   
            
            <rich:panel style = "width:60%"> 
               <rich:tabPanel switchType = "AJAX"> 
                  <rich:tab header = "Name"> 
                     Tutorials Point----This is Tab Number 1 
                  </rich:tab> 
                  
                  <rich:tab header = "Features"> 
                     Best Place to learn -------This is Tab Number 2 
                  </rich:tab> 
               </rich:tabPanel> 
            </rich:panel> 
            
         </h:form>   
      </h:body> 
      
   </f:view>   
</ui:composition>

Le morceau de code ci-dessus générera la sortie suivante dans le navigateur.

<rich: panelMenu>

Le menu du panneau aide les développeurs à créer un menu déroulant vertical à l'intérieur d'une zone de panneau. L'exemple suivant nous aidera à mieux comprendre cette balise. Créez le fichier «richPanelMenu.xhtml» et placez-y le morceau de code suivant.

<?xml version = "1.0" encoding = "UTF-8"?>  
<!DOCTYPE html> 
<html xmlns = "http://www.w3.org/1999/xhtml"   
   xmlns:h = "http://java.sun.com/jsf/html"   
   xmlns:f = "http://java.sun.com/jsf/core"   
   xmlns:ui = "http://java.sun.com/jsf/facelets"   
   xmlns:a4j = "http://richfaces.org/a4j"   
   xmlns:rich = "http://richfaces.org/rich"> 
   
   <h:head> 
      <title>Panel Menu example</title> 
   </h:head> 
    
   <h:body> 
      <h:form id = "form"> 
         <h:panelGrid columns = "2" columnClasses = "cols,cols" width = "400"> 
            <rich:panelMenu style = "width:200px"> 
               
               <rich:panelMenuGroup label = "Group 1"> 
                  <rich:panelMenuItem label = "Database" action = "#{managedBean.subjectList}"> 
                     <f:param name = "current" value = "DB"/> 
                  </rich:panelMenuItem> 
                  
                  <rich:panelMenuItem label = "Oracle" action = "#{managedBean.subjectList}"> 
                     <f:param name = "current" value = "Oracle"/>  
                  </rich:panelMenuItem> 
                  
                  <rich:panelMenuItem label = "JAVA" action = "#{managedBean.subjectList}"> 
                     <f:param name = "current" value = "JAVA"/> 
                  </rich:panelMenuItem> 
               </rich:panelMenuGroup>
               
            </rich:panelMenu> 
         </h:panelGrid> 
      </h:form> 
   </h:body>
   
</html>

Comme vu dans l'exemple ci-dessus, panelMenu est livré avec d'autres balises associées qui aident d'une manière différente. <panelGrid> permet de créer une grille à l'intérieur du panneau. <panelMenuGroup> permet de regrouper les différents composants que nous allons remplir. <panelMenuItem> est l'élément réel qui sera rendu dans le navigateur. En utilisant l'attribut «action», vous pouvez appeler différentes méthodes d'action en fonction de l'élément sélectionné. L'attribut «label» est utilisé pour remplir la valeur dans le front-end et la valeur rendue sera traitée vers le back-end une fois que la classe d'action spécifiée est appelée.

Le morceau de code ci-dessus donnera la sortie suivante dans le navigateur.

<rich: TogglePanel>

Cette balise est utilisée pour rendre différentes sorties qui peuvent être commutées ou basculées à l'aide de la méthode de contrôle Toggle. Cette méthode de contrôle à bascule peut être implémentée ou personnalisée. Dans l'exemple suivant, nous implémenterons cette méthode.

Créez un fichier xhtml et nommez-le «richTogglePanel.xhtml». Placez le code suivant à l'intérieur.

<?xml version = "1.0" encoding = "UTF-8"?> 
<!DOCTYPE html> 
<html xmlns = "http://www.w3.org/1999/xhtml"   
   xmlns:h = "http://java.sun.com/jsf/html"   
   xmlns:f = "http://java.sun.com/jsf/core"   
   xmlns:ui = "http://java.sun.com/jsf/facelets"   
   xmlns:a4j = "http://richfaces.org/a4j"   
   xmlns:rich = "http://richfaces.org/rich"> 
   
   <h:head> 
      <title>Rich Toggle Panel Example</title> 
      <meta name = "viewport" content = "width = device-width, initial-scale = 1.0"/> 
   </h:head> 
   
   <h:body> 
      <h:form id = "form"> 
         <rich:togglePanel id = "panel1" activeItem = "item1" 
            itemChangeListener = "#{panelMenuBean.updateCurrent}"> 
            
            <rich:togglePanelItem name = "item1"> 
               <p>Content of the toggle 1</p> 
            </rich0:togglePanelItem> 
            
            <rich:togglePanelItem name = "item2"> 
                <p>Content of the toggle 2</p> 
            </rich:togglePanelItem> 
         </rich:togglePanel> 
            
         <a4j:outputPanel id = "tabs" layout = "block"> 
            <a4j:outputPanel layout = "block" styleClass = "tabDiv"> 
               <rich:toggleControl event = "click" targetPanel = "panel1" targetItem = "item1" /> 
               <a4j:commandButton value = "Toggle1"/> 
            </a4j:outputPanel> 
            
            <a4j:outputPanel layout = "block" styleClass = "tabDiv"> 
               <rich:toggleControl event = "click" targetPanel = "panel1" targetItem = "item2" /> 
               <a4j:commandButton value = "Toggle2"/> 
            </a4j:outputPanel> 
         </a4j:outputPanel>
         
      </h:form> 
   </h:body>
   
</html>

Nous devons également créer une classe de bean pour contrôler la transition du site Web. Créez la classe «MenuBean.java» comme suit.

import javax.faces.bean.ManagedBean; 
import javax.faces.bean.ViewScoped; 
import org.richfaces.event.ItemChangeEvent; 
  
@ManagedBean 
@ViewScoped 

public class MenuBean { 
   private String current; 
   private boolean singleMode; 
  
   public boolean isSingleMode() { 
      return singleMode; 
   } 
   public void setSingleMode(boolean singleMode) { 
      this.singleMode = singleMode; 
   } 
   public String getCurrent() { 
      return this.current; 
   } 
   public void setCurrent(String current) { 
      this.current = current; 
   } 
   public void updateCurrent(ItemChangeEvent event) { 
      setCurrent(event.getNewItemName()); 
   }
}

Le code ci-dessus donnera la sortie suivante dans le navigateur.

Dans l'exemple ci-dessus, le contenu de la page Web sera modifié en fonction du bouton cliqué par l'utilisateur. «UpdateCurrent ()» est la méthode qui gère le contenu de l'événement JS et définit le contenu du site Web en déplacement.

<rich: toolBar>

toolBar est utilisé pour créer une barre horizontale dans le panneau. Il est utilisé pour créer un menu de niveau supérieur dans la page Web. Dans l'exemple suivant, nous allons apprendre à utiliser cette balise dans la page Web. Créez un fichier «xhtml» et nommez-le «toolbar.xhml». Placez-y le code suivant.

<?xml version = "1.0" encoding = "UTF-8"?> 
<!DOCTYPE html> 
<html xmlns = "http://www.w3.org/1999/xhtml"   
   xmlns:h = "http://java.sun.com/jsf/html"   
   xmlns:f = "http://java.sun.com/jsf/core"   
   xmlns:ui = "http://java.sun.com/jsf/facelets"   
   xmlns:a4j = "http://richfaces.org/a4j"   
   xmlns:rich = "http://richfaces.org/rich"> 
   
   <h:head> 
      <title>ToolBar Example</title> 
   </h:head> 
   
   <h:body> 
      <rich:panel> 
         <rich:toolbar height = "26" itemSeparator = "grid"> 
            <rich:toolbarGroup location = "left"> 
               <h:commandButton styleClass = "barsearchbutton" 
                  onclick = "return false;" value = "TAB" /> 
            </rich:toolbarGroup> 
            
            <rich:toolbarGroup location = "left"> 
               <h:commandButton styleClass = "barsearchbutton" 
                  onclick = "return false;" value = "TAB2" /> 
            </rich:toolbarGroup> 
            
            <rich:toolbarGroup location = "left"> 
               <h:commandButton styleClass = "barsearchbutton" 
                  onclick = "return false;" value = "TAB3" /> 
            </rich:toolbarGroup> 
         </rich:toolbar>
 
      </rich:panel> 
   </h:body>
   
</html>

Le code ci-dessus donnera la sortie suivante dans le navigateur.

Dans l'exemple ci-dessus, la balise <toolbarGroup> est utilisée pour regrouper différents types d'outils identiques. N'importe quel nombre de groupes peut être créé. Emplacement fournit la position de la page Web, où le bouton sera placé.

<riche: séparateur>

Comme son nom l'indique, il est utilisé pour séparer différents composants de la page Web. Cette balise a été supprimée dans RichFaces 4, cependant, si vous utilisez toujours RichFaces 3, vous pouvez utiliser la balise suivante.

<rich:separator lineType = "beveled" height = "8" width = "75%" align = "center"/>
<p>Here is more examples of different line types:</p> 

<rich:separator height = "2" lineType = "dotted"/><br/> 
<rich:separator height = "2" lineType = "dashed"/><br/> 
<rich:separator height = "4" lineType = "double"/><br/>
<rich:separator height = "2" lineType = "solid"/><br/>

Dans l'exemple ci-dessus, LineType est l'attribut qui nous aide à déterminer le type de séparateur que nous voulons utiliser. Tous ces noms de séparateurs sont à peu près de nature auto-descriptive.

<riche: Spacer>

Spacer est une balise auto-décrite qui aide le développeur à fournir un espace entre deux composants. Cette balise est également supprimée dans RichFaces4 avec d'autres balises, cependant, vous pouvez utiliser le code suivant si vous utilisez RichFaces 3.

<rich:spacer width = "1" height = "5" title = "Here is a spacer..."/>

<rich: modalPanel>

Le panneau modal est utilisé pour afficher une fenêtre contextuelle lors de vos déplacements. Dans RichFaces 4, la balise de panneau modal a été remplacée parpopupPanel. Dans l'exemple suivant, nous verrons comment cela fonctionne. Créez un fichier xhtml et nommez-le «PopingUp.xhtml». Placez-y le code suivant.

<?xml version = "1.0" encoding = "UTF-8"?>  
<!DOCTYPE html> 
<html xmlns = "http://www.w3.org/1999/xhtml"   
   xmlns:h = "http://java.sun.com/jsf/html"   
   xmlns:f = "http://java.sun.com/jsf/core"   
   xmlns:ui = "http://java.sun.com/jsf/facelets"   
   xmlns:a4j = "http://richfaces.org/a4j"   
   xmlns:rich = "http://richfaces.org/rich"> 
   
   <h:head> 
      <title>ModalPanel and popupPanel</title> 
   </h:head> 
    
   <h:body> 
      <h:form> 
         <h:commandButton value = "Click ME">  
            <rich:componentControl target = "popup" operation = "show" /> 
         </h:commandButton> 
         
         <rich:popupPanel id = "popup" modal = "true" autosized = "false" 
            resizeable = "false"> 
            
            Hey !!!
            How are you? 
         </rich:popupPanel> 
      </h:form>   
   </h:body>
   
</html>

L'exemple ci-dessus générera la sortie suivante lorsque le bouton «ClickMe» est cliqué.

ja/tutorial
es/tutorial
de/tutorial
fr/tutorial
th/tutorial
pt/tutorial
ru/tutorial
vi/tutorial
it/tutorial
ko/tutorial
tr/tutorial
id/tutorial
pl/tutorial
hi/tutorial
japost
espost
depost
frpost
thpost
ptpost
rupost
vipost
itpost
kopost
trpost
idpost
plpost
hipost

© Copyright 2021 - 2024 | All Rights Reserved