Computational Thermodynamics

aniseedsplashΛογισμικό & κατασκευή λογ/κού

15 Αυγ 2012 (πριν από 5 χρόνια και 2 μήνες)

320 εμφανίσεις

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


A
synchronous
J
avaScript
A
nd
X
ML


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


http://www.netbeans.org/


Download and install the
complete package (“All”)


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)


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)


http://getfirebug.com/



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


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


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!

!2
n
n
n n
e

 

 
 

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



1
1
2
2
1
( 1) 2
2
n
n g
g
n n g e A n


 
  
 
 
 
    
 
 


0
0
N
k
g
k
c
A n c
n k

 



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