Java Development News:

GMaps4JSF with Facelets

By Hazem Saleh

01 Mar 2009 | TheServerSide.com

As we know from the introduction to GMaps4JSF article, GMaps4JSF aims at integrating Google maps with JavaServer Faces (JSF). JSF users will be also able to construct complex street view panoramas and maps with just few JSF tags. They would also be able to attach different components (markers, information texts, controls, ground overlays, polygons, polylines) to the map easily. GMaps4JSF also allows attaching different events to the components without writing JavaScript code to bind the event with the component. JSF users will write JavaScript code only if they want to implement the components’ event handlers. GMaps4JSF is one of the JSF Mashups libraries that enable JSF users to build web 2.0 mashup applications in JSF easily.

Facelets is the view definition framework for JavaServer Faces, and the PDL (Page Declaration Language) for JSF 2.0. It has many advantages over the JSP as a view technology for JSF such as the built-in templating, the composition components, the custom logic tags, and the very friendly view to designers.

For an introduction about Facelets, you can check the Facelets fits JSF like a glove article for (Richard Hightower). And for a complete Facelets reference, you can get the definitive guide to MyFaces and Facelets book.

In this article, I will show how the GMaps4JSF and Facelets can be used together to construct and customize maps easily using few lines of code.

About the sample

A simple weather forecast application that simulates the weather forecast (rainy, sunny, stormy and snowy) in different countries. Figure 1.1 shows the screenshot of the application.

To be able to create this application, we should create a map, create and place the custom markers on the different countries, and finally create the map control.


Figure 1.1. The application screenshot

Before GMaps4JSF and Facelets

To be able to develop this sample without GMaps4JSF and Facelets, we will have to deal directly with the Google Maps APIs. Listing 1.1 shows the part of the code that should be written for customizing the marker’s icon on a single country.

Listing 1.1. Writing the application using the Google Maps APIs

<script type="text/javascript">
    function initialize() {
 if(GBrowserIsCompatible()) {
        var map = new GMap2(document.getElementById("map"));
        map.setCenter(new GLatLng(24, 15), 13);
       map.setZoom(4);
       map.setMapType(G_HYBRID_MAP);
        var geocoder = new GClientGeocoder();
        var address = "Egypt";
        geocoder.getLatLng(address,
               function (location) {
            if(!location) {
              alert (location + " not found");
         } else {
              var iconObject = new GIcon(G_DEFAULT_ICON);
              iconObject.iconSize = new GSize(45, 45);
              iconObject.shadowSize = new GSize(37, 34);
              iconObject.iconAnchor = new GPoint(9, 34);
              iconObject.infoWindowAnchor = new GPoint(9, 2);
              iconObject.image = 
               "http://gmaps-utility-library.googlecode.com/svn/trunk/markermanager/release/examples/images/storm.png";
              var marker = new GMarker(location, {icon: iconObject});
              map.addOverlay(marker);
       }
  }
              );
        // Another code here to attach custom images to the markers of other countries and to add map controls :)
 }
   }
</script>

Although the previous code is not small, it will be also doubled to customize the markers of the remaining countries, and to add the map control to the map. Another drawback of the previous code is that we had to deal with different JavaScript objects to write this simple application ( GBrowserIsCompatible, GMap2, GLatLng, GClientGeocoder, GIcon, GSize, GPoint, GMarker, and GControl). Now, let’s see the GMaps4JSF and Facelets way to do this job.

After GMaps4JSF and Facelets

To be able to develop this sample using GMaps4JSF and Facelets, we will ONLY use the following GMaps4JSF components (< m:map>, < m:marker>, < m:icon>, and < m:mapControl>) and the Facelets <ui:repeat> tag. Listing 1.2 shows the code.

Listing 1.2. Writing the application using the GMaps4JSF and Facelets

<m:map zoom="4" latitude="24" longitude="15">
 <ui:repeat var="country"  value="#{countryFactory.countries}" >
        <m:marker address="#{country.name}">
    <m:icon imageURL="#{country.weatherStatusImage}" />
        </m:marker>
 </ui:repeat>
 <m:mapControl name="GLargeMapControl"
          position="G_ANCHOR_BOTTOM_RIGHT" />    
 </m:map>

For every country in the #{countryFactory.countries}, a marker will be added in the #{country.name} address, and the marker image will be customized by the #{country.weatherStatusImage}. The <m:mapControl> is used to add the large map control in the bottom right anchor of the map.

How to configure GMaps4JSF with Facelets

To configure GMaps4JSF with Facelets, you should follow the following steps:

  • For GMaps4JSF:
  • Sign up for Google Maps API, and generate a key for your website URL.
  • In your page HEAD element, place the Google Maps APIs script include:
    <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key= gen_website_key" type="text/javascript"> </script>
  • Download the latest library core jar from the project home page.
  • Place the downloaded jar in the WEB-INF/lib folder of your JSF web application.
  • Add the following tag library declaration to your JSP or XHTML page in order to use the GMaps4JSF components:
    <%@ taglib uri="http://code.google.com/p/gmaps4jsf/" prefix="m" %>
  • For GMaps4JSF with Facelets:
    • If you are using GMaps4JSF 1.1.0, Facelets is not supported directly by the library. The library users have to copy and register an XML file in the JSF application as shown here.
    • If you are using GMaps4JSF 1.1.1 or later, Facelets is supported directly by the library e.g. the users will do no extra configuration to work with Facelets.

The sample online demo

You can see the online demo here: http://mashups.s43.eatj.com/weatherForecast/, and you can download the complete source code from here: http://gmaps4jsf.googlecode.com/files/gmaps4jsf1.1.2-facelets.war.

Conclusion

In this article, we see how it becomes so easy to build a Google Maps application using both GMaps4JSF and Facelets. Before GMaps4JSF and Facelets, the developer had to deal with different JavaScript objects to construct and customize maps. But now thanks to GMaps4JSF, the Google Maps application can be easy to create, test, and use.