TOC PREV NEXT INDEX



PDF
ICEfaces Online Reference




 


 



Implementing Styles

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

<h:outputText style="font-weight:600" value="Server Time Zone"/>

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">
 
            <h:panelGrid columns="2" 
 
                      rowClasses="floatingDialogHeader, , " width="100%">
 
                <h:outputText value="Server Time Zone"/>
 
                <h:outputText value="Time Zone Selected from Map"/>
 
                <h:outputText styleClass="formLabel" 
 
                                   value="#{timeZoneBean.serverTimeZoneName}"/>
 
                <h:outputText styleClass="formLabel" 
 
                                   value="#{timeZoneBean.selectedTimeZoneName}"/>
 
                <h:outputText value="#{timeZoneBean.serverTime}"/>
 
                <h:outputText value="#{timeZoneBean.selectedTime}"/>
 
            </h:panelGrid>
 
            <h:panelGrid columns="6" width="100%" cellpadding="0" cellspacing="0">
 
                <h:commandButton id="GMTminus10" image="images/hawaii.jpg" 
 
                    actionListener="#{timeZoneBean.listen}" style="border: 0px;"/>
 
                <h:commandButton id="GMTminus9" image="images/alaska.jpg" 
 
                    actionListener="#{timeZoneBean.listen}" style="border: 0px;"/>
 
                <h:commandButton id="GMTminus8" image="images/pacific.jpg" 
 
                    actionListener="#{timeZoneBean.listen}" style="border: 0px;"/>
 
                <h:commandButton id="GMTminus7" image="images/mountain.jpg" 
 
                    actionListener="#{timeZoneBean.listen}" style="border: 0px;"/>
 
                <h:commandButton id="GMTminus6" image="images/central.jpg" 
 
                    actionListener="#{timeZoneBean.listen}" style="border: 0px;"/>
 
                <h:commandButton id="GMTminus5" image="images/eastern.jpg" 
 
                    actionListener="#{timeZoneBean.listen}" style="border: 0px;"/>
 
                <ice:selectBooleanCheckbox id="Cminus10" required="false" 
 
                    immediate="true" 
 
                    valueChangeListener="#{timeZoneBean.timeZoneChanged}" 
 
                    value="#{timeZoneBean.checkboxStates['Cminus10']}"
 
                    autocomplete="off"/>
 
                <ice:selectBooleanCheckbox id="Cminus9" required="false" 
 
                    immediate="true" 
 
                    valueChangeListener="#{timeZoneBean.timeZoneChanged}" 
 
                    value="#{timeZoneBean.checkboxStates['Cminus9']}"
 
                    autocomplete="off"/>
 
                <ice:selectBooleanCheckbox id="Cminus8" required="false" 
 
                    immediate="true" 
 
                    valueChangeListener="#{timeZoneBean.timeZoneChanged}" 
 
                    value="#{timeZoneBean.checkboxStates['Cminus8']}"
 
                    autocomplete="off"/>
 
                <ice:selectBooleanCheckbox id="Cminus7" required="false" 
 
                    immediate="true" 
 
                    valueChangeListener="#{timeZoneBean.timeZoneChanged}" 
 
                    value="#{timeZoneBean.checkboxStates['Cminus7']}"
 
                    autocomplete="off"/>
 
                <ice:selectBooleanCheckbox id="Cminus6" required="false" 
 
                    immediate="true" 
 
                    valueChangeListener="#{timeZoneBean.timeZoneChanged}" 
 
                    value="#{timeZoneBean.checkboxStates['Cminus6']}"
 
                    autocomplete="off"/>
 
                <ice:selectBooleanCheckbox id="Cminus5" required="false" 
 
                    immediate="true" 
 
                    valueChangeListener="#{timeZoneBean.timeZoneChanged}" 
 
                    value="#{timeZoneBean.checkboxStates['Cminus5']}"
 
                    autocomplete="off"/>
 
            </h:panelGrid>
 
            <h:dataTable id="timezoneDataTable" 
 
                    value="#{timeZoneBean.checkedTimeZoneList}" 
 
                    var="checkedTimeZone" headerClass="tableHeader" width="100%" 
 
                    columnClasses="checkedDisplayName,checkedLocation,checkedUseDay
 
                    lightTime,checkedInDaylightTime,checkedTime">
 
                <f:facet name="header"><h:outputText styleClass="tableHeaderTitle" 
 
                    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 styleClass="formLabel" 
 
                        value=" #{checkedTimeZone.time} "/>
 
                </h:column>
 
            </h:dataTable>
 
        </ice:form>
 
    </div>
 
    <!-- DEMO_SURVEY_JAVASCRIPT BEGIN -->
 
    <div style="position:absolute; top:650px;left:15%;width:500px;
 
                text-align: right;" >
 
        <f:verbatim>
 
            <script language="JavaScript">
 
                survey0 = new Image(259,39);
 
                survey0.src = "images/survey-button_n.gif";
 
                survey1 = new Image(259,39);
 
                survey1.src = "images/survey-button_r.gif";
 
                function switchimage (imgname, target) {
 
                    document.images[imgname].src = target.src;
 
                }
 
            </script>
 
        </f:verbatim>
 
        <a href="http://demo.icesoft.com/survey/demoFeedback.iface?appId=4"
 
            target="_blank"
 
            onMouseOver="switchimage('survey',survey1);" 
 
            onMouseOut="switchimage('survey',survey0);">
 
            <img src="images/survey-button_n.gif" width="259" height="39"
 
                 name="survey"
 
                 border="0"
 
                 alt="Demo Feedback" />
 
        </a>
 
    </div>
 
    <!-- DEMO_SURVEY_JAVASCRIPT END -->
 
    </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: 

<h: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. 

<h: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: 

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

Copyright 2005-2006. ICEsoft Technologies, Inc.
http://www.icesoft.com
TOC PREV NEXT INDEX