RichFaces - Componentes del menú
RichFaces proporciona una amplia versión de etiquetas que se utilizarán para crear un marcado de tipo de menú. En este capítulo, aprenderemos algunas características nuevas junto con las antiguas con las que podemos representar fácilmente un menú en el navegador.
<rich: dropDownMenu>
Con esta etiqueta, el desarrollador puede crear un menú desplegable. Esta etiqueta es útil para crear el encabezado de un sitio web. En el siguiente ejemplo, aprenderemos cómo usar esta etiqueta en la vida práctica. Cree un archivo y asígnele el nombre "DropDownList.xhtml". Coloque el siguiente código en su interior.
<?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>En el ejemplo anterior, estamos creando una barra de herramientas y dentro de esa barra de herramientas estamos creando un menú desplegable. Se puede crear cualquier número de menús desplegables. Si desea insertar cualquier función JS basada en acciones, puede implementar esa etiqueta dentro de <menuItem> con el atributo como "acción". El fragmento de código anterior generará la siguiente salida en el navegador.
<rich: contextMenu>
Esta etiqueta es útil para generar un menú desplegable basado en eventos en el lado del cliente. No funcionará automáticamente. Los usuarios deben crear el evento JS y luego funciona en consecuencia. En el siguiente ejemplo, crearemos la imagen de renderizado y luego crearemos los eventos JS basados en la respuesta de los usuarios. A continuación se muestra el archivo 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>Ejecute el ejemplo anterior y seleccione la imagen renderizada. Se presentarán las siguientes opciones "Acercar" y "Alejar". Haga clic en la opción adecuada y la funcionalidad requerida se aplicará a la imagen. El fragmento de código anterior generará la siguiente salida en el navegador.
<rico: Control de componentes>
Este componente es fácil de usar siempre que queremos llamar a cualquier otra función del entorno RichFaces. Esta etiqueta se utiliza para llamar a clases de acción basadas en JavaScript. El siguiente ejemplo demuestra cómo se puede utilizar esta etiqueta. Cree un archivo y asígnele el nombre "componentContent.xhtml". Coloque el siguiente código en él.
<?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>En el código anterior, estamos llamando a la función "onclick ()" usando una identificación "emergente". Una vez que lo ejecutamos, muestra un botón con “Llamar al popup”. Una vez que hacemos clic en el botón, RichFaces llama internamente a la función JS y proporciona la siguiente salida en el navegador.
