Full web project without using a Java back-end

The project

This is an example project with all the configuration you need. It is created using maven, uses a richfaces front-end and was deployed on a JBOSS 4.2.3 AS.

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>tutorial</artifactId>
	<packaging>war</packaging>
	<version>1.0</version>
	<name>MapFace tutorial with backend</name>
	<url>http://maven.apache.org</url>
	<!-- Some additional repositories -->
	<repositories>
		<repository>
			<releases />
			<snapshots>
				<enabled>false</enabled>
				<updatePolicy>never</updatePolicy>
			</snapshots>
			<id>repository.jboss.com</id>
			<name>Jboss Repository for Maven</name>
			<url>http://repository.jboss.com/maven2/</url>
			<layout>default</layout>
		</repository>
		<repository>
			<id>maven2-repository.dev.java.net</id>
			<name>Java.net Repository for Maven</name>
			<url>http://download.java.net/maven/2/</url>
			<layout>default</layout>
		</repository>
	</repositories>
	<dependencies>
		<!-- JSF -->
		<dependency>
			<groupId>javax.faces</groupId>
			<artifactId>jsf-api</artifactId>
			<version>1.2_08</version>
			<scope>provided</scope>
		</dependency>
		<dependency>
			<groupId>javax.faces</groupId>
			<artifactId>jsf-impl</artifactId>
			<version>1.2_08</version>
			<scope>provided</scope>
		</dependency>
		<!-- Facelets -->
		<dependency>
			<groupId>com.sun.facelets</groupId>
			<artifactId>jsf-facelets</artifactId>
			<version>1.1.14</version>
			<exclusions>
				<exclusion>
					<groupId>javax.el</groupId>
					<artifactId>el-api</artifactId>
				</exclusion>
			</exclusions>
		</dependency>
		<!-- Richfaces -->
		<dependency>
			<groupId>org.richfaces.framework</groupId>
			<artifactId>richfaces-api</artifactId>
			<version>3.3.1.GA</version>
		</dependency>
		<dependency>
			<groupId>org.richfaces.framework</groupId>
			<artifactId>richfaces-impl</artifactId>
			<version>3.3.1.GA</version>
		</dependency>
		<dependency>
			<groupId>org.richfaces.ui</groupId>
			<artifactId>richfaces-ui</artifactId>
			<version>3.3.1.GA</version>
		</dependency>

		<!-- LOGGING -->
		<dependency>
			<groupId>log4j</groupId>
			<artifactId>log4j</artifactId>
			<version>1.2.13</version>
			<scope>provided</scope>
		</dependency>
		
		<!-- SERVLET API -->
		<dependency>
			<groupId>javax.servlet</groupId>
			<artifactId>servlet-api</artifactId>
			<version>2.5</version>
			<scope>provided</scope>
		</dependency>
		<dependency>
			<groupId>javax.servlet.jsp</groupId>
			<artifactId>jsp-api</artifactId>
			<version>2.1</version>
			<scope>provided</scope>
		</dependency>
		
		<!-- Custom GMAP Component -->
		<dependency>
				<groupId>com.realdolmen</groupId>
				<artifactId>mapface</artifactId>
				<version>1.0</version>
		</dependency>
	</dependencies>
	<build>
		<finalName>mapfacetutorial</finalName>		
		<plugins>
			<plugin>
				<artifactId>maven-compiler-plugin</artifactId>
				<version>2.0.2</version>
				<configuration>
					<source>1.6</source>
					<target>1.6</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>
		</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 version="2.5" xmlns="http://java.sun.com/xml/ns/javaee"
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">
	<!-- Richfaces -->
	<context-param>
		<param-name>org.richfaces.SKIN</param-name>
		<param-value>DEFAULT</param-value>
	</context-param>
	<!-- Making the RichFaces skin spread to standard HTML controls -->
	<context-param>
		<param-name>org.richfaces.CONTROL_SKINNING</param-name>
		<param-value>enable</param-value>
	</context-param>
	<context-param>
		<param-name>org.ajax4jsf.VIEW_HANDLERS</param-name>
		<param-value>com.sun.facelets.FaceletViewHandler</param-value>
	</context-param>
	<filter>
		<display-name>RichFaces Filter</display-name>
		<filter-name>richfaces</filter-name>
		<filter-class>org.ajax4jsf.Filter</filter-class>
	</filter>
	<filter-mapping>
		<filter-name>richfaces</filter-name>
		<servlet-name>Faces Servlet</servlet-name>
		<dispatcher>REQUEST</dispatcher>
		<dispatcher>FORWARD</dispatcher>
		<dispatcher>INCLUDE</dispatcher>
	</filter-mapping>

	<!-- Faces Servlet -->
	<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>*.html</url-pattern>
	</servlet-mapping>
	<!-- JSF parameters -->
	<context-param>
		<param-name>javax.faces.DEFAULT_SUFFIX</param-name>
		<param-value>.xhtml</param-value>
	</context-param>
	<context-param>
		<param-name>facelets.DEVELOPMENT</param-name>
		<param-value>true</param-value>
	</context-param>
	<security-constraint>
		<display-name>Restrict raw XHTML Documents</display-name>
		<web-resource-collection>
			<web-resource-name>XHTML</web-resource-name>
			<url-pattern>*.xhtml</url-pattern>
		</web-resource-collection>
		<auth-constraint />
	</security-constraint>
	<session-config>
		<session-timeout>10</session-timeout>
	</session-config>
</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'?>
<faces-config version="1.2"
     xmlns="http://java.sun.com/xml/ns/javaee"
     xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
     xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-facesconfig_1_2.xsd">
    <application>
        <message-bundle>messages</message-bundle>
        <locale-config>
            <default-locale>en</default-locale>
            <supported-locale>en</supported-locale>
        </locale-config>
        <view-handler>com.sun.facelets.FaceletViewHandler</view-handler>
    </application>
</faces-config>

Import the project in your IDE

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

mvn eclipse:eclipse

Now you can import this project in your IDE.

Creating the web pages

First of all, create a folder named template inside the webapp folder. Inside this folder create a file names template.xhtml, this will be our template for the webpages.

template.xhtml
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core">
	<head>
		<title>MapFace tutorial</title>
		<link href="css/style.css" rel="stylesheet" type="text/css" />
	</head>
	<body>
		<div id="container">
			<div id="bodyContent">
				<ui:insert name="content">Content</ui:insert>
			</div>
		</div>
	</body>
</html>

Next is the index.jsp file, wich is placed under src/main/webapp. This file doesn't contain much, just a single line to redirect the user to the map.

index.jsp
<% response.sendRedirect("map.html"); %>

Finally, we are going to create the page containing the google map. (For the images and CSS styles used, please download the project sources).

map.xhtml
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:rd="http://www.realdolmen.com/mapface"
	xmlns:rich="http://richfaces.org/rich"
	template="./template/template.xhtml">
	<ui:define name="content">
		<div id="leftPanel">
			<rich:tabPanel width="100%" height="100%" switchType="client">
				<rich:tab label="Search">
					<rd:searchPanel id="searchPanel" />
				</rich:tab>
				<rich:tab label="Routeplannner">
					<rd:directionsPanel id="directionsPanel" />
				</rich:tab>
			</rich:tabPanel>
		</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>
	</ui:define>
</ui:composition>

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