Posted on: June 18th, 2008   By: Waqas Rajab
Under: Development, Zigron Inc

JSF is really nice, but developers sometimes feel suffocated because there aren’t enough components. Recently I ran into a problem of displaying a list of images in grid or you could say in form of rows and columns and being able to select one of them using radio buttons. I searched on the internet but couldn’t find any component that gave the desired functionality. So our team came up with an elegant extensible solution that I feel that I should share with the world since human knowledge belongs to the world.

The JSP code to achieve the results of figure looks like:-

1 <div style=“width:620px;height:270px; overflow:auto;”>

2 <a4j:repeat value=“#{controller.imageList}“ var=“imageList”>

3 <div style=“width:85px;float:left;”>

4 <h:graphicImage style=“border:2px solid #ccc;” height=“43″ width=“57″ url=“#{imageList[0]}“></h:graphicImage>

5 <h:selectOneRadio value=“#{ imageList[1]}“ layout=“lineDirection”>

6 <f:selectItem itemLabel=“” itemValue=“selImage”/>

7 <a4j:support event=“onclick” action=“#{controller.selectedImageRenderer}“>

8 <f:param name=“selectedImageId” value=“#{ imageList[2]}“ />

</a4j:support>

</h:selectOneRadio>

</div>

</a4j:repeat>

</div>

At line 1, The outer divs width is responsible for number of images appearing in a row. The outer divs height is responsible for number images appearing in columns after which the scroll bar shall appear. You are most welcome to play with the div to set number of images in rows/columns.
At line 2, the a4j repeat tag repeats through a list of images which was populated at the controller.
At line 3, we see another div whom we assigned the spacing responsibilities between the images.
At line 4, the graphic image in the list is displayed. The zero index of the list contains the url to the image.
At line 5, radio button is displayed for selecting an image, the value to this radio button is assigned by the first index of the imageList.

At line 6, we define the selection criteria, basically whichever radio button element shall contain “selImage”, it will be selected.
At line 7, when the event click happens on the radio button the method selectedImageRender is called, which we assigned the responsibilities of selecting an image and cleaning up the rest of the radio buttons. imageList[2] contains the currently selected image Id.

The code for the method is fairly simple and is written as follows:-

/***

* @author waqas.rajab

* This method makes the selection of the appropriate image selected on the main page

* This method also clears out the remaining selection of images.

*/

public void selectedImageRenderer(){

String param = getRequest().getParameter(“selectedImageId”);

for(int i=0;i<imageList.size();i++){

Object[] obj = (Object[])imageList.get(i);

if(obj[2].toString().equalsIgnoreCase(param)){

obj[1] = “selImage”;

}else{

obj[1] = “”;

}

}

}

Obj[0] contains Image Url
Obj[1] contains selImage i.e. showing the selected image radio button checked.
Obj[2] contains the ID of the selected image sent as a parameter from the page.