RichFaces - componentes de saída

No capítulo anterior, aprendemos sobre diferentes campos de entrada ou tags que ajudam o usuário a fornecer as entradas por meio do navegador. Neste capítulo, aprenderemos sobre os diferentes componentes de saída fornecidos pelo RichFaces.

<rich: Panel>

Em alguns de nossos exemplos anteriores, já encontramos a tag do painel. <rich: panel> cria uma área retangular dentro da página da web, que pode conter qualquer informação. Você pode incluir outros painéis, imagens e quaisquer outros componentes ricos dentro de um painel.

No exemplo a seguir, criaremos um painel personalizado de acordo com a escolha e forneceremos um cabeçalho para nosso painel usando o atributo “cabeçalho”. Crie um arquivo xhtml e nomeie-o como “richPanelExamlple.xhtml”. Coloque o seguinte código dentro dele.

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

O trecho de código acima produzirá a seguinte saída no navegador.

<rich: simpleTogglePanel>

O simpleTogglePanel fornece uma oportunidade para os desenvolvedores alterarem o conteúdo do painel de uma forma dinâmica. No entanto, no RichFaces 4, essa tag foi suprimida. O JBoss introduziu tags avançadas como <rich: togglePanel>, <rich: tab> e <rich: tabPanel>. Recomenda-se usar a versão atualizada das tags RichFaces para obter mais recursos e funcionalidades. Se você ainda estiver usando RichFaces 3, poderá usar a seguinte 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>

Esta tag ajuda os desenvolvedores a criar diferentes guias dentro de um painel. Usamos essa tag em nosso capítulo de skin, onde criamos duas tags separadas dentro de outro painel. O código a seguir descreverá como usamos <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>

Neste exemplo, criamos duas guias com cabeçalhos diferentes chamados “Nome” e “Recursos”. Essas duas tags serão criadas dentro do <rich: panel>. O código acima produzirá a seguinte saída.

<rich: panelBar>

Como o simpleToggleBar, ele permite que os desenvolvedores implementem alternância vertical dependendo de algum evento JS. Essa tag também é suprimida no RichFaces 4. No entanto, você pode usá-la conforme mostrado abaixo se estiver usando 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 >

No RichFaces 4, a mesma funcionalidade foi implementada usando a tag <rich: PanelMenu>.

<rich: tab>

Já estamos familiarizados com esta tag. No exemplo de <rich: tabPanel>, criamos diferentes guias com esta tag. No exemplo a seguir, criamos duas tags.

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

O trecho de código acima irá gerar a seguinte saída no navegador.

<rich: panelMenu>

Menu do painel ajuda os desenvolvedores a criar um botão suspenso vertical dentro de uma área do painel. O exemplo a seguir nos ajudará a entender melhor essa tag. Crie o arquivo “richPanelMenu.xhtml” e coloque o seguinte trecho de código dentro dele.

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

Como visto no exemplo acima, o panelMenu vem com algumas outras tags associadas que ajudam de uma maneira diferente. <panelGrid> ajuda a criar uma grade dentro do painel. <panelMenuGroup> ajuda a agrupar os diferentes componentes que iremos preencher. <panelMenuItem> é o item real que será renderizado para o navegador. Usando o atributo “action”, você pode chamar diferentes métodos de ação dependendo do item selecionado. O atributo “rótulo” é usado para preencher o valor no front-end e o valor renderizado será processado no back-end assim que a classe de ação especificada for chamada.

O trecho de código acima produzirá a seguinte saída no navegador.

<rich: TogglePanel>

Esta tag é usada para renderizar diferentes saídas que podem ser alternadas ou alternadas usando o método de controle Toggle. Este método de controle de alternância pode ser implementado ou personalizado. No exemplo a seguir, implementaremos esse método.

Crie um arquivo xhtml e nomeie-o como “richTogglePanel.xhtml”. Coloque o seguinte código dentro dele.

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

Também precisamos criar uma classe de bean para controlar a transição do site. Crie a classe “MenuBean.java” como a seguir.

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

O código acima produzirá a seguinte saída no navegador.

No exemplo acima, o conteúdo da página da Web será alterado dependendo do botão clicado pelo usuário. “UpdateCurrent ()” é o método que lida com o conteúdo do evento JS e define o conteúdo do site em movimento.

<rich: toolBar>

ToolBar é usado para criar uma barra horizontal no painel. Ele é usado para criar o menu de nível superior na página da web. No exemplo a seguir, aprenderemos como usar essa tag na página da web. Crie um arquivo “xhtml” e nomeie-o como “toolbar.xhml”. Coloque o seguinte código nele.

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

O código acima produzirá a seguinte saída no navegador.

No exemplo acima, a tag <toolbarGroup> é usada para agrupar diferentes tipos de ferramentas iguais. Qualquer número de grupos pode ser criado. Localização fornece a posição da página da web, onde o botão será colocado.

<rich: separator>

Como o nome sugere, ele é usado para separar diferentes componentes na página da web. Essa tag foi suprimida no RichFaces 4, no entanto, se você ainda estiver usando RichFaces 3, poderá usar a tag a seguir.

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

No exemplo acima, LineType é o atributo que nos ajuda a determinar o tipo de separador que desejamos usar. Todos esses nomes de separadores são basicamente autodescritivos por natureza.

<rich: Spacer>

Spacer é uma tag autodescrita que ajuda o desenvolvedor a fornecer um espaço entre dois componentes. Essa tag também é suprimida em RichFaces4 junto com outras tags; no entanto, você pode usar o código a seguir se estiver usando RichFaces 3.

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

<rich: modalPanel>

O painel modal é usado para mostrar um pop-up em movimento. No RichFaces 4, a tag do painel modal foi alterada parapopupPanel. No exemplo a seguir, veremos como funciona. Crie um arquivo xhtml e nomeie-o como “PopingUp.xhtml”. Coloque o código a seguir nele.

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

O exemplo acima irá gerar a seguinte saída quando o botão “ClickMe” for clicado.

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