RichFaces - Ausgabekomponenten

Im vorherigen Kapitel haben wir verschiedene Eingabefelder oder Tags kennengelernt, mit denen der Benutzer die Eingaben über den Browser bereitstellen kann. In diesem Kapitel lernen wir verschiedene Ausgabekomponenten kennen, die von RichFaces bereitgestellt werden.

<rich: Panel>

In einigen unserer vorherigen Beispiele sind wir bereits auf das Panel-Tag gestoßen. <rich: panel> erstellt einen rechteckigen Bereich innerhalb der Webseite, der beliebige Informationen enthalten kann. Sie können andere Bedienfelder, Bilder und andere umfangreiche Komponenten in ein Bedienfeld aufnehmen.

Im folgenden Beispiel erstellen wir ein benutzerdefiniertes Bedienfeld nach Auswahl und stellen unserem Bedienfeld mithilfe des Attributs "Kopfzeile" eine Kopfzeile zur Verfügung. Bitte erstellen Sie eine xhtml-Datei und nennen Sie sie "richPanelExamlple.xhtml". Fügen Sie den folgenden Code ein.

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

Der obige Code liefert die folgende Ausgabe im Browser.

<rich: simpleTogglePanel>

Das simpleTogglePanel bietet den Entwicklern die Möglichkeit, die Inhalte des Panels dynamisch zu ändern. In RichFaces 4 wurde dieses Tag jedoch unterdrückt. JBoss hat erweiterte Tags wie <rich: togglePanel>, <rich: tab> und <rich: tabPanel> eingeführt. Es wird empfohlen, die aktualisierte Version der RichFaces-Tags für weitere Features und Funktionen zu verwenden. Wenn Sie weiterhin RichFaces 3 verwenden, können Sie das folgende Tag verwenden.

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

Dieses Tag hilft den Entwicklern, verschiedene Registerkarten in einem Panel zu erstellen. Wir haben dieses Tag in unserem Skin-Kapitel verwendet, in dem wir zwei separate Tags in einem anderen Bereich erstellt haben. Der folgende Code beschreibt, wie wir <rich: tabPanel> verwenden.

<?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 diesem Beispiel haben wir zwei Registerkarten mit unterschiedlichen Überschriften erstellt, die als "Name" und "Features" bezeichnet werden. Diese beiden Tags werden im <rich: panel> erstellt. Der obige Code liefert die folgende Ausgabe.

<rich: panelBar>

Wie bei simpleToggleBar können die Entwickler abhängig von einem JS-Ereignis vertikales Umschalten implementieren. Dieses Tag wird auch in RichFaces 4 unterdrückt. Sie können es jedoch wie unten gezeigt verwenden, wenn Sie RichFaces 3.0 verwenden. .

<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 wurde dieselbe Funktionalität mithilfe des Tags <rich: PanelMenu> implementiert.

<rich: tab>

Wir kennen diesen Tag bereits. Im Beispiel von <rich: tabPanel> haben wir mit diesem Tag verschiedene Registerkarten erstellt. Im folgenden Beispiel haben wir zwei Tags erstellt.

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

Der obige Code generiert die folgende Ausgabe im Browser.

<rich: panelMenu>

Das Bedienfeldmenü hilft den Entwicklern beim Erstellen eines vertikalen Dropdown-Schalters innerhalb eines Bedienfeldbereichs. Das folgende Beispiel hilft uns, dieses Tag besser zu verstehen. Erstellen Sie die Datei "richPanelMenu.xhtml" und platzieren Sie den folgenden Code darin.

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

Wie im obigen Beispiel zu sehen ist, enthält panelMenu einige andere zugehörige Tags, die auf andere Weise hilfreich sind. Mit <panelGrid> können Sie ein Raster innerhalb des Bedienfelds erstellen. Mit <panelMenuGroup> können Sie die verschiedenen Komponenten gruppieren, die gefüllt werden sollen. <panelMenuItem> ist das eigentliche Element, das im Browser gerendert wird. Mit dem Attribut "Aktion" können Sie je nach ausgewähltem Element verschiedene Aktionsmethoden aufrufen. Das Attribut "label" wird verwendet, um den Wert im Front-End zu füllen, und der gerenderte Wert wird nach dem Aufruf der angegebenen Aktionsklasse im Back-End verarbeitet.

Der obige Code liefert die folgende Ausgabe im Browser.

<rich: TogglePanel>

Dieses Tag wird verwendet, um verschiedene Ausgänge zu rendern, die mit der Toggle-Steuermethode umgeschaltet oder umgeschaltet werden können. Diese Umschaltsteuerungsmethode kann implementiert oder angepasst werden. Im folgenden Beispiel werden wir diese Methode implementieren.

Erstellen Sie eine XHTML-Datei und nennen Sie sie "richTogglePanel.xhtml". Fügen Sie den folgenden Code ein.

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

Wir müssen auch eine Bean-Klasse erstellen, um den Übergang der Website zu steuern. Erstellen Sie die Klasse "MenuBean.java" wie folgt.

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

Der obige Code liefert die folgende Ausgabe im Browser.

Im obigen Beispiel wird der Inhalt der Webseite abhängig von der vom Benutzer angeklickten Schaltfläche geändert. "UpdateCurrent ()" ist die Methode, die den Inhalt von JS-Ereignissen verarbeitet und den Inhalt der Website unterwegs festlegt.

<rich: toolBar>

Mit der Symbolleiste wird eine horizontale Leiste im Bedienfeld erstellt. Es wird verwendet, um ein Menü der obersten Ebene auf der Webseite zu erstellen. Im folgenden Beispiel erfahren Sie, wie Sie dieses Tag auf der Webseite verwenden. Erstellen Sie eine "xhtml" -Datei und nennen Sie sie "toolbar.xhml". Fügen Sie den folgenden Code ein.

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

Der obige Code liefert die folgende Ausgabe im Browser.

Im obigen Beispiel wird das Tag <toolbarGroup> verwendet, um verschiedene Werkzeugtypen zu gruppieren. Es können beliebig viele Gruppen erstellt werden. Die Position gibt die Position der Webseite an, an der die Schaltfläche platziert wird.

<rich: separator>

Wie der Name schon sagt, werden damit verschiedene Komponenten auf der Webseite getrennt. Dieses Tag wurde in RichFaces 4 unterdrückt. Wenn Sie jedoch weiterhin RichFaces 3 verwenden, können Sie das folgende Tag verwenden.

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

Im obigen Beispiel ist LineType das Attribut, mit dem wir den Typ des Trennzeichens bestimmen können, das wir verwenden möchten. Alle diese Trennzeichen sind von Natur aus selbsterklärend.

<rich: Spacer>

Spacer ist ein selbst beschriebenes Tag, mit dem der Entwickler einen Abstand zwischen zwei Komponenten bereitstellen kann. Dieses Tag wird auch in RichFaces4 zusammen mit anderen Tags unterdrückt. Sie können jedoch den folgenden Code verwenden, wenn Sie RichFaces 3 verwenden.

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

<rich: modalPanel>

Das Modal Panel wird verwendet, um unterwegs ein Popup anzuzeigen. In RichFaces 4 wurde das modale Bedienfeld-Tag in geändertpopupPanel. Im folgenden Beispiel werden wir sehen, wie es funktioniert. Erstellen Sie eine xhtml-Datei und nennen Sie sie "PopingUp.xhtml". Fügen Sie den folgenden Code ein.

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

Das obige Beispiel generiert die folgende Ausgabe, wenn auf die Schaltfläche "ClickMe" geklickt wird.

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