RichFaces - Componenti di output

Nel capitolo precedente, abbiamo imparato a conoscere diversi campi o tag di input che aiutano l'utente a fornire gli input tramite il browser. In questo capitolo apprenderemo i diversi componenti di output forniti da RichFaces.

<rich: Panel>

In alcuni dei nostri esempi precedenti, abbiamo già trovato il tag del pannello. <rich: panel> crea un'area rettangolare all'interno della pagina web, che può contenere qualsiasi informazione. Puoi includere altri pannelli, immagini e qualsiasi altro componente avanzato all'interno di un pannello.

Nel seguente esempio, creeremo un pannello personalizzato in base alla scelta e forniremo un'intestazione al nostro pannello utilizzando l'attributo "header". Crea un file xhtml e chiamalo "richPanelExamlple.xhtml". Inserisci il codice seguente al suo interno.

<?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>

La parte di codice precedente produrrà il seguente output nel browser.

<rich: simpleTogglePanel>

Il simpleTogglePanel offre agli sviluppatori l'opportunità di modificare i contenuti del pannello in modo dinamico. Tuttavia, in RichFaces 4, questo tag è stato soppresso. JBoss ha introdotto tag avanzati come <rich: togglePanel>, <rich: tab> e <rich: tabPanel>. Si consiglia di utilizzare la versione aggiornata dei tag RichFaces per ulteriori caratteristiche e funzionalità. Se stai ancora utilizzando RichFaces 3, puoi utilizzare il seguente tag.

<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>

Questo tag aiuta gli sviluppatori a creare diverse schede all'interno di un pannello. Abbiamo usato questo tag nel nostro capitolo skin, dove abbiamo creato due tag separati all'interno di un altro pannello. Il codice seguente descriverà come utilizziamo <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>

In questo esempio, abbiamo creato due schede con intestazioni diverse chiamate "Nome" e "Caratteristiche". Questi due tag verranno creati all'interno del <rich: panel>. Il codice precedente produrrà il seguente output.

<rich: panelBar>

Come simpleToggleBar, consente agli sviluppatori di implementare la commutazione verticale a seconda di alcuni eventi JS. Questo tag è soppresso anche in RichFaces 4. Tuttavia, è possibile utilizzarlo come mostrato di seguito se si utilizza 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 >

In RichFaces 4, la stessa funzionalità è stata implementata utilizzando il tag <rich: PanelMenu>.

<rich: tab>

Conosciamo già questo tag. Nell'esempio di <rich: tabPanel>, abbiamo creato diverse schede con questo tag. Nell'esempio seguente, abbiamo creato due tag.

<?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>

La parte di codice precedente genererà il seguente output nel browser.

<rich: panelMenu>

Il menu del pannello aiuta gli sviluppatori a creare un menu a discesa verticale all'interno di un'area del pannello. Il seguente esempio ci aiuterà a capire meglio questo tag. Crea il file "richPanelMenu.xhtml" e inserisci la seguente parte di codice al suo interno.

<?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>

Come visto nell'esempio sopra, panelMenu viene fornito con alcuni altri tag associati che aiutano in un modo diverso. <panelGrid> aiuta a creare una griglia all'interno del pannello. <panelMenuGroup> aiuta a raggruppare i diversi componenti che andremo a popolare. <panelMenuItem> è l'elemento effettivo che verrà visualizzato nel browser. Utilizzando l'attributo "azione", puoi chiamare diversi metodi di azione a seconda dell'elemento selezionato. L'attributo "label" viene utilizzato per popolare il valore nel front-end e il valore visualizzato verrà elaborato nel back-end una volta chiamata la classe di azione specificata.

La parte di codice precedente produrrà il seguente output nel browser.

<rich: TogglePanel>

Questo tag viene utilizzato per eseguire il rendering di diversi output che possono essere commutati o attivati ​​utilizzando il metodo di controllo Toggle. Questo metodo di controllo a levetta può essere implementato o personalizzato. Nell'esempio seguente, implementeremo questo metodo.

Crea un file xhtml e chiamalo "richTogglePanel.xhtml". Inserisci il codice seguente al suo interno.

<?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>

Abbiamo anche bisogno di creare una classe bean per controllare la transizione del sito web. Crea la classe "MenuBean.java" come segue.

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()); 
   }
}

Il codice precedente produrrà il seguente output nel browser.

Nell'esempio sopra, il contenuto della pagina web verrà modificato a seconda del pulsante cliccato dall'utente. "UpdateCurrent ()" è il metodo che gestisce il contenuto dell'evento JS e imposta il contenuto del sito web in movimento.

<rich: toolBar>

toolBar viene utilizzata per creare una barra orizzontale nel pannello. Viene utilizzato per creare menu di primo livello nella pagina web. Nel seguente esempio impareremo come utilizzare questo tag nella pagina web. Crea un file "xhtml" e chiamalo "toolbar.xhml". Inserisci il seguente codice in esso.

<?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>

Il codice precedente produrrà il seguente output nel browser.

Nell'esempio precedente, il tag <toolbarGroup> viene utilizzato per raggruppare diversi stessi tipi di strumenti. È possibile creare un numero qualsiasi di gruppi. Posizione fornisce la posizione della pagina web, dove verrà posizionato il pulsante.

<rich: separator>

Come suggerisce il nome, viene utilizzato per separare diversi componenti nella pagina web. Questo tag è stato soppresso in RichFaces 4, tuttavia, se stai ancora utilizzando RichFaces 3, puoi utilizzare il seguente tag.

<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/>

Nell'esempio sopra, LineType è l'attributo che ci aiuta a determinare il tipo di separatore che vogliamo utilizzare. Tutti questi nomi di separatori sono di natura praticamente auto-descrittiva.

<rich: Spacer>

Spacer è un tag auto-descritto che aiuta lo sviluppatore a fornire uno spazio tra due componenti. Questo tag è anche soppresso in RichFaces4 insieme ad altri tag, tuttavia, puoi usare il codice seguente se stai usando RichFaces 3.

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

<rich: modalPanel>

Il pannello modale viene utilizzato per mostrare un popup in movimento. In RichFaces 4, il tag del pannello modale è stato modificato inpopupPanel. Nell'esempio seguente vedremo come funziona. Crea un file xhtml e chiamalo "PopingUp.xhtml". Inserisci il seguente codice in esso.

<?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'esempio precedente genererà il seguente output quando si fa clic sul pulsante "ClickMe".

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