Integrating Mashups in web applications is not an easy job. Web developers need to write intensive JavaScript code and much duplicate feed parsing code in order to create an interactive Mashup web application. Mashups4JSF is an open source library that aims at integrating Mashup services in JSF web applications. Using Mashups4JSF, JSF developers will be able to construct rich and customized Mashups using a set of custom JSF components. They will be able to export domain model data as mashup feeds. They will be able to create rich Google Maps declaratively and create custom Ajax actions powered by JSF 2.x architecture. This session discusses how to utilize this library in order to build interactive mashups in the JavaServer Faces applications. This session was presented by Hazem Saleh in JavaOne Russia 2013.

1. JSF Mashups in Action
Hazem Saleh

2. My Bio
 Nine years of experience in open source technologies and Java Enterprise.
 I worked with many clients in Europe (Sweden), North America (USA and
Canada), Latin America (Peru), Asia (Qatar and Kuwait) and Africa
(Egypt, Morocco and South Africa).
 Apache MyFaces Committer.
 Co-author of “The Definitive Guide to Apache MyFaces” book (Apress).
 Author of “JavaScript Unit Testing” book (Packtpub).
 DeveloperWorks Contributing Author.
 Technical Speaker in (JavaOne San Francisco, CON-FESS Vienna, IBM
Regional Technical Exchange …etc).

3. Agenda
What is Mashups?
Common Mashup Architecture.
Common Mashup Scenarios.
Current Mashup Complexities.
Mashups4JSF = Mashups meet the JavaServer Faces.
Mashup Demo1.
Building Mashup Application using Mashups4JSF.
Mashup Demo2.
Consuming feed sources from JSF Applications.
Producing feeds from JSF Applications.

4. Agenda
What is Mashups?
Common Mashup Architecture.
Common Mashup Scenarios.
Current Mashup Complexities.
Mashups4JSF = Mashups meet the JavaServer Faces.
Mashup Demo1.
Building Mashup Application using Mashups4JSF.
Mashup Demo2.
Consuming feed sources from JSF Applications.
Producing feeds from JSF Applications.

5. What is Mashups?
Mashup is an application that combines data or functionality from two or
more sources for creating a new service.
Two main actors:
Service Provider Service Consumer
Mashup Service Consumer cycle:
Aggregation
Visualization
Data Retrieval and Formatting

6. What is Mashups?
Composing different mashups and linking them with organization data
may produce a new service that is not realized by the Mashup service
providers (Mashability).
Mashup Styles:
Server-based Mashups.
Web-based Mashups

7. What is Mashups?
Common Mashup Architecture.
Common Mashup Scenarios.
Current Mashup Complexities.
Mashups4JSF = Mashups meet the JavaServer Faces.
Mashup Demo1.
Building Mashup Application using Mashups4JSF.
Mashup Demo2.
Consuming feed sources from JSF Applications.
Producing feeds from JSF Applications.
Agenda

8. Common Mashup Architecture
Client (JavaScript,
CSS, HTML)
Server (Service)
Data (XML, JSON)

9. Popular Public Mashup Services

10. What is Mashups?
Common Mashup Architecture.
Common Mashup Scenarios.
Current Mashup Complexities.
Mashups4JSF = Mashups meet the JavaServer Faces.
Mashup Demo1.
Building Mashup Application using Mashups4JSF.
Mashup Demo2.
Consuming feed sources from JSF Applications.
Producing feeds from JSF Applications.
Agenda

11. Common Mashup Scenarios

12. <script type="text/javascript">
…
function getWeatherForecast(map, address) {
var geocoder = new GClientGeocoder();
geocoder.getLatLng(address,
function(location) {
if (!location) {
alert(location + " not found");
} else {
var countryWeatherStatus = Math.floor(Math.random() * 4);
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 = weatherForecasts[countryWeatherStatus];
var marker = new GMarker(location, {icon: iconObject});
map.addOverlay(marker);
}
}
);
}
function initialize() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(24, 15), 13);
map.setZoom(4);
//get the weather status for countries.
getWeatherForecast(map, "Egypt");
getWeatherForecast(map, "Turkey");
getWeatherForecast(map, "Libya");
getWeatherForecast(map, "Spain");
getWeatherForecast(map, "Algeria");
getWeatherForecast(map, "Mali");
getWeatherForecast(map, "Kenya");
getWeatherForecast(map, "Saudi Arabia");
getWeatherForecast(map, "Niger");
//add the map control.
var mapControlPosition = new GControlPosition(G_ANCHOR_BOTTOM_RIGHT, new GSize(10, 10));
map.addControl(new GLargeMapControl(), mapControlPosition);
}
}
</script>
JavaScript

13. Common Mashup Scenarios

14. Common Mashup Scenarios• GET http://weather.yahooapis.com/forecastrss?p=03592
• Parse RSS feed:
<rss version="2.0" ...>
<channel>
<title>Yahoo! Weather - Pittsburg, NH</title>
<link>...</link>
<description>Yahoo! Weather for Pittsburg, NH</description>
<language>en-us</language>
<lastBuildDate>Fri, 22 Mar 2013 6:51 pm EDT</lastBuildDate>
<ttl>60</ttl>
<yweather:location city="Pittsburg" region="NH" country="US"/>
<yweather:units temperature="F" distance="mi" pressure="in" speed="mph"/>
<yweather:wind chill="23" direction="330" speed="6" />
<yweather:atmosphere humidity="60" visibility="10" pressure="29.59" rising="1" />
<yweather:astronomy sunrise="6:42 am" sunset="6:58 pm"/>
<image
<title>Yahoo! Weather</title>
<width>142</width>
<height>18</height>
<link>http://weather.yahoo.com</link>
<url>http://l.yimg.com/a/i/brand/purplelogo//uh/us/news-wea.gif</url>
</image>
<item>
<title>Conditions for Pittsburg, NH at 6:51 pm EDT</title>
<geo:lat>45.05</geo:lat>
<geo:long>-71.39</geo:long>
<link>...</link>
<pubDate>Fri, 22 Mar 2013 6:51 pm EDT</pubDate>
<yweather:condition text="Cloudy" code="26" temp="29" date="Fri, 22 Mar 2013 6:51 pm EDT" />
<description>...</description>
<yweather:forecast day="Fri" date="22 Mar 2013" low="14" high="26" text="Snow Showers" code="14" />
<yweather:forecast day="Sat" date="23 Mar 2013" low="18" high="28" text="Few Snow Showers" code="14" />
<guid isPermaLink="false">USNH0186_2013_03_23_7_00_EDT</guid>
</item>
</channel>
</rss>
Retrieve content
+
Custom RSS parsing

15. Common Mashup Scenarios

16. Common Mashup Scenarios• GET http://gdata.youtube.com/ feeds/api/videos?alt=atom&v=2&max-results=5&q=javaone
• Parse ATOM Feed (Sample for a single item):
<entry gd:etag="W/&quot;CU8DR347eCp7I2A9WhBXEUk.&quot;">
<id>tag:youtube.com,2008:video:I5lAgaCbqZ0</id>
<published>2012-10-01T16:09:27.000Z</published>
<updated>2013-03-24T16:51:16.000Z</updated>
<category scheme="http://schemas.google.com/g/2005#kind" term="http://gdata.youtube.com/schemas/2007#video" />
<category scheme="http://gdata.youtube.com/schemas/2007/categories.cat" term="Tech" label="Science &amp; Technology" />
<title>Welcome to JavaOne 2012</title>
<content type="application/x-shockwave-flash" src="http://www.youtube.com/v/I5lAgaCbqZ0?version=3&amp;f=videos&amp;app=youtube_gdata" />
...
<author>
<name>java</name>
<uri>http://gdata.youtube.com/feeds/api/users/java</uri>
<yt:userId>mRtPmgnQ04CMUpSUqPfhxQ</yt:userId>
</author>
...
<media:group>
...
<media:title type="plain">Welcome to JavaOne 2012</media:title>
<yt:aspectRatio>widescreen</yt:aspectRatio>
<yt:duration seconds="97" />
<yt:uploaded>2012-10-01T16:09:27.000Z</yt:uploaded>
<yt:uploaderId>UCmRtPmgnQ04CMUpSUqPfhxQ</yt:uploaderId>
<yt:videoid>I5lAgaCbqZ0</yt:videoid>
</media:group>
<gd:rating average="4.716216" max="5" min="1" numRaters="74" rel="http://schemas.google.com/g/2005#overall" />
<yt:statistics favoriteCount="0" viewCount="4835" />
<yt:rating numDislikes="5" numLikes="69" />
</entry>
Retrieve content
+
Custom ATOM parsing

17. Common Mashup Scenarios

18. • GET https://search.twitter.com/search.json?q=javaone&rpp=10
• Parse JSON Feed (Sample for a single item):
{
"completed_in":0.021,
"max_id":320699880265891840,
"max_id_str":"320699880265891840",
"next_page":"?page=2&max_id=320699880265891840&q=javaone&rpp=10",
"page":1,
"query":"javaone",
"refresh_url":"?since_id=320699880265891840&q=javaone",
"results":[
{
"created_at":"Sun, 07 Apr 2013 00:49:44 +0000",
"from_user":"rob_ratcliff",
"from_user_id":265460384,
"from_user_id_str":"265460384",
"from_user_name":"Rob Ratcliff",
"geo":null,
"id":320699880265891840,
"id_str":"320699880265891840",
"iso_language_code":"en",
"metadata":{
"result_type":"recent"
},
"profile_image_url":"http://a0.twimg.com/profile_images/2376270945/rfa2u2nheyb6jj5k9bv8_normal.jpeg",
"profile_image_url_https":"https://si0.twimg.com/profile_images/2376270945/rfa2u2nheyb6jj5k9bv8_normal.jpeg",
"source":"&lt;a href=&quot;http://twitter.com/tweetbutton&quot;&gt;Tweet Button&lt;/a&gt;",
"text":"RT @karianna: Don't forget that the CFP for @javaone is closing in only 8-9 days! Submit your paper today --&gt; http://t.co/6AAWdIf87h #java #dev"
}
...
],
"results_per_page":10,
"since_id":0,
"since_id_str":"0"
}
Retrieve content
+
Custom JSON parsing

19. Common Mashup Scenarios
In order to interact with the most popular mashup service
providers, we have to:
Write Intensive JavaScript code.
Write extra Java code to interact with the server and then
parse different formats:
JSON ATOM RSS

20. So, Developing Mashups is
not an easy task

21. Agenda
What is Mashups?
Common Mashup Architecture.
Common Mashup Scenarios.
Current Mashup Complexities.
Mashups4JSF = Mashups meet the JavaServer Faces.
Mashup Demo1.
Building Mashup Application using Mashups4JSF.
Mashup Demo2.
Consuming feed sources from JSF Applications.
Producing feeds from JSF Applications.

22. Current Mashup Complexities
There is no economic-incentive model agreed by all the mashup service
providers for mashup service creation and consumption.
Representations of Mashup services
SOAP REST
Formats of Mashup Data
ATOM CustomRSS JSON
Programming Models for Mashup consumption
Server side (Java, PHP, ...etc) Client side (JavaScript)

23. Current Mashups Complexities
Study low level APIs of the
Mashup service provider.
Ending up in writing a great
deal of similar code.

24. What is Mashups?
Common Mashup Architecture.
Common Mashup Scenarios.
Current Mashup Complexities.
Mashups4JSF = Mashups meet the JavaServer Faces.
Mashup Demo1.
Building Mashup Application using Mashups4JSF.
Mashup Demo2.
Consuming feed sources from JSF Applications.
Producing feeds from JSF Applications.
Agenda

25. Mashups4JSF
One of the possible ways for simplifying mashup
development in the JavaServer Faces world.
Provides a set of JSF components that allows the JSF developer to
construct rich and customized mashups inside the web page:
Public Feed search components, and drill down the
results for:
Twitter
YouTube
Google Search
Digg
Yahoo Weather Component.

26. Mashups4JSF
Provides feed reader components for reading
different types of feeds:
Provides feed export annotations; @Feed annotation for
exporting application data as Mashup feeds.
ATOM
RSS
JSON

27. Mashups4JSF
GMaps4JSF is:
Integration with
JSF developer can construct rich maps using simple tags.

28. Mashups4JSF
GMaps4JSF:
Allows creating declarative maps with all of their details
(markers, notes, graphics. …etc) in the JavaServer
Faces world without using JavaScript.
Fully integrated with Google Maps v2 and v3.
Fully integrated with the JSF 2.x Ajax model:
Ajaxified Map Actions.
Ajaxified Marker Actions.
Home: http://code.google.com/p/gmaps4jsf/

29. Mashups4JSF – GMaps4JSF
<m:map>
<ui:repeat var="country“
value="#{countryFactory.countries}" >
<m:marker address="#{country.name}">
<m:icon imageURL="#{country.weatherStatusImage}" />
</m:marker>
</ui:repeat>
<m:mapControl />
</m:map>

30. Mashups4JSF – Yahoo! Weather
<mashup:yahooWeather
locationCode="#{weatherBean.locationCode}"
temperatureType="c"/>

31. Mashups4JSF – YouTube
<mashup:youTubeVideoList searchQuery=“JavaOne”
resultItemVar="searchItem"
resultItemIndex="index">
<f:facet name="resultItem">
<h:panelGrid columns="2">
#{searchItem.title},
#{searchItem.author},
#{searchItem.pubDate} ..
</h:panelGrid>
</f:facet>
</mashup:youTubeVideoList>

32. Mashups4JSF – Twitter
<mashup:twitterSearchList searchQuery="JavaOne"
resultItemVar="searchItem"
resultItemIndex="index">
<f:facet name="resultItem">
<h:panelGrid columns="2">
#{searchItem.title},
#{searchItem.authorName},
#{searchItem.publishDate}, ...
</h:panelGrid>
</f:facet>
</mashup:twitterSearchList>

33. What is Mashups?
Common Mashup Architecture.
Common Mashup Scenarios.
Current Mashup Complexities.
Mashups4JSF = Mashups meet the JavaServer Faces.
Mashup Demo1.
Building Mashup Application using Mashups4JSF.
Mashup Demo2.
Consuming feed sources from JSF Applications.
Producing feeds from JSF Applications.
Agenda

34. Mashup Demo1

35. Mashup Demo1
Let’s build Demo1

36. What is Mashups?
Common Mashup Architecture.
Common Mashup Scenarios.
Current Mashup Complexities.
Mashups4JSF = Mashups meet the JavaServer Faces.
Mashup Demo1.
Building Mashup Application using Mashups4JSF.
Mashup Demo2.
Consuming feed sources from JSF Applications.
Producing feeds from JSF Applications.
Agenda

37. Mashup Demo2

38. Mashup Demo2
Let’s build Demo2

39. What is Mashups?
Common Mashup Architecture.
Common Mashup Scenarios.
Current Mashup Complexities.
Mashups4JSF = Mashups meet the JavaServer Faces.
Mashup Demo1.
Building Mashup Application using Mashups4JSF.
Mashup Demo2.
Consuming feed sources from JSF Applications.
Producing feeds from JSF Applications.
Agenda

40. Consuming feed sources in JSF
Mashups4JSF provides the following components in
order to consume Mashup feeds:
<mashup:atomFeedReader>
<mashup:rssFeedReader>
<mashup:jsonFeedReader>

41. Consuming feed sources in JSF
Let’s build an application that
consumes Yahoo! News feed.

42. What is Mashups?
Common Mashup Architecture.
Common Mashup Scenarios.
Current Mashup Complexities.
Mashups4JSF = Mashups meet the JavaServer Faces.
Mashup Demo1.
Building Mashup Application using Mashups4JSF.
Mashup Demo2.
Consuming feed sources from JSF Applications.
Producing feeds from JSF Applications.
Agenda

43. Producing feeds from JSF Applications
Mashups4JSF provides the following annotations in order
to produce Mashup feeds:
@Feed which refers to the feed class.
@FeedItems which refers to a Java List object of the
feed items.
All of the other feed producing annotations are optional.

44. Producing feeds from JSF Applications
Let’s build the Mashup application.

45. Conclusion
 Mashups4JSF (including GMaps4JSF) is an open source project
that provides a layer of abstraction to create rich mashup
applications without the need to use JavaScript extensively or
writing a great deal of code.
 Mashups4JSF (including GMaps4JSF) is compliant with the JSF
2.x Ajax model and architecture.
 Mashups4JSF (including GMaps4JSF) is an open source project, so
your contributions and ideas and improvements are welcome:
http://code.google.com/p/gmaps4jsf
http://code.google.com/p/mashups4jsf

46. Questions