RichFaces - Componenti del menu
RichFaces fornisce un'ampia versione di tag da utilizzare per creare un markup del tipo di menu. In questo capitolo, impareremo alcune nuove funzionalità insieme a quelle vecchie utilizzando le quali possiamo facilmente visualizzare un menu nel browser.
<rich: dropDownMenu>
Utilizzando questo tag, lo sviluppatore può creare un menu a discesa. Questo tag è utile per creare l'intestazione di un sito web. Nell'esempio seguente, impareremo come utilizzare questo tag nella vita pratica. Crea un file e chiamalo "DropDownList.xhtml". Inserisci il codice seguente al suo interno.
<?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>
Nell'esempio sopra, stiamo creando una barra degli strumenti e all'interno di quella barra degli strumenti stiamo creando un menu a discesa. È possibile creare un numero qualsiasi di menu a discesa. Se si desidera inserire una funzione JS basata su azioni, è possibile implementarla all'interno del tag <menuItem> con l'attributo "action". La parte di codice precedente genererà il seguente output nel browser.
<rich: contextMenu>
Questo tag è utile per generare un menu a discesa basato sugli eventi sul lato client. Non funzionerà automaticamente. Gli utenti devono creare l'evento JS e quindi funziona di conseguenza. Nell'esempio seguente, creeremo l'immagine di rendering e quindi creeremo gli eventi JS in base alla risposta degli utenti. Di seguito è riportato il file 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>
Esegui l'esempio sopra e seleziona l'immagine renderizzata. Verranno presentate le seguenti opzioni "Zoom avanti" e "Zoom indietro". Fare clic sull'opzione appropriata e la funzionalità richiesta verrà applicata all'immagine. La parte di codice precedente genererà il seguente output nel browser.
<rich: Component Control>
Questo componente è facile da usare ogni volta che vogliamo chiamare qualsiasi altra funzione dall'ambiente RichFaces. Questo tag viene utilizzato per chiamare classi di azioni basate su JavaScript. L'esempio seguente mostra come utilizzare questo tag. Creare un file e denominarlo come file "componentContent.xhtml". Inserisci il seguente pezzo di codice in esso.
<?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>
Nel codice sopra, stiamo chiamando la funzione "onclick ()" utilizzando un id "popup". Una volta eseguito, mostra un pulsante con "Chiama il popup". Dopo aver fatto clic sul pulsante, RichFaces chiama internamente la funzione JS e fornisce il seguente output nel browser.