TOC PREV NEXT INDEX

Implementing Styles


In tutorial examples timezone1 through 4, inline styles were used: 

<h:outputText style="font-weight:600" value="Server Time Zone"/>
 
<ice:panelGroup style="background: #fefc5a; border:1px solid #999999;">

Tutorial example timezone5 uses only styles from the style sheet, as shown in timezone.jspx, below: 

<f:view xmlns:f="http://java.sun.com/jsf/core"
 
        xmlns:h="http://java.sun.com/jsf/html"
 
        xmlns:ice="http://www.icesoft.com/icefaces/component">
 
    <html>
 
    <head><title>ICEfaces: TimeZone Sample Application</title></head>
 
    <link rel="stylesheet" type="text/css" href="./timezone_style.css"/>
 
    <body bgcolor="white">
 
    <div id="headerDiv">
 
        <table width="100%" cellpadding="0" cellspacing="0">
 
            <tr>
 
                <td valign="top">
 
                    <table width="100%" cellpadding="0" cellspacing="0">
 
                        <tr>
 
                            <td background="images/demo-page-bkgnd.gif"><img
 
                                    src="images/demo-page-left.gif"/></td>
 
                        </tr>
 
                        <tr>
 
                            <td height="45" valign="bottom"><img
 
                                    src="images/timezone_logo.gif"/></td>
 
                        </tr>
 
                    </table>
 
                </td>
 
                <td valign="top" align="right" width="119"><img
 
                        src="images/demo-page-right.gif"/></td>
 
            </tr>
 
        </table>
 
    </div>
 

 
    <div id="timeZonePanel">
 
        <ice:form partialSubmit="true">
 
            <ice:panelGrid columns="2" rowClasses="floatingDialogHeader, , "
 
                           width="100%">
 
                <ice:outputText value="Server Time Zone"/>
 
                <ice:outputText value="Time Zone Selected from Map"/>
 
                <ice:outputText styleClass="formLabel"
 
                                value="#{timeZoneBean.serverTimeZoneName}"/>
 
                <ice:outputText styleClass="formLabel"
 
                                value="#{timeZoneBean.selectedTimeZoneName}"/>
 
                <ice:outputText value="#{timeZoneBean.serverTime}"/>
 
                <ice:outputText value="#{timeZoneBean.selectedTime}"/>
 
            </ice:panelGrid>
 
            <ice:commandButton id="map" image="images/map.jpg"
 
                               actionListener="#{timeZoneBean.listen}"/>
 
            <ice:panelGrid columns="7" width="100%" cellpadding="0"
 
                           cellspacing="0"
 
                           columnClasses="orange, purple, yellow, green">
 
                <ice:panelGroup>
 
                    <ice:selectBooleanCheckbox id="GMTminus10" required="false"
 
                                               immediate="true"
 
                                               
valueChangeListener="#{timeZoneBean.timeZoneChanged}"
 
                                               
value="#{timeZoneBean.checkboxStates['GMTminus10']}"
 
                                               autocomplete="off"/>
 
                    <ice:outputLabel value="HADT" />
 
                </ice:panelGroup>
 
                <ice:panelGroup>
 
                    <ice:selectBooleanCheckbox id="GMTminus9" required="false"
 
                                               immediate="true"
 
                                               
valueChangeListener="#{timeZoneBean.timeZoneChanged}"
 
                                               
value="#{timeZoneBean.checkboxStates['GMTminus9']}"
 
                                               autocomplete="off"/>
 
                    <ice:outputLabel value="AKST" />
 
                </ice:panelGroup>
 
                <ice:panelGroup>
 
                    <ice:selectBooleanCheckbox id="GMTminus8" required="false"
 
                                               immediate="true"
 
                                               
valueChangeListener="#{timeZoneBean.timeZoneChanged}"
 
                                               
value="#{timeZoneBean.checkboxStates['GMTminus8']}"
 
                                               autocomplete="off"/>
 
                    <ice:outputLabel value="PST" />
 
                </ice:panelGroup>
 
                <ice:panelGroup>
 
                    <ice:selectBooleanCheckbox id="GMTminus7" required="false"
 
                                               immediate="true"
 
                                               
valueChangeListener="#{timeZoneBean.timeZoneChanged}"
 
                                               
value="#{timeZoneBean.checkboxStates['GMTminus7']}"
 
                                               autocomplete="off"/>
 
                    <ice:outputLabel value="MDT" />
 
                </ice:panelGroup>
 
                <ice:panelGroup>
 
                    <ice:selectBooleanCheckbox id="GMTminus6" required="false"
 
                                               immediate="true"
 
                                               
valueChangeListener="#{timeZoneBean.timeZoneChanged}"
 
                                               
value="#{timeZoneBean.checkboxStates['GMTminus6']}"
 
                                               autocomplete="off"/>
 
                    <ice:outputLabel value="CDT" />
 
                </ice:panelGroup>
 
                <ice:panelGroup>
 
                    <ice:selectBooleanCheckbox id="GMTminus5" required="false"
 
                                               immediate="true"
 
                                               
valueChangeListener="#{timeZoneBean.timeZoneChanged}"
 
                                               
value="#{timeZoneBean.checkboxStates['GMTminus5']}"
 
                                               autocomplete="off"/>
 
                    <ice:outputLabel value="EST" />
 
                </ice:panelGroup>
 
                <ice:panelGroup>
 
                    <ice:selectBooleanCheckbox id="GMTminus4" required="false"
 
                                               immediate="true"
 
                                               
valueChangeListener="#{timeZoneBean.timeZoneChanged}"
 
                                               
value="#{timeZoneBean.checkboxStates['GMTminus4']}"
 
                                               autocomplete="off"/>
 
                    <ice:outputLabel value="NST" />
 
                </ice:panelGroup>
 
            </ice:panelGrid>
 
            <ice:dataTable id="timezoneDataTable"
 
                           value="#{timeZoneBean.checkedTimeZoneList}"
 
                           var="checkedTimeZone" headerClass="tableHeader"
 
                           width="100%"
 
                           
columnClasses="checkedDisplayName,checkedLocation,checkedUseDaylightTime,

                checkedInDaylightTime,checkedTime">
 
                <f:facet name="header">
 
                    <ice:outputText styleClass="tableHeaderTitle"
 
                                    value="Checked Time Zones"/>
 
                </f:facet>
 
                <ice:column>
 
                    <f:facet name="header">
 
                        <ice:outputText value="Time Zone"/>
 
                    </f:facet>
 
                    <ice:outputText value="#{checkedTimeZone.displayName}"/>
 
                </ice:column>
 
                <ice:column>
 
                    <f:facet name="header">
 
                        <ice:outputText value="Location"/>
 
                    </f:facet>
 
                    <ice:outputText value="#{checkedTimeZone.location}"/>
 
                </ice:column>
 
                <ice:column>
 
                    <f:facet name="header">
 
                        <ice:outputText value="Uses DST"/>
 
                    </f:facet>
 
                    <ice:outputText value="#{checkedTimeZone.useDaylightTime}"/>
 
                </ice:column>
 
                <ice:column>
 
                    <f:facet name="header">
 
                        <h:outputText value="In DST"/>
 
                    </f:facet>
 
                    <h:outputText value="#{checkedTimeZone.inDaylightTime}"/>
 
                </ice:column>
 
                <ice:column>
 
                    <f:facet name="header">
 
                        <ice:outputText value="Time"/>
 
                    </f:facet>
 
                    <ice:outputText styleClass="formLabel"
 
                                    value=" #{checkedTimeZone.time} "/>
 
                </ice:column>
 
            </ice:dataTable>
 
        </ice:form>
 
    </div>
 
    </body>
 
    </html>
 
</f:view>

There are two <div> elements applied to the page. The first helps create a page heading: 

<div id="headerDiv">

The second creates a container for the rest of the application: 

<div id="timeZonePanel">

The styleClass attribute is used to apply styles from the style sheet to JSF elements: 

<ice:outputText styleClass="formLabel" value="#{timeZoneBean.serverTimeZoneName}"/>

The JSF panelGrid component has a rowClasses attribute that applies styles from the style sheet to the rows of the table it creates. In this example, the floatingDialogHeader class is applied to the first row and the second and third rows are left blank, meaning no style is applied. 

<ice:panelGrid columns="2" rowClasses="floatingDialogHeader, , " width="100%">

The JSF dataTable component has a headerClass attribute that applies styles to all the headers in the table. It also has a columnClasses attribute that applies styles to all of the columns in the table: 

<ice:dataTable id="timezoneDataTable" var="checkedTimeZone"
 
             value="#{timeZoneBean.checkedTimeZoneList}" 
 
             headerClass="tableHeader" width="100%" 
 
             columnClasses="checkedDisplayName,
 
             checkedLocation,checkedUseDaylightTime,
 
             checkedInDaylightTime,checkedTime">


Copyright 2005-2009. ICEsoft Technologies, Inc.
TOC PREV NEXT INDEX