Assignment #4 XML Parser
Upcoming SlideShare
Loading in...5

Like this? Share it with your network

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads


Total Views
On Slideshare
From Embeds
Number of Embeds



Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

    No notes for slide


  • 1. Homework: Flickr & Facebook mashup – an Ajax/JSON/Java Exercise 1. Objectives  Become familiar with the Ajax, REST, JSON & XML technologies;  Use a combination of HTML, CSS, DOM, XMLHttpRequest, XML and Java Servlets;  Provide an interface to search and display public Flickr images and post them to Facebook. 2. Background 2.1 AJAX & JSON Ajax (Asynchronous JavaScript + XML) incorporates several technologies:  Standards-based presentation using XHTML and CSS;  Dynamic display and interaction using the Document Object Model (DOM);  Data interchange and manipulation using XML and XSLT;  Asynchronous data retrieval using XMLHttpRequest;  JavaScript binding everything together. See the class slides at JSON, short for JavaScript Object Notation, is a lightweight data interchange format. Its main application is in Ajax web application programming, where it serves as an alternative to the use of the XML format for data exchange between client and server. See the class slides at 2.2 Google Maps Google Maps (a.k.a. Google Local) is a technology from Google that provides access to street maps, satellite maps and a combination of the two (called “hybrid” maps). The Google Maps API is a technology that lets developers embed Google Maps in their own web pages with JavaScript. The Google Maps API also includes functionality to “reverse-geocode” a location, i.e. converting an address to its corresponding world coordinates in latitude and longitude. For this exercise, this is the only functionality of Google Maps that you will be using. The Google Maps Geocoding Service is documented at: An alternative to using the Google Geocoding service is provided in Section 9. Addendum 1
  • 2. 2.3. Flickr Flickr is an online service where users can upload their photos and share them with friends and the public. The Flickr homepage is available at: Flickr provides a set of APIs to its service called “Flickr Services”. The Flickr Services API homepage is available at: Flickr Services provides several Request and Response formats. You will use the REST format for requests and the JSON or XML format for responses. 2.4 Facebook Facebook is a global social networking website that is operated and privately owned by Facebook, Inc. Users can add friends and send them messages, and update their personal profiles to notify friends about themselves and what they are doing. Users can additionally post news feeds to their profiles, and these feeds may include images, besides text messages. The facebook homepage is available at: Facebook provides developers with an application-programming interface, called the Facebook Platform. A component of this platform is Facebook Connect, a powerful set of APIs for developers that allows them to authorizes users, and send communications to Facebook, among many more things. The Facebook Connect homepage is available at: 3. Description of the Exercise In this exercise, you will write a web application that does the following sequence of actions: a) allows a user to enter a “location”, as City, State; b) retrieves the coordinates of such location using the Google Maps Geocoding Service; c) uses the coordinates to retrieve up to 20 public images from Flickr, using the Flickr Services API; 2
  • 3. d) displays the images thumbnails in the UI, e) allows the user to select one image, and display a larger version of the selected image; f) authorizes (log in) the user to Facebook; g) posts the image and a message (The default message will be “XXXX likes this image from Flickr!”) to a user’s Facebook feed using the Facebook Connect API. The default message will be editable by users so that they can change it, if they wish to do so, to one of their preference. A snapshot of the user interface of the web application is shown in Figure 1. Figure 1. User Interface To implement this exercise you are required to write a combination of HTML, JavaScript and Java Servlet programs. The top-level interface consists of four areas:  A Form area including an edit box to enter a location and a “Search” button;  A dynamic area that displays the image thumbnails corresponding to “public” images at the given location;  A dynamic area to show a larger version of a selected image;  An “UPLOAD” button that posts the selected image and the text “likes this photo from Flickr!” to a user’s feed page. Once “City, State” has been entered in the edit box and the “Search” button is pressed, the form calls a JavaScript function. This function first performs basic validation of the input. If the input is not of the required form (“City, State”), the request is not forwarded to the Java Servlet. Instead an alert with an error message is presented to the user, asking 3
  • 4. to refine the search. Once the validation is successful, the JavaScript function executes an XMLHttpRequest to start an asynchronous transaction with a Java Servlet running under Tomcat, and passing the “City, State” as a parameter of the transaction. The Java Servlet in turn performs the following four steps: First it does a reverse geo-coding REST query to the Google Maps service, to retrieve the JSON data corresponding to the query. For example, the REST query for “Manhattan Beach, CA”:,+CA&output=json&oe=ut f8&sensor=false&gl=us returns the following JSON: { "name": "Manhattan Beach, CA", "Status": { "code": 200, "request": "geocode" }, "Placemark": [ { "id": "p1", "address": "Manhattan Beach, CA, USA", "AddressDetails": {"Country": {"CountryNameCode": "US","CountryName": "USA","AdministrativeArea": {"AdministrativeAreaName": "CA","Locality": {"LocalityName": "Manhattan Beach"}}},"Accuracy": 4}, "ExtendedData": { "LatLonBox": { "north": 33.9061480, "south": 33.8613840, "east": -118.3786390, "west": -118.4758020 } }, "Point": { "coordinates": [ -118.3960520, 33.8874090, 0 ] } } ] } Second, the Java Servlet extracts the decimal coordinate values as [longitude, latitude] and then uses them to call the Flickr Services API search photos method,, to retrieve a list of all the public photos, geo-tagged within a “10 km” radius from the selected “City, State”. For example, the following REST query with the coordinates of “Manhattan Beach, CA”: y=f2cc26448280a762143ba4a865795ab4&lat=33.8874090&lon=- 118.3960520&radius=10&radius_units=km&min_upload_date=1199145600 4
  • 5. returns the following XML: <?xml version="1.0" encoding="utf-8" ?> <rsp stat="ok"> <photos page="1" pages="1" perpage="250" total="3"> <photo id="2890708805" owner="29779661@N02" secret="9f25fd6158" server="3162" farm="4" title="Purple Reigns took a picture!" ispublic="1" isfriend="0" isfamily="0" /> <photo id="2858382553" owner="9858951@N03" secret="d9df63bd36" server="3078" farm="4" title="Evidence of Former Payphone Location, DSC00177" ispublic="1" isfriend="0" isfamily="0" /> <photo id="2485315502" owner="23784666@N06" secret="894aa9f87d" server="2088" farm="3" title="Parking Duck" ispublic="1" isfriend="0" isfamily="0" /> </photos> </rsp> The syntax of the API is documented at: Notice that the min_upload_date parameter should indicate the day before the current date, in UNIX date format. A JavaScript function that can be used to calculate this value is available at: Third, the Java Servlet then extracts from this file only the first 20 items. Lastly, the Java Servlet then produces a JSON file that is returned asynchronously to the original XMLHttpRequest. The format of the JSON file that needs to be generated is as follows: { "photos":{ "photo":[ {"id":"2890708805","secret":"9f25fd6158","server":"3162", "farm":4, "title":"Purple Reigns took a picture!" }, {"id":"2858382553","secret":"d9df63bd36", "server":"3078", "farm":4, "title":"Evidence of Former Payphone Location, DSC00177" }, {"id":"2485315502","secret":"894aa9f87d", "server":"2088", "farm":3, "title":"Parking Duck" }]} } 5
  • 6. After obtaining the query results from the callback of XMLHttpRequest, the JavaScript program displays the picture thumbnails in the “dynamic” area of the web page. The thumbnail and original photos can be retrieved using “Photo Source URLs”, defined at: using one of the following two formats: http://farm{farm-id}{server-id}/{id}_{secret}.jpg http://farm{farm-id}{server- id}/{id}_{secret}_[mstb].jpg For example the “thumbnail” for the first picture above is retrieved with this URL: Next the user is allowed to “select” one of the images thumbnails, and once this is done, a larger version of the image is shown above the list of thumbnails (see Figure 1) and the “select a photo and click here to upload to Facebook-” button becomes enabled. When the button is pressed, the web application does the following: a) authorizes the user to facebook (i.e. logs him/her in) using the application and user credentials if the user is not already logged in to Facebook; b) posts the image and the text “likes this image from Flickr!” to the user’s News Feed . The above two steps are performed using the Facebook Connect API, using the JavaScript Client Library, documented at: 4. Implementation Hints 1. Step 1: Writing your JavaScript Program – set up Google Ajax transaction The JavaScript invoked by the Search button click event should do all of the following: a. Assign the “callback” function; b. Assemble the url parameter of the GET as a reference to the Java Servlet to be invoked: BASE_URL + "/servlet/ajax_flickr" c. Call the XMLHttpRequest method (see Ajax Slide 31) and create the request object. 6
  • 7. d. Prepare the GET XMLHttpRequest using the setRequestHeader method:"GET", url, true); req.onreadystatechange = myCallback; req.setRequestHeader("Connection", "Close"); req.setRequestHeader("Method", "GET" + url + "HTTP/1.1"); 2. Step 2: Writing your JavaScript Program – Execute Ajax Transaction The JavaScript should finally invoke the XMLHttpRequest send method (see Ajax slide 31). The “callback” function should check for completion of the transaction (request readyState equal to 4 and status equal to 200 (see AJAX slide 34 and JSON slide 5); use eval() and the responseText method to retrieve the resulting JSON data (see JSON slide 5), and displaying the retuned thumbnail images to the “dynamic” area. 3. Step 3: Use the Java Servlet to respond to XMLHttpRequest and retrieve the Flickr photo listings The Java Servlet referred above as /servlet/ajax_flickr (see 1.c above) should be invoked using doGet(). The Java Servlet should do all of the following: a. Initiating a connection with the Flickr Service to retrieve the photo listings using the API. 4. Step 4: Use the Java Servlet to retrieve the XML file content You may have to use an XML parser (JAXP, for example). If you are hand coding using JAXP, the steps to retrieve the XML file content may be as follows: Step a: Get the XML content based on the URL above in Step 3.a.  You need to open a URL connection to get the file you want. To create a URL connection: URL url = new URL(urlString); URLConnection urlConnection = url.openConnection(); urlConnection.setAllowUserInteraction(false); InputStream urlStream = url.openStream(); //read content 7
  • 8. Step b: Parse the XML file using an XML parser  Any XML parser can be used to parse the XML file. You can use methods like getNodeName() to access these elements. A good choice might be the JDOM library, which you get from: 5. Step 5: Use the Java Servlet to process the XML data As you parse the data, you will build an output string, converting the XML data into JSON format, as described in section 3. Finally you will return the JSON as a single string to the calling JavaScript program. To easily create a JSON string, you might find useful the JSON-RPC library available at: 1.0.jar The Java Servlet should handle exceptions such as MalformedURLException and IOException. The Java Servlet should also handle error responses sent from Google and Flicker and reply with an appropriate error, a JSON message to the initial JavaScript XMLHttpRequest. This way, the JavaScript callback function will be able to inform the user that an error has occurred. 6. Step 6: Writing your JavaScript Program – Select an Image Once the images thumbnails are displayed in the dynamic area, the JavaScript should allow the user to “select” an image. The appropriate “visual cue” to be given to the user that indicates which image has been selected should be the display of the LARGE image above the thumbnails. As indicated in Figure 1, the “visual cue” must be displayed above the corresponding thumbnail. 7. Step 7: Writing your JavaScript Program – Authorize Facebook User Once the image is selected, the “select a photo and click here to upload to Facebook” button becomes active, and when pressed it invokes the Facebook Connect API and authorizes the user. The recommended API to use is FB.ensureInit, which is documented at: You will also need to understand how to use the JavaScript Client library. The library is documented at: 8
  • 9. 8. Step 8: Writing your JavaScript Program – Post Image to Facebook News Feed Once the user is authorized, and an appropriate session token has been obtained, the link to the selected image is posted to the user’s news feed page. The posting of the image link is done using the JavaScript Client Library provided by Facebook. The documentation of the JavaScript SDK is available at: The recommended API to use is FB.Connect.streamPublish. Its use is documented at: ur_Website_or_Application A detailed explanation is also given at: For the FB.Connect.streamPublish method to be able to successfully post the selected image to the user’s news feed, you will need to use an image attachment. To understand how attachments work you can read this page: Essentially, in this case an attachment will be of the following form: var attachment = {'media': [{'type':'image', 'src':selected Flickr image source, 'href':''}]}; Finally, to better understand how Feeds work you can read this page: You must be very careful when using Facebook API, otherwise your application will not work and you will be unable to understand the reason. A very good resource that will help you understand how to correctly setup your Facebook application and use the API is accessible at: o_your_... 9
  • 10. 5. Prerequisites This homework requires the use of the following components: 1. A servlet-based web server, Tomcat 4.1.27. Instructions on how to load Tomcat 4.1.27 can be found here: http://www- A tar version of Tomcat 4.1.27 can be found here: tomcat-4.1.27.tar. 2. The Java Servlet library, which has functionality similar to Perl’s LWP library, to perform HTTP transactions using methods such as doGet() or doPost() from Java. 3. A Java XML parser library. You may use the JDOM 1.0, an object model that uses XML parsers to build documents, available in the Download section of the class website. Additional information on JDOM is available at You may also use JAXP, the Java API for XML Parsing, version 1.1, included in the Java JDK 1.4 (import javax.xml.parsers.*) and documented at: A good tutorial on JAXP is available at jaxp1.html. 4. You need to create a Facebook Platform application as documented at: Submitting_Your_Application_to_the_Facebook_Application_Directory . To do that you will need to Add the Facebook Developer application: go to, and click Add Developer. Once you've added the Facebook Developer application to your account, you can begin creating your application for Facebook. See the sections “Creating Your Facebook Application” and “Configuring Basic Settings”. You should be getting an API Key and Application Secret (see figure below) that you will have to use with the JavaScript Client Library for Facebook Connect. 10
  • 11. 5. You need to obtain a Flickr Service API key. You can sign up for your private Flickr API Key at You should perform steps “1. Obtain an API Key”, and “2. Configure your Key”. You may also have to create a Yahoo ID account, if you have not already done so. You should “Apply for a Non-Commercial key”, and enter your name, e-mail address, a brief description of your project in Step 2. Acknowledge both box 4 and 5 and click Submit Application, as shown in Figure 3 below. 11
  • 12. Figure 3. Flickr Key Application Form You will then be returned a Key and Secret, as shown in Figure 4. You will only need the Key for invoking the needed Flickr Service APIs. Make sure that you save the key. Figure 4. Non-Commercial API Key and Secret 12
  • 13. 6. Deployment Structure To write your own Java Servlets program using Tomcat 4.1.27, you need to: 1. Successfully install Tomcat 4.1.27 on your machine. 2. Go to $CATALINA_HOME/webapps/examples directory. 3. Place the HTML, CSS and JavaScript (.js) files in the Tomcat servlets subdirectory. 4. Place your Java Servlets file (.java) in the /WEB_INF/classes folder. So the path of your Servlets file is http://server_name:port/examples/servlet/your_servlet_name 5. Add appropriate sections to the WEB-INF/web.xml file, as in: <servlet> <servlet-name>ajax_flickr</servlet-name> <display-name>AJAX Flickr</display-name> <servlet-class>AJAXFlickr</servlet-class> </servlet> <servlet-mapping> <servlet-name>ajax_flickr</servlet-name> <url-pattern>/servlet/ajax_flickr</url-pattern> </servlet-mapping> 6. To avoid UTFDataFormatException during file IO operation, you have to use JDK 1.3 or later for Tomcat. In the .cshrc file under your home directory, add the entries: setenv JAVA_HOME /usr/j2se setenv PATH /usr/j2se/bin:${PATH} 7. Before you issue a request to your Java Servlet file, you need to compile it. You might need a Java Servlet class to compile your code, so open the .cshrc file, and add the full path to the Tomcat file that implements the Servlet class APIs located in “../jakarta-tomcat-4.1.27/common/lib/servlet.jar” to your CLASSPATH variable, and use the variable with the –classpath switch of the javac compiler. 8. Then run “source .cshrc” and you are ready to compile your Java files. 7. Material You Need to Submit On your course homework page, your link for this homework should go to a page that includes your JavaScript/HTML program (a page similar to the one depicted in the picture in section 3). You should submit all source code files including HTML (.html), Cascading Style Sheets (.CSS), JavaScript (.js), Java Servlets (.java) and a README file electronically to the csci571 account so that it can be graded and compared to all other students' code via the MOSS code comparison tool. 13
  • 14. 8. Partial Credit If you complete Step 1 though 6 as listed in Section 3, you will obtain 5 points. If you also complete Steps 7 and 8 (authorizing a user to Facebook and posting the image and text to the user’s Facebook news feed), you will obtain the full 10 points for the exercise. 9. Addendum For those students who may feel uncomfortable using the Google Geocoding Service, there is an alternative mechanism for finding the latitude and longitude of any US address. The alternative mechanism is available at: According to its Terms and Conditions, located at "Free data services are provided from sources in the public domain, or under licenses that do not prohibit their open redistribution by us, e.g. Creative Commons licenses. These services are licensed for use by the general public for non-commercial uses only." Since this assignment is strictly tutorial in nature and has no commercial element, we believe that the use of the site is legally permitted. A description of the service can be found at: As several ways are offered of accessing this service, we recommend that you use their REST service which returns the result as an XML file. Here is an example. By issuing the following GET request:,+Manhattan+Beach+CA the service returns the following XML response: <?xml version="1.0"?> <rdf:RDF xmlns:dc="" xmlns:geo="" xmlns:rdf=""> <geo:Point rdf:nodeID="aid95727847"> <dc:description>601 N Crest Dr, Manhattan Beach CA 90266</dc:description> <geo:long>-118.407308</geo:long> <geo:lat>33.881214</geo:lat> </geo:Point> </rdf:RDF> Please note that if you use this mechanism, the original input must be a complete address, i.e. including a street number, street name, city and state. Please adjust your initial page to reflect the change, so the graders know what to enter during testing. Also, indicate clearly in your ReadMe file which of the two mechanisms you chose to use (Google Geocoding Service or the alternative service). 14