RichFaces - Komponen Menu
RichFaces menyediakan berbagai versi tag yang akan digunakan untuk membuat markup jenis menu. Dalam bab ini, kita akan mempelajari beberapa fitur baru bersama dengan fitur lama yang dapat digunakan untuk membuat menu dengan mudah di browser.
<rich: dropDownMenu>
Dengan menggunakan tag ini, pengembang dapat membuat menu tarik-turun. Tag ini berguna untuk membuat header sebuah situs web. Dalam contoh berikut, kita akan belajar bagaimana menggunakan tag ini dalam kehidupan praktis. Buat satu file dan beri nama sebagai "DropDownList.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></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>
Dalam contoh di atas, kami membuat satu toolbar dan di dalam toolbar itu kami membuat satu menu dropdown. Sejumlah menu dropdown dapat dibuat. Jika Anda ingin memasukkan fungsi JS berbasis tindakan, Anda dapat mengimplementasikannya di dalam tag <menuItem> dengan atribut sebagai "tindakan". Potongan kode di atas akan menghasilkan keluaran berikut di browser.
<rich: contextMenu>
Tag ini berguna untuk menghasilkan tarik-turun berbasis peristiwa di sisi klien. Ini tidak akan bekerja secara otomatis. Pengguna perlu membuat acara JS dan kemudian berfungsi sebagaimana mestinya. Dalam contoh berikut, kami akan membuat gambar render dan kemudian membuat acara JS berdasarkan respons pengguna. Berikut ini adalah file 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>
Jalankan contoh di atas dan pilih gambar yang dirender. Opsi berikut "Zoom In" dan "Zoom out" akan disajikan. Klik opsi yang sesuai dan fungsionalitas yang diperlukan akan diterapkan ke gambar. Potongan kode di atas akan menghasilkan keluaran berikut di browser.
<rich: Component Control>
Komponen ini mudah digunakan setiap kali kita ingin memanggil fungsi lain dari lingkungan RichFaces. Tag ini digunakan untuk memanggil kelas tindakan berbasis JavaScript. Contoh berikut menunjukkan bagaimana tag ini dapat digunakan. Buat file dan beri nama sebagai file "componentContent.xhtml". Tempatkan potongan kode berikut di dalamnya.
<?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>
Pada kode di atas, kita memanggil fungsi “onclick ()” menggunakan id “popup”. Setelah kami menjalankannya, itu menunjukkan tombol dengan "Panggil popup". Setelah kita mengklik tombol tersebut, RichFaces secara internal memanggil fungsi JS dan memberikan output berikut di browser.