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 = "https://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>

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

打印页面