RichFaces confirmation dialog

Posted by: Max Katz on November 13, 2008

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.

screenshot011.png

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.

Max Katz

About Max Katz

Max Katz is a Senior Systems Engineer at Exadel. He has been helping customers jump-start their RIA development as well as providing mentoring, consulting, and training. Max is a recognized subject matter expert in the JSF developer community. He has provided JSF/RichFaces training for the past three years, presented at many conferences, and written several published articles on JSF-related topics. Max also leads Exadel's RIA strategy and writes about RIA technologies in his blog, http://mkblog.exadel.com. He is an author of “Practical RichFaces” book (Apress). Max holds a BS in computer science from the University of California, Davis.

Why Attend the NFJS Tour?

  • » Cutting-Edge Technologies
  • » Agile Practices
  • » Peer Exchange

Current Topics:

  • Languages on the JVM: Scala, Groovy, Clojure
  • Enterprise Java
  • Core Java, Java 8
  • Agility
  • Testing: Geb, Spock, Easyb
  • REST
  • NoSQL: MongoDB, Cassandra
  • Hadoop
  • Spring 4
  • Cloud
  • Automation Tools: Gradle, Git, Jenkins, Sonar
  • HTML5, CSS3, AngularJS, jQuery, Usability
  • Mobile Apps - iPhone and Android
  • More...
Learn More »