In the Spotlight - Max Katz

Want to see what components/features users are requesting in RichFaces or even vote yourself? Go here. Even wonder what’s going to be included in next release? Find out here.

1. Confirmation dialog
2. Confirmation dialog - custom Facelets tag
3. Confirmation dialog - improving custom Facelets tag (see comments for further improving the tag)

As one reader pointed out here, reusing Facelets custom tag confirmation dialog wasn’t possible because the component id was hard coded. Placing more than one tag on a page would give duplicate id error. I will show you how to pass an id to the custom. Once we can do that, it’s possible to place any number of confirmation dialog tags on the same page.

We are going to add confirmId attribute to the custom tag to pass the id:

<richx:confirm confirmId="confirm1" label="Save" action="#{userBean}" />

Let’s looks at changes for /WEB-INF/tags/confirmation.xml:

1
2
3
4
5
6
7
8

<a4j:commandButton value="#{label}"
   onclick="#{rich:component(richx:concat(confirmId,'confirmation'))}.show();return false" />
 
<a4j:jsFunction name="submit" action="#{action.save}" />
 
<rich:modalPanel id="#{confirmId}confirmation" width="250" height="150">
...
</rich:modalPanel>

The changes are on line 2 and 6. Looking at line 6 first, that’s where we prepend the id. This allows to give a unique id to the modal panel. Looking at line 2. That’s where the modal panel is opened. Unfortunately the following will not work:

<a4j:commandButton value="#{label}"
   onclick="#{rich:component(#{confirmId}'confirmation'))}.show();return false" />

or this:

<a4j:commandButton value="#{label}"
   onclick="#{rich:component(confirmId'confirmation'))}.show();return false" />

To solve this problem, we need to create a Facelets function to concatenate two strings into id string.

To keep things simple, we are going to add the Facelets function to the same tag lib file:

<facelet-taglib>
   <namespace>http://richfaces.org/richx</namespace>
   <tag>
	<tag-name>confirm</tag-name>
	<source>tags/confirmation.xhtml</source>
   </tag>
   <function>
      <function-name>concat</function-name>
      <function-class>function.FaceletsFunctions</function-class>
      <function-signature>
         java.lang.String concat(java.lang.String,java.lang.String)
      </function-signature>
   </function>
</facelet-taglib>

FaceletsFunctions class looks like this:

package functions;
 
public class FaceletsFunctions {
   public static String concat(String a, String b) {
      return a+b; 
   }
}

If you want, you can use something more interesting such StringUtils join function as shown here. That’s basically it. One other thing we need to change is links to close the modal panel to use this function:

<input type="button" value="OK"
   onclick="#{rich:component(richx:concat(confirmId,'confirmation'))}.hide(); submit(); return false;" />
<input type="button" value="Cancel"
   onclick="#{rich:component(richx:concat(confirmId,'confirmation'))}.hide();return false" />

Now it’s possible to place any number of confirmation dialog tags on the same page:

<h:outputText value="Text:"/>
<h:inputText value="#{userBean.text}" />
<richx:confirm confirmId="confirm1" label="Save" action="#{userBean}" />
...
<h:outputText value="Text:"/>
<h:inputText value="#{userBean.text}" />
<richx:confirm confirmId="confirm2" label="Save" action="#{userBean}" />
...
<h:outputText value="Text:"/>
<h:inputText value="#{userBean.text}" />
<richx:confirm confirmId="confirm2" label="Save" action="#{userBean}" />

When I do custom on-site JSF/RichFaces training and explain Dependency Injection (DI), people who never had experience with DI before finding it not always easy to grasp what it is. There are two great tutorials that can help with understanding the concepts. One is here written by Rick Hightower and one here written by Jakob Jenkov.

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.