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.
Agenda What is Mashups4JSF. Online Demo. Mashups4JSF Architecture. How to Configure Mashups4JSF. Current Mashups4JSF components. Conclusion.
Mashups4JSF Architecture
Agenda What is Mashups4JSF. Online Demo. Mashups4JSF Architecture. How to Configure Mashups4JSF. Current Mashups4JSF components. Conclusion.
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 svn/trunk/ mashups4jsf-read-only mvn clean install
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=" xmlns:ui=" xmlns:h=" xmlns:f=" xmlns:mashup="
How to Configure Mashups4JSF Step 3: In your page HEAD element, place the mashup:resources tag include: Now you can start working with Mashups4JSF.
Agenda What is Mashups4JSF. Online Demo. Mashups4JSF Architecture. How to Configure Mashups4JSF. Current Mashups4JSF components. Conclusion.
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.
GMaps4JSF Main Components map note icon marker streetView Panorama groundoverlaymapControl
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
GMaps4JSF Main Components map note icon marker streetView Panorama groundoverlaymapControl
htmlInformationWindow Component Create a note on the map or on a marker of the map Welcome to Vienna "/> Welcome to Vienna "/>
GMaps4JSF Main Components map note icon marker streetView Panorama groundoverlaymapControl
Icon Component For customizing the marker’s image
GMaps4JSF Main Components map note icon marker streetView Panorama groundoverlaymapControl
MapControl Component Is used for adding and positioning map controls. Possible Controls are: GScaleControlGSmallZoomControlGSmallMapControlGLargeMapControl GHierarchicalMapType Control GMapTypeControlGOverviewMapControl
MapControl Component
GMaps4JSF Main Components map note icon marker streetView Panorama groundoverlaymapControl
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.
GMaps4JSF Main Components map note icon marker streetView Panorama groundoverlaymapControl
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=" " longitude=" " />
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:
Current Mashups4JSF Components
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
Current Mashups4JSF Components
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
Current Mashups4JSF Components
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
Current Mashups4JSF Components
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=" 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 Java … …
Generic Feed Reader Components Using the : <mashup:rssFeedReader feedURL=" 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}
Agenda What is Mashups4JSF. Online Demo. Mashups4JSF Architecture. How to Configure Mashups4JSF. Current Mashups4JSF components. Conclusion.
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:
Jose Noheda Damian Pooley