RichFaces - ส่วนประกอบของเมนู
RichFaces มีแท็กหลายเวอร์ชันเพื่อใช้ในการสร้างมาร์กอัปประเภทเมนู ในบทนี้เราจะเรียนรู้คุณสมบัติใหม่ ๆ พร้อมกับคุณสมบัติเก่าที่ใช้ซึ่งเราสามารถแสดงเมนูในเบราว์เซอร์ได้อย่างง่ายดาย
<rich: dropDownMenu>
นักพัฒนาสามารถใช้แท็กนี้เพื่อสร้างเมนูแบบเลื่อนลง แท็กนี้มีประโยชน์สำหรับการสร้างส่วนหัวของเว็บไซต์ ในตัวอย่างต่อไปนี้เราจะเรียนรู้วิธีใช้แท็กนี้ในชีวิตจริง สร้างไฟล์หนึ่งไฟล์และตั้งชื่อว่า "DropDownList.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></h:head>
<h:body>
<h:form>
<rich:toolbar>
<rich:dropDownMenu>
<f:facet name = "label">
<h:outputText value = "File" />
</f:facet>
<rich:menuItem label = "New" />
<rich:menuItem label = "Open File..." />
<rich:menuItem label = "Close" />
<rich:menuItem label = "Close All" />
</rich:dropDownMenu>
</rich:toolbar>
</h:form>
</h:body>
</html>ในตัวอย่างข้างต้นเรากำลังสร้างแถบเครื่องมือหนึ่งแถบและภายในแถบเครื่องมือนั้นเรากำลังสร้างเมนูแบบเลื่อนลงหนึ่งเมนู สามารถสร้างเมนูแบบเลื่อนลงจำนวนเท่าใดก็ได้ หากคุณต้องการแทรกฟังก์ชัน JS ที่อิงตามการดำเนินการคุณสามารถใช้สิ่งนั้นภายในแท็ก <menuItem> โดยมีแอตทริบิวต์เป็น "action" โค้ดด้านบนจะสร้างผลลัพธ์ต่อไปนี้ในเบราว์เซอร์
<rich: contextMenu>
แท็กนี้มีประโยชน์ในการสร้างรายการแบบเลื่อนลงตามเหตุการณ์ในฝั่งไคลเอ็นต์ มันจะไม่ทำงานโดยอัตโนมัติ ผู้ใช้ต้องสร้างเหตุการณ์ JS จากนั้นจึงทำงานตามนั้น ในตัวอย่างต่อไปนี้เราจะสร้างอิมเมจการเรนเดอร์จากนั้นสร้างเหตุการณ์ JS ตามการตอบสนองของผู้ใช้ ต่อไปนี้คือไฟล์ 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>ContextMenu Example</title>
</h:head>
<h:body>
<h:form id = "form">
<h:outputScript>
//<![CDATA[
function resize(pic, coeff) {
var w = Math.round(pic.width * coeff);
var h = Math.round(pic.height * coeff);
if (w > 1 && h > 1 && h<1000 && w<1000) {
pic.width = w;
pic.heigth = h;
}
}
function enlarge(element){
resize(element, 1.1);
}
function decrease(element){
resize(element, 0.9);
}
//]]>
</h:outputScript>
<h:graphicImage value = "http://www.tutorialspoint.com/images/jsf-minilogo.png"
id = "pic" style = "border : 5px solid #E4EAEF"/>
<rich:contextMenu target = "pic" mode = "client" showEvent = "click">
<rich:menuItem label = "Zoom In" onclick =
"enlarge(#{rich:element('pic')});" id = "zin"/>
<rich:menuItem label = "Zoom Out"
onclick = "decrease(#{rich:element('pic')});" id = "zout"/>
</rich:contextMenu>
</h:form>
</h:body>
</html>เรียกใช้ตัวอย่างด้านบนและเลือกภาพที่แสดงผล ตัวเลือกต่อไปนี้ "ซูมเข้า" และ "ย่อ" จะถูกนำเสนอ คลิกตัวเลือกที่เหมาะสมจากนั้นฟังก์ชันที่จำเป็นจะถูกนำไปใช้กับรูปภาพ โค้ดด้านบนจะสร้างผลลัพธ์ต่อไปนี้ในเบราว์เซอร์
<rich: Component Control>
ส่วนประกอบนี้ใช้งานง่ายเมื่อใดก็ตามที่เราต้องการเรียกใช้ฟังก์ชันอื่น ๆ จากสภาพแวดล้อม RichFaces แท็กนี้ใช้เพื่อเรียกคลาสการดำเนินการที่ใช้ JavaScript ตัวอย่างต่อไปนี้สาธิตวิธีใช้แท็กนี้ สร้างไฟล์และตั้งชื่อเป็นไฟล์“ componentContent.xhtml” วางโค้ดต่อไปนี้ไว้
<?xml version = "1.0" encoding = "UTF-8"?>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<!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>Component Control Example</title>
<meta name = "viewport" content = "width = device-width, initial-scale = 1.0"/>
</h:head>
<h:body>
<h:commandButton value = "Call the popup">
<rich:componentControl target = "popup" operation = "show" />
</h:commandButton>
<rich:popupPanel id = "popup" modal = "false" autosized = "true" resizeable = "false">
<f:facet name = "header">
<h:outputText value = "Welcome mesage" />
</f:facet>
<f:facet name = "controls">
<h:outputLink value = "#"
onclick = "#{rich:component('popup')}.hide(); return false;"
style = "color: inherit">
X
</h:outputLink>
</f:facet>
<p>Welcome to RICH FACE tutorial at tutorialspoint.com</p>
</rich:popupPanel>
</h:body>
</html>ในโค้ดด้านบนเราเรียกใช้ฟังก์ชัน“ onclick ()” โดยใช้ id“ popup” เมื่อเราเรียกใช้มันจะแสดงปุ่มที่มี "เรียกป๊อปอัป" เมื่อเราคลิกปุ่ม RichFaces จะเรียกใช้ฟังก์ชัน JS เป็นการภายในและแสดงผลลัพธ์ต่อไปนี้ในเบราว์เซอร์
