Presentation is loading. Please wait.

Presentation is loading. Please wait.

Click to edit Master subtitle style Java Developer Conference 2010 Hazem Saleh Ed Burns Mashups in the JavaServer Faces World.

Published byGinger Jenkins Modified over 9 years ago

Similar presentations

Presentation on theme: "Click to edit Master subtitle style Java Developer Conference 2010 Hazem Saleh Ed Burns Mashups in the JavaServer Faces World."— Presentation transcript:

1 Click to edit Master subtitle style Java Developer Conference 2010 Hazem Saleh Ed Burns Mashups in the JavaServer Faces World

2 Click to edit Master subtitle style Agenda What is Mashups4JSF Demo What the Mashups4JSF library offers. How to Configure Mashups4JSF. Current Mashups4JSF components. Conclusion

3 Click to edit Master subtitle style  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 Click to edit Master subtitle style What is Mashups4JSF JSFHeadache+Mashups =  Study low level APIs of other Mashup libraries  Write much integration code Also

5 Click to edit Master subtitle style 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 Click to edit Master subtitle style Agenda What is Mashups4JSF Demo What the Mashups4JSF library offers. How to Configure Mashups4JSF. Current Mashups4JSF components. Conclusion

7 Click to edit Master subtitle style What the Mashups4JSF library offers. The Library provides JSF tags and services wrappers to make it easy to integrate the famous mashup providers services inside JSF web applications.

8 Click to edit Master subtitle style Agenda What is Mashups4JSF Demo What the Mashups4JSF library offers. How to Configure Mashups4JSF. Current Mashups4JSF components. Conclusion

9 Click to edit Master subtitle style  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/

10 Click to edit Master subtitle style  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/">

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

12 Click to edit Master subtitle style Agenda What is Mashups4JSF Demo What the Mashups4JSF library offers. How to Configure Mashups4JSF. Current Mashups4JSF components. Conclusion

13 Click to edit Master subtitle style Current Mashups4JSF C omponents

14 Java Developer Conference 2010 GMaps4JSF

15 Click to edit Master subtitle style What is GMaps4JSF

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

17 Click to edit Master subtitle style What is GMaps4JSF Integration Integration With Simplification Complicated Maps Simple TagsConstruct

18 Java Developer Conference 2010 Gmaps4JSF Features

19 Click to edit Master subtitle style 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.

20 Click to edit Master subtitle style 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.

21 Java Developer Conference 2010 Gmaps4JSF Main Components map note icon marker streetView Panorama polylinegroundoverlay polygonmapControl

22 Click to edit Master subtitle style 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.

23 Click to edit Master subtitle style 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 Click to edit Master subtitle style 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.

25 Click to edit Master subtitle style 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.

26 Click to edit Master subtitle style 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.

27 Click to edit Master subtitle style 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.

28 GMaps4JSF Main Components map note icon marker streetView Panorama polylinegroundoverlay polygonmapControl

29 Click to edit Master subtitle style 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 To attach a note to the marker

30 Click to edit Master subtitle style Marker Component

31 GMaps4JSF Main Components map note icon marker streetView Panorama polylinegroundoverlay polygonmapControl

32 Click to edit Master subtitle style htmlInformationWindow Component Create a note on the map or on a marker of the map Welcome to Vienna "/> Welcome to Vienna "/>

33 GMaps4JSF Main Components map note icon marker streetView Panorama polylinegroundoverlay polygonmapControl

34 Click to edit Master subtitle style Icon Component For customizing the marker’s image

35 GMaps4JSF Main Components map note icon marker streetView Panorama polylinegroundoverlay polygonmapControl

36 Click to edit Master subtitle style MapControl Component Is used for adding and positioning map controls. Possible Controls are: GScaleControl GSmallZoomControl GSmallMapControl GLargeMapControl GHierarchicalMapType Control GMapTypeControl GOverviewMapControl

37 GMaps4JSF Main Components map note icon marker streetView Panorama polylinegroundoverlay polygonmapControl

38 Click to edit Master subtitle style MapControl Component

39 Click to edit Master subtitle style 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.

40 GMaps4JSF Main Components map note icon marker streetView Panorama polylinegroundoverlay polygonmapControl

41 Click to edit Master subtitle style Polyline Component Is Used for drawing a polyline on the map The curvature of the earth can be shown using the geodesic attribute Width Color Opacity User can control the polyline

42 Click to edit Master subtitle style Polyline Component

43 GMaps4JSF Main Components map note icon marker streetView Panorama polylinegroundoverlay polygonmapControl

44 Click to edit Master subtitle style Polygon Component Is similar to with the difference that it is close-ended User can also control The polygon width The stroke opacity The fill color The fill opacity

45 Click to edit Master subtitle style Polygon Component

46 GMaps4JSF Main Components map note icon marker streetView Panorama polylinegroundoverlay polygonmapControl

47 Click to edit Master subtitle style 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

48 Click to edit Master subtitle style StreetViewPanorama Component <m:streetViewPanorama width="500px" height="500px" latitude="42.345573" longitude="-71.098326 " />

49 Click to edit Master subtitle style StreetViewPanorama Component <m:streetViewPanorama width="500px" height="500px" address=“Central Park West and Columbus NY, USA " />

50 Defining ClientSide Events on Components

51 Click to edit Master subtitle style Defining ClientSide Events on Components  The user can define events to any event source component by placing the tag inside it as follows: <m:eventListener eventName=" >" jsFunction=" >" /> <m:eventListener eventName=" >" jsFunction=" >" />

52 Click to edit Master subtitle style Defining ClientSide Events on Components  Example: create a listener to the marker dragend event … function marker1DragHandler(latlng) { alert("Current marker1 latlng is: " + latlng); } … … function marker1DragHandler(latlng) { alert("Current marker1 latlng is: " + latlng); } …

53 GMaps4JSF and JavaScript

54 Click to edit Master subtitle style GMaps4JSF and JavaScript  GMaps4JSF does not lock the door in the face of JavaScript customization.  GMaps4JSF components can be accessed from the JavaScript code.  The library user can expose any component as a JavaScript object by using the jsVariable attribute.

55 Click to edit Master subtitle style GMaps4JSF and JavaScript Example: the user can see the streets (s)he selected from the master map in the detailed panorama.

56 Click to edit Master subtitle style GMaps4JSF and JavaScript  Example code: function showStreet(latlng) { pano1.setLocationAndPOV(latlng); } function showStreet(latlng) { pano1.setLocationAndPOV(latlng); }

57 GMaps4JSF Reverse Geocoding

58 Click to edit Master subtitle style GMaps4JSF Reverse Geocoding  This feature gives the JSF developers the ability to get the map location information (place mark) from the latitude and longitude of the location by making a call to: PlaceMark GMaps4JSFServiceFactory.getReverseGeocoderService(). getPlaceMark(lat, lng)  The PlaceMark contains the following information:  Address: The place address.  PostalCodeNumber: The place postal code.  CountryName: The country name.  CountryCode: The country code.  Accuracy: The place retrieval accuracy.

59 More Topics on GMaps4JSF

60 Click to edit Master subtitle style More Topics on GMaps4JSF  Server side GMaps4JSF events.  Auto Reshape Map feature.  The GMaps4JSF Experimental Extension library:  The DragZoom component.  The ExtendedHtmlInformationWindow component.  The PopupMarker component.  The Circle 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/

61 Click to edit Master subtitle style Current Mashups4JSF C omponents

62 Click to edit Master subtitle style 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.

63 Click to edit Master subtitle style 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

64 Click to edit Master subtitle style Video Playing Example

65 Click to edit Master subtitle style Current Mashups4JSF C omponents

66 Click to edit Master subtitle style  Use the yahoo weather service or the yahoo weather component to get the weather forecasting of a specific location. Yahoo Weather Module

67 Click to edit Master subtitle style 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

68 Click to edit Master subtitle style Yahoo Weather Example

69 Click to edit Master subtitle style Current Mashups4JSF C omponents

70 Click to edit Master subtitle style Google Search Module  Search in the Google web with your favorite criteria using the Google search service.

71 Click to edit Master subtitle style 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

72 Click to edit Master subtitle style Current Mashups4JSF C omponents

73 Click to edit Master subtitle style Digg Module  Search in Digg stories with your favorite criteria using the Digg search service.

74 Click to edit Master subtitle style 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

75 Click to edit Master subtitle style Agenda What is Mashups4JSF Demo What the Mashups4JSF library offers. How to Configure Mashups4JSF. Current Mashups4JSF components. Conclusion

76 Click to edit Master subtitle style Demo

77 Click to edit Master subtitle style Agenda What is Mashups4JSF Demo What the Mashups4JSF library offers. How to Configure Mashups4JSF. Current Mashups4JSF components. Conclusion

78 Click to edit Master subtitle style 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

79 Click to edit Master subtitle style Jose Noheda Damian Pooley

80 Click to edit Master subtitle style

Download ppt "Click to edit Master subtitle style Java Developer Conference 2010 Hazem Saleh Ed Burns Mashups in the JavaServer Faces World."

Similar presentations

© 2011 Delmar, Cengage Learning Chapter 1 Getting Started with Dreamweaver.

© 2011 Delmar, Cengage Learning Chapter 1 Getting Started with Dreamweaver.
Mapping With Second Site 2 Adding Homesteads & Migrations by David Walker Ottawa TMG Users Group 8 February 2009 by David Walker Ottawa TMG Users Group.

Mapping With Second Site 2 Adding Homesteads & Migrations by David Walker Ottawa TMG Users Group 8 February 2009 by David Walker Ottawa TMG Users Group.
Developing Grid User Interface Components Portlets, gadgets, etc.

Developing Grid User Interface Components Portlets, gadgets, etc.
Using Google Maps. AJAX Google Maps is an AJAX Application Asynchronous JavaScript and XML, is a web development technique for creating interactive web.

Using Google Maps. AJAX Google Maps is an AJAX Application Asynchronous JavaScript and XML, is a web development technique for creating interactive web.
Chapter 6 Photoshop and ImageReady: Part II The Web Warrior Guide to Web Design Technologies.

Chapter 6 Photoshop and ImageReady: Part II The Web Warrior Guide to Web Design Technologies.
Google Android Map API Presentation 13/03/2008. Map API – Overview (1) Map rendering facility on Android device Similar to Google Earth Integrate map.

Google Android Map API Presentation 13/03/2008. Map API – Overview (1) Map rendering facility on Android device Similar to Google Earth Integrate map.
Mannheim Web 2.0 Systems Development. Plan Being an early-adopter Web 2.0 technologies Mashups Google Earth and kml XQuery and eXist.

Mannheim Web 2.0 Systems Development. Plan Being an early-adopter Web 2.0 technologies Mashups Google Earth and kml XQuery and eXist.
There is a certain way that an HTML file should be set up. The HTML section declares a beginning and an ending. Within the HTML, there should be a HEAD.

There is a certain way that an HTML file should be set up. The HTML section declares a beginning and an ending. Within the HTML, there should be a HEAD.
Beginning to use United Streaming Videos Kathy Davis EdTe 281.

Beginning to use United Streaming Videos Kathy Davis EdTe 281.
Google mapping tools in the newsroom Part 2 Highway Africa 2010 Compiled and presented by Jackie Rajuai.

Google mapping tools in the newsroom Part 2 Highway Africa 2010 Compiled and presented by Jackie Rajuai.
Digital Mapping (History 9808A) 6 October 2014. Today’s Agenda  Spatial Humanities  Blog Leaders  Google Earth workshop  GIS lab tour.

Digital Mapping (History 9808A) 6 October Today’s Agenda  Spatial Humanities  Blog Leaders  Google Earth workshop  GIS lab tour.
Esri International User Conference | San Diego, CA Technical Workshops | ArcGIS for SharePoint, An Introduction Art Haddad Rich Zwaap.

Esri International User Conference | San Diego, CA Technical Workshops | ArcGIS for SharePoint, An Introduction Art Haddad Rich Zwaap.
LayoutLayout Manage your blog! Baharstudio.blogspot.com Baharstudio.50webs.com.

LayoutLayout Manage your blog! Baharstudio.blogspot.com Baharstudio.50webs.com.
Writing All Your Code In OpenEdge Architect Peter van Dam.

Writing All Your Code In OpenEdge Architect Peter van Dam.
BY LINDA MOHAISEN MIKE ZIELINSKI The Tree Census Project.

BY LINDA MOHAISEN MIKE ZIELINSKI The Tree Census Project.
GIS 2096 Introduction to Web Mapping & The WWW Google Maps & Google Mashups.

GIS 2096 Introduction to Web Mapping & The WWW Google Maps & Google Mashups.
NextGen Technology upgrade – Synerizip - Sandeep Kamble.

NextGen Technology upgrade – Synerizip - Sandeep Kamble.
Configuring Social Media, Google Analytics, and Gadgets Lila Bronson Training Manager, OmniUpdate, Inc.

Configuring Social Media, Google Analytics, and Gadgets Lila Bronson Training Manager, OmniUpdate, Inc.
Building a UI with Zen Pat McGibbon –Sales Engineer.

Building a UI with Zen Pat McGibbon –Sales Engineer.
Lirida Kerçelli Ayşe Sezer The Google AJAX Search API.

Lirida Kerçelli Ayşe Sezer The Google AJAX Search API.

Similar presentations

Ads by Google