Step 4 - Dynamic Table Rendering

Now that we have the page updating dynamically, let's make it more interactive. We're going to add the ability to select time zones for which we want to see more detailed information. To do this we will add some SelectBooleanCheckbox components and a DataTable component. As the checkboxes are selected and de-selected, the rows of the table will show or hide themselves without requiring a page refresh. The finished product will look similar to Figure 1-4:

Figure 1-4 TimeZone Application with Dynamic Table Rendering

So in the timezone.jspx page, we make the following changes:

1. Add a row of six selectBooleancheckbox components to the existing panelGrid holding the map.

<h:selectBooleanCheckbox id="Cminus10" required="false" immediate="true" valueChangeListener="#{timeZoneBean.timeZoneChanged}" /> <h:selectBooleanCheckbox id="Cminus9" required="false" immediate="true" valueChangeListener="#{timeZoneBean.timeZoneChanged}" /> <h:selectBooleanCheckbox id="Cminus8" required="false" immediate="true" valueChangeListener="#{timeZoneBean.timeZoneChanged}" /> <h:selectBooleanCheckbox id="Cminus7" required="false" immediate="true" valueChangeListener="#{timeZoneBean.timeZoneChanged}" /> <h:selectBooleanCheckbox id="Cminus6" required="false" immediate="true" valueChangeListener="#{timeZoneBean.timeZoneChanged}" /> <h:selectBooleanCheckbox id="Cminus5" required="false" immediate="true" valueChangeListener="#{timeZoneBean.timeZoneChanged}" />

Checking one of these components will fire a valueChangeEvent that results in the valueChangeListener calling timeZoneChanged(ValueChangeEvent event) in TimeZoneBean.java. Time zone-specific information is passed into the bean via the selectBooleanCheckbox id attribute. The id is used to identify the location of the time zone relative to GMT. The C is used as a prefix in the id to avoid duplication of commandButton ids.

2. A dataTable is added below the panelGrid in the UI. This dataTable will hold information on all the selectBooleanCheckboxes checked, getting its data from the array of CheckedTimeZone objects returned from the bean. The arrayList of CheckedTimeZone objects is retrieved from TimeZoneBean.java in the value attribute of the dataTable component. The properties of each object in the arrayList are then displayed through value bindings in outputText components in each row of the dataTable.

<h:dataTable frame="box" value="#{timeZoneBean.checkedTimeZoneList}" var="checkedTimeZone"> <f:facet name="header"> <h:outputText value="Checked Time Zones" /> </f:facet> <h:column> <f:facet name="header"><h:outputText value="Time Zone" /></f:facet> <h:outputText value="#{checkedTimeZone.displayName}"/> </h:column> <h:column> <f:facet name="header"><h:outputText value="Location" /></f:facet> <h:outputText value="#{checkedTimeZone.id}"/> </h:column> <h:column> <f:facet name="header"><h:outputText value="Uses DST" /></f:facet> <h:outputText value="#{checkedTimeZone.useDaylightTime}"/> </h:column> <h:column> <f:facet name="header"><h:outputText value="In DST" /></f:facet> <h:outputText value="#{checkedTimeZone.inDaylightTime}"/> </h:column> <h:column> <f:facet name="header"><h:outputText value="Time" /></f:facet> <h:outputText value=" #{checkedTimeZone.time} "/> </h:column> </h:dataTable>

Next, we create an additional convenience class called CheckedTimeZone.java, for holding the time zone information details that are returned to the page when the timeZoneChanged method is triggered:

package com.icesoft.tutorial; import java.util.TimeZone; /** * Bean holding time zone specific information. Checking a selectBooleanCheckbox * in the UI will cause instances of this class to populate the ArrayList in * <code>TimeZoneBean</code>. That ArrayList is used to create a DataTable of * checked time zones in the UI. */ public class CheckedTimeZone { /** * Time zone name displayed in the UI. DisplayName is associated with the id * for this CheckedTimeZone. */ private String dislayName; /** * {@link TimeZone} id used to identify the time zone. This is the id * returned from <code>interpretId</code> in TimeZoneBean. * <code>interpretId</code> returns a specific location in a timezone so * that daylight time properties can be accessed. */ private String id; /** * TimeZoneBean used to access dynamic time. */ private TimeZoneBean parent; /** * Time zone uses daylight savings time. */ private boolean useDaylightTime; /** * Time zone in daylight savings time. */ private boolean inDaylightTime; /** * Constructor * * @param displayName Time zone name that is displayed in the UI. * @param id {@link TimeZone} id used to identify the time * zone. * @param useDaylightTime Does time zone use daylight time. * @param inDaylightTime Is time zone currently in daylight time. * @param parent TimeZoneBean instance to access dynamic time in * time zone. */ public CheckedTimeZone(String displayName, String id, boolean useDaylightTime, boolean inDaylightTime, TimeZoneBean parent) { this.dislayName = displayName; this.id = id; this.useDaylightTime = useDaylightTime; this.inDaylightTime = inDaylightTime; this.parent = parent; } /** * Gets the name of this time zone to be displayed in the UI. * * @return String */ public String getDisplayName() { return dislayName; } /** * Gets the {@link TimeZone} id used to identify this time zone. * * @return String */ public String getId() { return id; } /** * Gets the dynamic time through the <code>getComputedTime</code> method in * the <code>TimeZoneBean</code>. * * @return String */ public String getTime() { TimeZone thisTimeZone = TimeZone.getTimeZone(id); return parent.getComputedTime(thisTimeZone); } /** * Gets whether or not this time zone uses DayLight time. * * @return Returns the useDaylightTime. */ public String getUseDaylightTime() { if (useDaylightTime) { return "Yes"; } else { return "No"; } } /** * Gets the state of DayLight Time in this time zone. * * @return Returns the inDaylightTime. */ public String getInDaylightTime() { if (inDaylightTime) { return "Yes"; } else { return "No"; } } }

Then in the TimeZoneBean.java class, we make the following changes:

1. Add a timeZoneChanged(ValueChangeEvent event) method in TimeZoneBean.java to be called when a selectBooleanCheckbox is checked.

/** * Adds or removes a <code>CheckedTimeZone</code> to * <code>checkedTimeZoneList</code> when a selectBooleanCheckbox * ValueChangeEvent is fired from the UI. * * @param event ValueChangeEvent. */ public void timeZoneChanged(ValueChangeEvent event) { UIComponent comp = event.getComponent(); FacesContext context = FacesContext.getCurrentInstance(); String zoneId = interpretID(comp.getClientId(context), "Cplus", "Cminus"); TimeZone timeZone = TimeZone.getTimeZone(zoneId); //Calendar is required to obtain a Date object to pass into // inDaylightTime method. Calendar cal = Calendar.getInstance(timeZone); boolean newVal = ((Boolean) event.getNewValue()).booleanValue(); if (newVal) { CheckedTimeZone checkedTimeZone = new CheckedTimeZone( timeZone.getDisplayName(), zoneId, timeZone.useDaylightTime(), timeZone.inDaylightTime(cal.getTime()), this); checkedTimeZoneList.add(checkedTimeZone); } else { for (int i = 0; i < checkedTimeZoneList.size(); i++) { if (((CheckedTimeZone) (checkedTimeZoneList.get(i))).getId() .equals(timeZone.getID())) { checkedTimeZoneList.remove(i); } } } }

This method extracts the id from the selectBooleanCheckbox component, passes this id into the interpretId method of TimeZoneBean.java, which returns a valid TimeZone id. This id is used to instantiate a TimeZone object. The TimeZone is used in turn to instantiate a CheckedTimeZone object. CheckedTimeZone objects contain details on the time zone checked by the selectBooleanCheckbox.

2. Finally, add an arrayList of CheckedTimeZone objects to TimeZoneBean.java. The CheckedTimeZone is added or deleted from the arrayList of CheckedTimeZone objects in TimeZoneBean.java. This is the arrayList used to populate the dataTable. The timeZoneChanged method will add or delete CheckedTimeZone objects to the arrayList based on the value of the selectBooleanCheckbox.

/** * ArrayList of <code>CheckedTimeZone</code> objects. These objects are used * to populate the DataTable in UI. */ private ArrayList checkedTimeZoneList; /** * Gets ArrayList of <code>CheckedTimeZone</code> objects. This list is * populated by selectBooleanCheckbox components in UI. * * @return ArrayList of CheckedTimeZone objects. */ public ArrayList getCheckedTimeZoneList() { return checkedTimeZoneList; } The arrayList is initialized in the init() method. /** * Initializes this TimeZoneBean's properties. */ private void init() { currentFormat = new SimpleDateFormat("EEE, HH:mm:ss"); serverTimeZone = TimeZone.getDefault(); // selected time zone set to UTC as default selectedTimeZone = TimeZone.getTimeZone("Etc/GMT+0"); session = (HttpSession) FacesContext.getCurrentInstance() .getExternalContext() .getSession(false); checkedTimeZoneList = new ArrayList(); }