RichFaces提供了用于创建菜单类型标记的广泛版本的标记.在本章中，我们将学习一些新功能以及旧功能，我们可以在浏览器中轻松渲染菜单.
使用此标记，开发人员可以创建下拉菜单.此标记对于创建网站标题很有用.在下面的示例中，我们将学习如何在实际生活中使用此标记.创建一个文件并将其命名为"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".上面的代码将在浏览器中生成以下输出.
此标记可用于在客户端生成基于事件的下拉列表.它不会自动运行.用户需要创建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.IT屋.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>运行上面的示例并选择渲染图像.将显示以下选项"放大"和"缩小".单击相应的选项，所需的功能将应用于图像.上面的代码将在浏览器中生成以下输出.
只要我们想要从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 IT屋.com</p>
</rich:popupPanel>
</h:body>
</html>在上面的代码中，我们使用id"popup"调用"onclick()"函数.一旦我们运行它，它会显示一个带有"Call the popup"的按钮.单击按钮后，RichFaces会在内部调用JS函数并在浏览器中提供以下输出.
