RichFaces - 菜单组件

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.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:组件控制>

每当我们想要从 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>

在上面的代码中，我们使用 id“popup”调用“onclick()”函数。一旦我们运行它，它就会显示一个带有“调用弹出窗口”的按钮。一旦我们点击按钮，RichFaces 就会内部调用 JS 函数并在浏览器中提供以下输出。

呼叫弹出窗口