Implementing Styles

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

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

Tutorial example timezone5 uses only styles from the stylesheet as shown below:

<f:view xmlns:f="http://java.sun.com/jsf/core" 
 
	xmlns:h="http://java.sun.com/jsf/html">
 
<html>
 
	<head> <title>Time Zone</title> </head>
 
		<link rel="stylesheet" type="text/css" href="./icesoft_styles1.css" />
 
		<body bgcolor="white">
 
		<div id="headerDiv">
 
			<table width="100%" cellpadding="0" cellspacing="0">
 
				<tr class="demoHeaderBkgnd" >
 
					<td width="338" align="left"><img src="images/demo-page-left.gif"
 
							width="338" height="60"/></td>
 
					<td width="183"></td>
 
					<td width="120" rowspan="2" align="right" valign="top">
 
							<img src="images/demo-page-right.gif" width="119" height="96"/>
 
					</td>
 
				</tr>
 
				<tr>
 
					<td align="left" valign="top"><img src="images/timezone_logo.gif"
 
								width="200" height="31"/></td>
 
					<td align="right"></td>
 
				</tr>
 
			</table>
 
		</div>
 
	
 
	<div id="timeZonePanel" >  
 
		<h:form>
 
			<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}"/>
 
				<h:commandButton id="GMTminus9" image="images/alaska.jpg"
 
														actionListener="#{timeZoneBean.listen}"/>
 
				<h:commandButton id="GMTminus8" image="images/pacific.jpg" 
 
														actionListener="#{timeZoneBean.listen}"/>
 
				<h:commandButton id="GMTminus7" image="images/mountain.jpg" 
 
														actionListener="#{timeZoneBean.listen}"/>
 
				<h:commandButton id="GMTminus6" image="images/central.jpg" 
 
														actionListener="#{timeZoneBean.listen}"/>
 
				<h:commandButton id="GMTminus5" image="images/eastern.jpg" 
 
														actionListener="#{timeZoneBean.listen}"/>
 
				<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}" />
 
			</h:panelGrid>				
 
			<h:dataTable id="timezoneDataTable" 
 
								value="#{timeZoneBean.checkedTimeZoneList}" var="checkedTimeZone"
 
														headerClass="tableHeader" width="100%" >
 
				<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 styleClass="formLabel" 
 
								value=" #{checkedTimeZone.time} "/>
 
				</h:column>									 
 
			</h:dataTable>
 
		</h: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 class attribute is used to apply styles from the stylesheet to HTML elements:

<tr class="demoHeaderBkgnd" >

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

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

The JSF panelGrid component has a rowClasses attribute that applies styles from the stylesheet to the rows of the table it creates:

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

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.

The JSF dataTable component has a headerClass attribute that applies styles to all the headers in the table:

<h:dataTable value="#{timeZoneBean.checkedTimeZoneList}" var="checkedTimeZone"
 
					headerClass="tableHeader" width="100%" >