An introduction to Mashups4JSF

Mashups made easy

Creating mashups in web applications can be a headache. Developers need to know intensive JavaScript, RSS, and Atom parsing, JSON parsing, and parsing other formats. You also need to study the low-level APIs provided by the mashup service providers and write a great deal of code to integrate the mashups with the web applications. Mashups4JSF is an open source project in incubation that aims at integrating mashup services with the JSF world. You will be able to construct rich and customized mashups by using simple tags. This article illustrates the architecture of Mashups4JSF, the configuration of the library, and how to create a mashup application with few lines of code using Mashups4JSF and the IBM® JSF Widget Library (JWL) on the WebSphere® Application Server V7.0 and JSF 2.

Hazem Saleh, Staff Software Engineer, IBM  

Photo of Hazem SalehHazem Saleh has six years of experience in JEE and open source technologies. He is an Apache MyFaces committer and 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 Google Maps with the JavaServer Faces) and Mashups4JSF (an integration project that integrates mashup services with the JavaServer Faces). He is the author of the "The Definitive Guide to Apache MyFaces and Facelets (Apress)" book and many JSF articles, is a developerworks contributing author, and a JSF public speaker. He is now working for IBM Egypt as a staff engineer. Hazem is recognized as a Subject Matter Expert in web 2.0 technologies.



13 July 2010

Also available in Japanese Portuguese

The Mashups4JSF architecture

Figure 1 shows the architecture of Mashups4JSF.

Figure 1. The Mashups4JSF architecture
Flowchart of the Mashup4JSF architecture showing how the client connects to the Mashups4JSF component

The Mashups4JSF components interact with the mashup services through the client-side APIs or the REST APIs offered by the mashup service providers. Mashups4JSF provides a set of factories that wraps the implemented services for each mashup service provider. For now, Mashups4JSF has factories for (Google, Yahoo!, YouTube, Twitter, and Digg). Using this architecture allows you to easily add services for the current supported mashup service providers and easily add more factories for new mashup service providers. Another advantage of this architecture is that the wrappered mashup services are totally decoupled from the Mashups4JSF components so the mashup services can be used independently. At the time of writing, Mashups4JSF has the following components implemented:

  • Yahoo! weather <mashup:yahooWeather/>, which allows integrating the JSF application with Yahoo weather.
  • YouTube player <mashup:youTubePlayer/>, which allows playing YouTube videos inside JSF applications.
  • YouTube video listing <mashup:youTubeVideoList/>, which allows searching YouTube videos with favorite search criteria.
  • Digg search listing <mashup:diggSearchList/>, which allows searching in the Digg stories with favorite search criteria.
  • Google search listing <mashup:googleSearchList/>, which allows searching in Google with favorite search criteria.
  • RSS feed reader <mashup:rssFeedReader/>, which allows reading RSS feeds in JSF applications.
  • ATOM feed reader <mashup:atomFeedReader/>, which allows reading ATOM feeds in JSF applications.
  • GMaps4JSF (the Google Maps integration library with JavaServer Faces; currently, GMaps4JSF is not included as part of Mashups4JSF, but it is planned to be part of the Mashups4JSF library in V1.0.

Configuring Mashups4JSF with your JSF application

To configure Mashups4JSF with your JSF application:

  • Download the latest stable JAR of Mashups4JSF. At the time of this writing, this is the latest stable JAR.
  • Mashups4JSF depends on Rome V0.9 and JDOM V1.0, so make sure they are included in the application classpath. And if you are using WebSphere V7.0, another dependency is required: JDOM V1.0.
  • Place the downloaded JARs in the lib folder of your JSF web application (WEB-INF/lib).
  • Place the tag library declaration in the JSP page, as shown in Listing 1.
Listing 1. Mashups4JSF tag library declaration in JSP pages
	<%@ taglib uri="http://code.google.com/p/mashups4jsf/" prefix="mashup" %>

If your JSF application is a JSF 2 (or a Facelets), place the tag library declaration in the XHTML page, as shown in Listing 2.

Listing 2. Mashups4JSF tag library declaration in XHTML pages
	<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:mashup="http://code.google.com/p/mashups4jsf/">

Include the Mashups4JSF resources tag in the <head> element of the JSP page, as shown in Listing 3.

Listing 3. Including the Mashups4JSF resources tag in the <head> element of the JSP page
	<head>
    ...
    <mashup:resources />
    ...
    </head>

If your JSF application is a JSF 2 application, place the resources tag in the <h:head> element of the XHTML page, as shown in Listing 4.

Listing 4. Including the Mashups4JSF resources tag in the <head> element of the XHTML page
<h:head>
    ...
    <mashup:resources />
    ...
    </h:head>

Maven2 support

Mashups4JSF has a Maven2.0 repository on Google code. To include the Mashups4JSF JAR in your Maven2.0 web application, you should add the Mashups4JSF dependency to your application pom.xml, as shown in Listing 5.

Listing 5. Mashups4JSF Maven2 dependency in the pom.xml
<repositories>
        ...
        <repository>
            <id>googlecode.com</id>
            <url>http://mashups4jsf.googlecode.com/svn/trunk/mashups4jsf-repo</url>
        </repository>
        
</repositories>    

<dependencies>
        ...    
        <dependency>
            <groupId>com.googlecode.mashups4jsf</groupId>
            <artifactId>mashups4jsf-core</artifactId>
            <version>0.0.2-SNAPSHOT</version>
        </dependency>  
        </dependencies>

The Places mashup application (JWL Version)

Configuring GMaps4JSF with your JWL application

The Places application uses GMaps4JSF for displaying Google Maps. Details on the usage of GMaps4JSF in "Creating mashup applications using IBM JWL and GMaps4JSF in a WebSphere 7.0 environment."

Let's move to the Places mashup application. In the Places application, There is a master dataTable, a detailed map, and a detailed weather indicator. Each row of the dataTable represents an address. When the application user clicks on the Retrieve Information button of any row, the place location is displayed in the detailed map and the place weather information is displayed in the weather indicator. Figure 2 shows a screenshot of the Places application.

Figure 2. The Places application
Screenshot shows at the top a list of locations with 'retrieve information' buttons and in the bottom a map of the selected location with weather data

Listing 6 shows the most important part of the index.jsp (the places application page) code. When the "cmdRetrieve"commandExButton is clicked, the selected row (which contains the place information) is sent to the server using Ajax protocols. In the bean action #{place.setSelectedPlace}, the place information is set in the request attribute "selectedPlace" as shown in Listing 7. Both the map and the weather indicator are updated with the place address and the place postal code through the #{selectedPlace} expression. The map displays the place and shows a marker pointing to the place address and an information window showing the place address. The weather indicator displays the place weather information after making a remote call behind the scene to the Yahoo! Weather REST API.

Listing 6. The Places application JSP page (index.jsp)
<h:dataTable value="#{places.data}"
             var="place"
             ...>
             <!--Columns Here-->
			 
             <h:column>
             <f:facet name="header">
                 <h:outputText value="Action" />
             </f:facet>
			
            <hx:commandExButton id="cmdRetrieve"
                                value="Retrieve Information"
                                action="#{place.setSelectedPlace}">
                                <hx:behavior event="onclick" id="behavior1"
                                             behaviorAction="get"
                                             targetAction="placeInformation">
                                </hx:behavior>
            </hx:commandExButton>
			
             </h:column>
</h:dataTable>


<h:panelGrid columns="2" id="placeInformation">
             <h:panelGroup id="placeMap">
                 <m:map width="400px" height="300px"
                        renderOnWindowLoad="false"
                        rendered="#{selectedPlace ne null}"
                        address="#{selectedPlace.longAddressName}" 
                        zoom="9">
                        <m:marker/>
                        <m:htmlInformationWindow 
                                htmlText="#{selectedPlace.longAddressName}"/>
                 </m:map>
             </h:panelGroup>
    
             <h:panelGroup id="placeWeather">
                 <mashup:yahooWeather locationCode="#{selectedPlace.postalCode}"
                                      rendered="#{selectedPlace ne null}" 
                                      temperatureType="c"/>
             </h:panelGroup>
</h:panelGrid>
<hx:ajaxRefreshSubmit target="placeInformation" id="ajaxRefreshSubmit1"/>

Listing 7 shows the place bean code, which contains simply getter and setters and the setSelectedPlace action.

Listing 7. The place bean code (Place.java)
public class Place {
    String shortAddressName;
    String longAddressName;
    String postalCode;

    // Some setters and getters here ...

    public String setSelectedPlace() {
        FacesContext.getCurrentInstance().getExternalContext().
        getRequestMap().put("selectedPlace", this);

        return null;
    }
}

The Places mashup application (JSF 2.0 version)

Mashups4JSF works perfectly with JSF 2 implementations (Mojarra V2.0 and Apache MyFaces V2.0). The Places application has a JSF 2.0 version. The main difference between the JSF 2.0 version and the JWL version is in the way of Ajax handling. Thanks to JSF 2, Ajax handling becomes part of the specification and the functionality of the <hx:behavior/>, and the <hx:ajaxRefreshxxx/> tags can now be done by the <f:ajax/> tag. Listing 8 shows the index.xhtml (The Places application page) code in the JSF 2.0 Ajax world.

Listing 8. The Places application XHTML page (index.xhtml)
<h:dataTable value="#{places.data}"
             var="place"
             ...>
             <!--Columns Here-->
			 
             <h:column>
             <f:facet name="header">
                 <h:outputText value="Action" />
             </f:facet>
			
            <h:commandButton id="cmdRetrieve"
                             value="Retrieve Information"
                             action="#{place.setSelectedPlace}">
                             <f:ajax render=":form1:placeMap :form1:placeWeather"/>
            </h:commandExButton>
			
             </h:column>
</h:dataTable>


<h:panelGrid columns="2" id="placeInformation">
             <h:panelGroup id="placeMap">
                 <m:map width="400px" height="300px"
                        renderOnWindowLoad="false"
                        rendered="#{selectedPlace ne null}"
                        address="#{selectedPlace.longAddressName}" 
                        zoom="9">
                        <m:marker/>
                        <m:htmlInformationWindow 
                                htmlText="#{selectedPlace.longAddressName}"/>
                 </m:map>
             </h:panelGroup>
    
             <h:panelGroup id="placeWeather">
                 <mashup:yahooWeather locationCode="#{selectedPlace.postalCode}"
                                      rendered="#{selectedPlace ne null}" 
                                      temperatureType="c"/>
             </h:panelGroup>
</h:panelGrid>

As shown in Listing 8, to submit an Ajax request from the "cmdRetrieve"commandButton, the <f:ajax/> tag is placed inside the <h:commandButton/>, specifying the components that will be re-rendered when the response comes back from the server, which are the map "placeMap" and the weather indicator "placeWeather".

For the JSF 2 implementation, The Places application uses the Apache MyFaces V2.0 core. To configure the Apache MyFaces core with your web application:

  • Go to http://myfaces.apache.org/download.html.
  • Download myfaces-core-2.0.0-bin.zip and extract it.
  • Copy the JARs from the lib folder of the extracted file to the lib folder of your web application.
  • Make sure faces-config.xml has the JSF 2 declaration, as shown in Listing 9.
    Listing 9. The faces-config.xml file
    <?xml version="1.0" encoding="ISO-8859-1"?>
    <faces-config 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_2_0.xsd"
                  version="2.0">
    
    </faces-config>
  • Make sure that the FacesServlet is declared in the web.xml, as shown in Listing 10.
    Listing 10. The web.xml file
    <?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">
             ...
    		 
             <servlet>
               <servlet-name>Faces Servlet</servlet-name>
               <servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
             </servlet>
    
             <servlet-mapping>
               <servlet-name>Faces Servlet</servlet-name>
               <url-pattern>*.xhtml</url-pattern>
             </servlet-mapping>
    		 
    </web-app>

Conclusion

You've learned about Mashups4JSF, how to configure it, and how to use it for building a useful mashup application. Mashups4JSF aims to offer the declarative mashups for the development community to be a complementary for the work done by GMaps4JSF. In future articles, I will explain the other features of Mashups4JSF like the (ATOM/RSS) feed producer service, give more interactive examples of the other Mashups4JSF components, and I will illustrate how Mashups4JSF can work inside a portlets environment.

Resources

Learn

Get products and technologies

Discuss

Comments

developerWorks: Sign in

Required fields are indicated with an asterisk (*).


Need an IBM ID?
Forgot your IBM ID?


Forgot your password?
Change your password

By clicking Submit, you agree to the developerWorks terms of use.

 


The first time you sign into developerWorks, a profile is created for you. Information in your profile (your name, country/region, and company name) is displayed to the public and will accompany any content you post, unless you opt to hide your company name. You may update your IBM account at any time.

All information submitted is secure.

Choose your display name



The first time you sign in to developerWorks, a profile is created for you, so you need to choose a display name. Your display name accompanies the content you post on developerWorks.

Please choose a display name between 3-31 characters. Your display name must be unique in the developerWorks community and should not be your email address for privacy reasons.

Required fields are indicated with an asterisk (*).

(Must be between 3 – 31 characters.)

By clicking Submit, you agree to the developerWorks terms of use.

 


All information submitted is secure.

Dig deeper into Open source on developerWorks


static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=1
Zone=Open source
ArticleID=497896
ArticleTitle=An introduction to Mashups4JSF
publish-date=07132010