Mashups in the JavaServer Faces World Ed Burns Hazem Saleh.

Mashups in the JavaServer Faces World Ed Burns Hazem Saleh

Agenda What is Mashups4JSF. Online Demo. Mashups4JSF Architecture. How to Configure Mashups4JSF. Current Mashups4JSF components. Conclusion.

 Intensive JavaScript  Atom Feed Parsing  RSS Feed Parsing  JSON Parsing  Different other formats parsing What is Mashups4JSF JSFHeadache+Mashups = JSF users have to know

What is Mashups4JSF JSFHeadache+Mashups =  Study low level APIs of other Mashup libraries.  Write much integration code. Also

What is Mashups4JSF Undergoing incubation open source project. Mashups4JSF Integrating famous mashup services with the JSF applications. Aims Constructing complicated mashups using simple tags and service wrappers. Constructing complicated mashups using simple tags and service wrappers.

Mashups4JSF Architecture

 Step1: Two possible ways How to Configure Mashups4JSF Download the latest stable snapshot jar from the project homepage: Checkout the project source code by executing the following command: At the parent pom directory, just execute the following command: The library jar will be built and the library examples war as well. Maven2 BuildJar Download svn checkout http://mashups4jsf.googlecode.com/ svn/trunk/ mashups4jsf-read-only mvn clean install http://mashups4jsf.googlecode.com/

 Step 2: How to Configure Mashups4JSF Place the downloaded jar in the WEB-INF/lib folder. Add the following declaration to your XHTML page. <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/">

How to Configure Mashups4JSF  Step 3: In your page HEAD element, place the mashup:resources tag include: Now you can start working with Mashups4JSF.

Current Mashups4JSF Components

GMaps4JSF

What is GMaps4JSF

… 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); } … 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); } Life Before GMaps4JSF Life After GMaps4JSF

What is GMaps4JSF Integration Integration With Simplification Complicated Maps Simple TagsConstruct

What the GMaps4JSF tag library offers

 Simple Tags that allows:  Creating maps using (latitude and longitude) or (address).  Adding markers on the map.  Adding notes on the map.  Adding controls on the map.  Adding groundOverlays on the map.  Drawing polygons on the map.  Drawing polylines on the map.

What the GMaps4JSF tag library offers  Simple Tags that allows:  Creating event listeners on the map objects.  Customizing the map objects. Like  Changing the view of the markers.  Changing the layout of the map controls.  Creating Streetview Panoramas and integrate them simply with the map.

GMaps4JSF Main Components map note icon marker streetView Panorama groundoverlaymapControl

Map Component Create the map using latitude and longitude Create the map using the address Control the map zoom value Control the map type Control the map draggability Control the map size.

Marker Component Create a marker on the map. Can specify a specific latitude and longitude or address. Control the marker dragability Icon To change the marker view Html Information Window Html Information Window To attach a note to the marker

Marker Component

htmlInformationWindow Component Create a note on the map or on a marker of the map Welcome to Vienna "/> Welcome to Vienna "/>

Icon Component For customizing the marker’s image

MapControl Component Is used for adding and positioning map controls. Possible Controls are: GScaleControlGSmallZoomControlGSmallMapControlGLargeMapControl GHierarchicalMapType Control GMapTypeControlGOverviewMapControl

MapControl Component

Groundoverlay Component <m:groundoverlay imageURL=".../gmaps4jsf-logo.png" startLatitude="7" endLatitude="23" startLongitude="-54" endLongitude="84"/> <m:groundoverlay imageURL=".../gmaps4jsf-logo.png" startLatitude="7" endLatitude="23" startLongitude="-54" endLongitude="84"/> Is used for adding a ground overlay on the map.

StreetViewPanorama Component A Google Map component that allows viewing the streets that are supported by Google Maps Create the Google Maps streetViewPanorama using the longitude and latitude or using address Allow controlling the zooming Allow controlling the camera attributes Allow controlling its size

StreetViewPanorama Component <m:streetViewPanorama width="500px" height="500px" latitude="42.345573" longitude="-71.098326 " />

StreetViewPanorama Component <m:streetViewPanorama width="500px" height="500px" address=“Central Park West and Columbus NY, USA " />

More Topics on GMaps4JSF

 Other GMaps4JSF graphics components  The Circle component.  The polyline component.  The polygon component.  GMaps4JSF and JavaScript.  Client and Server side GMaps4JSF events.  The Map Auto-Reshape feature.  GMaps4JSF Reverse Geocoding feature.  The GMaps4JSF Experimental Extension library:  The DragZoom component.  The ExtendedHtmlInformationWindow component.  The PopupMarker component.  All of these information and more can be found in the project home page: http://code.google.com/p/gmaps4jsf/ http://code.google.com/p/gmaps4jsf/

YouTube Services YouTube Services include: Searching Playing Video Search the youTube videos with your favorite criteria using the youTube search service. Display your video using the youTube player component.

List parameters = new ArrayList (); YouTubeSearchService youTubeSearchService = YouTubeServicesFactory.getYouTubeSearchService(); parameters.add(new ServiceParameter( YouTubeSearchServiceParameters.MAX_RESULTS, "25")); parameters.add(new ServiceParameter( YouTubeSearchServiceParameters.CATEGORY, "sports")); parameters.add(new ServiceParameter( YouTubeSearchServiceParameters.QUERY, "brazil")); try { List videoResults = youTubeSearchService.getVideoList(parameters); for (YouTubeSearchResultItem searchItem : videoResults) { // Process the videos result } } catch (Exception e) { // Exception Handling } List parameters = new ArrayList (); YouTubeSearchService youTubeSearchService = YouTubeServicesFactory.getYouTubeSearchService(); parameters.add(new ServiceParameter( YouTubeSearchServiceParameters.MAX_RESULTS, "25")); parameters.add(new ServiceParameter( YouTubeSearchServiceParameters.CATEGORY, "sports")); parameters.add(new ServiceParameter( YouTubeSearchServiceParameters.QUERY, "brazil")); try { List videoResults = youTubeSearchService.getVideoList(parameters); for (YouTubeSearchResultItem searchItem : videoResults) { // Process the videos result } } catch (Exception e) { // Exception Handling } Searching Example

Video Playing Example

 Use the yahoo weather service or the yahoo weather component to get the weather forecasting of a specific location. Yahoo Weather Module

List weatherStatusParameters = new ArrayList (); weatherStatusParameters.add(new ServiceParameter( YahooWeatherServiceParameters.ZIP_CODE, "94089")); weatherStatusParameters.add(new ServiceParameter( YahooWeatherServiceParameters.TEMPERATURE_TYPE, "c")); YahooWeatherService yahooWeatherService = YahooServicesFactory.getYahooWeatherService(); try { YahooWeatherStatus status = yahooWeatherService.getWeatherStatus(weatherStatusParameters); // Process the result } catch (Exception e) { // Exception Handling } List weatherStatusParameters = new ArrayList (); weatherStatusParameters.add(new ServiceParameter( YahooWeatherServiceParameters.ZIP_CODE, "94089")); weatherStatusParameters.add(new ServiceParameter( YahooWeatherServiceParameters.TEMPERATURE_TYPE, "c")); YahooWeatherService yahooWeatherService = YahooServicesFactory.getYahooWeatherService(); try { YahooWeatherStatus status = yahooWeatherService.getWeatherStatus(weatherStatusParameters); // Process the result } catch (Exception e) { // Exception Handling } Yahoo Weather Example

Yahoo Weather Example

Google Search Module  Search in the Google web with your favorite criteria using the Google search service.

List parameters = new ArrayList (); GoogleSearchService googleSearchService = GoogleServicesFactory.getGoogleSearchService(); parameters.add(new ServiceParameter(GoogleSearchServiceParameters.QUERY, "Egypt ")); try { List webSearchResults = googleSearchService.getWebSearchResultList(parameters); for (GoogleSearchResultItem searchItem : webSearchResults) { //Process the result } } catch (Exception e) { //Exception Handling } List parameters = new ArrayList (); GoogleSearchService googleSearchService = GoogleServicesFactory.getGoogleSearchService(); parameters.add(new ServiceParameter(GoogleSearchServiceParameters.QUERY, "Egypt ")); try { List webSearchResults = googleSearchService.getWebSearchResultList(parameters); for (GoogleSearchResultItem searchItem : webSearchResults) { //Process the result } } catch (Exception e) { //Exception Handling } Google Search Services

Digg Module  Search in Digg stories with your favorite criteria using the Digg search service.

List parameters = new ArrayList (); DiggSearchService diggService = DiggServicesFactory.getDiggSearchService(); //Mandatory parameters.add(new ServiceParameter( DiggSearchServiceParameters.SEARCH_ARGS_SEARCH_QUERY,"JSF")); try { DiggSearchStoryResults storyResults = diggService.getStoriesList(parameters); for (DiggSearchStoryResultItem searchItem : storyResults.getSearchResultList()) { // Process the result. } } catch (Exception e) { // Exception Handling } List parameters = new ArrayList (); DiggSearchService diggService = DiggServicesFactory.getDiggSearchService(); //Mandatory parameters.add(new ServiceParameter( DiggSearchServiceParameters.SEARCH_ARGS_SEARCH_QUERY,"JSF")); try { DiggSearchStoryResults storyResults = diggService.getStoriesList(parameters); for (DiggSearchStoryResultItem searchItem : storyResults.getSearchResultList()) { // Process the result. } } catch (Exception e) { // Exception Handling } Digg Search Services

Generic Feed Reader Components  Mashups4JSF currently contains two main generic feed reader components:  atomFeedReader component.  rssFeedReader component.  Using these two components allows the JSF developer to get the feeds from any mashup provider that provides RSS or Atom feeds.

Generic Feed Reader Components  Atom 1.0 Feed Sample: Example Atom Feed Description … urn:uuid:1225c695-cfb8-80da344efa6a Example title Author1 … …

Generic Feed Reader Components  Using the : <mashup:atomFeedReader feedURL="http://www.jroller.com/HazemBlog/feed/entries/atom" maximumCount="5" feedVar=“feed" entryVar="entry" entryIndex="entryIndex"> The Feed Description: #{feed.description} The Index: #{entryIndex} The Title: #{entry.title} The Link: #{entry.link} The Author: #{entry.author} The Category: #{entry.categories[0].name}

Generic Feed Reader Components  RSS 2.0 Feed Sample: Example Channel Description … xyz Example title Author1 http://www.xyz.com Java … …

Generic Feed Reader Components  Using the : <mashup:rssFeedReader feedURL="http://feeds.feedburner.com/techtarget/tsscom/home" maximumCount="5" channelVar="channel" itemVar="item" itemIndex="itemIndex"> The Channel Description: #{channel.description} The Index: #{itemIndex} The Title: #{item.title} The Link: #{item.link} The Author: #{item.author} The Category: #{item.categories[0].name}

Online Demo

Agenda What is Mashups4JSF Online Demo. Mashups4JSF Architecture. How to Configure Mashups4JSF. Current Mashups4JSF components. Conclusion

GMaps4JSF gives the JSF developers the ability to create complicated maps with all of their details easily. GMaps4JSF offers the declarative Google Maps. Mashups4JSF is going on the way of GMaps4JSF to support declarative mashups. Mashups4JSF is an open source project and still undergoing incubation, so your ideas and contributions are welcome. You can post your ideas and improvements here: http://code.google.com/p/mashups4jsf/issues/list

Jose Noheda Damian Pooley

Mashups in the JavaServer Faces World Ed Burns Hazem Saleh.

Similar presentations

Presentation on theme: "Mashups in the JavaServer Faces World Ed Burns Hazem Saleh."— Presentation transcript:

Similar presentations

About project

Feedback

Log in

Auth with social network:

Mashups in the JavaServer Faces World Ed Burns Hazem Saleh.

Similar presentations

Presentation on theme: "Mashups in the JavaServer Faces World Ed Burns Hazem Saleh."— Presentation transcript:

Similar presentations

About project

Feedback