Click to edit Master subtitle style Java Developer Conference 2010 Hazem Saleh Ed Burns Mashups in the JavaServer Faces World
Click to edit Master subtitle style Agenda What is Mashups4JSF Demo What the Mashups4JSF library offers. How to Configure Mashups4JSF. Current Mashups4JSF components. Conclusion
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
Click to edit Master subtitle style What is Mashups4JSF JSFHeadache+Mashups = Study low level APIs of other Mashup libraries Write much integration code Also
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.
Click to edit Master subtitle style Agenda What is Mashups4JSF Demo What the Mashups4JSF library offers. How to Configure Mashups4JSF. Current Mashups4JSF components. Conclusion
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.
Click to edit Master subtitle style Agenda What is Mashups4JSF Demo What the Mashups4JSF library offers. How to Configure Mashups4JSF. Current Mashups4JSF components. Conclusion
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 svn/trunk/ mashups4jsf-read-only mvn clean install
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=" xmlns:ui=" xmlns:h=" xmlns:f=" xmlns:mashup="
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.
Click to edit Master subtitle style Agenda What is Mashups4JSF Demo What the Mashups4JSF library offers. How to Configure Mashups4JSF. Current Mashups4JSF components. Conclusion
Click to edit Master subtitle style Current Mashups4JSF C omponents
Java Developer Conference 2010 GMaps4JSF
Click to edit Master subtitle style 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
Click to edit Master subtitle style What is GMaps4JSF Integration Integration With Simplification Complicated Maps Simple TagsConstruct
Java Developer Conference 2010 Gmaps4JSF Features
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.
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.
Java Developer Conference 2010 Gmaps4JSF Main Components map note icon marker streetView Panorama polylinegroundoverlay polygonmapControl
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.
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.
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.
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.
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.
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.
GMaps4JSF Main Components map note icon marker streetView Panorama polylinegroundoverlay polygonmapControl
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
Click to edit Master subtitle style Marker Component
GMaps4JSF Main Components map note icon marker streetView Panorama polylinegroundoverlay polygonmapControl
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 "/>
GMaps4JSF Main Components map note icon marker streetView Panorama polylinegroundoverlay polygonmapControl
Click to edit Master subtitle style Icon Component For customizing the marker’s image
GMaps4JSF Main Components map note icon marker streetView Panorama polylinegroundoverlay polygonmapControl
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
GMaps4JSF Main Components map note icon marker streetView Panorama polylinegroundoverlay polygonmapControl
Click to edit Master subtitle style MapControl Component
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.
GMaps4JSF Main Components map note icon marker streetView Panorama polylinegroundoverlay polygonmapControl
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
Click to edit Master subtitle style Polyline Component
GMaps4JSF Main Components map note icon marker streetView Panorama polylinegroundoverlay polygonmapControl
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
Click to edit Master subtitle style Polygon Component
GMaps4JSF Main Components map note icon marker streetView Panorama polylinegroundoverlay polygonmapControl
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
Click to edit Master subtitle style StreetViewPanorama Component <m:streetViewPanorama width="500px" height="500px" latitude=" " longitude=" " />
Click to edit Master subtitle style StreetViewPanorama Component <m:streetViewPanorama width="500px" height="500px" address=“Central Park West and Columbus NY, USA " />
Defining ClientSide Events on Components
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=" >" />
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); } …
GMaps4JSF and JavaScript
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.
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.
Click to edit Master subtitle style GMaps4JSF and JavaScript Example code: function showStreet(latlng) { pano1.setLocationAndPOV(latlng); } function showStreet(latlng) { pano1.setLocationAndPOV(latlng); }
GMaps4JSF Reverse Geocoding
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.
More Topics on GMaps4JSF
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:
Click to edit Master subtitle style Current Mashups4JSF C omponents
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.
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
Click to edit Master subtitle style Video Playing Example
Click to edit Master subtitle style Current Mashups4JSF C omponents
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
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
Click to edit Master subtitle style Yahoo Weather Example
Click to edit Master subtitle style Current Mashups4JSF C omponents
Click to edit Master subtitle style Google Search Module Search in the Google web with your favorite criteria using the Google search service.
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
Click to edit Master subtitle style Current Mashups4JSF C omponents
Click to edit Master subtitle style Digg Module Search in Digg stories with your favorite criteria using the Digg search service.
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
Click to edit Master subtitle style Agenda What is Mashups4JSF Demo What the Mashups4JSF library offers. How to Configure Mashups4JSF. Current Mashups4JSF components. Conclusion
Click to edit Master subtitle style Demo
Click to edit Master subtitle style Agenda What is Mashups4JSF Demo What the Mashups4JSF library offers. How to Configure Mashups4JSF. Current Mashups4JSF components. Conclusion
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:
Click to edit Master subtitle style Jose Noheda Damian Pooley
Click to edit Master subtitle style