Full web project without using a Java back-end with JSF 1.1 and JSPX files

The project

This is an example project with all the configuration you need. It is created using maven and uses only the custom components in a JSF 1.1 environment (with Facelets ofcourse). The JSP file is created in the XML layout and was tested with Apache Tomcat 5.5, OC4J 10.1.3 and Glassfish V" preview (version downloadable on june 10 2009).

Project structure

Please create the following folder structure for your project.

folder structure

Necessary files

There are a few files that you need for the project.

pom.xml

Place your pom.xml in the root folder of your project. Below is a sample pom.xml provided.

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd">
	<modelVersion>4.0.0</modelVersion>
	<groupId>com.realdolmen.sf.mapface</groupId>
	<artifactId>tutorial3</artifactId>
	<packaging>war</packaging>
	<version>1.0</version>
	<name>MapFace test on JSF 1.1 with JSPX</name>
    <dependencies>
		<!-- JSF -->
		<dependency>
			<groupId>org.apache.myfaces.core</groupId>
			<artifactId>myfaces-api</artifactId>
			<version>1.1.5</version>
		</dependency>
		<dependency>
			<groupId>org.apache.myfaces.core</groupId>
			<artifactId>myfaces-impl</artifactId>
			<version>1.1.5</version>
		</dependency>
		<!-- Facelets -->
		<dependency>
			<groupId>com.sun.facelets</groupId>
			<artifactId>jsf-facelets</artifactId>
			<version>1.1.14</version>
		</dependency>
		
		<dependency>
			<groupId>javax.el</groupId>
			<artifactId>el-api</artifactId>
			<version>1.0</version>
		</dependency>
		<dependency>
			<groupId>com.sun.el</groupId>
			<artifactId>el-ri</artifactId>
			<version>1.0</version>
		</dependency>		
		<!-- Custom GMAP Component -->
		<dependency>
				<groupId>com.realdolmen.sf</groupId>
				<artifactId>mapface</artifactId>
				<version>1.0-SNAPSHOT</version>
		</dependency>
	</dependencies>
	<build>
		<finalName>jsf11jspx</finalName>		
		<plugins>
			<plugin>
				<artifactId>maven-compiler-plugin</artifactId>
				<version>2.0.2</version>
				<configuration>
					<source>1.5</source>
					<target>1.5</target>
				</configuration>
			</plugin>
			<plugin>
				<groupId>org.apache.maven.plugins</groupId>
				<artifactId>maven-eclipse-plugin</artifactId>
				<version>2.5</version>
				<configuration>
					<downloadSources>false</downloadSources>
					<downloadJavadocs>false</downloadJavadocs>
					<wtpversion>2.0</wtpversion>
				</configuration>
			</plugin>
			<plugin>
				<groupId>org.apache.myfaces.trinidadbuild</groupId>
				<artifactId>maven-jdev-plugin</artifactId>
				<version>1.2.9</version>
			</plugin>			
		</plugins>
	</build>
</project>	    

web.xml

In order to create a working web project, you need a valid web.xml. Below is a working example for this project. This file needs to be placed in the src/main/webapp/WEB-INF folder.

<?xml version="1.0" encoding="UTF-8"?>
<web-app id="WebApp_ID" version="2.4"
  xmlns="http://java.sun.com/xml/ns/j2ee"
  xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">

  <display-name>
    MapFace JSF 1.1 test
  </display-name>

  <context-param>
    <param-name>javax.faces.DEFAULT_SUFFIX</param-name>
    <param-value>.jspx</param-value>
  </context-param>

  <listener>
    <listener-class>
      org.apache.myfaces.webapp.StartupServletContextListener
    </listener-class>
  </listener>

  <servlet>
    <servlet-name>Faces Servlet</servlet-name>
    <servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
    <load-on-startup>1</load-on-startup>
  </servlet>

  <servlet-mapping>
    <servlet-name>Faces Servlet</servlet-name>
    <url-pattern>*.jsf</url-pattern>
  </servlet-mapping>

  <welcome-file-list>
  	<welcome-file>index.jsf</welcome-file>
  </welcome-file-list>
</web-app>

faces-config.xml

Because we use JSF and Facelets, we need a faces-config.xml which is placed in the same folder as the web.xml, e.g. src/main/webapp/WEB-INF.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE faces-config PUBLIC "-//Sun Microsystems, Inc.//DTD JavaServer Faces Config 1.1//EN"
                              "http://java.sun.com/dtd/web-facesconfig_1_1.dtd">
<faces-config>
 <application>
  <view-handler>com.sun.facelets.FaceletViewHandler</view-handler>
 </application>
</faces-config>

Import the project in your IDE

In our example, we used JDeveloper, but feel free to use any IDE you like. To create an JDeveloper-project, run the following command:

mvn jdev:jdev

Now your are ready to start with the web page, which is placed under src/main/webapp

index.jspx

The page contains the Google Map and the panel for the searching and route planning. (For the images and CSS styles used, please download the project sources).

<?xml version="1.0" encoding="ISO-8859-1" ?>
<jsp:root xmlns:jsp="http://java.sun.com/JSP/Page"
          xmlns:f="http://java.sun.com/jsf/core"
          xmlns:h="http://java.sun.com/jsf/html" version="2.0"
          xmlns:rd="http://www.realdolmen.com/mapface">
 <jsp:output omit-xml-declaration="true" doctype-root-element="HTML"
             doctype-system="http://www.w3.org/TR/html4/loose.dtd"
             doctype-public="-//W3C//DTD HTML 4.01 Transitional//EN"/>
 <jsp:directive.page contentType="text/html;charset=windows-1252"/>
 <html xmlns="http://www.w3.org/1999/xhtml">
  <head>
   <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"/>
   <title>MapFace test JSF 1.1</title>
   <link href="css/style.css" rel="stylesheet" media="screen"/>
  </head>
  <body>
   <f:view>
    <div id="leftPanel">
     <rd:searchPanel id="searchPanel"/>
      
     <rd:directionsPanel id="directionsPanel"/>
    </div>
    <div id="mapPanel">
     <rd:map mapId="map_canvas" width="100%" height="100%" key="abcdefg"
             showDirections="true" search="true" autoCenter="true"
             mapControl="largeMap3D" scrollWheelZoom="true" overviewMap="true"
             scaleControl="true">
      <rd:clusterer gridSize="16" minMarkersPerCluster="3"
                    maxVisibleMarkers="13">
       <rd:clusterIcon iconLink="img/cluster.png"
                       shadowLink="img/shadow_cluster.png" iconWidth="28"
                       iconHeight="46" shadowWidth="51" shadowHeight="46"
                       iconAnchorX="12" iconAnchorY="30" infoWindowAnchorX="12"
                       infoWindowAnchorY="3" infoShadowAnchorX="24"
                       infoShadowAnchorY="34"/>
      </rd:clusterer>
      <rd:mapTypeControl useMenu="true" normalMap="true" satelliteMap="true"
                         hybridMap="true" physicalMap="true"/>
		<rd:marker name="Headquarters Huizingen" id="marker1" address="A. Vaucampslaan 42" 
			city="1654 Huizingen" latitude="50.7520688" longitude="4.2634274" 
			searchValue="Headquarters Huizingen Huizingen" iconLink="img/RDMarker.png"> 
			<rd:infoWindow for="marker1" 
				text="&lt;b&gt;Headquarters Huizingen&lt;/b&gt;&lt;br /&gt;
					A. Vaucampslaan 42&lt;br /&gt;1654 Huizingen&lt;br /&gt;"/>
		</rd:marker>
		<rd:marker name="Office Kontich Boudewijnlaan" id="marker2" address="Prins Boudewijnlaan 26" 
			city="2550 Kontich" latitude="51.1410521" longitude="4.4378872" 
			searchValue="Office Kontich Boudewijnlaan Kontich" iconLink="img/RDMarker.png"> 
			<rd:infoWindow for="marker2" 
				text="&lt;b&gt;Office Kontich Boudewijnlaan&lt;/b&gt;&lt;br /&gt;
					Prins Boudewijnlaan 26&lt;br /&gt;2550 Kontich&lt;br /&gt;"/>
		</rd:marker>
		<rd:marker name="Office Brussel" id="marker3" address="Bruidstraat 11" 
			city="1000 Brussel" latitude="50.8470177" longitude="4.352505" 
			searchValue="Office Brussel Brussel" iconLink="img/RDMarker.png"> 
			<rd:infoWindow for="marker3" 
				text="&lt;b&gt;Office Brussel&lt;/b&gt;&lt;br /&gt;
					Bruidstraat 11&lt;br /&gt;1000 Brussel&lt;br /&gt;"/>
		</rd:marker>
		<rd:marker name="Office De Pinte" id="marker4" address="Grote Steenweg 15" 
			city="9840 De Pinte" latitude="50.9955609" longitude="3.6847499" 
			searchValue="Office De Pinte De Pinte" iconLink="img/RDMarker.png"> 
			<rd:infoWindow for="marker4" 
				text="&lt;b&gt;Office De Pinte&lt;/b&gt;&lt;br /&gt;
					Grote Steenweg 15&lt;br /&gt;9840 De Pinte&lt;br /&gt;"/>
		</rd:marker>
		<rd:marker name="Office Harelbeke" id="marker5" address="Kortrijksesteenweg 307" 
			city="8530 Harelbeke" latitude="50.8430976" longitude="3.2920447" 
			searchValue="Office Harelbeke Harelbeke" iconLink="img/RDMarker.png"> 
			<rd:infoWindow for="marker5" 
				text="&lt;b&gt;Office Harelbeke&lt;/b&gt;&lt;br /&gt;
					Kortrijksesteenweg 307&lt;br /&gt;8530 Harelbeke&lt;br /&gt;"/>
		</rd:marker>
		<rd:marker name="Office Houthalen" id="marker6" address="Centrum-Zuid 1527" 
			city="3530 Houthalen" latitude="51.019571" longitude="5.3599932" 
			searchValue="Office Houthalen Houthalen" iconLink="img/RDMarker.png"> 
			<rd:infoWindow for="marker6" 
				text="&lt;b&gt;Office Houthalen&lt;/b&gt;&lt;br /&gt;
					Centrum-Zuid 1527&lt;br /&gt;3530 Houthalen&lt;br /&gt;"/>
		</rd:marker>
		<rd:marker name="Office Axias" id="marker7" address="Prins Boudewijnlaan 24" 
			city="2550 Kontich" latitude="51.1401392" longitude="4.4382415" 
			searchValue="Office Axias Kontich" iconLink="img/RDMarker.png"> 
			<rd:infoWindow for="marker7" 
				text="&lt;b&gt;Office Axias&lt;/b&gt;&lt;br /&gt;
					Prins Boudewijnlaan 24&lt;br /&gt;2550 Kontich&lt;br /&gt;"/>
		</rd:marker>
		<rd:marker name="Office Kontich Veldkant" id="marker8" address="Veldkant 33" 
			city="2550 Kontich" latitude="51.1414364" longitude="4.441827" 
			searchValue="Office Kontich Veldkant Kontich" iconLink="img/RDMarker.png"> 
			<rd:infoWindow for="marker8" 
				text="&lt;b&gt;Office Kontich Veldkant&lt;/b&gt;&lt;br /&gt;
					Veldkant 33&lt;br /&gt;2550 Kontich&lt;br /&gt;"/>
		</rd:marker>
		<rd:marker name="Office Luxemburg" id="marker9" address="Rue d'Eich 33" 
			city="1461 Luxemburg" latitude="49.6295829" longitude="6.1318144" 
			searchValue="Office Luxemburg Luxemburg" iconLink="img/RDMarker.png"> 
			<rd:infoWindow for="marker9" 
				text="&lt;b&gt;Office Luxemburg&lt;/b&gt;&lt;br /&gt;
					Rue d&#39;Eich 33&lt;br /&gt;1461 Luxemburg&lt;br /&gt;"/>
		</rd:marker>
		<rd:marker name="Office Namen" id="marker10" address="Rue de Gembloux 9" 
			city="5080 Rhisnes" latitude="50.4985411" longitude="4.7978059" 
			searchValue="Office Namen Rhisnes" iconLink="img/RDMarker.png"> 
			<rd:infoWindow for="marker10" 
				text="&lt;b&gt;Office Namen&lt;/b&gt;&lt;br /&gt;
					Rue de Gembloux 9&lt;br /&gt;5080 Rhisnes&lt;br /&gt;"/>
		</rd:marker>
		<rd:marker name="Office Turnhout" id="marker11" address="Steenweg op Mol 148" 
			city="2360 Oud-Turnhout" latitude="51.3125503" longitude="4.9956365" 
			searchValue="Office Turnhout Oud-Turnhout" iconLink="img/RDMarker.png"> 
			<rd:infoWindow for="marker11" 
				text="&lt;b&gt;Office Turnhout&lt;/b&gt;&lt;br /&gt;
					Steenweg op Mol 148&lt;br /&gt;2360 Oud-Turnhout&lt;br /&gt;"/>
		</rd:marker>
		<rd:marker name="Office Zaventem" id="marker12" address="Leuvensesteenweg 542" 
			city="1930 Zaventem" latitude="50.8749381" longitude="4.4923216" 
			searchValue="Office Zaventem Zaventem" iconLink="img/RDMarker.png"> 
			<rd:infoWindow for="marker12" 
				text="&lt;b&gt;Office Zaventem&lt;/b&gt;&lt;br /&gt;
					Leuvensesteenweg 542&lt;br /&gt;1930 Zaventem&lt;br /&gt;"/>
		</rd:marker>
		<rd:marker name="Office Frankrijk - Airial" id="marker13" address="Rue Bellini 3" 
			city="92806 Puteaux" latitude="48.8860766" longitude="2.2504484" 
			searchValue="Office Frankrijk - Airial Puteaux" iconLink="img/RDMarker.png"> 
			<rd:infoWindow for="marker13" 
				text="&lt;b&gt;Office Frankrijk - Airial&lt;/b&gt;&lt;br /&gt;
					Rue Bellini 3&lt;br /&gt;92806 Puteaux&lt;br /&gt;"/>
		</rd:marker>
		<rd:marker name="Office Frankrijk - Oriam" id="marker14" address="Parvis de Saint-Maur 8" 
			city="94106 Saint-Maur" latitude="48.806489" longitude="2.4725422" 
			searchValue="Office Frankrijk - Oriam Saint-Maur" iconLink="img/RDMarker.png"> 
			<rd:infoWindow for="marker14" 
				text="&lt;b&gt;Office Frankrijk - Oriam&lt;/b&gt;&lt;br /&gt;
					Parvis de Saint-Maur 8&lt;br /&gt;94106 Saint-Maur&lt;br /&gt;"/>
		</rd:marker>
     </rd:map>
    </div>
   </f:view>
  </body>
 </html>
</jsp:root>

That's it. All you have to do now is deploy your application and browse to it. Have fun!