Assignment #4 XML Parser

14
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 http://www-scf.usc.edu/~csci571/Slides/ajax.ppt . 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 http://www-scf.usc.edu/~csci571/Slides/JSON1.ppt . 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: http://code.google.com/apis/maps/documentation/geocoding/index.html An alternative to using the Google Geocoding service is provided in Section 9. Addendum

Transcript of Assignment #4 XML Parser

Page 1: Assignment #4 XML Parser

1

Homework Flickr amp Facebook mashup ndash an AjaxJSONJava Exercise

1 Objectives

Become familiar with the Ajax REST JSON amp 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

21 AJAX amp 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 httpwww-scfuscedu~csci571Slidesajaxppt

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 httpwww-scfuscedu~csci571SlidesJSON1ppt

22 Google Maps

Google Maps (aka Google Local) is a technology from Google that provides access to

street maps satellite maps and a combination of the two (called ldquohybridrdquo 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

ldquoreverse-geocoderdquo a location ie 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

httpcodegooglecomapismapsdocumentationgeocodingindexhtml

An alternative to using the Google Geocoding service is provided in Section 9

Addendum

2

23 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

httpwwwflickrcom

Flickr provides a set of APIs to its service called ldquoFlickr Servicesrdquo The Flickr Services

API homepage is available at

httpwwwflickrcomservicesapi

Flickr Services provides several Request and Response formats You will use the REST

format for requests and the JSON or XML format for responses

24 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

httpwwwfacebookcom

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

httpwikidevelopersfacebookcomindexphpFacebook_Connect

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 ldquolocationrdquo 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

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 ldquoXXXX likes this

image from Flickrrdquo) to a userrsquos 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 ldquoSearchrdquo button

A dynamic area that displays the image thumbnails corresponding to ldquopublicrdquo

images at the given location

A dynamic area to show a larger version of a selected image

An ldquoUPLOADrdquo button that posts the selected image and the text ldquolikes this photo

from Flickrrdquo to a userrsquos feed page

Once ldquoCity Staterdquo has been entered in the edit box and the ldquoSearchrdquo 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 (ldquoCity Staterdquo) the request is not forwarded

to the Java Servlet Instead an alert with an error message is presented to the user asking

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 ldquoCity Staterdquo 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 ldquoManhattan

Beach CArdquo

httpmapsgooglecommapsgeoq=Manhattan+Beach+CAampoutput=jsonampoe=ut

f8ampsensor=falseampgl=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

USCountryName USAAdministrativeArea

AdministrativeAreaName CALocality LocalityName Manhattan

BeachAccuracy 4

ExtendedData

LatLonBox

north 339061480

south 338613840

east -1183786390

west -1184758020

Point

coordinates [ -1183960520 338874090 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

flickrphotossearch to retrieve a list of all the public photos geo-tagged within a ldquo10

kmrdquo radius from the selected ldquoCity Staterdquo For example the following REST query with

the coordinates of ldquoManhattan Beach CArdquo

httpapiflickrcomservicesrestmethod=flickrphotossearchampapi_ke

y=f2cc26448280a762143ba4a865795ab4amplat=338874090amplon=-

1183960520ampradius=10ampradius_units=kmampmin_upload_date=1199145600

5

returns the following XML

ltxml version=10 encoding=utf-8 gt

ltrsp stat=okgt

ltphotos page=1 pages=1 perpage=250 total=3gt

ltphoto id=2890708805 owner=29779661N02 secret=9f25fd6158

server=3162 farm=4 title=Purple Reigns took a picture

ispublic=1 isfriend=0 isfamily=0 gt

ltphoto id=2858382553 owner=9858951N03 secret=d9df63bd36

server=3078 farm=4 title=Evidence of Former Payphone Location

DSC00177 ispublic=1 isfriend=0 isfamily=0 gt

ltphoto id=2485315502 owner=23784666N06 secret=894aa9f87d

server=2088 farm=3 title=Parking Duck ispublic=1 isfriend=0

isfamily=0 gt

ltphotosgt

ltrspgt

The syntax of the flickrphotossearch API is documented at

httpwwwflickrcomservicesapiflickrphotossearchhtml

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

httpwwwtutorialsyaxaycomshowthreadphpt=45778

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[

id2890708805secret9f25fd6158server3162

farm4 titlePurple Reigns took a picture

id2858382553secretd9df63bd36 server3078

farm4 titleEvidence of Former Payphone Location DSC00177

id2485315502secret894aa9f87d server2088

farm3 titleParking Duck

]

6

After obtaining the query results from the callback of XMLHttpRequest the JavaScript

program displays the picture thumbnails in the ldquodynamicrdquo area of the web page

The thumbnail and original photos can be retrieved using ldquoPhoto Source URLsrdquo defined

at

httpwwwflickrcomservicesapimiscurlshtml

using one of the following two formats

httpfarmfarm-idstaticflickrcomserver-idid_secretjpg

httpfarmfarm-idstaticflickrcomserver-

idid_secret_[mstb]jpg

For example the ldquothumbnailrdquo for the first picture above is retrieved with this URL

httpfarm4staticflickrcom31622890708805_9f25fd6158_sjpg

Next the user is allowed to ldquoselectrdquo 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

ldquoselect a photo and click here to upload to Facebook-rdquo button becomes enabled When

the button is pressed the web application does the following

a) authorizes the user to facebook (ie logs himher in) using the application and

user credentials if the user is not already logged in to Facebook

b) posts the image and the text ldquolikes this image from Flickrrdquo to the userrsquos News

Feed

The above two steps are performed using the Facebook Connect API using the

JavaScript Client Library documented at

httpwikidevelopersfacebookcomindexphpJavaScript_Client_Library

4 Implementation Hints

1 Step 1 Writing your JavaScript Program ndash set up Google Ajax transaction

The JavaScript invoked by the Search button click event should do all of the

following

a Assign the ldquocallbackrdquo function

b Assemble the url parameter of the GET as a reference to the Java

Servlet to be invoked

BASE_URL + servletajax_flickr

c Call the XMLHttpRequest method (see Ajax Slide 31) and create the

request object

7

d Prepare the GET XMLHttpRequest using the setRequestHeader

method

reqopen(GET url true)

reqonreadystatechange = myCallback reqsetRequestHeader(Connection Close)

reqsetRequestHeader(Method GET + url + HTTP11)

2 Step 2 Writing your JavaScript Program ndash Execute Ajax Transaction

The JavaScript should finally invoke the XMLHttpRequest send method (see

Ajax slide 31)

The ldquocallbackrdquo 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

ldquodynamicrdquo area

3 Step 3 Use the Java Servlet to respond to XMLHttpRequest and retrieve the

Flickr photo listings

The Java Servlet referred above as servletajax_flickr (see 1c 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 flickrphotossearch 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 3a

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 = urlopenConnection()

urlConnectionsetAllowUserInteraction(false)

InputStream urlStream = urlopenStream()

read content

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

httpwwwjdomorgdownloadsindexhtml

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

httpmirrorsibiblioorgpubmirrorsmavencommetaparadigmjarsjson-rpc-

10jar

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 ndash Select an Image

Once the images thumbnails are displayed in the dynamic area the JavaScript should

allow the user to ldquoselectrdquo an image The appropriate ldquovisual cuerdquo 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 ldquovisual cuerdquo must be displayed above

the corresponding thumbnail

7 Step 7 Writing your JavaScript Program ndash Authorize Facebook User

Once the image is selected the ldquoselect a photo and click here to upload to Facebookrdquo

button becomes active and when pressed it invokes the Facebook Connect API and

authorizes the user The recommended API to use is FBensureInit which is documented

at

httpwikidevelopersfacebookcomindexphpJS_API_M_FBBootstrapEnsureInit

You will also need to understand how to use the JavaScript Client library The library is

documented at

9

httpwikidevelopersfacebookcomindexphpJavaScript_Client_Library

8 Step 8 Writing your JavaScript Program ndash 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 userrsquos 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

httpdevelopersfacebookcomdocsu=facebookjslib

The recommended API to use is FBConnectstreamPublish Its use is documented at

httpwikidevelopersfacebookcomindexphpImplementing_Feed_Publishing_from_yo

ur_Website_or_Application

A detailed explanation is also given at

httpwikidevelopersfacebookcomindexphpFBConnectstreamPublish

For the FBConnectstreamPublish method to be able to successfully post the selected

image to the userrsquos news feed you will need to use an image attachment To understand

how attachments work you can read this page

httpwikidevelopersfacebookcomindexphpAttachment_28Streams29

Essentially in this case an attachment will be of the following form

var attachment = media [typeimage

srcselected Flickr image source

hrefhttpwwwflickrcom]

Finally to better understand how Feeds work you can read this page

httpwikidevelopersfacebookcomindexphpFeed

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

httpwwwpaktcompaktid=ce00f49ed79e17aaampt=How_to_add_Facebook_Connect_t

o_your_

10

5 Prerequisites

This homework requires the use of the following components

1 A servlet-based web server Tomcat 4127 Instructions on how to load Tomcat

4127 can be found here httpwww-

scfuscedu~csci5712006Springtomcatinstallhtml A tar version of Tomcat

4127 can be found here httpwww-scfuscedu~csci571downloadjakarta-

tomcat-4127tar

2 The Java Servlet library which has functionality similar to Perlrsquos 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 10 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

httpwwwjdomorg You may also use JAXP the Java API for XML Parsing

version 11 included in the Java JDK 14 (import javaxxmlparsers) and

documented at httpjavasuncomxmljaxpdist11docsapi A good tutorial on

JAXP is available at httpwww-106ibmcomdeveloperworksxmllibraryx-

jaxp1html

4 You need to create a Facebook Platform application as documented at

httpwikidevelopersfacebookcomindexphpCreating_your_first_application

Submitting_Your_Application_to_the_Facebook_Application_Directory To do

that you will need to Add the Facebook Developer application go to

httpwwwfacebookcomdevelopers and click Add Developer Once youve

added the Facebook Developer application to your account you can begin

creating your application for Facebook See the sections ldquoCreating Your

Facebook Applicationrdquo and ldquoConfiguring Basic Settingsrdquo 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

11

5 You need to obtain a Flickr Service API key You can sign up for your private

Flickr API Key at httpwwwflickrcomservicesapiauthhowtowebhtml You

should perform steps ldquo1 Obtain an API Keyrdquo and ldquo2 Configure your Keyrdquo You

may also have to create a Yahoo ID account if you have not already done so You

should ldquoApply for a Non-Commercial keyrdquo 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

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

13

6 Deployment Structure

To write your own Java Servlets program using Tomcat 4127 you need to

1 Successfully install Tomcat 4127 on your machine

2 Go to $CATALINA_HOMEwebappsexamples 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_INFclasses folder So the

path of your Servlets file is httpserver_nameportexamplesservletyour_servlet_name

5 Add appropriate sections to the WEB-INFwebxml file as in

ltservletgt

ltservlet-namegtajax_flickrltservlet-namegt

ltdisplay-namegtAJAX Flickrltdisplay-namegt

ltservlet-classgtAJAXFlickrltservlet-classgt

ltservletgt

ltservlet-mappinggt

ltservlet-namegtajax_flickrltservlet-namegt

lturl-patterngtservletajax_flickrlturl-patterngt

ltservlet-mappinggt

6 To avoid UTFDataFormatException during file IO operation you have to use

JDK 13 or later for Tomcat In the cshrc file under your home directory add

the entries

setenv JAVA_HOME usrj2se

setenv PATH usrj2sebin$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 ldquojakarta-tomcat-4127commonlibservletjarrdquo to your

CLASSPATH variable and use the variable with the ndashclasspath switch of the

javac compiler

8 Then run ldquosource cshrcrdquo 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 JavaScriptHTML 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

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 userrsquos 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 httpgeocoderus

According to its Terms and Conditions located at httpgeocoderustermsshtml

Free data services are provided from sources in the public domain or under licenses that

do not prohibit their open redistribution by us eg 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 httpgeocoderushelp

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

httpgeocoderusservicerestaddress=601+Crest+Drive+Manhattan+Beach+CA

the service returns the following XML response

ltxml version=10gt

ltrdfRDF xmlnsdc=httppurlorgdcelements11

xmlnsgeo=httpwwww3org200301geowgs84_pos

xmlnsrdf=httpwwww3org19990222-rdf-syntax-nsgt

ltgeoPoint rdfnodeID=aid95727847gt

ltdcdescriptiongt601 N Crest Dr Manhattan Beach CA

90266ltdcdescriptiongt

ltgeolonggt-118407308ltgeolonggt

ltgeolatgt33881214ltgeolatgt

ltgeoPointgt

ltrdfRDFgt

Please note that if you use this mechanism the original input must be a complete address

ie 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)

Page 2: Assignment #4 XML Parser

2

23 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

httpwwwflickrcom

Flickr provides a set of APIs to its service called ldquoFlickr Servicesrdquo The Flickr Services

API homepage is available at

httpwwwflickrcomservicesapi

Flickr Services provides several Request and Response formats You will use the REST

format for requests and the JSON or XML format for responses

24 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

httpwwwfacebookcom

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

httpwikidevelopersfacebookcomindexphpFacebook_Connect

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 ldquolocationrdquo 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

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 ldquoXXXX likes this

image from Flickrrdquo) to a userrsquos 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 ldquoSearchrdquo button

A dynamic area that displays the image thumbnails corresponding to ldquopublicrdquo

images at the given location

A dynamic area to show a larger version of a selected image

An ldquoUPLOADrdquo button that posts the selected image and the text ldquolikes this photo

from Flickrrdquo to a userrsquos feed page

Once ldquoCity Staterdquo has been entered in the edit box and the ldquoSearchrdquo 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 (ldquoCity Staterdquo) the request is not forwarded

to the Java Servlet Instead an alert with an error message is presented to the user asking

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 ldquoCity Staterdquo 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 ldquoManhattan

Beach CArdquo

httpmapsgooglecommapsgeoq=Manhattan+Beach+CAampoutput=jsonampoe=ut

f8ampsensor=falseampgl=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

USCountryName USAAdministrativeArea

AdministrativeAreaName CALocality LocalityName Manhattan

BeachAccuracy 4

ExtendedData

LatLonBox

north 339061480

south 338613840

east -1183786390

west -1184758020

Point

coordinates [ -1183960520 338874090 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

flickrphotossearch to retrieve a list of all the public photos geo-tagged within a ldquo10

kmrdquo radius from the selected ldquoCity Staterdquo For example the following REST query with

the coordinates of ldquoManhattan Beach CArdquo

httpapiflickrcomservicesrestmethod=flickrphotossearchampapi_ke

y=f2cc26448280a762143ba4a865795ab4amplat=338874090amplon=-

1183960520ampradius=10ampradius_units=kmampmin_upload_date=1199145600

5

returns the following XML

ltxml version=10 encoding=utf-8 gt

ltrsp stat=okgt

ltphotos page=1 pages=1 perpage=250 total=3gt

ltphoto id=2890708805 owner=29779661N02 secret=9f25fd6158

server=3162 farm=4 title=Purple Reigns took a picture

ispublic=1 isfriend=0 isfamily=0 gt

ltphoto id=2858382553 owner=9858951N03 secret=d9df63bd36

server=3078 farm=4 title=Evidence of Former Payphone Location

DSC00177 ispublic=1 isfriend=0 isfamily=0 gt

ltphoto id=2485315502 owner=23784666N06 secret=894aa9f87d

server=2088 farm=3 title=Parking Duck ispublic=1 isfriend=0

isfamily=0 gt

ltphotosgt

ltrspgt

The syntax of the flickrphotossearch API is documented at

httpwwwflickrcomservicesapiflickrphotossearchhtml

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

httpwwwtutorialsyaxaycomshowthreadphpt=45778

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[

id2890708805secret9f25fd6158server3162

farm4 titlePurple Reigns took a picture

id2858382553secretd9df63bd36 server3078

farm4 titleEvidence of Former Payphone Location DSC00177

id2485315502secret894aa9f87d server2088

farm3 titleParking Duck

]

6

After obtaining the query results from the callback of XMLHttpRequest the JavaScript

program displays the picture thumbnails in the ldquodynamicrdquo area of the web page

The thumbnail and original photos can be retrieved using ldquoPhoto Source URLsrdquo defined

at

httpwwwflickrcomservicesapimiscurlshtml

using one of the following two formats

httpfarmfarm-idstaticflickrcomserver-idid_secretjpg

httpfarmfarm-idstaticflickrcomserver-

idid_secret_[mstb]jpg

For example the ldquothumbnailrdquo for the first picture above is retrieved with this URL

httpfarm4staticflickrcom31622890708805_9f25fd6158_sjpg

Next the user is allowed to ldquoselectrdquo 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

ldquoselect a photo and click here to upload to Facebook-rdquo button becomes enabled When

the button is pressed the web application does the following

a) authorizes the user to facebook (ie logs himher in) using the application and

user credentials if the user is not already logged in to Facebook

b) posts the image and the text ldquolikes this image from Flickrrdquo to the userrsquos News

Feed

The above two steps are performed using the Facebook Connect API using the

JavaScript Client Library documented at

httpwikidevelopersfacebookcomindexphpJavaScript_Client_Library

4 Implementation Hints

1 Step 1 Writing your JavaScript Program ndash set up Google Ajax transaction

The JavaScript invoked by the Search button click event should do all of the

following

a Assign the ldquocallbackrdquo function

b Assemble the url parameter of the GET as a reference to the Java

Servlet to be invoked

BASE_URL + servletajax_flickr

c Call the XMLHttpRequest method (see Ajax Slide 31) and create the

request object

7

d Prepare the GET XMLHttpRequest using the setRequestHeader

method

reqopen(GET url true)

reqonreadystatechange = myCallback reqsetRequestHeader(Connection Close)

reqsetRequestHeader(Method GET + url + HTTP11)

2 Step 2 Writing your JavaScript Program ndash Execute Ajax Transaction

The JavaScript should finally invoke the XMLHttpRequest send method (see

Ajax slide 31)

The ldquocallbackrdquo 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

ldquodynamicrdquo area

3 Step 3 Use the Java Servlet to respond to XMLHttpRequest and retrieve the

Flickr photo listings

The Java Servlet referred above as servletajax_flickr (see 1c 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 flickrphotossearch 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 3a

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 = urlopenConnection()

urlConnectionsetAllowUserInteraction(false)

InputStream urlStream = urlopenStream()

read content

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

httpwwwjdomorgdownloadsindexhtml

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

httpmirrorsibiblioorgpubmirrorsmavencommetaparadigmjarsjson-rpc-

10jar

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 ndash Select an Image

Once the images thumbnails are displayed in the dynamic area the JavaScript should

allow the user to ldquoselectrdquo an image The appropriate ldquovisual cuerdquo 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 ldquovisual cuerdquo must be displayed above

the corresponding thumbnail

7 Step 7 Writing your JavaScript Program ndash Authorize Facebook User

Once the image is selected the ldquoselect a photo and click here to upload to Facebookrdquo

button becomes active and when pressed it invokes the Facebook Connect API and

authorizes the user The recommended API to use is FBensureInit which is documented

at

httpwikidevelopersfacebookcomindexphpJS_API_M_FBBootstrapEnsureInit

You will also need to understand how to use the JavaScript Client library The library is

documented at

9

httpwikidevelopersfacebookcomindexphpJavaScript_Client_Library

8 Step 8 Writing your JavaScript Program ndash 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 userrsquos 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

httpdevelopersfacebookcomdocsu=facebookjslib

The recommended API to use is FBConnectstreamPublish Its use is documented at

httpwikidevelopersfacebookcomindexphpImplementing_Feed_Publishing_from_yo

ur_Website_or_Application

A detailed explanation is also given at

httpwikidevelopersfacebookcomindexphpFBConnectstreamPublish

For the FBConnectstreamPublish method to be able to successfully post the selected

image to the userrsquos news feed you will need to use an image attachment To understand

how attachments work you can read this page

httpwikidevelopersfacebookcomindexphpAttachment_28Streams29

Essentially in this case an attachment will be of the following form

var attachment = media [typeimage

srcselected Flickr image source

hrefhttpwwwflickrcom]

Finally to better understand how Feeds work you can read this page

httpwikidevelopersfacebookcomindexphpFeed

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

httpwwwpaktcompaktid=ce00f49ed79e17aaampt=How_to_add_Facebook_Connect_t

o_your_

10

5 Prerequisites

This homework requires the use of the following components

1 A servlet-based web server Tomcat 4127 Instructions on how to load Tomcat

4127 can be found here httpwww-

scfuscedu~csci5712006Springtomcatinstallhtml A tar version of Tomcat

4127 can be found here httpwww-scfuscedu~csci571downloadjakarta-

tomcat-4127tar

2 The Java Servlet library which has functionality similar to Perlrsquos 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 10 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

httpwwwjdomorg You may also use JAXP the Java API for XML Parsing

version 11 included in the Java JDK 14 (import javaxxmlparsers) and

documented at httpjavasuncomxmljaxpdist11docsapi A good tutorial on

JAXP is available at httpwww-106ibmcomdeveloperworksxmllibraryx-

jaxp1html

4 You need to create a Facebook Platform application as documented at

httpwikidevelopersfacebookcomindexphpCreating_your_first_application

Submitting_Your_Application_to_the_Facebook_Application_Directory To do

that you will need to Add the Facebook Developer application go to

httpwwwfacebookcomdevelopers and click Add Developer Once youve

added the Facebook Developer application to your account you can begin

creating your application for Facebook See the sections ldquoCreating Your

Facebook Applicationrdquo and ldquoConfiguring Basic Settingsrdquo 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

11

5 You need to obtain a Flickr Service API key You can sign up for your private

Flickr API Key at httpwwwflickrcomservicesapiauthhowtowebhtml You

should perform steps ldquo1 Obtain an API Keyrdquo and ldquo2 Configure your Keyrdquo You

may also have to create a Yahoo ID account if you have not already done so You

should ldquoApply for a Non-Commercial keyrdquo 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

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

13

6 Deployment Structure

To write your own Java Servlets program using Tomcat 4127 you need to

1 Successfully install Tomcat 4127 on your machine

2 Go to $CATALINA_HOMEwebappsexamples 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_INFclasses folder So the

path of your Servlets file is httpserver_nameportexamplesservletyour_servlet_name

5 Add appropriate sections to the WEB-INFwebxml file as in

ltservletgt

ltservlet-namegtajax_flickrltservlet-namegt

ltdisplay-namegtAJAX Flickrltdisplay-namegt

ltservlet-classgtAJAXFlickrltservlet-classgt

ltservletgt

ltservlet-mappinggt

ltservlet-namegtajax_flickrltservlet-namegt

lturl-patterngtservletajax_flickrlturl-patterngt

ltservlet-mappinggt

6 To avoid UTFDataFormatException during file IO operation you have to use

JDK 13 or later for Tomcat In the cshrc file under your home directory add

the entries

setenv JAVA_HOME usrj2se

setenv PATH usrj2sebin$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 ldquojakarta-tomcat-4127commonlibservletjarrdquo to your

CLASSPATH variable and use the variable with the ndashclasspath switch of the

javac compiler

8 Then run ldquosource cshrcrdquo 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 JavaScriptHTML 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

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 userrsquos 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 httpgeocoderus

According to its Terms and Conditions located at httpgeocoderustermsshtml

Free data services are provided from sources in the public domain or under licenses that

do not prohibit their open redistribution by us eg 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 httpgeocoderushelp

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

httpgeocoderusservicerestaddress=601+Crest+Drive+Manhattan+Beach+CA

the service returns the following XML response

ltxml version=10gt

ltrdfRDF xmlnsdc=httppurlorgdcelements11

xmlnsgeo=httpwwww3org200301geowgs84_pos

xmlnsrdf=httpwwww3org19990222-rdf-syntax-nsgt

ltgeoPoint rdfnodeID=aid95727847gt

ltdcdescriptiongt601 N Crest Dr Manhattan Beach CA

90266ltdcdescriptiongt

ltgeolonggt-118407308ltgeolonggt

ltgeolatgt33881214ltgeolatgt

ltgeoPointgt

ltrdfRDFgt

Please note that if you use this mechanism the original input must be a complete address

ie 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)

Page 3: Assignment #4 XML Parser

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 ldquoXXXX likes this

image from Flickrrdquo) to a userrsquos 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 ldquoSearchrdquo button

A dynamic area that displays the image thumbnails corresponding to ldquopublicrdquo

images at the given location

A dynamic area to show a larger version of a selected image

An ldquoUPLOADrdquo button that posts the selected image and the text ldquolikes this photo

from Flickrrdquo to a userrsquos feed page

Once ldquoCity Staterdquo has been entered in the edit box and the ldquoSearchrdquo 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 (ldquoCity Staterdquo) the request is not forwarded

to the Java Servlet Instead an alert with an error message is presented to the user asking

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 ldquoCity Staterdquo 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 ldquoManhattan

Beach CArdquo

httpmapsgooglecommapsgeoq=Manhattan+Beach+CAampoutput=jsonampoe=ut

f8ampsensor=falseampgl=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

USCountryName USAAdministrativeArea

AdministrativeAreaName CALocality LocalityName Manhattan

BeachAccuracy 4

ExtendedData

LatLonBox

north 339061480

south 338613840

east -1183786390

west -1184758020

Point

coordinates [ -1183960520 338874090 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

flickrphotossearch to retrieve a list of all the public photos geo-tagged within a ldquo10

kmrdquo radius from the selected ldquoCity Staterdquo For example the following REST query with

the coordinates of ldquoManhattan Beach CArdquo

httpapiflickrcomservicesrestmethod=flickrphotossearchampapi_ke

y=f2cc26448280a762143ba4a865795ab4amplat=338874090amplon=-

1183960520ampradius=10ampradius_units=kmampmin_upload_date=1199145600

5

returns the following XML

ltxml version=10 encoding=utf-8 gt

ltrsp stat=okgt

ltphotos page=1 pages=1 perpage=250 total=3gt

ltphoto id=2890708805 owner=29779661N02 secret=9f25fd6158

server=3162 farm=4 title=Purple Reigns took a picture

ispublic=1 isfriend=0 isfamily=0 gt

ltphoto id=2858382553 owner=9858951N03 secret=d9df63bd36

server=3078 farm=4 title=Evidence of Former Payphone Location

DSC00177 ispublic=1 isfriend=0 isfamily=0 gt

ltphoto id=2485315502 owner=23784666N06 secret=894aa9f87d

server=2088 farm=3 title=Parking Duck ispublic=1 isfriend=0

isfamily=0 gt

ltphotosgt

ltrspgt

The syntax of the flickrphotossearch API is documented at

httpwwwflickrcomservicesapiflickrphotossearchhtml

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

httpwwwtutorialsyaxaycomshowthreadphpt=45778

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[

id2890708805secret9f25fd6158server3162

farm4 titlePurple Reigns took a picture

id2858382553secretd9df63bd36 server3078

farm4 titleEvidence of Former Payphone Location DSC00177

id2485315502secret894aa9f87d server2088

farm3 titleParking Duck

]

6

After obtaining the query results from the callback of XMLHttpRequest the JavaScript

program displays the picture thumbnails in the ldquodynamicrdquo area of the web page

The thumbnail and original photos can be retrieved using ldquoPhoto Source URLsrdquo defined

at

httpwwwflickrcomservicesapimiscurlshtml

using one of the following two formats

httpfarmfarm-idstaticflickrcomserver-idid_secretjpg

httpfarmfarm-idstaticflickrcomserver-

idid_secret_[mstb]jpg

For example the ldquothumbnailrdquo for the first picture above is retrieved with this URL

httpfarm4staticflickrcom31622890708805_9f25fd6158_sjpg

Next the user is allowed to ldquoselectrdquo 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

ldquoselect a photo and click here to upload to Facebook-rdquo button becomes enabled When

the button is pressed the web application does the following

a) authorizes the user to facebook (ie logs himher in) using the application and

user credentials if the user is not already logged in to Facebook

b) posts the image and the text ldquolikes this image from Flickrrdquo to the userrsquos News

Feed

The above two steps are performed using the Facebook Connect API using the

JavaScript Client Library documented at

httpwikidevelopersfacebookcomindexphpJavaScript_Client_Library

4 Implementation Hints

1 Step 1 Writing your JavaScript Program ndash set up Google Ajax transaction

The JavaScript invoked by the Search button click event should do all of the

following

a Assign the ldquocallbackrdquo function

b Assemble the url parameter of the GET as a reference to the Java

Servlet to be invoked

BASE_URL + servletajax_flickr

c Call the XMLHttpRequest method (see Ajax Slide 31) and create the

request object

7

d Prepare the GET XMLHttpRequest using the setRequestHeader

method

reqopen(GET url true)

reqonreadystatechange = myCallback reqsetRequestHeader(Connection Close)

reqsetRequestHeader(Method GET + url + HTTP11)

2 Step 2 Writing your JavaScript Program ndash Execute Ajax Transaction

The JavaScript should finally invoke the XMLHttpRequest send method (see

Ajax slide 31)

The ldquocallbackrdquo 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

ldquodynamicrdquo area

3 Step 3 Use the Java Servlet to respond to XMLHttpRequest and retrieve the

Flickr photo listings

The Java Servlet referred above as servletajax_flickr (see 1c 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 flickrphotossearch 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 3a

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 = urlopenConnection()

urlConnectionsetAllowUserInteraction(false)

InputStream urlStream = urlopenStream()

read content

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

httpwwwjdomorgdownloadsindexhtml

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

httpmirrorsibiblioorgpubmirrorsmavencommetaparadigmjarsjson-rpc-

10jar

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 ndash Select an Image

Once the images thumbnails are displayed in the dynamic area the JavaScript should

allow the user to ldquoselectrdquo an image The appropriate ldquovisual cuerdquo 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 ldquovisual cuerdquo must be displayed above

the corresponding thumbnail

7 Step 7 Writing your JavaScript Program ndash Authorize Facebook User

Once the image is selected the ldquoselect a photo and click here to upload to Facebookrdquo

button becomes active and when pressed it invokes the Facebook Connect API and

authorizes the user The recommended API to use is FBensureInit which is documented

at

httpwikidevelopersfacebookcomindexphpJS_API_M_FBBootstrapEnsureInit

You will also need to understand how to use the JavaScript Client library The library is

documented at

9

httpwikidevelopersfacebookcomindexphpJavaScript_Client_Library

8 Step 8 Writing your JavaScript Program ndash 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 userrsquos 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

httpdevelopersfacebookcomdocsu=facebookjslib

The recommended API to use is FBConnectstreamPublish Its use is documented at

httpwikidevelopersfacebookcomindexphpImplementing_Feed_Publishing_from_yo

ur_Website_or_Application

A detailed explanation is also given at

httpwikidevelopersfacebookcomindexphpFBConnectstreamPublish

For the FBConnectstreamPublish method to be able to successfully post the selected

image to the userrsquos news feed you will need to use an image attachment To understand

how attachments work you can read this page

httpwikidevelopersfacebookcomindexphpAttachment_28Streams29

Essentially in this case an attachment will be of the following form

var attachment = media [typeimage

srcselected Flickr image source

hrefhttpwwwflickrcom]

Finally to better understand how Feeds work you can read this page

httpwikidevelopersfacebookcomindexphpFeed

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

httpwwwpaktcompaktid=ce00f49ed79e17aaampt=How_to_add_Facebook_Connect_t

o_your_

10

5 Prerequisites

This homework requires the use of the following components

1 A servlet-based web server Tomcat 4127 Instructions on how to load Tomcat

4127 can be found here httpwww-

scfuscedu~csci5712006Springtomcatinstallhtml A tar version of Tomcat

4127 can be found here httpwww-scfuscedu~csci571downloadjakarta-

tomcat-4127tar

2 The Java Servlet library which has functionality similar to Perlrsquos 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 10 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

httpwwwjdomorg You may also use JAXP the Java API for XML Parsing

version 11 included in the Java JDK 14 (import javaxxmlparsers) and

documented at httpjavasuncomxmljaxpdist11docsapi A good tutorial on

JAXP is available at httpwww-106ibmcomdeveloperworksxmllibraryx-

jaxp1html

4 You need to create a Facebook Platform application as documented at

httpwikidevelopersfacebookcomindexphpCreating_your_first_application

Submitting_Your_Application_to_the_Facebook_Application_Directory To do

that you will need to Add the Facebook Developer application go to

httpwwwfacebookcomdevelopers and click Add Developer Once youve

added the Facebook Developer application to your account you can begin

creating your application for Facebook See the sections ldquoCreating Your

Facebook Applicationrdquo and ldquoConfiguring Basic Settingsrdquo 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

11

5 You need to obtain a Flickr Service API key You can sign up for your private

Flickr API Key at httpwwwflickrcomservicesapiauthhowtowebhtml You

should perform steps ldquo1 Obtain an API Keyrdquo and ldquo2 Configure your Keyrdquo You

may also have to create a Yahoo ID account if you have not already done so You

should ldquoApply for a Non-Commercial keyrdquo 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

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

13

6 Deployment Structure

To write your own Java Servlets program using Tomcat 4127 you need to

1 Successfully install Tomcat 4127 on your machine

2 Go to $CATALINA_HOMEwebappsexamples 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_INFclasses folder So the

path of your Servlets file is httpserver_nameportexamplesservletyour_servlet_name

5 Add appropriate sections to the WEB-INFwebxml file as in

ltservletgt

ltservlet-namegtajax_flickrltservlet-namegt

ltdisplay-namegtAJAX Flickrltdisplay-namegt

ltservlet-classgtAJAXFlickrltservlet-classgt

ltservletgt

ltservlet-mappinggt

ltservlet-namegtajax_flickrltservlet-namegt

lturl-patterngtservletajax_flickrlturl-patterngt

ltservlet-mappinggt

6 To avoid UTFDataFormatException during file IO operation you have to use

JDK 13 or later for Tomcat In the cshrc file under your home directory add

the entries

setenv JAVA_HOME usrj2se

setenv PATH usrj2sebin$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 ldquojakarta-tomcat-4127commonlibservletjarrdquo to your

CLASSPATH variable and use the variable with the ndashclasspath switch of the

javac compiler

8 Then run ldquosource cshrcrdquo 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 JavaScriptHTML 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

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 userrsquos 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 httpgeocoderus

According to its Terms and Conditions located at httpgeocoderustermsshtml

Free data services are provided from sources in the public domain or under licenses that

do not prohibit their open redistribution by us eg 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 httpgeocoderushelp

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

httpgeocoderusservicerestaddress=601+Crest+Drive+Manhattan+Beach+CA

the service returns the following XML response

ltxml version=10gt

ltrdfRDF xmlnsdc=httppurlorgdcelements11

xmlnsgeo=httpwwww3org200301geowgs84_pos

xmlnsrdf=httpwwww3org19990222-rdf-syntax-nsgt

ltgeoPoint rdfnodeID=aid95727847gt

ltdcdescriptiongt601 N Crest Dr Manhattan Beach CA

90266ltdcdescriptiongt

ltgeolonggt-118407308ltgeolonggt

ltgeolatgt33881214ltgeolatgt

ltgeoPointgt

ltrdfRDFgt

Please note that if you use this mechanism the original input must be a complete address

ie 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)

Page 4: Assignment #4 XML Parser

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 ldquoCity Staterdquo 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 ldquoManhattan

Beach CArdquo

httpmapsgooglecommapsgeoq=Manhattan+Beach+CAampoutput=jsonampoe=ut

f8ampsensor=falseampgl=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

USCountryName USAAdministrativeArea

AdministrativeAreaName CALocality LocalityName Manhattan

BeachAccuracy 4

ExtendedData

LatLonBox

north 339061480

south 338613840

east -1183786390

west -1184758020

Point

coordinates [ -1183960520 338874090 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

flickrphotossearch to retrieve a list of all the public photos geo-tagged within a ldquo10

kmrdquo radius from the selected ldquoCity Staterdquo For example the following REST query with

the coordinates of ldquoManhattan Beach CArdquo

httpapiflickrcomservicesrestmethod=flickrphotossearchampapi_ke

y=f2cc26448280a762143ba4a865795ab4amplat=338874090amplon=-

1183960520ampradius=10ampradius_units=kmampmin_upload_date=1199145600

5

returns the following XML

ltxml version=10 encoding=utf-8 gt

ltrsp stat=okgt

ltphotos page=1 pages=1 perpage=250 total=3gt

ltphoto id=2890708805 owner=29779661N02 secret=9f25fd6158

server=3162 farm=4 title=Purple Reigns took a picture

ispublic=1 isfriend=0 isfamily=0 gt

ltphoto id=2858382553 owner=9858951N03 secret=d9df63bd36

server=3078 farm=4 title=Evidence of Former Payphone Location

DSC00177 ispublic=1 isfriend=0 isfamily=0 gt

ltphoto id=2485315502 owner=23784666N06 secret=894aa9f87d

server=2088 farm=3 title=Parking Duck ispublic=1 isfriend=0

isfamily=0 gt

ltphotosgt

ltrspgt

The syntax of the flickrphotossearch API is documented at

httpwwwflickrcomservicesapiflickrphotossearchhtml

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

httpwwwtutorialsyaxaycomshowthreadphpt=45778

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[

id2890708805secret9f25fd6158server3162

farm4 titlePurple Reigns took a picture

id2858382553secretd9df63bd36 server3078

farm4 titleEvidence of Former Payphone Location DSC00177

id2485315502secret894aa9f87d server2088

farm3 titleParking Duck

]

6

After obtaining the query results from the callback of XMLHttpRequest the JavaScript

program displays the picture thumbnails in the ldquodynamicrdquo area of the web page

The thumbnail and original photos can be retrieved using ldquoPhoto Source URLsrdquo defined

at

httpwwwflickrcomservicesapimiscurlshtml

using one of the following two formats

httpfarmfarm-idstaticflickrcomserver-idid_secretjpg

httpfarmfarm-idstaticflickrcomserver-

idid_secret_[mstb]jpg

For example the ldquothumbnailrdquo for the first picture above is retrieved with this URL

httpfarm4staticflickrcom31622890708805_9f25fd6158_sjpg

Next the user is allowed to ldquoselectrdquo 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

ldquoselect a photo and click here to upload to Facebook-rdquo button becomes enabled When

the button is pressed the web application does the following

a) authorizes the user to facebook (ie logs himher in) using the application and

user credentials if the user is not already logged in to Facebook

b) posts the image and the text ldquolikes this image from Flickrrdquo to the userrsquos News

Feed

The above two steps are performed using the Facebook Connect API using the

JavaScript Client Library documented at

httpwikidevelopersfacebookcomindexphpJavaScript_Client_Library

4 Implementation Hints

1 Step 1 Writing your JavaScript Program ndash set up Google Ajax transaction

The JavaScript invoked by the Search button click event should do all of the

following

a Assign the ldquocallbackrdquo function

b Assemble the url parameter of the GET as a reference to the Java

Servlet to be invoked

BASE_URL + servletajax_flickr

c Call the XMLHttpRequest method (see Ajax Slide 31) and create the

request object

7

d Prepare the GET XMLHttpRequest using the setRequestHeader

method

reqopen(GET url true)

reqonreadystatechange = myCallback reqsetRequestHeader(Connection Close)

reqsetRequestHeader(Method GET + url + HTTP11)

2 Step 2 Writing your JavaScript Program ndash Execute Ajax Transaction

The JavaScript should finally invoke the XMLHttpRequest send method (see

Ajax slide 31)

The ldquocallbackrdquo 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

ldquodynamicrdquo area

3 Step 3 Use the Java Servlet to respond to XMLHttpRequest and retrieve the

Flickr photo listings

The Java Servlet referred above as servletajax_flickr (see 1c 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 flickrphotossearch 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 3a

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 = urlopenConnection()

urlConnectionsetAllowUserInteraction(false)

InputStream urlStream = urlopenStream()

read content

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

httpwwwjdomorgdownloadsindexhtml

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

httpmirrorsibiblioorgpubmirrorsmavencommetaparadigmjarsjson-rpc-

10jar

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 ndash Select an Image

Once the images thumbnails are displayed in the dynamic area the JavaScript should

allow the user to ldquoselectrdquo an image The appropriate ldquovisual cuerdquo 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 ldquovisual cuerdquo must be displayed above

the corresponding thumbnail

7 Step 7 Writing your JavaScript Program ndash Authorize Facebook User

Once the image is selected the ldquoselect a photo and click here to upload to Facebookrdquo

button becomes active and when pressed it invokes the Facebook Connect API and

authorizes the user The recommended API to use is FBensureInit which is documented

at

httpwikidevelopersfacebookcomindexphpJS_API_M_FBBootstrapEnsureInit

You will also need to understand how to use the JavaScript Client library The library is

documented at

9

httpwikidevelopersfacebookcomindexphpJavaScript_Client_Library

8 Step 8 Writing your JavaScript Program ndash 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 userrsquos 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

httpdevelopersfacebookcomdocsu=facebookjslib

The recommended API to use is FBConnectstreamPublish Its use is documented at

httpwikidevelopersfacebookcomindexphpImplementing_Feed_Publishing_from_yo

ur_Website_or_Application

A detailed explanation is also given at

httpwikidevelopersfacebookcomindexphpFBConnectstreamPublish

For the FBConnectstreamPublish method to be able to successfully post the selected

image to the userrsquos news feed you will need to use an image attachment To understand

how attachments work you can read this page

httpwikidevelopersfacebookcomindexphpAttachment_28Streams29

Essentially in this case an attachment will be of the following form

var attachment = media [typeimage

srcselected Flickr image source

hrefhttpwwwflickrcom]

Finally to better understand how Feeds work you can read this page

httpwikidevelopersfacebookcomindexphpFeed

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

httpwwwpaktcompaktid=ce00f49ed79e17aaampt=How_to_add_Facebook_Connect_t

o_your_

10

5 Prerequisites

This homework requires the use of the following components

1 A servlet-based web server Tomcat 4127 Instructions on how to load Tomcat

4127 can be found here httpwww-

scfuscedu~csci5712006Springtomcatinstallhtml A tar version of Tomcat

4127 can be found here httpwww-scfuscedu~csci571downloadjakarta-

tomcat-4127tar

2 The Java Servlet library which has functionality similar to Perlrsquos 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 10 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

httpwwwjdomorg You may also use JAXP the Java API for XML Parsing

version 11 included in the Java JDK 14 (import javaxxmlparsers) and

documented at httpjavasuncomxmljaxpdist11docsapi A good tutorial on

JAXP is available at httpwww-106ibmcomdeveloperworksxmllibraryx-

jaxp1html

4 You need to create a Facebook Platform application as documented at

httpwikidevelopersfacebookcomindexphpCreating_your_first_application

Submitting_Your_Application_to_the_Facebook_Application_Directory To do

that you will need to Add the Facebook Developer application go to

httpwwwfacebookcomdevelopers and click Add Developer Once youve

added the Facebook Developer application to your account you can begin

creating your application for Facebook See the sections ldquoCreating Your

Facebook Applicationrdquo and ldquoConfiguring Basic Settingsrdquo 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

11

5 You need to obtain a Flickr Service API key You can sign up for your private

Flickr API Key at httpwwwflickrcomservicesapiauthhowtowebhtml You

should perform steps ldquo1 Obtain an API Keyrdquo and ldquo2 Configure your Keyrdquo You

may also have to create a Yahoo ID account if you have not already done so You

should ldquoApply for a Non-Commercial keyrdquo 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

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

13

6 Deployment Structure

To write your own Java Servlets program using Tomcat 4127 you need to

1 Successfully install Tomcat 4127 on your machine

2 Go to $CATALINA_HOMEwebappsexamples 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_INFclasses folder So the

path of your Servlets file is httpserver_nameportexamplesservletyour_servlet_name

5 Add appropriate sections to the WEB-INFwebxml file as in

ltservletgt

ltservlet-namegtajax_flickrltservlet-namegt

ltdisplay-namegtAJAX Flickrltdisplay-namegt

ltservlet-classgtAJAXFlickrltservlet-classgt

ltservletgt

ltservlet-mappinggt

ltservlet-namegtajax_flickrltservlet-namegt

lturl-patterngtservletajax_flickrlturl-patterngt

ltservlet-mappinggt

6 To avoid UTFDataFormatException during file IO operation you have to use

JDK 13 or later for Tomcat In the cshrc file under your home directory add

the entries

setenv JAVA_HOME usrj2se

setenv PATH usrj2sebin$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 ldquojakarta-tomcat-4127commonlibservletjarrdquo to your

CLASSPATH variable and use the variable with the ndashclasspath switch of the

javac compiler

8 Then run ldquosource cshrcrdquo 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 JavaScriptHTML 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

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 userrsquos 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 httpgeocoderus

According to its Terms and Conditions located at httpgeocoderustermsshtml

Free data services are provided from sources in the public domain or under licenses that

do not prohibit their open redistribution by us eg 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 httpgeocoderushelp

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

httpgeocoderusservicerestaddress=601+Crest+Drive+Manhattan+Beach+CA

the service returns the following XML response

ltxml version=10gt

ltrdfRDF xmlnsdc=httppurlorgdcelements11

xmlnsgeo=httpwwww3org200301geowgs84_pos

xmlnsrdf=httpwwww3org19990222-rdf-syntax-nsgt

ltgeoPoint rdfnodeID=aid95727847gt

ltdcdescriptiongt601 N Crest Dr Manhattan Beach CA

90266ltdcdescriptiongt

ltgeolonggt-118407308ltgeolonggt

ltgeolatgt33881214ltgeolatgt

ltgeoPointgt

ltrdfRDFgt

Please note that if you use this mechanism the original input must be a complete address

ie 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)

Page 5: Assignment #4 XML Parser

5

returns the following XML

ltxml version=10 encoding=utf-8 gt

ltrsp stat=okgt

ltphotos page=1 pages=1 perpage=250 total=3gt

ltphoto id=2890708805 owner=29779661N02 secret=9f25fd6158

server=3162 farm=4 title=Purple Reigns took a picture

ispublic=1 isfriend=0 isfamily=0 gt

ltphoto id=2858382553 owner=9858951N03 secret=d9df63bd36

server=3078 farm=4 title=Evidence of Former Payphone Location

DSC00177 ispublic=1 isfriend=0 isfamily=0 gt

ltphoto id=2485315502 owner=23784666N06 secret=894aa9f87d

server=2088 farm=3 title=Parking Duck ispublic=1 isfriend=0

isfamily=0 gt

ltphotosgt

ltrspgt

The syntax of the flickrphotossearch API is documented at

httpwwwflickrcomservicesapiflickrphotossearchhtml

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

httpwwwtutorialsyaxaycomshowthreadphpt=45778

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[

id2890708805secret9f25fd6158server3162

farm4 titlePurple Reigns took a picture

id2858382553secretd9df63bd36 server3078

farm4 titleEvidence of Former Payphone Location DSC00177

id2485315502secret894aa9f87d server2088

farm3 titleParking Duck

]

6

After obtaining the query results from the callback of XMLHttpRequest the JavaScript

program displays the picture thumbnails in the ldquodynamicrdquo area of the web page

The thumbnail and original photos can be retrieved using ldquoPhoto Source URLsrdquo defined

at

httpwwwflickrcomservicesapimiscurlshtml

using one of the following two formats

httpfarmfarm-idstaticflickrcomserver-idid_secretjpg

httpfarmfarm-idstaticflickrcomserver-

idid_secret_[mstb]jpg

For example the ldquothumbnailrdquo for the first picture above is retrieved with this URL

httpfarm4staticflickrcom31622890708805_9f25fd6158_sjpg

Next the user is allowed to ldquoselectrdquo 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

ldquoselect a photo and click here to upload to Facebook-rdquo button becomes enabled When

the button is pressed the web application does the following

a) authorizes the user to facebook (ie logs himher in) using the application and

user credentials if the user is not already logged in to Facebook

b) posts the image and the text ldquolikes this image from Flickrrdquo to the userrsquos News

Feed

The above two steps are performed using the Facebook Connect API using the

JavaScript Client Library documented at

httpwikidevelopersfacebookcomindexphpJavaScript_Client_Library

4 Implementation Hints

1 Step 1 Writing your JavaScript Program ndash set up Google Ajax transaction

The JavaScript invoked by the Search button click event should do all of the

following

a Assign the ldquocallbackrdquo function

b Assemble the url parameter of the GET as a reference to the Java

Servlet to be invoked

BASE_URL + servletajax_flickr

c Call the XMLHttpRequest method (see Ajax Slide 31) and create the

request object

7

d Prepare the GET XMLHttpRequest using the setRequestHeader

method

reqopen(GET url true)

reqonreadystatechange = myCallback reqsetRequestHeader(Connection Close)

reqsetRequestHeader(Method GET + url + HTTP11)

2 Step 2 Writing your JavaScript Program ndash Execute Ajax Transaction

The JavaScript should finally invoke the XMLHttpRequest send method (see

Ajax slide 31)

The ldquocallbackrdquo 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

ldquodynamicrdquo area

3 Step 3 Use the Java Servlet to respond to XMLHttpRequest and retrieve the

Flickr photo listings

The Java Servlet referred above as servletajax_flickr (see 1c 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 flickrphotossearch 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 3a

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 = urlopenConnection()

urlConnectionsetAllowUserInteraction(false)

InputStream urlStream = urlopenStream()

read content

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

httpwwwjdomorgdownloadsindexhtml

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

httpmirrorsibiblioorgpubmirrorsmavencommetaparadigmjarsjson-rpc-

10jar

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 ndash Select an Image

Once the images thumbnails are displayed in the dynamic area the JavaScript should

allow the user to ldquoselectrdquo an image The appropriate ldquovisual cuerdquo 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 ldquovisual cuerdquo must be displayed above

the corresponding thumbnail

7 Step 7 Writing your JavaScript Program ndash Authorize Facebook User

Once the image is selected the ldquoselect a photo and click here to upload to Facebookrdquo

button becomes active and when pressed it invokes the Facebook Connect API and

authorizes the user The recommended API to use is FBensureInit which is documented

at

httpwikidevelopersfacebookcomindexphpJS_API_M_FBBootstrapEnsureInit

You will also need to understand how to use the JavaScript Client library The library is

documented at

9

httpwikidevelopersfacebookcomindexphpJavaScript_Client_Library

8 Step 8 Writing your JavaScript Program ndash 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 userrsquos 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

httpdevelopersfacebookcomdocsu=facebookjslib

The recommended API to use is FBConnectstreamPublish Its use is documented at

httpwikidevelopersfacebookcomindexphpImplementing_Feed_Publishing_from_yo

ur_Website_or_Application

A detailed explanation is also given at

httpwikidevelopersfacebookcomindexphpFBConnectstreamPublish

For the FBConnectstreamPublish method to be able to successfully post the selected

image to the userrsquos news feed you will need to use an image attachment To understand

how attachments work you can read this page

httpwikidevelopersfacebookcomindexphpAttachment_28Streams29

Essentially in this case an attachment will be of the following form

var attachment = media [typeimage

srcselected Flickr image source

hrefhttpwwwflickrcom]

Finally to better understand how Feeds work you can read this page

httpwikidevelopersfacebookcomindexphpFeed

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

httpwwwpaktcompaktid=ce00f49ed79e17aaampt=How_to_add_Facebook_Connect_t

o_your_

10

5 Prerequisites

This homework requires the use of the following components

1 A servlet-based web server Tomcat 4127 Instructions on how to load Tomcat

4127 can be found here httpwww-

scfuscedu~csci5712006Springtomcatinstallhtml A tar version of Tomcat

4127 can be found here httpwww-scfuscedu~csci571downloadjakarta-

tomcat-4127tar

2 The Java Servlet library which has functionality similar to Perlrsquos 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 10 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

httpwwwjdomorg You may also use JAXP the Java API for XML Parsing

version 11 included in the Java JDK 14 (import javaxxmlparsers) and

documented at httpjavasuncomxmljaxpdist11docsapi A good tutorial on

JAXP is available at httpwww-106ibmcomdeveloperworksxmllibraryx-

jaxp1html

4 You need to create a Facebook Platform application as documented at

httpwikidevelopersfacebookcomindexphpCreating_your_first_application

Submitting_Your_Application_to_the_Facebook_Application_Directory To do

that you will need to Add the Facebook Developer application go to

httpwwwfacebookcomdevelopers and click Add Developer Once youve

added the Facebook Developer application to your account you can begin

creating your application for Facebook See the sections ldquoCreating Your

Facebook Applicationrdquo and ldquoConfiguring Basic Settingsrdquo 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

11

5 You need to obtain a Flickr Service API key You can sign up for your private

Flickr API Key at httpwwwflickrcomservicesapiauthhowtowebhtml You

should perform steps ldquo1 Obtain an API Keyrdquo and ldquo2 Configure your Keyrdquo You

may also have to create a Yahoo ID account if you have not already done so You

should ldquoApply for a Non-Commercial keyrdquo 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

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

13

6 Deployment Structure

To write your own Java Servlets program using Tomcat 4127 you need to

1 Successfully install Tomcat 4127 on your machine

2 Go to $CATALINA_HOMEwebappsexamples 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_INFclasses folder So the

path of your Servlets file is httpserver_nameportexamplesservletyour_servlet_name

5 Add appropriate sections to the WEB-INFwebxml file as in

ltservletgt

ltservlet-namegtajax_flickrltservlet-namegt

ltdisplay-namegtAJAX Flickrltdisplay-namegt

ltservlet-classgtAJAXFlickrltservlet-classgt

ltservletgt

ltservlet-mappinggt

ltservlet-namegtajax_flickrltservlet-namegt

lturl-patterngtservletajax_flickrlturl-patterngt

ltservlet-mappinggt

6 To avoid UTFDataFormatException during file IO operation you have to use

JDK 13 or later for Tomcat In the cshrc file under your home directory add

the entries

setenv JAVA_HOME usrj2se

setenv PATH usrj2sebin$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 ldquojakarta-tomcat-4127commonlibservletjarrdquo to your

CLASSPATH variable and use the variable with the ndashclasspath switch of the

javac compiler

8 Then run ldquosource cshrcrdquo 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 JavaScriptHTML 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

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 userrsquos 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 httpgeocoderus

According to its Terms and Conditions located at httpgeocoderustermsshtml

Free data services are provided from sources in the public domain or under licenses that

do not prohibit their open redistribution by us eg 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 httpgeocoderushelp

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

httpgeocoderusservicerestaddress=601+Crest+Drive+Manhattan+Beach+CA

the service returns the following XML response

ltxml version=10gt

ltrdfRDF xmlnsdc=httppurlorgdcelements11

xmlnsgeo=httpwwww3org200301geowgs84_pos

xmlnsrdf=httpwwww3org19990222-rdf-syntax-nsgt

ltgeoPoint rdfnodeID=aid95727847gt

ltdcdescriptiongt601 N Crest Dr Manhattan Beach CA

90266ltdcdescriptiongt

ltgeolonggt-118407308ltgeolonggt

ltgeolatgt33881214ltgeolatgt

ltgeoPointgt

ltrdfRDFgt

Please note that if you use this mechanism the original input must be a complete address

ie 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)

Page 6: Assignment #4 XML Parser

6

After obtaining the query results from the callback of XMLHttpRequest the JavaScript

program displays the picture thumbnails in the ldquodynamicrdquo area of the web page

The thumbnail and original photos can be retrieved using ldquoPhoto Source URLsrdquo defined

at

httpwwwflickrcomservicesapimiscurlshtml

using one of the following two formats

httpfarmfarm-idstaticflickrcomserver-idid_secretjpg

httpfarmfarm-idstaticflickrcomserver-

idid_secret_[mstb]jpg

For example the ldquothumbnailrdquo for the first picture above is retrieved with this URL

httpfarm4staticflickrcom31622890708805_9f25fd6158_sjpg

Next the user is allowed to ldquoselectrdquo 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

ldquoselect a photo and click here to upload to Facebook-rdquo button becomes enabled When

the button is pressed the web application does the following

a) authorizes the user to facebook (ie logs himher in) using the application and

user credentials if the user is not already logged in to Facebook

b) posts the image and the text ldquolikes this image from Flickrrdquo to the userrsquos News

Feed

The above two steps are performed using the Facebook Connect API using the

JavaScript Client Library documented at

httpwikidevelopersfacebookcomindexphpJavaScript_Client_Library

4 Implementation Hints

1 Step 1 Writing your JavaScript Program ndash set up Google Ajax transaction

The JavaScript invoked by the Search button click event should do all of the

following

a Assign the ldquocallbackrdquo function

b Assemble the url parameter of the GET as a reference to the Java

Servlet to be invoked

BASE_URL + servletajax_flickr

c Call the XMLHttpRequest method (see Ajax Slide 31) and create the

request object

7

d Prepare the GET XMLHttpRequest using the setRequestHeader

method

reqopen(GET url true)

reqonreadystatechange = myCallback reqsetRequestHeader(Connection Close)

reqsetRequestHeader(Method GET + url + HTTP11)

2 Step 2 Writing your JavaScript Program ndash Execute Ajax Transaction

The JavaScript should finally invoke the XMLHttpRequest send method (see

Ajax slide 31)

The ldquocallbackrdquo 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

ldquodynamicrdquo area

3 Step 3 Use the Java Servlet to respond to XMLHttpRequest and retrieve the

Flickr photo listings

The Java Servlet referred above as servletajax_flickr (see 1c 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 flickrphotossearch 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 3a

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 = urlopenConnection()

urlConnectionsetAllowUserInteraction(false)

InputStream urlStream = urlopenStream()

read content

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

httpwwwjdomorgdownloadsindexhtml

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

httpmirrorsibiblioorgpubmirrorsmavencommetaparadigmjarsjson-rpc-

10jar

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 ndash Select an Image

Once the images thumbnails are displayed in the dynamic area the JavaScript should

allow the user to ldquoselectrdquo an image The appropriate ldquovisual cuerdquo 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 ldquovisual cuerdquo must be displayed above

the corresponding thumbnail

7 Step 7 Writing your JavaScript Program ndash Authorize Facebook User

Once the image is selected the ldquoselect a photo and click here to upload to Facebookrdquo

button becomes active and when pressed it invokes the Facebook Connect API and

authorizes the user The recommended API to use is FBensureInit which is documented

at

httpwikidevelopersfacebookcomindexphpJS_API_M_FBBootstrapEnsureInit

You will also need to understand how to use the JavaScript Client library The library is

documented at

9

httpwikidevelopersfacebookcomindexphpJavaScript_Client_Library

8 Step 8 Writing your JavaScript Program ndash 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 userrsquos 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

httpdevelopersfacebookcomdocsu=facebookjslib

The recommended API to use is FBConnectstreamPublish Its use is documented at

httpwikidevelopersfacebookcomindexphpImplementing_Feed_Publishing_from_yo

ur_Website_or_Application

A detailed explanation is also given at

httpwikidevelopersfacebookcomindexphpFBConnectstreamPublish

For the FBConnectstreamPublish method to be able to successfully post the selected

image to the userrsquos news feed you will need to use an image attachment To understand

how attachments work you can read this page

httpwikidevelopersfacebookcomindexphpAttachment_28Streams29

Essentially in this case an attachment will be of the following form

var attachment = media [typeimage

srcselected Flickr image source

hrefhttpwwwflickrcom]

Finally to better understand how Feeds work you can read this page

httpwikidevelopersfacebookcomindexphpFeed

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

httpwwwpaktcompaktid=ce00f49ed79e17aaampt=How_to_add_Facebook_Connect_t

o_your_

10

5 Prerequisites

This homework requires the use of the following components

1 A servlet-based web server Tomcat 4127 Instructions on how to load Tomcat

4127 can be found here httpwww-

scfuscedu~csci5712006Springtomcatinstallhtml A tar version of Tomcat

4127 can be found here httpwww-scfuscedu~csci571downloadjakarta-

tomcat-4127tar

2 The Java Servlet library which has functionality similar to Perlrsquos 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 10 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

httpwwwjdomorg You may also use JAXP the Java API for XML Parsing

version 11 included in the Java JDK 14 (import javaxxmlparsers) and

documented at httpjavasuncomxmljaxpdist11docsapi A good tutorial on

JAXP is available at httpwww-106ibmcomdeveloperworksxmllibraryx-

jaxp1html

4 You need to create a Facebook Platform application as documented at

httpwikidevelopersfacebookcomindexphpCreating_your_first_application

Submitting_Your_Application_to_the_Facebook_Application_Directory To do

that you will need to Add the Facebook Developer application go to

httpwwwfacebookcomdevelopers and click Add Developer Once youve

added the Facebook Developer application to your account you can begin

creating your application for Facebook See the sections ldquoCreating Your

Facebook Applicationrdquo and ldquoConfiguring Basic Settingsrdquo 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

11

5 You need to obtain a Flickr Service API key You can sign up for your private

Flickr API Key at httpwwwflickrcomservicesapiauthhowtowebhtml You

should perform steps ldquo1 Obtain an API Keyrdquo and ldquo2 Configure your Keyrdquo You

may also have to create a Yahoo ID account if you have not already done so You

should ldquoApply for a Non-Commercial keyrdquo 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

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

13

6 Deployment Structure

To write your own Java Servlets program using Tomcat 4127 you need to

1 Successfully install Tomcat 4127 on your machine

2 Go to $CATALINA_HOMEwebappsexamples 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_INFclasses folder So the

path of your Servlets file is httpserver_nameportexamplesservletyour_servlet_name

5 Add appropriate sections to the WEB-INFwebxml file as in

ltservletgt

ltservlet-namegtajax_flickrltservlet-namegt

ltdisplay-namegtAJAX Flickrltdisplay-namegt

ltservlet-classgtAJAXFlickrltservlet-classgt

ltservletgt

ltservlet-mappinggt

ltservlet-namegtajax_flickrltservlet-namegt

lturl-patterngtservletajax_flickrlturl-patterngt

ltservlet-mappinggt

6 To avoid UTFDataFormatException during file IO operation you have to use

JDK 13 or later for Tomcat In the cshrc file under your home directory add

the entries

setenv JAVA_HOME usrj2se

setenv PATH usrj2sebin$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 ldquojakarta-tomcat-4127commonlibservletjarrdquo to your

CLASSPATH variable and use the variable with the ndashclasspath switch of the

javac compiler

8 Then run ldquosource cshrcrdquo 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 JavaScriptHTML 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

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 userrsquos 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 httpgeocoderus

According to its Terms and Conditions located at httpgeocoderustermsshtml

Free data services are provided from sources in the public domain or under licenses that

do not prohibit their open redistribution by us eg 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 httpgeocoderushelp

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

httpgeocoderusservicerestaddress=601+Crest+Drive+Manhattan+Beach+CA

the service returns the following XML response

ltxml version=10gt

ltrdfRDF xmlnsdc=httppurlorgdcelements11

xmlnsgeo=httpwwww3org200301geowgs84_pos

xmlnsrdf=httpwwww3org19990222-rdf-syntax-nsgt

ltgeoPoint rdfnodeID=aid95727847gt

ltdcdescriptiongt601 N Crest Dr Manhattan Beach CA

90266ltdcdescriptiongt

ltgeolonggt-118407308ltgeolonggt

ltgeolatgt33881214ltgeolatgt

ltgeoPointgt

ltrdfRDFgt

Please note that if you use this mechanism the original input must be a complete address

ie 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)

Page 7: Assignment #4 XML Parser

7

d Prepare the GET XMLHttpRequest using the setRequestHeader

method

reqopen(GET url true)

reqonreadystatechange = myCallback reqsetRequestHeader(Connection Close)

reqsetRequestHeader(Method GET + url + HTTP11)

2 Step 2 Writing your JavaScript Program ndash Execute Ajax Transaction

The JavaScript should finally invoke the XMLHttpRequest send method (see

Ajax slide 31)

The ldquocallbackrdquo 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

ldquodynamicrdquo area

3 Step 3 Use the Java Servlet to respond to XMLHttpRequest and retrieve the

Flickr photo listings

The Java Servlet referred above as servletajax_flickr (see 1c 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 flickrphotossearch 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 3a

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 = urlopenConnection()

urlConnectionsetAllowUserInteraction(false)

InputStream urlStream = urlopenStream()

read content

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

httpwwwjdomorgdownloadsindexhtml

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

httpmirrorsibiblioorgpubmirrorsmavencommetaparadigmjarsjson-rpc-

10jar

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 ndash Select an Image

Once the images thumbnails are displayed in the dynamic area the JavaScript should

allow the user to ldquoselectrdquo an image The appropriate ldquovisual cuerdquo 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 ldquovisual cuerdquo must be displayed above

the corresponding thumbnail

7 Step 7 Writing your JavaScript Program ndash Authorize Facebook User

Once the image is selected the ldquoselect a photo and click here to upload to Facebookrdquo

button becomes active and when pressed it invokes the Facebook Connect API and

authorizes the user The recommended API to use is FBensureInit which is documented

at

httpwikidevelopersfacebookcomindexphpJS_API_M_FBBootstrapEnsureInit

You will also need to understand how to use the JavaScript Client library The library is

documented at

9

httpwikidevelopersfacebookcomindexphpJavaScript_Client_Library

8 Step 8 Writing your JavaScript Program ndash 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 userrsquos 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

httpdevelopersfacebookcomdocsu=facebookjslib

The recommended API to use is FBConnectstreamPublish Its use is documented at

httpwikidevelopersfacebookcomindexphpImplementing_Feed_Publishing_from_yo

ur_Website_or_Application

A detailed explanation is also given at

httpwikidevelopersfacebookcomindexphpFBConnectstreamPublish

For the FBConnectstreamPublish method to be able to successfully post the selected

image to the userrsquos news feed you will need to use an image attachment To understand

how attachments work you can read this page

httpwikidevelopersfacebookcomindexphpAttachment_28Streams29

Essentially in this case an attachment will be of the following form

var attachment = media [typeimage

srcselected Flickr image source

hrefhttpwwwflickrcom]

Finally to better understand how Feeds work you can read this page

httpwikidevelopersfacebookcomindexphpFeed

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

httpwwwpaktcompaktid=ce00f49ed79e17aaampt=How_to_add_Facebook_Connect_t

o_your_

10

5 Prerequisites

This homework requires the use of the following components

1 A servlet-based web server Tomcat 4127 Instructions on how to load Tomcat

4127 can be found here httpwww-

scfuscedu~csci5712006Springtomcatinstallhtml A tar version of Tomcat

4127 can be found here httpwww-scfuscedu~csci571downloadjakarta-

tomcat-4127tar

2 The Java Servlet library which has functionality similar to Perlrsquos 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 10 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

httpwwwjdomorg You may also use JAXP the Java API for XML Parsing

version 11 included in the Java JDK 14 (import javaxxmlparsers) and

documented at httpjavasuncomxmljaxpdist11docsapi A good tutorial on

JAXP is available at httpwww-106ibmcomdeveloperworksxmllibraryx-

jaxp1html

4 You need to create a Facebook Platform application as documented at

httpwikidevelopersfacebookcomindexphpCreating_your_first_application

Submitting_Your_Application_to_the_Facebook_Application_Directory To do

that you will need to Add the Facebook Developer application go to

httpwwwfacebookcomdevelopers and click Add Developer Once youve

added the Facebook Developer application to your account you can begin

creating your application for Facebook See the sections ldquoCreating Your

Facebook Applicationrdquo and ldquoConfiguring Basic Settingsrdquo 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

11

5 You need to obtain a Flickr Service API key You can sign up for your private

Flickr API Key at httpwwwflickrcomservicesapiauthhowtowebhtml You

should perform steps ldquo1 Obtain an API Keyrdquo and ldquo2 Configure your Keyrdquo You

may also have to create a Yahoo ID account if you have not already done so You

should ldquoApply for a Non-Commercial keyrdquo 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

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

13

6 Deployment Structure

To write your own Java Servlets program using Tomcat 4127 you need to

1 Successfully install Tomcat 4127 on your machine

2 Go to $CATALINA_HOMEwebappsexamples 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_INFclasses folder So the

path of your Servlets file is httpserver_nameportexamplesservletyour_servlet_name

5 Add appropriate sections to the WEB-INFwebxml file as in

ltservletgt

ltservlet-namegtajax_flickrltservlet-namegt

ltdisplay-namegtAJAX Flickrltdisplay-namegt

ltservlet-classgtAJAXFlickrltservlet-classgt

ltservletgt

ltservlet-mappinggt

ltservlet-namegtajax_flickrltservlet-namegt

lturl-patterngtservletajax_flickrlturl-patterngt

ltservlet-mappinggt

6 To avoid UTFDataFormatException during file IO operation you have to use

JDK 13 or later for Tomcat In the cshrc file under your home directory add

the entries

setenv JAVA_HOME usrj2se

setenv PATH usrj2sebin$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 ldquojakarta-tomcat-4127commonlibservletjarrdquo to your

CLASSPATH variable and use the variable with the ndashclasspath switch of the

javac compiler

8 Then run ldquosource cshrcrdquo 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 JavaScriptHTML 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

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 userrsquos 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 httpgeocoderus

According to its Terms and Conditions located at httpgeocoderustermsshtml

Free data services are provided from sources in the public domain or under licenses that

do not prohibit their open redistribution by us eg 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 httpgeocoderushelp

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

httpgeocoderusservicerestaddress=601+Crest+Drive+Manhattan+Beach+CA

the service returns the following XML response

ltxml version=10gt

ltrdfRDF xmlnsdc=httppurlorgdcelements11

xmlnsgeo=httpwwww3org200301geowgs84_pos

xmlnsrdf=httpwwww3org19990222-rdf-syntax-nsgt

ltgeoPoint rdfnodeID=aid95727847gt

ltdcdescriptiongt601 N Crest Dr Manhattan Beach CA

90266ltdcdescriptiongt

ltgeolonggt-118407308ltgeolonggt

ltgeolatgt33881214ltgeolatgt

ltgeoPointgt

ltrdfRDFgt

Please note that if you use this mechanism the original input must be a complete address

ie 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)

Page 8: Assignment #4 XML Parser

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

httpwwwjdomorgdownloadsindexhtml

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

httpmirrorsibiblioorgpubmirrorsmavencommetaparadigmjarsjson-rpc-

10jar

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 ndash Select an Image

Once the images thumbnails are displayed in the dynamic area the JavaScript should

allow the user to ldquoselectrdquo an image The appropriate ldquovisual cuerdquo 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 ldquovisual cuerdquo must be displayed above

the corresponding thumbnail

7 Step 7 Writing your JavaScript Program ndash Authorize Facebook User

Once the image is selected the ldquoselect a photo and click here to upload to Facebookrdquo

button becomes active and when pressed it invokes the Facebook Connect API and

authorizes the user The recommended API to use is FBensureInit which is documented

at

httpwikidevelopersfacebookcomindexphpJS_API_M_FBBootstrapEnsureInit

You will also need to understand how to use the JavaScript Client library The library is

documented at

9

httpwikidevelopersfacebookcomindexphpJavaScript_Client_Library

8 Step 8 Writing your JavaScript Program ndash 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 userrsquos 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

httpdevelopersfacebookcomdocsu=facebookjslib

The recommended API to use is FBConnectstreamPublish Its use is documented at

httpwikidevelopersfacebookcomindexphpImplementing_Feed_Publishing_from_yo

ur_Website_or_Application

A detailed explanation is also given at

httpwikidevelopersfacebookcomindexphpFBConnectstreamPublish

For the FBConnectstreamPublish method to be able to successfully post the selected

image to the userrsquos news feed you will need to use an image attachment To understand

how attachments work you can read this page

httpwikidevelopersfacebookcomindexphpAttachment_28Streams29

Essentially in this case an attachment will be of the following form

var attachment = media [typeimage

srcselected Flickr image source

hrefhttpwwwflickrcom]

Finally to better understand how Feeds work you can read this page

httpwikidevelopersfacebookcomindexphpFeed

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

httpwwwpaktcompaktid=ce00f49ed79e17aaampt=How_to_add_Facebook_Connect_t

o_your_

10

5 Prerequisites

This homework requires the use of the following components

1 A servlet-based web server Tomcat 4127 Instructions on how to load Tomcat

4127 can be found here httpwww-

scfuscedu~csci5712006Springtomcatinstallhtml A tar version of Tomcat

4127 can be found here httpwww-scfuscedu~csci571downloadjakarta-

tomcat-4127tar

2 The Java Servlet library which has functionality similar to Perlrsquos 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 10 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

httpwwwjdomorg You may also use JAXP the Java API for XML Parsing

version 11 included in the Java JDK 14 (import javaxxmlparsers) and

documented at httpjavasuncomxmljaxpdist11docsapi A good tutorial on

JAXP is available at httpwww-106ibmcomdeveloperworksxmllibraryx-

jaxp1html

4 You need to create a Facebook Platform application as documented at

httpwikidevelopersfacebookcomindexphpCreating_your_first_application

Submitting_Your_Application_to_the_Facebook_Application_Directory To do

that you will need to Add the Facebook Developer application go to

httpwwwfacebookcomdevelopers and click Add Developer Once youve

added the Facebook Developer application to your account you can begin

creating your application for Facebook See the sections ldquoCreating Your

Facebook Applicationrdquo and ldquoConfiguring Basic Settingsrdquo 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

11

5 You need to obtain a Flickr Service API key You can sign up for your private

Flickr API Key at httpwwwflickrcomservicesapiauthhowtowebhtml You

should perform steps ldquo1 Obtain an API Keyrdquo and ldquo2 Configure your Keyrdquo You

may also have to create a Yahoo ID account if you have not already done so You

should ldquoApply for a Non-Commercial keyrdquo 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

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

13

6 Deployment Structure

To write your own Java Servlets program using Tomcat 4127 you need to

1 Successfully install Tomcat 4127 on your machine

2 Go to $CATALINA_HOMEwebappsexamples 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_INFclasses folder So the

path of your Servlets file is httpserver_nameportexamplesservletyour_servlet_name

5 Add appropriate sections to the WEB-INFwebxml file as in

ltservletgt

ltservlet-namegtajax_flickrltservlet-namegt

ltdisplay-namegtAJAX Flickrltdisplay-namegt

ltservlet-classgtAJAXFlickrltservlet-classgt

ltservletgt

ltservlet-mappinggt

ltservlet-namegtajax_flickrltservlet-namegt

lturl-patterngtservletajax_flickrlturl-patterngt

ltservlet-mappinggt

6 To avoid UTFDataFormatException during file IO operation you have to use

JDK 13 or later for Tomcat In the cshrc file under your home directory add

the entries

setenv JAVA_HOME usrj2se

setenv PATH usrj2sebin$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 ldquojakarta-tomcat-4127commonlibservletjarrdquo to your

CLASSPATH variable and use the variable with the ndashclasspath switch of the

javac compiler

8 Then run ldquosource cshrcrdquo 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 JavaScriptHTML 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

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 userrsquos 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 httpgeocoderus

According to its Terms and Conditions located at httpgeocoderustermsshtml

Free data services are provided from sources in the public domain or under licenses that

do not prohibit their open redistribution by us eg 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 httpgeocoderushelp

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

httpgeocoderusservicerestaddress=601+Crest+Drive+Manhattan+Beach+CA

the service returns the following XML response

ltxml version=10gt

ltrdfRDF xmlnsdc=httppurlorgdcelements11

xmlnsgeo=httpwwww3org200301geowgs84_pos

xmlnsrdf=httpwwww3org19990222-rdf-syntax-nsgt

ltgeoPoint rdfnodeID=aid95727847gt

ltdcdescriptiongt601 N Crest Dr Manhattan Beach CA

90266ltdcdescriptiongt

ltgeolonggt-118407308ltgeolonggt

ltgeolatgt33881214ltgeolatgt

ltgeoPointgt

ltrdfRDFgt

Please note that if you use this mechanism the original input must be a complete address

ie 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)

Page 9: Assignment #4 XML Parser

9

httpwikidevelopersfacebookcomindexphpJavaScript_Client_Library

8 Step 8 Writing your JavaScript Program ndash 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 userrsquos 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

httpdevelopersfacebookcomdocsu=facebookjslib

The recommended API to use is FBConnectstreamPublish Its use is documented at

httpwikidevelopersfacebookcomindexphpImplementing_Feed_Publishing_from_yo

ur_Website_or_Application

A detailed explanation is also given at

httpwikidevelopersfacebookcomindexphpFBConnectstreamPublish

For the FBConnectstreamPublish method to be able to successfully post the selected

image to the userrsquos news feed you will need to use an image attachment To understand

how attachments work you can read this page

httpwikidevelopersfacebookcomindexphpAttachment_28Streams29

Essentially in this case an attachment will be of the following form

var attachment = media [typeimage

srcselected Flickr image source

hrefhttpwwwflickrcom]

Finally to better understand how Feeds work you can read this page

httpwikidevelopersfacebookcomindexphpFeed

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

httpwwwpaktcompaktid=ce00f49ed79e17aaampt=How_to_add_Facebook_Connect_t

o_your_

10

5 Prerequisites

This homework requires the use of the following components

1 A servlet-based web server Tomcat 4127 Instructions on how to load Tomcat

4127 can be found here httpwww-

scfuscedu~csci5712006Springtomcatinstallhtml A tar version of Tomcat

4127 can be found here httpwww-scfuscedu~csci571downloadjakarta-

tomcat-4127tar

2 The Java Servlet library which has functionality similar to Perlrsquos 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 10 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

httpwwwjdomorg You may also use JAXP the Java API for XML Parsing

version 11 included in the Java JDK 14 (import javaxxmlparsers) and

documented at httpjavasuncomxmljaxpdist11docsapi A good tutorial on

JAXP is available at httpwww-106ibmcomdeveloperworksxmllibraryx-

jaxp1html

4 You need to create a Facebook Platform application as documented at

httpwikidevelopersfacebookcomindexphpCreating_your_first_application

Submitting_Your_Application_to_the_Facebook_Application_Directory To do

that you will need to Add the Facebook Developer application go to

httpwwwfacebookcomdevelopers and click Add Developer Once youve

added the Facebook Developer application to your account you can begin

creating your application for Facebook See the sections ldquoCreating Your

Facebook Applicationrdquo and ldquoConfiguring Basic Settingsrdquo 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

11

5 You need to obtain a Flickr Service API key You can sign up for your private

Flickr API Key at httpwwwflickrcomservicesapiauthhowtowebhtml You

should perform steps ldquo1 Obtain an API Keyrdquo and ldquo2 Configure your Keyrdquo You

may also have to create a Yahoo ID account if you have not already done so You

should ldquoApply for a Non-Commercial keyrdquo 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

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

13

6 Deployment Structure

To write your own Java Servlets program using Tomcat 4127 you need to

1 Successfully install Tomcat 4127 on your machine

2 Go to $CATALINA_HOMEwebappsexamples 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_INFclasses folder So the

path of your Servlets file is httpserver_nameportexamplesservletyour_servlet_name

5 Add appropriate sections to the WEB-INFwebxml file as in

ltservletgt

ltservlet-namegtajax_flickrltservlet-namegt

ltdisplay-namegtAJAX Flickrltdisplay-namegt

ltservlet-classgtAJAXFlickrltservlet-classgt

ltservletgt

ltservlet-mappinggt

ltservlet-namegtajax_flickrltservlet-namegt

lturl-patterngtservletajax_flickrlturl-patterngt

ltservlet-mappinggt

6 To avoid UTFDataFormatException during file IO operation you have to use

JDK 13 or later for Tomcat In the cshrc file under your home directory add

the entries

setenv JAVA_HOME usrj2se

setenv PATH usrj2sebin$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 ldquojakarta-tomcat-4127commonlibservletjarrdquo to your

CLASSPATH variable and use the variable with the ndashclasspath switch of the

javac compiler

8 Then run ldquosource cshrcrdquo 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 JavaScriptHTML 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

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 userrsquos 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 httpgeocoderus

According to its Terms and Conditions located at httpgeocoderustermsshtml

Free data services are provided from sources in the public domain or under licenses that

do not prohibit their open redistribution by us eg 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 httpgeocoderushelp

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

httpgeocoderusservicerestaddress=601+Crest+Drive+Manhattan+Beach+CA

the service returns the following XML response

ltxml version=10gt

ltrdfRDF xmlnsdc=httppurlorgdcelements11

xmlnsgeo=httpwwww3org200301geowgs84_pos

xmlnsrdf=httpwwww3org19990222-rdf-syntax-nsgt

ltgeoPoint rdfnodeID=aid95727847gt

ltdcdescriptiongt601 N Crest Dr Manhattan Beach CA

90266ltdcdescriptiongt

ltgeolonggt-118407308ltgeolonggt

ltgeolatgt33881214ltgeolatgt

ltgeoPointgt

ltrdfRDFgt

Please note that if you use this mechanism the original input must be a complete address

ie 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)

Page 10: Assignment #4 XML Parser

10

5 Prerequisites

This homework requires the use of the following components

1 A servlet-based web server Tomcat 4127 Instructions on how to load Tomcat

4127 can be found here httpwww-

scfuscedu~csci5712006Springtomcatinstallhtml A tar version of Tomcat

4127 can be found here httpwww-scfuscedu~csci571downloadjakarta-

tomcat-4127tar

2 The Java Servlet library which has functionality similar to Perlrsquos 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 10 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

httpwwwjdomorg You may also use JAXP the Java API for XML Parsing

version 11 included in the Java JDK 14 (import javaxxmlparsers) and

documented at httpjavasuncomxmljaxpdist11docsapi A good tutorial on

JAXP is available at httpwww-106ibmcomdeveloperworksxmllibraryx-

jaxp1html

4 You need to create a Facebook Platform application as documented at

httpwikidevelopersfacebookcomindexphpCreating_your_first_application

Submitting_Your_Application_to_the_Facebook_Application_Directory To do

that you will need to Add the Facebook Developer application go to

httpwwwfacebookcomdevelopers and click Add Developer Once youve

added the Facebook Developer application to your account you can begin

creating your application for Facebook See the sections ldquoCreating Your

Facebook Applicationrdquo and ldquoConfiguring Basic Settingsrdquo 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

11

5 You need to obtain a Flickr Service API key You can sign up for your private

Flickr API Key at httpwwwflickrcomservicesapiauthhowtowebhtml You

should perform steps ldquo1 Obtain an API Keyrdquo and ldquo2 Configure your Keyrdquo You

may also have to create a Yahoo ID account if you have not already done so You

should ldquoApply for a Non-Commercial keyrdquo 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

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

13

6 Deployment Structure

To write your own Java Servlets program using Tomcat 4127 you need to

1 Successfully install Tomcat 4127 on your machine

2 Go to $CATALINA_HOMEwebappsexamples 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_INFclasses folder So the

path of your Servlets file is httpserver_nameportexamplesservletyour_servlet_name

5 Add appropriate sections to the WEB-INFwebxml file as in

ltservletgt

ltservlet-namegtajax_flickrltservlet-namegt

ltdisplay-namegtAJAX Flickrltdisplay-namegt

ltservlet-classgtAJAXFlickrltservlet-classgt

ltservletgt

ltservlet-mappinggt

ltservlet-namegtajax_flickrltservlet-namegt

lturl-patterngtservletajax_flickrlturl-patterngt

ltservlet-mappinggt

6 To avoid UTFDataFormatException during file IO operation you have to use

JDK 13 or later for Tomcat In the cshrc file under your home directory add

the entries

setenv JAVA_HOME usrj2se

setenv PATH usrj2sebin$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 ldquojakarta-tomcat-4127commonlibservletjarrdquo to your

CLASSPATH variable and use the variable with the ndashclasspath switch of the

javac compiler

8 Then run ldquosource cshrcrdquo 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 JavaScriptHTML 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

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 userrsquos 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 httpgeocoderus

According to its Terms and Conditions located at httpgeocoderustermsshtml

Free data services are provided from sources in the public domain or under licenses that

do not prohibit their open redistribution by us eg 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 httpgeocoderushelp

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

httpgeocoderusservicerestaddress=601+Crest+Drive+Manhattan+Beach+CA

the service returns the following XML response

ltxml version=10gt

ltrdfRDF xmlnsdc=httppurlorgdcelements11

xmlnsgeo=httpwwww3org200301geowgs84_pos

xmlnsrdf=httpwwww3org19990222-rdf-syntax-nsgt

ltgeoPoint rdfnodeID=aid95727847gt

ltdcdescriptiongt601 N Crest Dr Manhattan Beach CA

90266ltdcdescriptiongt

ltgeolonggt-118407308ltgeolonggt

ltgeolatgt33881214ltgeolatgt

ltgeoPointgt

ltrdfRDFgt

Please note that if you use this mechanism the original input must be a complete address

ie 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)

Page 11: Assignment #4 XML Parser

11

5 You need to obtain a Flickr Service API key You can sign up for your private

Flickr API Key at httpwwwflickrcomservicesapiauthhowtowebhtml You

should perform steps ldquo1 Obtain an API Keyrdquo and ldquo2 Configure your Keyrdquo You

may also have to create a Yahoo ID account if you have not already done so You

should ldquoApply for a Non-Commercial keyrdquo 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

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

13

6 Deployment Structure

To write your own Java Servlets program using Tomcat 4127 you need to

1 Successfully install Tomcat 4127 on your machine

2 Go to $CATALINA_HOMEwebappsexamples 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_INFclasses folder So the

path of your Servlets file is httpserver_nameportexamplesservletyour_servlet_name

5 Add appropriate sections to the WEB-INFwebxml file as in

ltservletgt

ltservlet-namegtajax_flickrltservlet-namegt

ltdisplay-namegtAJAX Flickrltdisplay-namegt

ltservlet-classgtAJAXFlickrltservlet-classgt

ltservletgt

ltservlet-mappinggt

ltservlet-namegtajax_flickrltservlet-namegt

lturl-patterngtservletajax_flickrlturl-patterngt

ltservlet-mappinggt

6 To avoid UTFDataFormatException during file IO operation you have to use

JDK 13 or later for Tomcat In the cshrc file under your home directory add

the entries

setenv JAVA_HOME usrj2se

setenv PATH usrj2sebin$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 ldquojakarta-tomcat-4127commonlibservletjarrdquo to your

CLASSPATH variable and use the variable with the ndashclasspath switch of the

javac compiler

8 Then run ldquosource cshrcrdquo 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 JavaScriptHTML 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

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 userrsquos 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 httpgeocoderus

According to its Terms and Conditions located at httpgeocoderustermsshtml

Free data services are provided from sources in the public domain or under licenses that

do not prohibit their open redistribution by us eg 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 httpgeocoderushelp

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

httpgeocoderusservicerestaddress=601+Crest+Drive+Manhattan+Beach+CA

the service returns the following XML response

ltxml version=10gt

ltrdfRDF xmlnsdc=httppurlorgdcelements11

xmlnsgeo=httpwwww3org200301geowgs84_pos

xmlnsrdf=httpwwww3org19990222-rdf-syntax-nsgt

ltgeoPoint rdfnodeID=aid95727847gt

ltdcdescriptiongt601 N Crest Dr Manhattan Beach CA

90266ltdcdescriptiongt

ltgeolonggt-118407308ltgeolonggt

ltgeolatgt33881214ltgeolatgt

ltgeoPointgt

ltrdfRDFgt

Please note that if you use this mechanism the original input must be a complete address

ie 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)

Page 12: Assignment #4 XML Parser

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

13

6 Deployment Structure

To write your own Java Servlets program using Tomcat 4127 you need to

1 Successfully install Tomcat 4127 on your machine

2 Go to $CATALINA_HOMEwebappsexamples 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_INFclasses folder So the

path of your Servlets file is httpserver_nameportexamplesservletyour_servlet_name

5 Add appropriate sections to the WEB-INFwebxml file as in

ltservletgt

ltservlet-namegtajax_flickrltservlet-namegt

ltdisplay-namegtAJAX Flickrltdisplay-namegt

ltservlet-classgtAJAXFlickrltservlet-classgt

ltservletgt

ltservlet-mappinggt

ltservlet-namegtajax_flickrltservlet-namegt

lturl-patterngtservletajax_flickrlturl-patterngt

ltservlet-mappinggt

6 To avoid UTFDataFormatException during file IO operation you have to use

JDK 13 or later for Tomcat In the cshrc file under your home directory add

the entries

setenv JAVA_HOME usrj2se

setenv PATH usrj2sebin$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 ldquojakarta-tomcat-4127commonlibservletjarrdquo to your

CLASSPATH variable and use the variable with the ndashclasspath switch of the

javac compiler

8 Then run ldquosource cshrcrdquo 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 JavaScriptHTML 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

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 userrsquos 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 httpgeocoderus

According to its Terms and Conditions located at httpgeocoderustermsshtml

Free data services are provided from sources in the public domain or under licenses that

do not prohibit their open redistribution by us eg 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 httpgeocoderushelp

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

httpgeocoderusservicerestaddress=601+Crest+Drive+Manhattan+Beach+CA

the service returns the following XML response

ltxml version=10gt

ltrdfRDF xmlnsdc=httppurlorgdcelements11

xmlnsgeo=httpwwww3org200301geowgs84_pos

xmlnsrdf=httpwwww3org19990222-rdf-syntax-nsgt

ltgeoPoint rdfnodeID=aid95727847gt

ltdcdescriptiongt601 N Crest Dr Manhattan Beach CA

90266ltdcdescriptiongt

ltgeolonggt-118407308ltgeolonggt

ltgeolatgt33881214ltgeolatgt

ltgeoPointgt

ltrdfRDFgt

Please note that if you use this mechanism the original input must be a complete address

ie 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)

Page 13: Assignment #4 XML Parser

13

6 Deployment Structure

To write your own Java Servlets program using Tomcat 4127 you need to

1 Successfully install Tomcat 4127 on your machine

2 Go to $CATALINA_HOMEwebappsexamples 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_INFclasses folder So the

path of your Servlets file is httpserver_nameportexamplesservletyour_servlet_name

5 Add appropriate sections to the WEB-INFwebxml file as in

ltservletgt

ltservlet-namegtajax_flickrltservlet-namegt

ltdisplay-namegtAJAX Flickrltdisplay-namegt

ltservlet-classgtAJAXFlickrltservlet-classgt

ltservletgt

ltservlet-mappinggt

ltservlet-namegtajax_flickrltservlet-namegt

lturl-patterngtservletajax_flickrlturl-patterngt

ltservlet-mappinggt

6 To avoid UTFDataFormatException during file IO operation you have to use

JDK 13 or later for Tomcat In the cshrc file under your home directory add

the entries

setenv JAVA_HOME usrj2se

setenv PATH usrj2sebin$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 ldquojakarta-tomcat-4127commonlibservletjarrdquo to your

CLASSPATH variable and use the variable with the ndashclasspath switch of the

javac compiler

8 Then run ldquosource cshrcrdquo 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 JavaScriptHTML 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

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 userrsquos 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 httpgeocoderus

According to its Terms and Conditions located at httpgeocoderustermsshtml

Free data services are provided from sources in the public domain or under licenses that

do not prohibit their open redistribution by us eg 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 httpgeocoderushelp

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

httpgeocoderusservicerestaddress=601+Crest+Drive+Manhattan+Beach+CA

the service returns the following XML response

ltxml version=10gt

ltrdfRDF xmlnsdc=httppurlorgdcelements11

xmlnsgeo=httpwwww3org200301geowgs84_pos

xmlnsrdf=httpwwww3org19990222-rdf-syntax-nsgt

ltgeoPoint rdfnodeID=aid95727847gt

ltdcdescriptiongt601 N Crest Dr Manhattan Beach CA

90266ltdcdescriptiongt

ltgeolonggt-118407308ltgeolonggt

ltgeolatgt33881214ltgeolatgt

ltgeoPointgt

ltrdfRDFgt

Please note that if you use this mechanism the original input must be a complete address

ie 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)

Page 14: Assignment #4 XML Parser

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 userrsquos 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 httpgeocoderus

According to its Terms and Conditions located at httpgeocoderustermsshtml

Free data services are provided from sources in the public domain or under licenses that

do not prohibit their open redistribution by us eg 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 httpgeocoderushelp

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

httpgeocoderusservicerestaddress=601+Crest+Drive+Manhattan+Beach+CA

the service returns the following XML response

ltxml version=10gt

ltrdfRDF xmlnsdc=httppurlorgdcelements11

xmlnsgeo=httpwwww3org200301geowgs84_pos

xmlnsrdf=httpwwww3org19990222-rdf-syntax-nsgt

ltgeoPoint rdfnodeID=aid95727847gt

ltdcdescriptiongt601 N Crest Dr Manhattan Beach CA

90266ltdcdescriptiongt

ltgeolonggt-118407308ltgeolonggt

ltgeolatgt33881214ltgeolatgt

ltgeoPointgt

ltrdfRDFgt

Please note that if you use this mechanism the original input must be a complete address

ie 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)