Transcript
Page 1: Christopher Paolini Computational Science Research Center College of Engineering San Diego State University Computational Science 670 Fall 2009 Monday

Christopher PaoliniComputational Science Research Center

College of EngineeringSan Diego State University

Computational Science 670Computational Science 670Fall 2009Fall 2009Monday October 26, 2009 · GMCS 350 · 2:00 PM - 2:50 PMMonday October 26, 2009 · GMCS 350 · 2:00 PM - 2:50 PM

Page 2: Christopher Paolini Computational Science Research Center College of Engineering San Diego State University Computational Science 670 Fall 2009 Monday
Page 3: Christopher Paolini Computational Science Research Center College of Engineering San Diego State University Computational Science 670 Fall 2009 Monday

Asynchronous JavaScript And XML Use of dynamic, rather then static HTML Use of CSS to define the view or the

application’s “look and feel” Use of JavaScript or ActionScript (Adobe

Flash) to define the application’s controller Use of the XMLHttpRequest (XHR) object to

asynchronously send an HTTP request to a web server and store or render the response data in the browser using Web Services

Page 4: Christopher Paolini Computational Science Research Center College of Engineering San Diego State University Computational Science 670 Fall 2009 Monday

Responsiveness – web applications are more responsive because only the data that needs to be updated is transmitted from the server to the client browser, rather than an entire page of HTML

Interactivity - applications are more interactive because requests for data are made asynchronously and are hence non-blocking

These two advantages allow developers to create browser based applications that function like standalone desktop applications.

Page 5: Christopher Paolini Computational Science Research Center College of Engineering San Diego State University Computational Science 670 Fall 2009 Monday

Simplest computational example is a web application that takes operand values as user input, invokes an arithmetic operation on the server, and displays a result in the browser (Demo)

Page 6: Christopher Paolini Computational Science Research Center College of Engineering San Diego State University Computational Science 670 Fall 2009 Monday

A “Mashup” is a web application that retrieves and presents data from two or more remote sources

Last two factorial buttons invoke a Web Service on different hosts

Page 7: Christopher Paolini Computational Science Research Center College of Engineering San Diego State University Computational Science 670 Fall 2009 Monday

Get started by downloading and installing a suitable IDE

Netbeans is recommended http://www.netbeans.org/ Download and install the

complete package (“All”)

Page 8: Christopher Paolini Computational Science Research Center College of Engineering San Diego State University Computational Science 670 Fall 2009 Monday

Download the example Arithmetic web application and the two factorial Web Services

http://co2seq.sdsu.edu/ Unzip and open these

three web applications as Netbeans Projects

Your Netbeans session should resemble the image shown here

(Demo)

Page 9: Christopher Paolini Computational Science Research Center College of Engineering San Diego State University Computational Science 670 Fall 2009 Monday

In Netbeans, Web content resides in a project’s Web Pages directory (Demo)

In an AJAX based application, the root application document index.html (or index.jsp) transports JavaScript and CSS, not HTML content

• No HTML body content (body element contains no content).• Content will be generated dynamically using JavaScript

Page 10: Christopher Paolini Computational Science Research Center College of Engineering San Diego State University Computational Science 670 Fall 2009 Monday

Convention: create a Main.js file that defines code to execute on initial page load Include this file last in the root document’s head element

Main.js should define the window.onload function which is executed once all the scripts in the head element have been loaded

Our example invokes the render() method of a Desktop object defined by the Desktop class in Desktop.js

Page 11: Christopher Paolini Computational Science Research Center College of Engineering San Diego State University Computational Science 670 Fall 2009 Monday

The Desktop class provides methods that render the application’s interface

Interface consists of◦ Buttons to invoke Web

Service operations◦ Text Entry Boxes where

the user specifies operand values

◦ Text Divisions to dynamically display textual content

Page 12: Christopher Paolini Computational Science Research Center College of Engineering San Diego State University Computational Science 670 Fall 2009 Monday

Starts by creating three major divisions: a title panel, main panel, and a message panel

Then renders all the button widgets that will be needed

Look & feel controlled by CSS rules

Page 13: Christopher Paolini Computational Science Research Center College of Engineering San Diego State University Computational Science 670 Fall 2009 Monday

Use division elements to place text and widgets at specific locations within the page

Verify your desired look by opening the page locally using a file:// URL and inspecting with Firebug (Demo)

http://getfirebug.com/

Page 14: Christopher Paolini Computational Science Research Center College of Engineering San Diego State University Computational Science 670 Fall 2009 Monday

Place buttons within logical division panels Verify your desired look locally using Firebug (Demo) Each button has an unique identifier in the variable space of

JavaScript called the Document Object Model (DOM) ID You use this ID to refer to a particular rendered element Each button also has a value which is the text that appears within

the button’s bounding box The browser immediately renders a button when the button is

appended to it’s parent division element using appendChild()

Page 15: Christopher Paolini Computational Science Research Center College of Engineering San Diego State University Computational Science 670 Fall 2009 Monday

Render text by setting the innerHTML member of a division element Render text using a child division element and attach the child to a

parent division

Use CSS rules to modify the look of the rendered text On our example application, two blue divisions of small font text are

used to label the bottom two factorial buttons:

Use CSS to define the look of these two text divisions through the element id selector

Page 16: Christopher Paolini Computational Science Research Center College of Engineering San Diego State University Computational Science 670 Fall 2009 Monday

Text entry boxes are used to capture user input Render all the input boxes together and control their look using CSS

Page 17: Christopher Paolini Computational Science Research Center College of Engineering San Diego State University Computational Science 670 Fall 2009 Monday

After all widgets have been rendered, use the bind() method to bind an event handler or callback function to a given context 

Set the onclick function of each button element to be an event handler and pass a reference to this Desktopobject to the handler when the button is pressed

Page 18: Christopher Paolini Computational Science Research Center College of Engineering San Diego State University Computational Science 670 Fall 2009 Monday

Each event handler retrieves the current text in the appropriate one (or two) text entry boxes and uses a proxy object to invoke a remote Web Service operation

The ArithmeticProxy object uses an XMLHttpRequest (XHR) object to asynchronously send an HTTP request to the co2seq.sdsu.edu server and render the response in a division element using the renderText() method

Arguments are curried for the callback by bind()

Page 19: Christopher Paolini Computational Science Research Center College of Engineering San Diego State University Computational Science 670 Fall 2009 Monday

The purpose of the proxy object is to read a variable number of actual arguments, construct a SOAP Request Message, send the SOAP to thepeer server, wait for a SOAP Response Message, and process the response

In our case, processing a response is nothing more than extracting a numeric answer from an XML document and rendering the answer in a division element

Page 20: Christopher Paolini Computational Science Research Center College of Engineering San Diego State University Computational Science 670 Fall 2009 Monday

The Simple Object Access Protocol (SOAP) is used to send structured messages between the browser and server

XML is used as the message format

The SOAP Request Body element contains a method name and a namespace definition which is mapped to method add() in Java class Arithmetic

The SOAP request carries operand values in a structured way

The SOAP response contains the operation’s return value

Page 21: Christopher Paolini Computational Science Research Center College of Engineering San Diego State University Computational Science 670 Fall 2009 Monday

When the XHR object changes state, the proxy’s _handleHttpResponse() method is invoked automatically

When the SOAP response handler extracts the <return> element content (i.e. the answer), the designated higher level call back method is invoked using the JavaScript call() function

callbackData is any arbitrary object you wish to pass back to the higher level callback method

In our case, it is the string ‘Sum’ which is the element ID of a division element rendered to hold the answer

Page 22: Christopher Paolini Computational Science Research Center College of Engineering San Diego State University Computational Science 670 Fall 2009 Monday

The actual server side code is written in Java and is encapsulated in a class that defines the remote Web Service operations exposed to clients through SOAP request messages

Notice the Arithmetic class includes it’s own (private – not exposed) invoke() method. Can you guess why?

Page 23: Christopher Paolini Computational Science Research Center College of Engineering San Diego State University Computational Science 670 Fall 2009 Monday

A Web Service is a Java class that has been declared with an @WebService annotation

Exposed Web Service operations are public methods declared with an @WebMethod annotation. Arguments to operations must also be annotated using @WebParam. The WebParam name in the SOAP request message gets mapped to a formal parameter name.

Page 24: Christopher Paolini Computational Science Research Center College of Engineering San Diego State University Computational Science 670 Fall 2009 Monday

There are many techniques used to create mashups, but perhaps the simplest technique is to have one Web Service operation act as a proxy for another Web Service operation

Consider the definition of the stirlingFactorial operation

Here, the Arithmetic Web Service on host co2seq.sdsu.edu acts as a client, much like the browser does, and invokes a Web Service operation on host test.sdsu.edu. The result from test.sdsu.edu is returned to the browser.

Page 25: Christopher Paolini Computational Science Research Center College of Engineering San Diego State University Computational Science 670 Fall 2009 Monday

The JAVA Dynamic Dispatch Invocation API is used to implement WS-WS communication.

AccessURI defines the location of the remote WS

Page 26: Christopher Paolini Computational Science Research Center College of Engineering San Diego State University Computational Science 670 Fall 2009 Monday

Web Service deployed on host test.sdsu.edu that implements Stirling’s approximation for n!

! 2n

nn n

e

Page 27: Christopher Paolini Computational Science Research Center College of Engineering San Diego State University Computational Science 670 Fall 2009 Monday

Web Service deployed on host romulus.sdsu.edu implements Lanczos’ approximation

1

12

21( 1) 2

2

nn g

gn n g e A n

00

Nk

gk

cA n c

n k

Page 28: Christopher Paolini Computational Science Research Center College of Engineering San Diego State University Computational Science 670 Fall 2009 Monday

User can input a value in a webpage, click a button, and have a computation performed on multiple hosts

Computation on co2seq.sdsu.ed

u

Computation on romulus.sdsu.ed

u

Computation on test.sdsu.edu

Page 29: Christopher Paolini Computational Science Research Center College of Engineering San Diego State University Computational Science 670 Fall 2009 Monday

The JavaScript in Desktop.js can be made more compact by using arrays and iterators

Example:

The above code can be condensed by storing element id’s in an array and iterating over the array to render text divisions

Modify Desktop.js to use arrays and iterators. Consult http://api.prototypejs.org/ and study the Prototype Array class (hint: use Array#each)

Page 30: Christopher Paolini Computational Science Research Center College of Engineering San Diego State University Computational Science 670 Fall 2009 Monday

Modify Desktop.js and Arithmetic.java to include another simple function that accepts one operand (sqrt, sin, cos, tan, log, exp, etc.) and executes on the browser’s peer host

Then add a multivariable function that takes two or more operands (atan2(x,y), hypot(x, y), pow(x, y), J(α,x,k), etc.) and executes on a remote host

Page 31: Christopher Paolini Computational Science Research Center College of Engineering San Diego State University Computational Science 670 Fall 2009 Monday

Implement a Web Service that returns the CPU load of the local host

Deploy the CPU load Web Service on three or more hosts Write another Web Service that performs a significant

computation Deploy the computation Web Service on the same three or more

hosts Create a mashup that allows a user to invoke the computational

Web Service on the host with the least load (i.e. the mashup performs simple load balancing across multiple hosts).


Top Related