christopher paolini computational science research center college of engineering san diego state...

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

Post on 11-Jan-2016

214 views

Category:

Documents

2 download

Embed Size (px)

TRANSCRIPT

  • Christopher PaoliniComputational Science Research CenterCollege of EngineeringSan Diego State UniversityComputational Science 670Fall 2009Monday October 26, 2009 GMCS 350 2:00 PM - 2:50 PM

  • Asynchronous JavaScript And XMLUse of dynamic, rather then static HTMLUse of CSS to define the view or the applications look and feelUse of JavaScript or ActionScript (Adobe Flash) to define the applications controllerUse 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 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)

  • In Netbeans, Web content resides in a projects 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 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/

  • Place buttons within logical division panelsVerify 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) IDYou use this ID to refer to a particular rendered elementEach button also has a value which is the text that appears within the buttons bounding boxThe browser immediately renders a button when the button is appended to its parent division element using appendChild()

  • 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

  • When the XHR object changes state, the proxys _handleHttpResponse() method is invoked automaticallyWhen 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() functioncallbackData is any arbitrary object you wish to pass back to the higher level callback methodIn 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 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 JavaScript in Desktop.js can be made more compact by using arrays and iteratorsExample:

    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.

    ** Explain what non-blocking means***** Script elements transport JavaScript files Prototype library facilitates object-oriented development. Scriptaculous library provides APIs for animation, drag-n-drop, and oth

Recommended

View more >