Christopher Paolini Computational Science Research Center College of Engineering San Diego State University Computational Science 670 Fall 2009 Monday October 26, 2009 · GMCS 350 · 2:00 PM - 2:50 PM

 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

 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.

 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 sources  Last two factorial buttons invoke a Web Service on different hosts

 Get started by downloading and installing a suitable IDE  Netbeans is recommended   Download and install the complete package (“All”)

 Download the example Arithmetic web application and the two factorial Web Services   Unzip and open these three web applications as Netbeans Projects  Your Netbeans session should resemble the image shown here  (Demo)

 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

 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

 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

 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

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

 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()

 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

 Text entry boxes are used to capture user input  Render 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 given context Set the onclick function of each button element to be an event handler and pass a reference to this Desktop object to the handler when the button is pressed

 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()

 The purpose of the proxy object is to read a variable number of actual arguments, construct a SOAP Request Message, send the SOAP to the peer 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 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

 When the XHR object changes state, the proxy’s _handleHttpResponse() method is invoked automatically  When the SOAP response handler extracts the 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

 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?

 A Web Service is a Java class that has been declared with annotation  Exposed Web Service operations are public methods declared with annotation. Arguments to operations must also be annotated 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 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.

 The JAVA Dynamic Dispatch Invocation API is used to implement WS-WS communicati on.  AccessURI defines the location of the remote WS

 Web Service deployed on host test.sdsu.edu that implements Stirling’s 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.edu Computation on romulus.sdsu.edu Computation on test.sdsu.edu

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

 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).