RichFaces - Komponen Output

Pada bab sebelumnya, kita telah mempelajari tentang field input atau tag berbeda yang membantu pengguna memberikan input melalui browser. Dalam bab ini, kita akan belajar tentang berbagai komponen keluaran yang disediakan oleh RichFaces.

<rich: Panel>

Dalam beberapa contoh kami sebelumnya, kami telah menemukan tag panel. <rich: panel> membuat area persegi panjang di dalam halaman web, yang mungkin berisi informasi apa pun. Anda dapat menyertakan panel lain, gambar, dan komponen kaya lainnya di dalam satu panel.

Pada contoh berikut, kami akan membuat panel kustom sesuai pilihan dan kami akan memberikan header ke panel kami menggunakan atribut "header". Harap buat file xhtml dan beri nama "richPanelExamlple.xhtml". Tempatkan kode berikut di dalamnya.

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

Potongan kode di atas akan menghasilkan keluaran berikut di browser.

<rich: simpleTogglePanel>

SimpleTogglePanel memberikan kesempatan kepada pengembang untuk mengubah isi panel secara dinamis. Namun, di RichFaces 4, tag ini telah disembunyikan. JBoss telah memperkenalkan tag lanjutan seperti <rich: togglePanel>, <rich: tab>, dan <rich: tabPanel>. Direkomendasikan untuk menggunakan versi terbaru dari tag RichFaces untuk lebih banyak fitur dan fungsionalitas. Jika Anda masih menggunakan RichFaces 3, Anda dapat menggunakan tag berikut.

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

Tag ini membantu pengembang membuat tab berbeda di dalam panel. Kami telah menggunakan tag ini di bab kulit kami, di mana kami telah membuat dua tag terpisah di dalam panel lain. Kode berikut akan menjelaskan bagaimana kita menggunakan <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>

Dalam contoh ini, kami telah membuat dua tab dengan header berbeda yang disebut "Nama" dan "Fitur". Kedua tag ini akan dibuat di dalam <rich: panel>. Kode di atas akan menghasilkan keluaran sebagai berikut.

<rich: panelBar>

Seperti simpleToggleBar, ini memungkinkan pengembang untuk mengimplementasikan toggling vertikal tergantung pada beberapa event JS. Tag ini juga disembunyikan di RichFaces 4. Namun, Anda dapat menggunakannya seperti yang ditunjukkan di bawah ini jika Anda menggunakan 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 >

Di RichFaces 4, fungsionalitas yang sama telah diimplementasikan menggunakan tag <rich: PanelMenu>.

<rich: tab>

Kami sudah familiar dengan tag ini. Dalam contoh <rich: tabPanel>, kami telah membuat tab yang berbeda dengan tag ini. Dalam contoh berikut, kami telah membuat dua 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>

Potongan kode di atas akan menghasilkan keluaran berikut di browser.

<rich: panelMenu>

Panel Menu membantu pengembang membuat sakelar tarik-turun vertikal di dalam area panel. Contoh berikut akan membantu kami memahami tag ini dengan lebih baik. Buat file "richPanelMenu.xhtml" dan tempatkan potongan kode berikut di dalamnya.

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

Seperti yang terlihat pada contoh di atas, panelMenu hadir dengan beberapa tag terkait lainnya yang membantu dengan cara berbeda. <panelGrid> membantu membuat kisi di dalam panel. <panelMenuGroup> membantu mengelompokkan berbagai komponen yang akan kita isi. <panelMenuItem> adalah item sebenarnya yang akan dirender ke browser. Dengan menggunakan atribut "tindakan", Anda dapat memanggil metode tindakan yang berbeda bergantung pada item yang dipilih. Atribut "label" digunakan untuk mengisi nilai di front-end dan nilai yang diberikan akan diproses ke back-end setelah kelas tindakan yang ditentukan dipanggil.

Potongan kode di atas akan menghasilkan keluaran berikut di browser.

<rich: TogglePanel>

Tag ini digunakan untuk membuat keluaran berbeda yang dapat dialihkan atau diubah menggunakan metode kontrol Toggle. Metode kontrol sakelar ini dapat diterapkan atau disesuaikan. Dalam contoh berikut, kami akan menerapkan metode ini.

Buat file xhtml dan beri nama “richTogglePanel.xhtml”. Tempatkan kode berikut di dalamnya.

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

Kita juga perlu membuat kelas kacang untuk mengontrol transisi situs web. Buat kelas "MenuBean.java" seperti berikut.

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

Kode di atas akan menghasilkan keluaran berikut di browser.

Dalam contoh di atas, konten halaman web akan diubah tergantung pada tombol yang diklik oleh pengguna. "UpdateCurrent ()" adalah metode yang menangani konten peristiwa JS dan menyetel konten situs web saat dalam perjalanan.

<rich: toolBar>

toolBar digunakan untuk membuat bar horizontal di panel. Ini digunakan untuk membuat menu tingkat atas di halaman web. Pada contoh berikut, kita akan belajar bagaimana menggunakan tag ini di halaman web. Buat file "xhtml" dan beri nama sebagai "toolbar.xhml". Tempatkan kode berikut di dalamnya.

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

Kode di atas akan menghasilkan keluaran berikut di browser.

Pada contoh di atas, tag <toolbarGroup> digunakan untuk mengelompokkan berbagai jenis alat yang sama. Sejumlah grup dapat dibuat. Lokasi memberikan posisi halaman web, tempat tombol akan ditempatkan.

<rich: separator>

Seperti namanya, ini digunakan untuk memisahkan berbagai komponen di halaman web. Tag ini telah disembunyikan di RichFaces 4, namun, jika Anda masih menggunakan RichFaces 3, Anda dapat menggunakan tag berikut.

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

Dalam contoh di atas, LineType adalah atribut yang membantu kita menentukan jenis pemisah yang ingin kita gunakan. Semua nama pemisah ini cukup deskriptif.

<rich: Spacer>

Spacer adalah tag yang dideskripsikan sendiri yang membantu pengembang menyediakan ruang di antara dua komponen. Tag ini juga disembunyikan di RichFaces4 bersama dengan tag lainnya, namun, Anda dapat menggunakan kode berikut jika Anda menggunakan RichFaces 3.

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

<rich: modalPanel>

Modal Panel digunakan untuk menampilkan pop-up saat dalam perjalanan. Di RichFaces 4, tag panel modal telah diubah menjadipopupPanel. Pada contoh berikut, kita akan melihat cara kerjanya. Buat file xhtml dan beri nama sebagai "PopingUp.xhtml". Tempatkan kode berikut ke dalamnya.

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

Contoh di atas akan menghasilkan output berikut ketika tombol "ClickMe" diklik.

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