Modifying timezone.jspx

In the timezone.jspx page, make the following changes:

1. To support partial submission, we need to use an ICEfaces specific component, which requires adding a namespace declaration:

xmlns:ice="http://www.icesoft.com/icefaces/component"
 

2. The standard JSF form component is replaced with the ICEfaces form component, enabling partial submission:

<ice:form partialSubmit="true">
 
		...
 
</ice:form>
 

3. In the panelGrid holding the map, add a row of seven selectBooleanCheckbox components, under the seven commandButton components.

<ice:panelGrid columns="7" cellspacing="0" cellpadding="0">
 
    <ice:panelGroup
 
            style="background:#f16e28; border:1px solid #999999;">
 
        <ice:selectBooleanCheckbox id="GMTminus10" required="false"
 
                                   immediate="true"
 
                                   
valueChangeListener="#{timeZoneBean.timeZoneChanged}"
 
                                   
value="#{timeZoneBean.checkboxStates['GMTminus10']}"
 
                                   autocomplete="off"/>
 
        <ice:outputLabel value="HADT" style="margin-right:7px;"/>
 
    </ice:panelGroup>
 
    <ice:panelGroup
 
            style="background: #9566b6; border:1px solid #999999;">
 
        <ice:selectBooleanCheckbox id="GMTminus9" required="false"
 
                                   immediate="true"
 
                                   
valueChangeListener="#{timeZoneBean.timeZoneChanged}"
 
                                   
value="#{timeZoneBean.checkboxStates['GMTminus9']}"
 
                                   autocomplete="off"/>
 
        <ice:outputLabel value="AKST" style="margin-right:7px;"/>
 
    </ice:panelGroup>
 
    <ice:panelGroup
 
            style="background: #fefc5a; border:1px solid #999999;">
 
        <ice:selectBooleanCheckbox id="GMTminus8" required="false"
 
                                   immediate="true"
 
                                   
valueChangeListener="#{timeZoneBean.timeZoneChanged}"
 
                                   
value="#{timeZoneBean.checkboxStates['GMTminus8']}"
 
                                   autocomplete="off"/>
 
        <ice:outputLabel value="PST" style="margin-right:7px;"/>
 
    </ice:panelGroup>
 
    <ice:panelGroup
 
            style="background: #96b710; border:1px solid #999999;">
 
        <ice:selectBooleanCheckbox id="GMTminus7" required="false"
 
                                   immediate="true"
 
                                   
valueChangeListener="#{timeZoneBean.timeZoneChanged}"
 
                                   
value="#{timeZoneBean.checkboxStates['GMTminus7']}"
 
                                   autocomplete="off"/>
 
        <ice:outputLabel value="MDT" style="margin-right:7px;"/>
 
    </ice:panelGroup>
 
    <ice:panelGroup
 
            style="background: #f16e28; border:1px solid #999999;">
 
        <ice:selectBooleanCheckbox id="GMTminus6" required="false"
 
                                   immediate="true"
 
                                   
valueChangeListener="#{timeZoneBean.timeZoneChanged}"
 
                                   
value="#{timeZoneBean.checkboxStates['GMTminus6']}"
 
                                   autocomplete="off"/>
 
        <ice:outputLabel value="CDT" style="margin-right:7px;"/>
 
    </ice:panelGroup>
 
    <ice:panelGroup
 
            style="background: #9566b6; border:1px solid #999999;">
 
        <ice:selectBooleanCheckbox id="GMTminus5" required="false"
 
                                   immediate="true"
 
                                   
valueChangeListener="#{timeZoneBean.timeZoneChanged}"
 
                                   
value="#{timeZoneBean.checkboxStates['GMTminus5']}"
 
                                   autocomplete="off"/>
 
        <ice:outputLabel value="EST" style="margin-right:8px;"/>
 
    </ice:panelGroup>
 
    <ice:panelGroup
 
            style="background: #fefc5a; border:1px solid #999999;">
 
        <ice:selectBooleanCheckbox id="GMTminus4" required="false"
 
                                   immediate="true"
 
                                   
valueChangeListener="#{timeZoneBean.timeZoneChanged}"
 
                                   
value="#{timeZoneBean.checkboxStates['GMTminus4']}"
 
                                   autocomplete="off"/>
 
        <ice:outputLabel value="NST" style="margin-right:8px;"/>
 
    </ice:panelGroup>
 
</ice:panelGrid>
 

 

4. A dataTable is added below the panelGrid component in the UI. This dataTable will display information on all the selected time zones, getting its data from timeZoneBean's checkedTimeZoneList property, which is a list of TimeZoneWrapper objects. The properties of each object in the list are then displayed through JSF expression language 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.location}"/>
 
		</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>
 

Copyright 2005-2009. ICEsoft Technologies, Inc.