As promised, this is the same Confirmation dialog as here but now it’s packaged as a Facelet custom tag so it’s much easier to reuse.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html" xmlns:a4j="http://richfaces.org/a4j" xmlns:rich="http://richfaces.org/rich" xmlns:f="http://java.sun.com/jsf/core" xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:richx="http://richfaces.org/richx"> <head> <style> .rich-mpnl-body {text-align: center} </style> </head> <body> <h:form> <h:outputText value="Text:"/> <h:inputText value="#{userBean.text}" /> <richx:confirm label="Save" action="#{userBean}" /> </h:form> </body> </html> |
Line #9 is a new name space for the custom tag.
Line #19 is where I’m using the new custom tag. I’m passing in two things; button label and the action to be invoked if the user clicks OK on the confirmation dialog.
confirmation.xhtml:
This page is very similar to the one from previous post. From the page avobe, I’m passing in two things: button label #{label} (line #10) and the action to be invoked #{action.save} (line #13). Facelets takes care of wiring the EL expressions automatically, so we don’t have to do anything special for that to work.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <ui:component xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html" xmlns:a4j="http://richfaces.org/a4j" xmlns:rich="http://richfaces.org/rich" xmlns:f="http://java.sun.com/jsf/core" xmlns:ui="http://java.sun.com/jsf/facelets"> <a4j:commandButton value="#{label}" onclick="#{rich:component('confirmation')}.show();return false" /> <a4j:jsFunction name="submit" action="#{action.save}" /> <rich:modalPanel id="confirmation" width="250" height="150"> <f:facet name="header">Confirmation</f:facet> <h:panelGrid> <h:panelGrid columns="2"> <h:graphicImage value="/alert.png" /> <h:outputText value="Are you sure?" style="FONT-SIZE: large;" /> </h:panelGrid> <h:panelGroup> <rich:spacer height="20px" /> <input type="button" value="OK" onclick="#{rich:component('confirmation')}.hide(); submit();return false;" /> <input type="button" value="Cancel" onclick="#{rich:component('confirmation')}.hide();return false" /> </h:panelGroup> </h:panelGrid> </rich:modalPanel> </ui:component> |
Now, to use it as a custom tag there are two more things we need to do. First, create a taglib file and then register in web.xml.
confirmation-taglib.xml
confirmation-taglib is a Facelet taglib file that defines the tag. In this case, we are simply pointing to the source file to create the custom tag. It should be placed under /WEB-INF directory (/WEB-INF/tags/confirmation-taglib.xml):
1 2 3 4 5 6 7 8 9 10 11 | <?xml version="1.0"?> <!DOCTYPE facelet-taglib PUBLIC "-//Sun Microsystems, Inc.//DTD Facelet Taglib 1.0//EN" "facelet-taglib_1_0.dtd"> <facelet-taglib> <namespace>http://richfaces.org/richx</namespace> <tag> <tag-name>confirm</tag-name> <source>tags/confirmation.xhtml</source> </tag> </facelet-taglib> |
Finally, we need to register the custom taglib file in web.xml:
1 2 3 4 5 6 | <context-param> <param-name>facelets.LIBRARIES</param-name> <param-value> /WEB-INF/confirmation-taglib.xml </param-value> </context-param> |
Confirmation dialog icon was downloaded form DesignMagus.
