Creating a JSP Page with Standard JSF and HTML Tags

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

the application's host server time, and
the time for the zone selected from the map.

A second PanelGrid below holds six time zone map images, implemented as CommandButton components. When a region of the map is clicked, the display at the top right updates to display the selected region's time and time zone.

Figure 1-3 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>Time Zone</title> </head>
 
		<body>
 
			<h3>Time Zone 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:panelGrid columns="6">
 
					<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:panelGrid>
 
				<pre/>
 
			</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}"/>

The commandButton components also use JSF expression language bindings in the actionListener attribute as shown below.

<h:commandButton id="GMTminus10" image="images/hawaii.jpg" 
 
		actionListener="#{timeZoneBean.listen}"/>

The id attribute of a commandButton component is used to pass information into the bean identifying which button was pressed.

<h:commandButton id="GMTminus10" image="images/hawaii.jpg" 
 
		actionListener="#{timeZoneBean.listen}"/>