• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
JSF Mashups in Action
 

JSF Mashups in Action

on

  • 901 views

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 ...

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.

Statistics

Views

Total Views
901
Views on SlideShare
890
Embed Views
11

Actions

Likes
0
Downloads
5
Comments
0

2 Embeds 11

https://twitter.com 10
http://www.linkedin.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    JSF Mashups in Action JSF Mashups in Action Presentation Transcript

    • JSF Mashups in ActionHazem Saleh
    • My Bio Nine years of experience in open source technologies and Java Enterprise. I worked with many clients in Europe (Sweden), North America (USA andCanada), 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, IBMRegional Technical Exchange …etc).
    • AgendaWhat 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.
    • AgendaWhat 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.
    • What is Mashups?Mashup is an application that combines data or functionality from two ormore sources for creating a new service.Two main actors:Service Provider Service ConsumerMashup Service Consumer cycle:AggregationVisualizationData Retrieval and Formatting
    • What is Mashups?Composing different mashups and linking them with organization datamay produce a new service that is not realized by the Mashup serviceproviders (Mashability).Mashup Styles:Server-based Mashups.Web-based Mashups
    • 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
    • Common Mashup ArchitectureClient (JavaScript,CSS, HTML)Server (Service)Data (XML, JSON)
    • Popular Public Mashup Services
    • 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
    • Common Mashup Scenarios
    • <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
    • Common Mashup Scenarios
    • 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
    • Common Mashup Scenarios
    • 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
    • Common Mashup Scenarios
    • • 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: Dont 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
    • Common Mashup ScenariosIn order to interact with the most popular mashup serviceproviders, we have to:Write Intensive JavaScript code.Write extra Java code to interact with the server and thenparse different formats:JSON ATOM RSS
    • So, Developing Mashups isnot an easy task
    • AgendaWhat 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.
    • Current Mashup ComplexitiesThere is no economic-incentive model agreed by all the mashup serviceproviders for mashup service creation and consumption.Representations of Mashup servicesSOAP RESTFormats of Mashup DataATOM CustomRSS JSONProgramming Models for Mashup consumptionServer side (Java, PHP, ...etc) Client side (JavaScript)
    • Current Mashups ComplexitiesStudy low level APIs of theMashup service provider.Ending up in writing a greatdeal of similar code.
    • 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
    • Mashups4JSFOne of the possible ways for simplifying mashupdevelopment in the JavaServer Faces world.Provides a set of JSF components that allows the JSF developer toconstruct rich and customized mashups inside the web page:Public Feed search components, and drill down theresults for:TwitterYouTubeGoogle SearchDiggYahoo Weather Component.
    • Mashups4JSFProvides feed reader components for readingdifferent types of feeds:Provides feed export annotations; @Feed annotation forexporting application data as Mashup feeds.ATOMRSSJSON
    • Mashups4JSFGMaps4JSF is:Integration withJSF developer can construct rich maps using simple tags.
    • Mashups4JSFGMaps4JSF:Allows creating declarative maps with all of their details(markers, notes, graphics. …etc) in the JavaServerFaces 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/
    • 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>
    • Mashups4JSF – Yahoo! Weather<mashup:yahooWeatherlocationCode="#{weatherBean.locationCode}"temperatureType="c"/>
    • 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>
    • 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>
    • 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
    • Mashup Demo1
    • Mashup Demo1Let’s build Demo1
    • 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
    • Mashup Demo2
    • Mashup Demo2Let’s build Demo2
    • 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
    • Consuming feed sources in JSFMashups4JSF provides the following components inorder to consume Mashup feeds:<mashup:atomFeedReader><mashup:rssFeedReader><mashup:jsonFeedReader>
    • Consuming feed sources in JSFLet’s build an application thatconsumes Yahoo! News feed.
    • 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
    • Producing feeds from JSF ApplicationsMashups4JSF provides the following annotations in orderto produce Mashup feeds:@Feed which refers to the feed class.@FeedItems which refers to a Java List object of thefeed items.All of the other feed producing annotations are optional.
    • Producing feeds from JSF ApplicationsLet’s build the Mashup application.
    • Conclusion Mashups4JSF (including GMaps4JSF) is an open source projectthat provides a layer of abstraction to create rich mashupapplications without the need to use JavaScript extensively orwriting a great deal of code. Mashups4JSF (including GMaps4JSF) is compliant with the JSF2.x Ajax model and architecture. Mashups4JSF (including GMaps4JSF) is an open source project, soyour contributions and ideas and improvements are welcome:http://code.google.com/p/gmaps4jsfhttp://code.google.com/p/mashups4jsf
    • Questions