![Close [x]](http://dw1.s81c.com/i/c.gif){kind=small}
GMaps4JSF aims to integrate Google maps with JavaServer Faces (JSF) and lets JSF developers construct complex street view panoramas and maps with just a few JSF tags. You can also easily attach different components (markers, information texts, controls, ground overlays, polygons, polylines) to the map. GMaps4JSF also allows attaching different server-side and client-side events to components without writing JavaScript code to bind the event with the component. You only need to write JavaScript code if you want to implement the components' client-side event handlers.
Ajax is a primary technology in any modern Web application. Although Ajax was not introducted in the earlier versions of JavaServer Faces, it was provided by many JSF component libraries like Apache MyFaces Trinidad, JBoss RichFaces, ICEFaces, and others. Now the good news is that Ajax is supported natively in JSF 2.0 implementations.
In this article, I explain how to configure GMaps4JSF inside your JSF 2.0 application and give a brief introduction to JSF 2.0 Ajax. Finally, I'll illustrate a simple mashup application that uses both GMaps4JSF and JSF 2.0 Ajax.
Configuring GMaps4JSF with your JSF 2.0 application
First, let's configure GMaps4JSF with your JSF 2.0 application. To do this:
Sign up for the Google Maps API (see Resources). You will need to accept the usage agreement and register the site that you are using for your application. In return, Google provides a key specific for your application.
Figure 1. Sign up for the Google Maps API
To use the Google Maps API you must include the Google Maps API's script in
your page. Listing 1 shows the Google Maps API's script that
must be included in your <h:head> tag. You can find full details of how to use this
code in the Google Maps API documentation (see
Resources).
Listing 1. Header codes to include the Google Maps API
<head>
<script
src="http://maps.google.com/maps?file=api&v=2&";
key="gen_website_key"
type="text/javascript">
</script>
</head> |
In
the code in Listing 1 you will need to replace the phrase "gen_website_key"
with they key provided to you during your registration. Figure 2 shows an
example of this key on the Google Maps Web site and how it fits into your
code.
Figure 2. Put in your page <h:head> tag the Google Maps APIs script include
Next you will need the JAR file for GMaps4JSF. Download the latest version from the project Web site (see Resources). Figure 3 shows the project page with the downloads on the right.
Figure 3. Download the latest library snapshot jar
Place the downloaded JAR file in the WEB-INF/lib directory of your JSF 2.0 Web application.
Finally, add the library declaration shown in Listing 2 to your XHTML page in order to use GMaps4JSF components.
Listing 2. Library declaration for GMaps4JSF components
<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"
xmlns:m="http://code.google.com/p/gmaps4jsf/"> |
Ajax is now a part of most of modern Web 2.0 applications. Writing "Ajaxified" applications from scratch can be a headache. On the client side, you must write a JavaScript client to send the Ajax requests and to receive the Ajax responses. On the server side, the application must prepare a response that can be understood by the client. In addition to all of these complexities, the JavaScript client code should be cross-browser compatible. JSF 2.0 Ajax does all of this for you.
In JSF 2.0, there are two ways
of adding Ajax support to the JSF 2.0 applications. You can use the
JavaScript library provided by the framework or the new <f:ajax> tag to declare Ajax support for the
JSF components.
The <f:ajax>
tag enables the creation of Ajax requests that are attached to the JSF components' actions.
For example, if the <f:ajax> tag is put inside an
action source component such as <h:commandButton>, it allows sending Ajax requests upon
the "onclick" action of this component. If the tag is
put inside a value holder component like <h:selectOneListbox>, it allows sending the Ajax requests
upon the "onchange" action of the component.
Listing 3 shows how easy it is to use JSF 2.0
Ajax. In this example, the <f:ajax> tag is
put inside the <h:inputText> component. So
when the user enters a value in the txtName input
text and tabs out, the txtEnteredName outputText
will be updated with the entered value.
Listing 3. The JSF 2.0 <f:ajax> tag usage example
<h:panelGrid columns="2">
<h:outputText value="Enter your name:"/>
<h:inputText id="txtName" value="#{person.name}">
<f:ajax render="txtEnteredName"/>
</h:inputText>
<h:outputText value="You entered: "/>
<h:outputText id="txtEnteredName" value="#{person.name}"/>
</h:panelGrid>
|
Now, let's move to the Countries application, which uses
both GMaps4JSF with JSF 2.0 Ajax. In this application, you have a master
dataTable and a detailed map. Each row of the dataTable represents a country,
and when the user clicks on a row the country location is displayed
in the detailed map. Figure 4 shows a screenshot of the Countries application
in action.
Figure 4. The Countries application screenshot
Listing 4 shows a partial listing of the mashups.xhtml code, the Countries
application XHTML page. I put
the <f:param> tags inside the <f:ajax> tag so I can send the parameters when
the table row "View Country Location" commandLink
is clicked. In the render attribute of the <f:ajax> tag, the ID of the panel group containing the map
component is specified "mapGroup". When the response comes from the server,
the map will be updated with the new information #{param.selectedCountry}, #{param.selectedCapital}, and #{param.continent}.
Listing 4. (mashups.xhtml) the Countries application XHTML page
<!-- some code here -->
<h:dataTable value="#{countryTable.data}" var="row">
<!-- some code here -->
<h:column>
<f:facet name="header">
<h:outputText value="Action"/>
</f:facet>
<h:commandLink id="cmdShow" value="View Country Location">
<f:ajax render="mapGroup">
<f:param name="selectedCapital" value="#{row.capital}"/>
<f:param name="continent" value="#{row.continent}"/>
<f:param name="selectedCountry" value="#{row.id}"/>
</f:ajax>
</h:commandLink>
</h:column>
</h:dataTable>
<!-- some code here -->
<h:panelGroup id="mapGroup">
<m:map id="map" width="460px" height="460px" type="G_NORMAL_MAP"
address="#{param.selectedCountry}"
rendered="#{param.selectedCountry ne null}" renderOnWindowLoad="false" zoom="4">
<m:marker id="marker"/>
<m:htmlInformationWindow id="window"
htmlText="Country: #{param.selectedCapital} <br/> Continent: #{param.continent}"/>
</m:map>
<!-- some code here -->
</h:panelGroup>
|
Listing 5 shows the Countries application sample managed bean. Note that you can get this managed bean data from a database or a Web service, but for the case of my demonstration it just holds static information about the different countries.
Listing 5. Countries application sample managed bean
@ManagedBean(name="countryTable")
@RequestScoped
public class CountryTableModel {
private static List<Country> data = new ArrayList<Country>();
static {
data.add(new Country("Egypt",
"Cairo, Egypt",
"Africa"));
data.add(new Country("Germany",
"Berlin, Germany",
"Europe"));
data.add(new Country("Austria",
"Vienna, Austria",
"Europe"));
data.add(new Country("US" ,
"Washington, USA",
"North America"));
data.add(new Country("China" ,
"Beijing, China",
"Asia"));
data.add(new Country("Brazil" ,
"Brazilia, Brazil",
"South America"));
}
public List<Country> getData() {
return data;
}
public void setData(List<Country> data) {
this.data = data;
}
}
|
In this article, you saw how JSF 2.0 simplifies building "Ajaxified" applications. You also saw how it is easy to construct Google maps, and attach different markers, notes, and controls to them using GMaps4JSF. I explained how simple it is to use GMaps4JSF in JSF 2.0 applications, and now you, as a JSF 2.0 developer, can easily build Web 2.0 mashups inside JSF 2.0 applications without having to write JavaScript code.
| Description | Name | Size | Download method |
|---|---|---|---|
| Source code | mashups2-Eclipse-sourcecode.zip | 7674KB | HTTP |
Information about download methods
Learn
- "JSF 2 fu, Part 1: Streamline Web application development"
(developerWorks, May 2009) describes how to streamline development with JSF 2
by replacing XML configuration with annotations and convention, simplifying navigation, and easily accessing resources.
-
Roger Kitain and Ed Burns are the co-spec leads for JSF 2.0. Read Roger's blog to keep up to date.
-
Jim Driscoll's blog is a
very interesting blog about JSF 2.0.
-
Ryan Lubke's Blog keeps you up to
date with JSF 2.0.
- Join the GMaps4JSF developerWorks
community.
Get products and technologies
- Sign up for the
Google Maps API at their registration
site.
- Read the full
documentation on using the Google Maps API.
- See documentation and
downloads at the The GMaps4JSF
Project Home.
- Download JSF 2.0 and GMaps4JSF.
Hazem Saleh has five years of experience in JEE and open source technologies. He is committed to Apache MyFaces and is the initiator of many components in the MyFaces projects such as Tomahawk CAPTCHA, Commons ExportActionListener, Media, PasswordStrength, and others. He is the founder of GMaps4JSF (an integration project that integrates both Google Maps with Java ServerFaces), and is the author of "The Definitive Guide to Apache MyFaces and Facelets (Apress)." He is now working for IBM Egypt as a staff software engineer, where he is recognized as a subject matter expert in Web 2.0 technologies.
Table of contents
Next steps from IBM
Create rich Internet applications using WebSphere Portal Express Web 2.0 technologies.
- Try: WebSphere Portal Express
- Article: Get started using Ajax and WebSphere Portal Express
- Tutorial: Quickly build a an Ajax-enabled WebSphere Portal Express Web application
- Demo: Architecture, design, and construction using the IBM Rational Software Delivery Platform: AJAX
- Buy: WebSphere Portal Express
Tags
Use the slider bar to see more or fewer tags.
For articles in technology zones (such as Java technology, Linux, Open source, XML), Popular tags shows the top tags for all technology zones. For articles in product zones (such as Info Mgmt, Rational, WebSphere), Popular tags shows the top tags for just that product zone.
For articles in technology zones (such as Java technology, Linux, Open source, XML), My tags shows your tags for all technology zones. For articles in product zones (such as Info Mgmt, Rational, WebSphere), My tags shows your tags for just that product zone.
Popular article tags |
My article tagsSkip to tags list
Popular article tags |
My article tags
