TOC PREV NEXT INDEX

Creating a JSP Page with Standard JSF and HTML Tags


Our first iteration of the TimeZone application (see Figure 9 below) has a panelGrid component at the top to hold the two separate time displays:

A commandButton is used to display a map which contains seven timezone regions. When a region of the map is clicked, the display at the top right updates to show the selected region's time and timezone.


Note: Throughout this tutorial, we use boldface text to highlight code we want to bring to your attention. ICEfaces does not require any code to be typed in bold.

Figure 9 TimeZone Application as Stock JSF Application



The code for the timezone.jsp page is as follows: 

<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %>
 
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>
 
<f:view>
 
	<html>
 
		<head><title>ICEfaces: TimeZone Sample Application</title></head>
 
		<body>
 
			<h3>ICEfaces: TimeZone Sample Application</h3>  
 
			<h:form>
 
				<h:panelGrid columns="2">
 
					<h:outputText style="font-weight:600" value="Server Time Zone"/>
 
					<h:outputText style="font-weight:600" value="Time Zone Selected from Map"/>
 
					<h:outputText value="#{timeZoneBean.serverTimeZoneName}"/>
 
					<h:outputText value="#{timeZoneBean.selectedTimeZoneName}"/>
 
					<h:outputText style="font-weight:800" value="#{timeZoneBean.serverTime}"/>
 
					<h:outputText style="font-weight:800" 

					              value="#{timeZoneBean.selectedTime}"/>
 
				</h:panelGrid>
 
						<h:commandButton id="map" image="images/map.jpg"
 
									actionListener="#{timeZoneBean.listen}" />
 
			</h:form>        
 
		</body>
 
	</html>
 
</f:view>

Most of the components are dynamically bound to backing JavaBeans through JSF expression language bindings as shown below: 

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


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