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

BEA Confidential 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 

BEA Confidential 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 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 What is a Mashup?

BEA Confidential 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 client, for example, satisfies this definition, but is definitely not what we mean Better to look at an example

BEA Confidential Mashup Example What we will build:

BEA Confidential 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 Mashup Toolbox

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

BEA Confidential 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 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 My Link

BEA Confidential 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 Ajax and XmlHttpRequest Sample // create a request object var xhr = new XMLHttpRequest(); // define the request properties xhr.open("GET", " 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 XmlHttpRequest and the Single Origin Policy A safety feature is present in all browser implementations  To protect users from malicious code writers Same Origin PolicySame Origin Policy prevents an XMLHttpRequest from targeting a server in any network domain other than the network domain that provided the page  Outer page:  Inner XmlHttpRequest:  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 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 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 requests, with the verb being important (GET, POST, PUT)  Services are stateless  GETs are idempotent  Return payload is usually JSON or XML

BEA Confidential A REST Example Google, Amazon, Flickr, del.icio.us, etc also offer REST APIs REST call to YouTube API The response: YouTube User I love OK GO and more.... Source: YouTube

BEA Confidential 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 The Simple Google Maps Mashup

BEA Confidential 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 Mashup Example What we will build:

BEA Confidential Invoking the REST Location Service from JavaScript

BEA Confidential 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 Triggering the Event Handler Button is defined in HTML like this: <input value="Get the Locations" type="submit" onclick="javascript:getLocationsAndMap();return false" />

BEA Confidential 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 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 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 += ' '+ city + ' ' + link + ' ' + addr + ' '; } }}

BEA Confidential Plotting Addresses with Google Maps

BEA Confidential 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 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 Done!