Abstract image of a woman sitting on books and studying on a laptop

JSF Mashups in Action

Hazem Saleh, profile picture
Hazem Saleh

The document is about mashups and their integration with JavaServer Faces (JSF) using the Mashups4JSF framework. It defines mashups as applications that combine data from multiple sources and outlines common architectures, scenarios, and complexities in developing them. The author presents a series of demonstrations on building mashup applications, consuming feeds, and producing feeds, emphasizing Mashups4JSF as a tool to simplify the process.

TechnologyEducation
1 of 46
Downloaded 12 times
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
JSF Mashups in Action Hazem 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 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).
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.
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.
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
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
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 Architecture Client (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: 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
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
So, Developing Mashups is not an easy task
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.
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)
Current Mashups Complexities Study low level APIs of the Mashup service provider. Ending up in writing a great deal 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
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.
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
Mashups4JSF GMaps4JSF is: Integration with JSF developer can construct rich maps using simple tags.
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/
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:yahooWeather locationCode="#{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 Demo1 Let’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 Demo2 Let’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 JSF Mashups4JSF provides the following components in order to consume Mashup feeds: <mashup:atomFeedReader> <mashup:rssFeedReader> <mashup:jsonFeedReader>
Consuming feed sources in JSF Let’s build an application that consumes 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 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.
Producing feeds from JSF Applications Let’s build the Mashup application.
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
Questions

More Related Content

PDF
Ushahidi
bezrabotni
 
PDF
Google I/O 2021 Recap
furusin
 
PDF
7주 JavaScript 실습
지수 윤
 
PDF
rsyslog v8: more than just syslog!
Yury Bushmelev
 
PDF
HadoopとMongoDBを活用したソーシャルアプリのログ解析
Takahiro Inoue
 
PDF
HTML,CSS Next
지수 윤
 
PDF
Recent Changes to jQuery's Internals
jeresig
 
PPT
Praktik Pengembangan Konten E-Learning HTML5 Sederhana
Muhammad Yusuf
 
Ushahidi
bezrabotni
 
Google I/O 2021 Recap
furusin
 
7주 JavaScript 실습
지수 윤
 
rsyslog v8: more than just syslog!
Yury Bushmelev
 
HadoopとMongoDBを活用したソーシャルアプリのログ解析
Takahiro Inoue
 
HTML,CSS Next
지수 윤
 
Recent Changes to jQuery's Internals
jeresig
 
Praktik Pengembangan Konten E-Learning HTML5 Sederhana
Muhammad Yusuf
 

What's hot (12)

PDF
Client-side MVC with Backbone.js
iloveigloo
 
PDF
JavaScript & HTML5 - Brave New World
Robert Nyman
 
PDF
Practical JSON in MySQL 5.7 and Beyond
Ike Walker
 
PDF
Arquitetando seu aplicativo Android com Jetpack
Nelson Glauber Leal
 
PDF
Practical JSON in MySQL 5.7
Ike Walker
 
PDF
High Performance Django
DjangoCon2008
 
PDF
Mobile Data: How to avoid the latency trap - SWDC 2010
Tom Croucher
 
KEY
Mongo db presentation
Julie Sommerville
 
PDF
MongoDB Europe 2016 - Debugging MongoDB Performance
MongoDB
 
PPTX
201204 random clustering
pluskjw
 
TXT
https://www.facebook.com/valdyna.monna?fref=ts
Arif Alexi
 
PDF
Cross Domain Web
Mashups with JQuery and Google App Engine
Andy McKay
 
Client-side MVC with Backbone.js
iloveigloo
 
JavaScript & HTML5 - Brave New World
Robert Nyman
 
Practical JSON in MySQL 5.7 and Beyond
Ike Walker
 
Arquitetando seu aplicativo Android com Jetpack
Nelson Glauber Leal
 
Practical JSON in MySQL 5.7
Ike Walker
 
High Performance Django
DjangoCon2008
 
Mobile Data: How to avoid the latency trap - SWDC 2010
Tom Croucher
 
Mongo db presentation
Julie Sommerville
 
MongoDB Europe 2016 - Debugging MongoDB Performance
MongoDB
 
201204 random clustering
pluskjw
 
https://www.facebook.com/valdyna.monna?fref=ts
Arif Alexi
 
Cross Domain Web
Mashups with JQuery and Google App Engine
Andy McKay
 
Ad

Viewers also liked (7)

PPTX
[JavaLand 2015] Developing JavaScript Mobile Apps Using Apache Cordova
Hazem Saleh
 
PPT
Soar Human Capital Solutions
alevitt
 
PDF
[JavaOne 2010] Abstract Mashups for Enterprise Java
Hazem Saleh
 
PDF
Efficient JavaScript Unit Testing (Chinese Version), JavaOne China 2013
Hazem Saleh
 
PDF
GMaps4JSF
Hazem Saleh
 
PDF
Developing Native Mobile Apps Using JavaScript, ApacheCon NA 2014
Hazem Saleh
 
PDF
Dojo >= 1.7 Kickstart
Hazem Saleh
 
[JavaLand 2015] Developing JavaScript Mobile Apps Using Apache Cordova
Hazem Saleh
 
Soar Human Capital Solutions
alevitt
 
[JavaOne 2010] Abstract Mashups for Enterprise Java
Hazem Saleh
 
Efficient JavaScript Unit Testing (Chinese Version), JavaOne China 2013
Hazem Saleh
 
GMaps4JSF
Hazem Saleh
 
Developing Native Mobile Apps Using JavaScript, ApacheCon NA 2014
Hazem Saleh
 
Dojo >= 1.7 Kickstart
Hazem Saleh
 
Ad

Similar to JSF Mashups in Action (20)

PDF
Json generation
Aravindharamanan S
 
PDF
huhu
Dung Trương
 
PDF
PyWPS at COST WPS Workshop
Jachym Cepicky
 
ZIP
Javascript Everywhere
Pascal Rettig
 
PDF
The Power of the JVM: Applied Polyglot Projects with Java and JavaScript
Hazelcast
 
PPTX
Event-driven IO server-side JavaScript environment based on V8 Engine
Ricardo Silva
 
PDF
How to React Native
Dmitry Ulyanov
 
PPT
Backbone js
Knoldus Inc.
 
PDF
Intro to computer vision in .net update
Stephen Lorello
 
PDF
最近 node.js 來勢洶洶, 怎麼辦? 別怕, 我們也有秘密武器 RingoJS!
Liwei Chou
 
KEY
CouchDB on Android
Sven Haiges
 
PDF
Firefox OS, une plateforme à découvrir - IO Saglac - 2014-09-09
Frédéric Harper
 
PDF
Construire une application JavaFX 8 avec gradle
Thierry Wasylczenko
 
PDF
淺談 Groovy 與 AWS 雲端應用開發整合
Kyle Lin
 
PDF
Persistent mobile JavaScript
Yorick Phoenix
 
PPTX
Full Stack Development with Node.js and NoSQL
All Things Open
 
PPTX
Full stack development with node and NoSQL - All Things Open - October 2017
Matthew Groves
 
PDF
Reactive Java Microservices with Spring Boot and JHipster - Denver JUG 2021
Matt Raible
 
PDF
What the web platform (and your app!) can learn from Node.js
wbinnssmith
 
PDF
WebNet Conference 2012 - Designing complex applications using html5 and knock...
Fabio Franzini
 
Json generation
Aravindharamanan S
 
huhu
Dung Trương
 
PyWPS at COST WPS Workshop
Jachym Cepicky
 
Javascript Everywhere
Pascal Rettig
 
The Power of the JVM: Applied Polyglot Projects with Java and JavaScript
Hazelcast
 
Event-driven IO server-side JavaScript environment based on V8 Engine
Ricardo Silva
 
How to React Native
Dmitry Ulyanov
 
Backbone js
Knoldus Inc.
 
Intro to computer vision in .net update
Stephen Lorello
 
最近 node.js 來勢洶洶, 怎麼辦? 別怕, 我們也有秘密武器 RingoJS!
Liwei Chou
 
CouchDB on Android
Sven Haiges
 
Firefox OS, une plateforme à découvrir - IO Saglac - 2014-09-09
Frédéric Harper
 
Construire une application JavaFX 8 avec gradle
Thierry Wasylczenko
 
淺談 Groovy 與 AWS 雲端應用開發整合
Kyle Lin
 
Persistent mobile JavaScript
Yorick Phoenix
 
Full Stack Development with Node.js and NoSQL
All Things Open
 
Full stack development with node and NoSQL - All Things Open - October 2017
Matthew Groves
 
Reactive Java Microservices with Spring Boot and JHipster - Denver JUG 2021
Matt Raible
 
What the web platform (and your app!) can learn from Node.js
wbinnssmith
 
WebNet Conference 2012 - Designing complex applications using html5 and knock...
Fabio Franzini
 

More from Hazem Saleh (12)

PDF
[FullStack NYC 2019] Effective Unit Tests for JavaScript
Hazem Saleh
 
PDF
Mockito 2.x Migration - Droidcon UK 2018
Hazem Saleh
 
PDF
JavaScript Unit Testing with an Angular 5.x Use Case 101
Hazem Saleh
 
PPTX
[AnDevCon 2016] Mutation Testing for Android
Hazem Saleh
 
PPTX
[ApacheCon 2016] Advanced Apache Cordova
Hazem Saleh
 
PPTX
[Devoxx Morocco 2015] Apache Cordova In Action
Hazem Saleh
 
PPTX
Apache Cordova In Action
Hazem Saleh
 
PPTX
[JMaghreb 2014] Developing JavaScript Mobile Apps Using Apache Cordova
Hazem Saleh
 
PDF
Efficient JavaScript Unit Testing, JavaOne China 2013
Hazem Saleh
 
PDF
Efficient JavaScript Unit Testing, March 2013
Hazem Saleh
 
PDF
JavaScript tools
Hazem Saleh
 
PDF
Efficient JavaScript Unit Testing, May 2012
Hazem Saleh
 
[FullStack NYC 2019] Effective Unit Tests for JavaScript
Hazem Saleh
 
Mockito 2.x Migration - Droidcon UK 2018
Hazem Saleh
 
JavaScript Unit Testing with an Angular 5.x Use Case 101
Hazem Saleh
 
[AnDevCon 2016] Mutation Testing for Android
Hazem Saleh
 
[ApacheCon 2016] Advanced Apache Cordova
Hazem Saleh
 
[Devoxx Morocco 2015] Apache Cordova In Action
Hazem Saleh
 
Apache Cordova In Action
Hazem Saleh
 
[JMaghreb 2014] Developing JavaScript Mobile Apps Using Apache Cordova
Hazem Saleh
 
Efficient JavaScript Unit Testing, JavaOne China 2013
Hazem Saleh
 
Efficient JavaScript Unit Testing, March 2013
Hazem Saleh
 
JavaScript tools
Hazem Saleh
 
Efficient JavaScript Unit Testing, May 2012
Hazem Saleh
 

Recently uploaded (20)

PDF
Credit Without Borders: AI and Financial Inclusion in Bangladesh
Ehsan Tanim
 
PDF
A contest of sentiment analysis: k-nearest neighbor versus neural network
IAESIJAI
 
PPTX
Chapter 5: Probability Theory and Statistics
RandyFin
 
PDF
Comparative analysis of machine learning models for fake news detection in so...
IAESIJAI
 
PDF
1 - Historical Antecedents, Social Consideration.pdf
tuazon2030627
 
PDF
Taming the Chaos: How to Turn Unstructured Data into Decisions
Safe Software
 
PPT
What is a Computer? Input Devices /output devices
GulJan8
 
PPTX
Final SEM Unit 1 for mit wpu at pune .pptx
anishtilekar08
 
PPT
Galois Field Theory of Risk: A Perspective, Protocol, and Mathematical Backgr...
Melanie Swan
 
PDF
ENT215_Completing-a-large-scale-migration-and-modernization-with-AWS.pdf
ssuser28425f
 
PPTX
Microsoft Excel 365/2024 Beginner's training
frank yeboah
 
PDF
Getting started with AI Agents and Multi-Agent Systems
Maxim Salnikov
 
PDF
Architecture types and enterprise applications.pdf
ChristopherTHyatt
 
PDF
A proposed approach for plagiarism detection in Myanmar Unicode text
IAESIJAI
 
PPTX
Benefits of Physical activity for teenagers.pptx
Nokwanda Thabethe
 
PDF
Enhancing plagiarism detection using data pre-processing and machine learning...
IAESIJAI
 
PDF
Zenith AI: Advanced Artificial Intelligence
Biz Preneurs
 
PPTX
GROUP4NURSINGINFORMATICSREPORT-2 PRESENTATION
ClarisejaneSartillo1
 
PDF
“A New Era of 3D Sensing: Transforming Industries and Creating Opportunities,...
Edge AI and Vision Alliance
 
PDF
Convolutional neural network based encoder-decoder for efficient real-time ob...
IAESIJAI
 
Credit Without Borders: AI and Financial Inclusion in Bangladesh
Ehsan Tanim
 
A contest of sentiment analysis: k-nearest neighbor versus neural network
IAESIJAI
 
Chapter 5: Probability Theory and Statistics
RandyFin
 
Comparative analysis of machine learning models for fake news detection in so...
IAESIJAI
 
1 - Historical Antecedents, Social Consideration.pdf
tuazon2030627
 
Taming the Chaos: How to Turn Unstructured Data into Decisions
Safe Software
 
What is a Computer? Input Devices /output devices
GulJan8
 
Final SEM Unit 1 for mit wpu at pune .pptx
anishtilekar08
 
Galois Field Theory of Risk: A Perspective, Protocol, and Mathematical Backgr...
Melanie Swan
 
ENT215_Completing-a-large-scale-migration-and-modernization-with-AWS.pdf
ssuser28425f
 
Microsoft Excel 365/2024 Beginner's training
frank yeboah
 
Getting started with AI Agents and Multi-Agent Systems
Maxim Salnikov
 
Architecture types and enterprise applications.pdf
ChristopherTHyatt
 
A proposed approach for plagiarism detection in Myanmar Unicode text
IAESIJAI
 
Benefits of Physical activity for teenagers.pptx
Nokwanda Thabethe
 
Enhancing plagiarism detection using data pre-processing and machine learning...
IAESIJAI
 
Zenith AI: Advanced Artificial Intelligence
Biz Preneurs
 
GROUP4NURSINGINFORMATICSREPORT-2 PRESENTATION
ClarisejaneSartillo1
 
“A New Era of 3D Sensing: Transforming Industries and Creating Opportunities,...
Edge AI and Vision Alliance
 
Convolutional neural network based encoder-decoder for efficient real-time ob...
IAESIJAI
 

JSF Mashups in Action

  • 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)
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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