RichFaces - Çıktı Bileşenleri

Önceki bölümde, kullanıcının tarayıcı aracılığıyla girişleri sağlamasına yardımcı olan farklı giriş alanları veya etiketleri öğrendik. Bu bölümde, RichFaces tarafından sağlanan farklı çıktı bileşenleri hakkında bilgi edineceğiz.

<zengin: Panel>

Önceki örneklerimizin bazılarında, zaten panel etiketi ile karşılaştık. <rich: panel>, web sayfası içinde herhangi bir bilgi içerebilen dikdörtgen bir alan oluşturur. Diğer panelleri, görüntüleri ve diğer zengin bileşenleri tek bir panelin içine dahil edebilirsiniz.

Aşağıdaki örnekte, tercihe göre özel bir panel oluşturacağız ve panelimize "başlık" özelliğini kullanarak bir başlık sağlayacağız. Lütfen bir xhtml dosyası oluşturun ve "richPanelExamlple.xhtml" olarak adlandırın. Aşağıdaki kodu içine yerleştirin.

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

Yukarıdaki kod parçası tarayıcıda aşağıdaki çıktıyı verecektir.

<rich: simpleTogglePanel>

SimpleTogglePanel, geliştiricilere panelin içeriğini dinamik bir şekilde değiştirme fırsatı sunar. Ancak RichFaces 4'te bu etiket bastırılmıştır. JBoss, <rich: togglePanel>, <rich: tab> ve <rich: tabPanel> gibi gelişmiş etiketler sunmuştur. Daha fazla özellik ve işlev için RichFaces etiketlerinin güncellenmiş sürümünü kullanmanız önerilir. Hala RichFaces 3 kullanıyorsanız, aşağıdaki etiketi kullanabilirsiniz.

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

Bu etiket, geliştiricilerin bir panel içinde farklı sekmeler oluşturmasına yardımcı olur. Bu etiketi, başka bir panelin içinde iki ayrı etiket oluşturduğumuz dış görünüm bölümümüzde kullandık. Aşağıdaki kod, <rich: tabPanel> 'i nasıl kullandığımızı açıklayacaktır.

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

Bu örnekte, "Ad" ve "Özellikler" adlı farklı başlıklara sahip iki sekme oluşturduk. Bu iki etiket <rich: panel> içinde oluşturulacaktır. Yukarıdaki kod aşağıdaki çıktıyı verecektir.

<rich: panelBar>

SimpleToggleBar gibi, geliştiricilerin bazı JS olaylarına bağlı olarak dikey geçiş uygulamasına izin verir. Bu etiket RichFaces 4'te de bastırılmıştır. Bununla birlikte, RichFaces 3.0 kullanıyorsanız, aşağıda gösterildiği gibi kullanabilirsiniz. .

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

RichFaces 4'te, aynı işlevsellik <rich: PanelMenu> etiketi kullanılarak uygulanmıştır.

<rich: tab>

Bu etikete zaten aşinayız. <Rich: tabPanel> örneğinde, bu etiketle farklı sekmeler oluşturduk. Aşağıdaki örnekte iki etiket oluşturduk.

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

Yukarıdaki kod parçası, tarayıcıda aşağıdaki çıktıyı üretecektir.

<rich: panelMenu>

Panel Menüsü, geliştiricilerin bir panel alanı içinde dikey bir açılır geçiş oluşturmasına yardımcı olur. Aşağıdaki örnek, bu etiketi daha iyi anlamamıza yardımcı olacaktır. "RichPanelMenu.xhtml" dosyasını oluşturun ve aşağıdaki kod parçasını içine yerleştirin.

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

Yukarıdaki örnekte görüldüğü gibi, panelMenu, farklı bir şekilde yardımcı olan bazı diğer ilişkili etiketlerle birlikte gelir. <panelGrid>, panelin içinde bir ızgara oluşturmaya yardımcı olur. <panelMenuGroup>, dolduracağımız farklı bileşenleri gruplandırmaya yardımcı olur. <panelMenuItem>, tarayıcıda oluşturulacak asıl öğedir. "İşlem" özelliğini kullanarak, seçilen öğeye bağlı olarak farklı işlem yöntemlerini çağırabilirsiniz. Ön uçtaki değeri doldurmak için "etiket" özelliği kullanılır ve oluşturulan değer, belirtilen eylem sınıfı çağrıldıktan sonra arka uca işlenir.

Yukarıdaki kod parçası tarayıcıda aşağıdaki çıktıyı verecektir.

<rich: TogglePanel>

Bu etiket, Geçiş kontrol yöntemi kullanılarak değiştirilebilen veya değiştirilebilen farklı çıktıları oluşturmak için kullanılır. Bu geçiş kontrol yöntemi uygulanabilir veya özelleştirilebilir. Aşağıdaki örnekte bu yöntemi uygulayacağız.

Bir xhtml dosyası oluşturun ve "richTogglePanel.xhtml" olarak adlandırın. Aşağıdaki kodu içine yerleştirin.

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

Ayrıca web sitesinin geçişini kontrol etmek için bir fasulye sınıfı oluşturmamız gerekiyor. Aşağıdaki gibi “MenuBean.java” sınıfını oluşturun.

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

Yukarıdaki kod, tarayıcıda aşağıdaki çıktıyı verecektir.

Yukarıdaki örnekte, web sayfasının içeriği, kullanıcı tarafından tıklanan düğmeye bağlı olarak değiştirilecektir. "UpdateCurrent ()", JS olay içeriğini işleyen ve hareket halindeyken web sitesi içeriğini ayarlayan yöntemdir.

<rich: toolBar>

toolBar, panelde yatay bir çubuk oluşturmak için kullanılır. Web sayfasında üst düzey menü oluşturmak için kullanılır. Aşağıdaki örnekte, bu etiketi web sayfasında nasıl kullanacağımızı öğreneceğiz. Bir "xhtml" dosyası oluşturun ve "toolbar.xhml" olarak adlandırın. Aşağıdaki kodu içine yerleştirin.

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

Yukarıdaki kod, tarayıcıda aşağıdaki çıktıyı verecektir.

Yukarıdaki örnekte, <toolbarGroup> etiketi farklı aynı türdeki araçları gruplamak için kullanılır. İstenilen sayıda grup oluşturulabilir. Konum, düğmenin yerleştirileceği web sayfasının konumunu sağlar.

<rich: separator>

Adından da anlaşılacağı gibi, web sayfasındaki farklı bileşenleri ayırmak için kullanılır. Bu etiket RichFaces 4'te bastırılmıştır, ancak yine de RichFaces 3 kullanıyorsanız, aşağıdaki etiketi kullanabilirsiniz.

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

Yukarıdaki örnekte, LineType, kullanmak istediğimiz ayırıcı türünü belirlememize yardımcı olan niteliktir. Bu ayırıcı adların tümü, doğası gereği hemen hemen kendi kendini açıklayıcıdır.

<rich: Spacer>

Spacer, geliştiricinin iki bileşen arasında boşluk sağlamasına yardımcı olan, kendi kendini tanımlayan bir etikettir. Bu etiket, diğer etiketlerle birlikte RichFaces4'te de bastırılır, ancak RichFaces 3 kullanıyorsanız aşağıdaki kodu kullanabilirsiniz.

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

<rich: modalPanel>

Modal Panel, hareket halindeyken bir pop-up göstermek için kullanılır. RichFaces 4'te, modal panel etiketi olarak değiştirildipopupPanel. Aşağıdaki örnekte nasıl çalıştığını göreceğiz. Bir xhtml dosyası oluşturun ve bunu "PopingUp.xhtml" olarak adlandırın. Aşağıdaki kodu içine yerleştirin.

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

Yukarıdaki örnek, "ClickMe" düğmesine tıklandığında aşağıdaki çıktıyı üretecektir.

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