While out-of-the-box confirmation dialog is not yet available in RichFaces, I will show you how to build one. Tomorrow I will show how to make it more reusable by packaging it as a Facelet custom tag.
If Cancel is clicked then nothing happens. If OK is clicked then the value is saved.
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 32 33 34 35 36 37 38 39 40 41 42 43 44 | <!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"> <head> <style> .rich-mpnl-body { text-align: center } </style> </head> <body> <h:form> <h:outputText value="Text:"/> <h:inputText value="#{userBean.text}" /> <a4j:commandButton value="Save" onclick="#{rich:component('confirmation')}.show();return false" /> <a4j:jsFunction name="submit" action="#{userBean.save}"/> </h:form> <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> <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> </body> </html> |
Line #22 is a Save button. It launches the Confirmation dialog, it doesn’t actually invoke the save action.
Lines #28-42 is the modal panel. The modal panel is client-side only in this case as there is no form inside. Clicking on the Cancel button will hide the model panel and do nothing else. Clicking on the OK button will hide the modal panel and will also call the submit() function. submit() function is defined by a4j:jsFunction and basically sends an Ajax request to the server. It also allows to specify what action to call. The a4j:jsFunction component is very similar to a4j:commandButton (or a4j:commandLink(), but allows to perform an Ajax request from a Javascript code directly.
Confirmation dialog icon was downloaded form DesignMagus.
