![Close [x]](http://dw1.s81c.com/i/c.gif){kind=small}
Figure 1 shows the architecture of Mashups4JSF.
Figure 1. The Mashups4JSF architecture
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> |
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)
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
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
FacesServletis 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>
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.
Learn
-
Learn more at the JavaServer Faces widget library (JWL) InfoCenter.
-
Visit Apache MyFaces V2.0.
-
Read "JSF
2 fu, Part 3: Event handling, JavaScript, and Ajax," by author
David Geary.
-
Check out the GMaps4JSF Project.
-
Be sure to see the Mashups4JSF Project.
-
Check out the Mashups4JSF demos.
-
Learn how to manage your commercial mashup
projects with WebSphere sMash.
-
To listen to interesting interviews and discussions for software developers, check out developerWorks podcasts.
-
Stay current with developerWorks' Technical events and webcasts.
-
Follow developerWorks on Twitter.
-
Check out upcoming conferences, trade shows, webcasts, and other Events around the world that are of interest to IBM open source developers.
-
Visit the developerWorks Open source zone for extensive how-to information, tools, and project updates to help you develop with open source technologies and use them with IBM's products, as well as our most popular articles and tutorials.
-
The My developerWorks community is an example of a successful general community that covers a wide variety of topics.
-
Watch and learn about IBM and open source technologies and product functions with the no-cost developerWorks On demand demos.
Get products and technologies
-
Innovate your next open source development project with IBM trial software, available for download or on DVD.
- Download
IBM product evaluation versions
or explore
the online trials in the IBM SOA Sandbox and get your hands on application development tools and middleware products from
DB2®, Lotus®, Rational®, Tivoli®, and WebSphere®.
Discuss
-
Participate in developerWorks blogs and get involved in the developerWorks community.
Hazem 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.
Table of contents
Local resources
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
