RichFaces - Menükomponenten
RichFaces bietet eine breite Version von Tags, die zum Erstellen eines Menütyp-Markups verwendet werden können. In diesem Kapitel lernen wir einige neue Funktionen zusammen mit den alten kennen, mit denen wir einfach ein Menü im Browser rendern können.
<rich: dropDownMenu>
Mit diesem Tag kann der Entwickler ein Dropdown-Menü erstellen. Dieses Tag ist nützlich, um den Header einer Website zu erstellen. Im folgenden Beispiel erfahren Sie, wie Sie dieses Tag im praktischen Leben verwenden. Erstellen Sie eine Datei und nennen Sie sie "DropDownList.xhtml". Fügen Sie den folgenden Code ein.
<?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>Im obigen Beispiel erstellen wir eine Symbolleiste und innerhalb dieser Symbolleiste erstellen wir ein Dropdown-Menü. Es können beliebig viele Dropdown-Menüs erstellt werden. Wenn Sie eine aktionsbasierte JS-Funktion einfügen möchten, können Sie diese im <menuItem> -Tag mit dem Attribut "action" implementieren. Der obige Code generiert die folgende Ausgabe im Browser.
<rich: contextMenu>
Dieses Tag ist nützlich, um ereignisbasierte Dropdowns auf der Clientseite zu generieren. Es wird nicht automatisch funktionieren. Benutzer müssen das JS-Ereignis erstellen und es funktioniert dann entsprechend. Im folgenden Beispiel erstellen wir das Renderbild und anschließend die JS-Ereignisse basierend auf der Antwort des Benutzers. Es folgt die xhtml-Datei.
<?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>Führen Sie das obige Beispiel aus und wählen Sie das gerenderte Bild aus. Die folgenden Optionen "Vergrößern" und "Verkleinern" werden angezeigt. Klicken Sie auf die entsprechende Option, und die erforderliche Funktionalität wird auf das Bild angewendet. Der obige Code generiert die folgende Ausgabe im Browser.
<rich: Komponentensteuerung>
Diese Komponente ist benutzerfreundlich, wenn wir eine andere Funktion aus der RichFaces-Umgebung aufrufen möchten. Dieses Tag wird zum Aufrufen von JavaScript-basierten Aktionsklassen verwendet. Das folgende Beispiel zeigt, wie dieses Tag verwendet werden kann. Erstellen Sie eine Datei und nennen Sie sie "componentContent.xhtml". Fügen Sie den folgenden Code ein.
<?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>Im obigen Code rufen wir die Funktion "onclick ()" mit der ID "popup" auf. Sobald wir es ausführen, wird eine Schaltfläche mit der Aufschrift "Popup aufrufen" angezeigt. Sobald wir auf die Schaltfläche klicken, ruft RichFaces intern die JS-Funktion auf und stellt die folgende Ausgabe im Browser bereit.
