The Java Server Faces generic "garble button" – how to become wildly popular again…

Somewhat akin to the dbms_advanced_rewrite package application I discussed some time ago, I have now another piece of functionality that will make you once again the light of the party. Introducing: the JSF Garble Button! This is a very simple CommandButton that you can inject into any page in any application. It only requires the configuration of a single managed bean. This powerful button – when pressed – will randomly reorganize the container it is part of – as well as all of its siblings’ child-components and their children etc. The value of this piece of functionality is absolutely nothing – beyond a pretty good joke if you dress up this button as a Help or Send Me Money button. Of course instead of a button you can use a commandlink.

A simple demonstration of the utter uselessness of what this article discusses: initially our grantedly already horrible page (for want of a proper stylesheet) looks like this:

The Java Server Faces generic "garble button" - how to become wildly popular again... jsfgarble1

After pressing the Garble button, the page is refreshed as:

The Java Server Faces generic "garble button" - how to become wildly popular again... jsfgarble2

All elements in the PanelGrid that is the parent (container ) for the Garble Button have been randomly reorganized, as well as all child-components’ children, such as the buttons in portlet three and the options in the list input.

The implementation of this Garble facility is simple, as expected. It has three parts

1) The button itself, with an ActionListener attribute bound to a managed bean

2) The class that provides the managed bean

3) The Managed Bean configuration itself in the faces-config.xml file.

Step one – The Garble Button itself

The button itself is just a plain old CommandButton with a properly set ActionListener:

<h:commandButton value="Garble" actionListener="#{garble.garble}" /> 

Step two – the Garble-class

The wizard that navigates through the Component Tree, reorganizing as it goes along:

package nl.amis.jsf.util;

import java.util.ArrayList;
import java.util.Collections;
import java.util.List;

import javax.faces.component.UIComponent;
import javax.faces.event.ActionEvent;

public class GarbleAll {
public GarbleAll() {

private void shuffleList(List list) {
List p2 = new ArrayList();


private void garbleChildren(List children) {
for (UIComponent child:(List<UIComponent>)children) {
List grandChildren = child.getChildren();
if (grandChildren.size()>0) {

* This method will take the parent of the activated component (likely a container)
* and go through all of its children - randomly rearranging the children, the
* children's children and all their descendant.
* @param actionEvent
public void garble(ActionEvent actionEvent) {
// Add event code here...
UIComponent parent =
List children = parent.getChildren();



Step three – the Managed Bean configuration

Nothing fancy, very straightforward:


And this really all it takes to have some fun on your project – in all the spare time that productive JSF development allows you.

Note: dressing up the Garble button as a Global Help button makes the effect even more interesting!


 The Java Server Faces generic "garble button" - how to become wildly popular again... jsfgarble3

One Response

  1. Jan Vervecken February 22, 2007