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> с атрибутом «действие». Приведенный выше фрагмент кода сгенерирует следующий вывод в браузере.
<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 = "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>
В приведенном выше коде мы вызываем функцию «onclick ()», используя идентификатор «popup». Как только мы запустим его, он показывает кнопку с надписью «Вызвать всплывающее окно». Как только мы нажимаем кнопку, RichFaces внутренне вызывает функцию JS и выводит в браузере следующий результат.