christopher paolini computational science research center college of engineering san diego state...
Post on 11-Jan-2016
Embed Size (px)
Christopher PaoliniComputational Science Research CenterCollege of EngineeringSan Diego State UniversityComputational Science 670Fall 2009Monday October 26, 2009 GMCS 350 2:00 PM - 2:50 PM
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 HTMLInteractivity - applications are more interactive because requests for data are made asynchronously and are hence non-blockingThese two advantages allow developers to create browser based applications that function like standalone desktop applications.
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)
A Mashup is a web application that retrieves and presents data from two or more remote sourcesLast two factorial buttons invoke a Web Service on different hosts
Get started by downloading and installing a suitable IDENetbeans is recommendedhttp://www.netbeans.org/Download and install the complete package (All)
Download the example Arithmetic web application and the two factorial Web Serviceshttp://co2seq.sdsu.edu/Unzip and open these three web applications as Netbeans ProjectsYour Netbeans session should resemble the image shown here(Demo)
Convention: create a Main.js file that defines code to execute on initial page loadInclude this file last in the root documents 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
The Desktop class provides methods that render the applications interfaceInterface consists ofButtons to invoke Web Service operationsText Entry Boxes where the user specifies operand valuesText Divisions to dynamically display textual content
Starts by creating three major divisions: a title panel, main panel, and a message panelThen renders all the button widgets that will be needed Look & feel controlled by CSS rules
Use division elements to place text and widgets at specific locations within the pageVerify your desired look by opening the page locally using a file:// URL and inspecting with Firebug (Demo)http://getfirebug.com/
Render text by setting the innerHTML member of a division elementRender text using a child division element and attach the child to a parent division
Use CSS rules to modify the look of the rendered textOn 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
Text entry boxes are used to capture user inputRender all the input boxes together and control their look using CSS
After all widgets have been rendered, use the bind() method to bind an event handler or callback function to a givencontext
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
Each event handler retrieves the current text in the appropriate one (or two) text entry boxesand 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()
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
The Simple Object Access Protocol (SOAP) is used to send structured messages between the browser and serverXML is used as the message formatThe SOAP Request Body element contains a method name and a namespace definition which is mapped to method add() in Java class ArithmeticThe SOAP request carries operand values in a structured wayThe SOAP response contains the operations return value
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 messagesNotice the Arithmetic class includes its own (private not exposed) invoke() method. Can you guess why?
A Web Service is a Java class that has been declared with an @WebService annotationExposed 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.
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 operationConsider the definition of the stirlingFactorial operationHere, 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.
The JAVA Dynamic Dispatch Invocation API is used to implement WS-WS communication. AccessURI defines the location of the remote WS
Web Service deployed on host test.sdsu.edu that implements Stirlings approximation for n!
Web Service deployed on host romulus.sdsu.edu implements Lanczos approximation
User can input a value in a webpage, click a button, and have a computation performed on multiple hosts Computation on co2seq.sdsu.eduComputation on romulus.sdsu.eduComputation on test.sdsu.edu
The above code can be condensed by storing element ids in an array and iterating over the array to render text divisionsModify Desktop.js to use arrays and iterators. Consult http://api.prototypejs.org/ and study the Prototype Array class (hint: use Array#each)
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 browsers peer hostThen 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
Implement a Web Service that returns the CPU load of the local host Deploy the CPU load Web Service on three or more hostsWrite another Web Service that performs a significant computationDeploy the computation Web Service on the same three or more hostsCreate 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).
* To implement the form shown in the browser, about 200 lines of HTML are required This entire document would be passed back to the browser from the web server each time the user submits a form by clicking one of the buttons. The entire page is then redrawn by the browser, even though just one small area needs to be updated after each button press Inefficient and unresponsive (user must stop and wait for the answer each time the button is pressed (inherently a synchronous operation) Seeing the page refresh is not aesthetically pleasing its not the behavior a standalone desktop application would exhibit.