RichFaces - komponenty wyjściowe

W poprzednim rozdziale dowiedzieliśmy się o różnych polach wejściowych lub tagach, które pomagają użytkownikowi wprowadzić dane wejściowe za pośrednictwem przeglądarki. W tym rozdziale poznamy różne komponenty wyjściowe dostarczane przez RichFaces.

<rich: Panel>

W niektórych z naszych poprzednich przykładów już natrafiliśmy na tag panelu. <rich: panel> tworzy prostokątny obszar wewnątrz strony internetowej, który może zawierać dowolne informacje. W jednym panelu można umieścić inne panele, obrazy i inne bogate komponenty.

W poniższym przykładzie utworzymy niestandardowy panel zgodnie z wyborem i dostarczymy nagłówek do naszego panelu za pomocą atrybutu „header”. Utwórz plik xhtml i nazwij go „richPanelExamlple.xhtml”. Umieść w nim następujący kod.

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

Powyższy fragment kodu przyniesie następujące wyniki w przeglądarce.

<rich: simpleTogglePanel>

SimpleTogglePanel daje programistom możliwość dynamicznej zmiany zawartości panelu. Jednak w RichFaces 4 ten tag został pominięty. JBoss wprowadził zaawansowane tagi, takie jak <rich: togglePanel>, <rich: tab> i <rich: tabPanel>. Zaleca się używanie zaktualizowanej wersji tagów RichFaces, aby uzyskać więcej funkcji i funkcji. Jeśli nadal używasz RichFaces 3, możesz użyć następującego tagu.

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

Ten tag pomaga programistom tworzyć różne zakładki w panelu. Użyliśmy tego tagu w naszym rozdziale o skórze, w którym utworzyliśmy dwa oddzielne tagi w innym panelu. Poniższy kod opisuje, jak używamy <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>

W tym przykładzie utworzyliśmy dwie zakładki z różnymi nagłówkami o nazwach „Nazwa” i „Funkcje”. Te dwa tagi zostaną utworzone wewnątrz <rich: panel>. Powyższy kod da następujący wynik.

<rich: panelBar>

Podobnie jak simpleToggleBar, pozwala programistom na zaimplementowanie przełączania pionowego w zależności od jakiegoś zdarzenia JS. Ten tag jest również pomijany w RichFaces 4. Jednak możesz go użyć, jak pokazano poniżej, jeśli używasz 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 >

W RichFaces 4 ta sama funkcjonalność została zaimplementowana za pomocą tagu <rich: PanelMenu>.

<rich: tab>

Znamy już ten tag. W przykładzie <rich: tabPanel> utworzyliśmy różne karty z tym tagiem. W poniższym przykładzie utworzyliśmy dwa tagi.

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

Powyższy fragment kodu wygeneruje następujące dane wyjściowe w przeglądarce.

<rich: panelMenu>

Menu panelu pomaga programistom w tworzeniu pionowego przełącznika rozwijanego w obszarze panelu. Poniższy przykład pomoże nam lepiej zrozumieć ten tag. Utwórz plik „richPanelMenu.xhtml” i umieść w nim następujący fragment kodu.

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

Jak widać na powyższym przykładzie, panelMenu zawiera kilka innych powiązanych tagów, które pomagają w inny sposób. <panelGrid> pomaga utworzyć siatkę wewnątrz panelu. <panelMenuGroup> pomaga grupować różne komponenty, które zamierzamy zapełnić. <panelMenuItem> to rzeczywisty element, który będzie renderowany w przeglądarce. Korzystając z atrybutu „action”, możesz wywołać różne metody działania w zależności od wybranego elementu. Atrybut „label” służy do wypełniania wartości w interfejsie użytkownika, a wyrenderowana wartość zostanie przetworzona na zaplecze po wywołaniu określonej klasy akcji.

Powyższy fragment kodu przyniesie następujące wyniki w przeglądarce.

<rich: TogglePanel>

Ten znacznik służy do renderowania różnych wyjść, które można przełączać lub przełączać za pomocą metody sterowania Toggle. Ta metoda przełączania sterowania może zostać wdrożona lub dostosowana. W poniższym przykładzie zaimplementujemy tę metodę.

Utwórz plik xhtml i nazwij go „richTogglePanel.xhtml”. Umieść w nim następujący kod.

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

Musimy również utworzyć klasę bean, aby kontrolować przenoszenie witryny. Utwórz klasę „MenuBean.java” podobną do poniższej.

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

Powyższy kod przyniesie następujące wyniki w przeglądarce.

W powyższym przykładzie zawartość strony zmieni się w zależności od przycisku klikniętego przez użytkownika. „UpdateCurrent ()” to metoda, która obsługuje zawartość zdarzenia JS i ustawia zawartość witryny w ruchu.

<rich: toolBar>

ToolBar służy do tworzenia poziomego paska w panelu. Służy do tworzenia menu najwyższego poziomu na stronie internetowej. W poniższym przykładzie nauczymy się, jak używać tego tagu na stronie internetowej. Utwórz plik „xhtml” i nazwij go „toolbar.xhml”. Umieść w nim następujący kod.

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

Powyższy kod przyniesie następujące wyniki w przeglądarce.

W powyższym przykładzie tag <toolbarGroup> służy do grupowania różnych typów narzędzi. Można utworzyć dowolną liczbę grup. Lokalizacja określa położenie strony internetowej, na której zostanie umieszczony przycisk.

<rich: separator>

Jak sama nazwa wskazuje, służy do oddzielania różnych komponentów na stronie. Ten tag został pominięty w RichFaces 4, jednak jeśli nadal używasz RichFaces 3, możesz użyć następującego tagu.

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

W powyższym przykładzie LineType jest atrybutem, który pomaga nam określić typ separatora, którego chcemy użyć. Wszystkie te nazwy separatorów mają charakter samoopisowy.

<rich: Spacer>

Spacer to opisywany przez siebie tag, który pomaga deweloperowi zapewnić odstęp między dwoma komponentami. Ten tag jest również pomijany w RichFaces4 wraz z innymi tagami, jednak możesz użyć następującego kodu, jeśli używasz RichFaces 3.

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

<rich: modalPanel>

Panel modalny służy do wyświetlania wyskakujących okienek w podróży. W RichFaces 4 tag panelu modalnego został zmieniony napopupPanel. W poniższym przykładzie zobaczymy, jak to działa. Utwórz plik xhtml i nazwij go „PopingUp.xhtml”. Umieść w nim następujący kod.

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

Powyższy przykład wygeneruje następujący wynik po kliknięciu przycisku „ClickMe”.