JSF Mashups in Action

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 in April 2013.

Transcript

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 Custom RSS 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