1 / 31

Getting Started Building Mashups using JavaScript, Ajax, and Google Maps

Getting Started Building Mashups using JavaScript, Ajax, and Google Maps. Peter Laird Managing Architect WebLogic Portal BEA Systems. About the Speaker. Has 10 years of server side Java development experience

beyla
Download Presentation

Getting Started Building Mashups using JavaScript, Ajax, and Google Maps

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Getting Started Building Mashups using JavaScript, Ajax, and Google Maps Peter Laird Managing Architect WebLogic Portal BEA Systems Peter Laird. | 1

  2. About the Speaker • Has 10 years of server side Java development experience • Leads the architecture team for BEA WebLogic Portal, a leading Java enterprise portal product • Has worked on WebLogic Portal for 7 years as a developer and architect • Holds the following certifications • Oracle DBA • Cisco CCNA • Regular contributor to BEA’s developer website • http://dev2dev.bea.com BEA Confidential

  3. Agenda • What is a Mashup? • The Mashup Toolbox • The Simple Google Maps Mashup • Invoking the REST Data Service from JavaScript • Plotting Addresses with Google Maps BEA Confidential

  4. Housekeeping • This is a 30 Minute Presentation • A lot to cover, will move very fast • Will assume you have a basic understanding of: • HTML • XML • Role of browsers and web servers • HTTP request/response model • A modern programming language, like Java, JavaScript, PHP, C# • No network connectivity in this building • Google Maps necessarily requires internet access for live demos • Will show movies of demos instead BEA Confidential

  5. What is a Mashup? BEA Confidential

  6. What is a Mashup? • Difficult to define adequately • One of those “I know it when I see it” types of things • Try this definition to start: “Websites or applications that combine content from more than one source into an integrated experience have become a popular way to rapidly assemble new applications. These applications can be called Mashups.” • Note that an Email client, for example, satisfies this definition, but is definitely not what we mean • Better to look at an example BEA Confidential

  7. Mashup Example • What we will build: BEA Confidential

  8. Key Characteristics for Web Mashups • Components can be implemented in a variety of technology stacks: Java, .NET, Ruby on Rails, PHP, static HTML, etc. • Rich user interaction and inter-application communication allow components to create dynamic interfaces • Components are integrated using lightweight approaches • JavaScript • REST services • iFrames • HTML Script includes • End-user ideally has some control over defining and customizing the composite application BEA Confidential

  9. Mashup Toolbox BEA Confidential

  10. Mashup Toolbox • Programming Technologies • JavaScript • AJAX and XmlHttpRequest • JSON • Service Technologies • REST APIs • Google Maps BEA Confidential

  11. JavaScript • Full programming language with wide support • Two major features we care about today • DOM Manipulation • Browsers expose the rendered page as a tree of nodes (DOM) • JavaScript is a powerful means to dynamically update the DOM // find the <div> tag with id 'greet_div' var div = document.getElementById('greet_div'); div.innerHTML = 'Hello ' + name; • Event Handlers • A JavaScript function can be attached to DOM elements • Example: onclick event for a button • Function is executed when the event is triggered <a onclick="javascript:myEventHandler(); return true" href="myURL.html">My Link</a> BEA Confidential

  12. Ajax and XmlHttpRequest • Ajax – Asynchronous JavaScript and XML • Allows pieces of browser pages to update without a full page refresh • Implemented in JavaScript using to the XmlHttpRequest to create an out-of-band request back to the server • XML may be returned, but alternatives are popular (more on this later) • Ajax frameworks have sprung up to build higher level abstractions • XMLHttpRequest infrastructure • Widget libraries • JavaScript libraries • Popular Ajax frameworks • DOJO • DWR • GWT BEA Confidential

  13. Ajax and XmlHttpRequest Sample // create a request object var xhr = new XMLHttpRequest(); // define the request properties xhr.open("GET", "http://myURL/getJSON.jsp", true); xhr.onreadystatechange = myHandler; // define the callback handler xhr.send(null); // send the request function myHandler() // callback definition { if (xhr.readyState == 4) // response has been received { if (xhr.status != 404) { var data=eval(‘(’ + xhr.responseText + ‘)’); // invoke JS to manipulate the response } } } BEA Confidential

  14. XmlHttpRequest and the Single Origin Policy • A safety feature is present in all browser implementations • To protect users from malicious code writers • Same Origin Policy prevents an XMLHttpRequest from targeting a server in any network domain other than the network domain that provided the page • Outer page: http://www.bea.com/ajaxPage.html • Inner XmlHttpRequest: http://www.evil.com/stealCookies.html • The request would be blocked because it does not target bea.com • This is an issue when implementing Mashups on the client • Two resource types are immune to this policy • A page can load cross domain images and scripts. • By being clever with appending parameters to these resource requests, some implementations have worked around the limitation. BEA Confidential

  15. JavaScript Object Notation (JSON) • A text based serialized object format that is expressed in the JavaScript language • An alternative to XML • When working in JavaScript in a browser, a far more useful format • The returned JSON payload may be deserialized into an object with a single call • XML needs to be parsed or traversed BEA Confidential

  16. REST APIs • An approach to providing data services in an easily consumable form – as an alternative to approaches such as SOAP • REST services are often invoked from JavaScript in a browser • REST services are implemented using the basics of the web • Service end points are resources http://host/api/content/myfolder • HTTP requests, with the verb being important (GET, POST, PUT) • Services are stateless • GETs are idempotent • Return payload is usually JSON or XML BEA Confidential

  17. A REST Example • REST call to YouTube API http://www.youtube.com/api2_rest?method=youtube.users.get_profile&dev_id=YOUR_DEV_ID&user=YOUTUBE_USER_NAME • Google, Amazon, Flickr, del.icio.us, etc also offer REST APIs • The response: <?xml version="1.0" encoding="utf-8"?><ut_response status="ok"> <user_profile> <first_name>YouTube</first_name> <last_name>User</last_name> <about_me>I love OK GO</about_me> <age>30</age> <video_upload_count>7</video_upload_count> .... and more .... </user_profile> </ut_response> Source: YouTube BEA Confidential

  18. Google Maps • Google provides a JavaScript library that interacts with its mapping service • Allows mashup developers to easily plot addresses on a map • Service is metered • Each developer needs to obtain an API key • Limited to 50,000 requests per day • Single Origin Policy is not an issue • Google Maps API uses a Script Include instead of an XmlHttpRequest BEA Confidential

  19. The Simple Google Maps Mashup BEA Confidential

  20. How the Mashup Works • Initial HTML page will render without any data • User clicks a button to load the addresses • JavaScript event handler fires • XmlHttpRequest is sent to a URL to retrieve a list of addresses • Response contains a JSON payload of addresses • Callback processes the list of addresses and injects into the HTML page • User clicks on one of the addresses • JavaScript event handler fires • Google Maps JavaScript API is called from the handler • Google Map is updated to depict the location BEA Confidential

  21. Mashup Example • What we will build: BEA Confidential

  22. Invoking the REST Location Service from JavaScript BEA Confidential

  23. How the Mashup Works • Initial HTML page will render without any data • User clicks a button to load the addresses • JavaScript event handler fires • XmlHttpRequest is sent to a URL to retrieve a list of addresses • Response contains a JSON payload of addresses • Callback processes the list of addresses and injects into the HTML page • User clicks on one of the addresses • JavaScript event handler fires • Google Maps JavaScript API is called from the handler • Google Map is updated to depict the location BEA Confidential

  24. Triggering the Event Handler • Button is defined in HTML like this: <form id="getLocationsForm"> <input value="Get the Locations" type="submit" onclick="javascript:getLocationsAndMap();return false" /> </form> BEA Confidential

  25. The Address List Event Handler • The event handler looks like this: var receiveReq = getXmlHttpRequestObject(); function getLocationsAndMap() { // getD2DSites.html is a REST service that returns the list of locations as JSON receiveReq.open("GET", 'getD2DSites.html', true); receiveReq.onreadystatechange = getLocationsAndMapCallback; receiveReq.send(null); } BEA Confidential

  26. JSON Address REST Service • The address service returns this in the response (only show one address here for brevity): {"locations": {"location":[ {"id": "WashingtonDC", "city": "Washington DC", "location": "Hilton Hotel, McLean Tysons Corner", "address": "7920 Jones Branch Drive, McLean, VA 22102", "date": "May 2nd, 2007" } ]} } BEA Confidential

  27. The Address List Callback function getLocationsAndMapCallback() { if (receiveReq.readyState == 4) { // deserialize the JSON response. This creates an array of location objects. var response = eval("(" + receiveReq.responseText + ")"); // generate HTML listing the locations and update the page DOM var locations_div = document.getElementById('locations_div'); for(i=0; i < response.locations.location.length; i++) { // removed for brevity, computing the URL for each address locations_div.innerHTML += '<p>'+ city + ' ' + link + '</a><br/>' + addr + '</p>'; } }} BEA Confidential

  28. Plotting Addresses with Google Maps BEA Confidential

  29. How the Mashup Works • Initial HTML page will render without any data • User clicks a button to load the addresses • JavaScript event handler fires • XmlHttpRequest is sent to a URL to retrieve a list of addresses • Response contains a JSON payload of addresses • Callback processes the list of addresses and injects into the HTML page • User clicks on one of the addresses • JavaScript event handler fires • Google Maps JavaScript API is called from the handler • Google Map is updated to depict the location BEA Confidential

  30. Event Handler Invokes Google Maps API • The address service returns this in the response (only show one address here for brevity): function showAddress(address) { var map = new GMap2(document.getElementById("google_map_div")); var geocoder = new GClientGeocoder(); geocoder.getLatLng(address, function(point) { if (!point) { alert(address + " not found"); } else { map.setCenter(point, 13); var marker = new GMarker(point); map.addOverlay(marker); marker.openInfoWindowHtml(address); } } ); } BEA Confidential

  31. Done! BEA Confidential

More Related