Presentation is loading. Please wait.

Presentation is loading. Please wait.

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:

1 Mashups in the JavaServer Faces World Ed Burns Hazem Saleh

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

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

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

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

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

7

8 Mashups4JSF Architecture

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

10  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/

11  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/">

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

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

14 Current Mashups4JSF Components

15 GMaps4JSF

16 What is GMaps4JSF

17 … 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

18 What is GMaps4JSF Integration Integration With Simplification Complicated Maps Simple TagsConstruct

19 What the GMaps4JSF tag library offers

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

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

22 GMaps4JSF Main Components map note icon marker streetView Panorama groundoverlaymapControl

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

24 GMaps4JSF Main Components map note icon marker streetView Panorama groundoverlaymapControl

25 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

26 Marker Component

27 GMaps4JSF Main Components map note icon marker streetView Panorama groundoverlaymapControl

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

29 GMaps4JSF Main Components map note icon marker streetView Panorama groundoverlaymapControl

30 Icon Component For customizing the marker’s image

31 GMaps4JSF Main Components map note icon marker streetView Panorama groundoverlaymapControl

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

33 MapControl Component

34 GMaps4JSF Main Components map note icon marker streetView Panorama groundoverlaymapControl

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

36 GMaps4JSF Main Components map note icon marker streetView Panorama groundoverlaymapControl

37 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

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

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

40 More Topics on GMaps4JSF

41  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/

42 Current Mashups4JSF Components

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

44 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

45 Video Playing Example

46 Current Mashups4JSF Components

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

48 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

49 Yahoo Weather Example

50 Current Mashups4JSF Components

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

52 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

53 Current Mashups4JSF Components

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

55 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

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

57 Online Demo

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

59 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

60 Jose Noheda Damian Pooley

61


Download ppt "Mashups in the JavaServer Faces World Ed Burns Hazem Saleh."

Similar presentations


Ads by Google