RichFaces - ส่วนประกอบเอาต์พุต

ในบทที่แล้วเราได้เรียนรู้เกี่ยวกับช่องป้อนข้อมูลหรือแท็กต่างๆที่ช่วยให้ผู้ใช้ป้อนข้อมูลผ่านเบราว์เซอร์ ในบทนี้เราจะเรียนรู้เกี่ยวกับส่วนประกอบเอาต์พุตต่างๆที่ RichFaces มีให้

<rich: Panel>

ในตัวอย่างก่อนหน้านี้เราได้เจอแท็กแผงแล้ว <rich: panel> สร้างพื้นที่สี่เหลี่ยมภายในเว็บเพจซึ่งอาจมีข้อมูลใด ๆ คุณสามารถรวมพาเนลรูปภาพและส่วนประกอบอื่น ๆ ที่หลากหลายไว้ในแผงเดียว

ในตัวอย่างต่อไปนี้เราจะสร้างแผงที่กำหนดเองตามตัวเลือกและเราจะจัดเตรียมส่วนหัวให้กับแผงควบคุมของเราโดยใช้แอตทริบิวต์ "header" โปรดสร้างไฟล์ xhtml และตั้งชื่อว่า "richPanelExamlple.xhtml" วางรหัสต่อไปนี้ไว้ด้านใน

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

โค้ดด้านบนจะให้ผลลัพธ์ต่อไปนี้ในเบราว์เซอร์

<rich: simpleTogglePanel>

simpleTogglePanel ให้โอกาสแก่นักพัฒนาในการเปลี่ยนส่วนประกอบของแผงควบคุมในรูปแบบไดนามิก อย่างไรก็ตามใน RichFaces 4 แท็กนี้ถูกระงับ JBoss ได้แนะนำแท็กขั้นสูงเช่น <rich: togglePanel>, <rich: tab> และ <rich: tabPanel> ขอแนะนำให้ใช้แท็ก RichFaces เวอร์ชันอัปเดตสำหรับคุณสมบัติและฟังก์ชันเพิ่มเติม หากคุณยังคงใช้ RichFaces 3 คุณสามารถใช้แท็กต่อไปนี้

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

แท็กนี้ช่วยให้นักพัฒนาสร้างแท็บต่างๆภายในแผงควบคุม เราใช้แท็กนี้ในบทสกินของเราซึ่งเราได้สร้างแท็กสองแท็กแยกกันภายในแผงควบคุมอื่น โค้ดต่อไปนี้จะอธิบายวิธีที่เราใช้ <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>

ในตัวอย่างนี้เราได้สร้างแท็บสองแท็บที่มีส่วนหัวต่างกันเรียกว่า "ชื่อ" และ "คุณลักษณะ" แท็กทั้งสองนี้จะถูกสร้างขึ้นภายใน <rich: panel> รหัสด้านบนจะให้ผลลัพธ์ต่อไปนี้

<rich: panelBar>

เช่นเดียวกับ simpleToggleBar จะช่วยให้นักพัฒนาสามารถใช้การสลับแนวตั้งได้โดยขึ้นอยู่กับเหตุการณ์ JS บางอย่าง แท็กนี้ยังถูกระงับใน RichFaces 4 อย่างไรก็ตามคุณสามารถใช้งานได้ดังที่แสดงด้านล่างหากคุณใช้ 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 >

ใน RichFaces 4 มีการใช้งานฟังก์ชันเดียวกันโดยใช้แท็ก <rich: PanelMenu>

<rich: tab>

เราคุ้นเคยกับแท็กนี้แล้ว ในตัวอย่างของ <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>

โค้ดด้านบนจะสร้างผลลัพธ์ต่อไปนี้ในเบราว์เซอร์

<rich: panelMenu>

เมนูแผงช่วยให้นักพัฒนาสร้างรายการแบบเลื่อนลงแนวตั้งสลับภายในพื้นที่แผง ตัวอย่างต่อไปนี้จะช่วยให้เราเข้าใจแท็กนี้ได้ดีขึ้น สร้างไฟล์“ richPanelMenu.xhtml” และวางโค้ดต่อไปนี้ไว้ด้านใน

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

ดังที่เห็นในตัวอย่างข้างต้น panelMenu มาพร้อมกับแท็กอื่น ๆ ที่เกี่ยวข้องซึ่งช่วยในลักษณะที่แตกต่างกัน <panelGrid> ช่วยสร้างเส้นตารางภายในแผงควบคุม <panelMenuGroup> ช่วยจัดกลุ่มส่วนประกอบต่างๆที่เรากำลังจะเติม <panelMenuItem> คือรายการจริงที่จะแสดงไปยังเบราว์เซอร์ เมื่อใช้แอตทริบิวต์ "action" คุณสามารถเรียกใช้วิธีการดำเนินการต่างๆได้ขึ้นอยู่กับรายการที่เลือก แอตทริบิวต์ "label" ใช้เพื่อเติมค่าในส่วนหน้าและค่าที่แสดงผลจะถูกประมวลผลไปยังส่วนหลังเมื่อมีการเรียกคลาสการดำเนินการที่ระบุ

โค้ดด้านบนจะให้ผลลัพธ์ต่อไปนี้ในเบราว์เซอร์

<rich: TogglePanel>

แท็กนี้ใช้เพื่อแสดงผลเอาต์พุตที่แตกต่างกันซึ่งสามารถสลับหรือสลับได้โดยใช้วิธีการควบคุม Toggle วิธีการควบคุมการสลับนี้สามารถนำไปใช้หรือปรับแต่งได้ ในตัวอย่างต่อไปนี้เราจะใช้วิธีนี้

สร้างไฟล์ xhtml และตั้งชื่อเป็น“ richTogglePanel.xhtml” วางรหัสต่อไปนี้ไว้ด้านใน

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

เรายังต้องสร้างคลาส bean เพื่อควบคุมการเปลี่ยนแปลงของเว็บไซต์ สร้างคลาส“ MenuBean.java” ดังต่อไปนี้

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

โค้ดด้านบนจะให้ผลลัพธ์ต่อไปนี้ในเบราว์เซอร์

ในตัวอย่างข้างต้นเนื้อหาของหน้าเว็บจะเปลี่ยนไปตามปุ่มที่ผู้ใช้คลิก “ updateCurrent ()” เป็นวิธีการที่จัดการกับเนื้อหาเหตุการณ์ JS และตั้งค่าเนื้อหาเว็บไซต์ได้ทุกที่ทุกเวลา

<rich: toolBar>

แถบเครื่องมือใช้เพื่อสร้างแถบแนวนอนในแผงควบคุม ใช้เพื่อสร้างเมนูระดับบนสุดในหน้าเว็บ ในตัวอย่างต่อไปนี้เราจะเรียนรู้วิธีใช้แท็กนี้ในหน้าเว็บ สร้างไฟล์“ xhtml” และตั้งชื่อเป็น“ toolbar.xhml” วางรหัสต่อไปนี้ไว้

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

โค้ดด้านบนจะให้ผลลัพธ์ต่อไปนี้ในเบราว์เซอร์

ในตัวอย่างข้างต้นแท็ก <toolbarGroup> ใช้เพื่อจัดกลุ่มเครื่องมือประเภทเดียวกันที่แตกต่างกัน สามารถสร้างกลุ่มจำนวนเท่าใดก็ได้ Location ให้ตำแหน่งของหน้าเว็บที่จะวางปุ่ม

<rich: ตัวคั่น>

ตามชื่อมันถูกใช้เพื่อแยกส่วนประกอบต่างๆบนหน้าเว็บ แท็กนี้ถูกระงับใน RichFaces 4 อย่างไรก็ตามหากคุณยังคงใช้ RichFaces 3 อยู่คุณสามารถใช้แท็กต่อไปนี้ได้

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

ในตัวอย่างข้างต้น LineType เป็นแอตทริบิวต์ที่ช่วยให้เรากำหนดประเภทของตัวคั่นที่เราต้องการใช้ ชื่อตัวคั่นทั้งหมดเหล่านี้ค่อนข้างจะอธิบายตัวเองในลักษณะ

<rich: Spacer>

Spacer เป็นแท็กที่อธิบายตัวเองซึ่งช่วยให้นักพัฒนามีช่องว่างระหว่างสององค์ประกอบ แท็กนี้ยังถูกระงับใน RichFaces4 พร้อมกับแท็กอื่น ๆ อย่างไรก็ตามคุณสามารถใช้โค้ดต่อไปนี้ได้หากคุณใช้ RichFaces 3

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

<rich: modalPanel>

Modal Panel ใช้เพื่อแสดงป๊อปอัปขณะเดินทาง ใน RichFaces 4 แท็กแผงโมดอลถูกเปลี่ยนเป็นpopupPanel. ในตัวอย่างต่อไปนี้เราจะดูวิธีการทำงาน สร้างไฟล์ xhtml และตั้งชื่อว่า "PopingUp.xhtml" ใส่รหัสต่อไปนี้ลงไป

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

ตัวอย่างข้างต้นจะสร้างผลลัพธ์ต่อไปนี้เมื่อคลิกปุ่ม“ ClickMe”

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