Upload
milton-rich
View
215
Download
0
Tags:
Embed Size (px)
Citation preview
Grid Operations CenterInfrastructure TeamSoichi Hayashi, Arvind Gopu
About Us What is DivRep? What problem does it solve? Demo (OIM) Using DivRep Q/A
Open Science Grid (OSG) Aims to promote discovery and collaboration in data-
intensive research by providing a computing facility and services that integrate distributed, reliable and shared resources to support computation at all scales.
Grid Operations Center (GOC) Provides a single point of operational support for the
Open Science Grid. The Grid Operations Center performs real time Grid monitoring and problem tracking, provides support to users, developers and systems administrators, maintains grid services, provides security incident response, and maintains information repositories.
Web Application Framework Simple Java servlet-based web framework Developed by GOC and currently used by one of our key
application Event Passing / Div Replacement
Client passes events to server Server process the events Tell browser what part of page to update (replace)
No client / server separation Both Client and server code runs on server (as DivRep
component) What you see on browser is a proxy of the server state
No Javascripting Both server and the client code in plain Java Without any special recompilations steps
Easy to develop, debug, and maintain Everything can be written in 100% plain Java (almost.. ) User interaction can be debug/profiled just like a plain Java application
Simpler Code – inherently more secure Less risk of XSS – 3rd party user cannot invoke DivRep code Client / Server validation is replaced by a single validation
For Rich / Interactive web applications As easy as writing command line apps, or simple GUI
applications. Can create rich web applications like Facebook, Gmail, etc.
jQuery for plumbing Used to allow communication between client & server (Not absolutely necessary, and we may remove it in the future)
Agile / Functional Someone with a few years of Java programming, or shell scripting
experience can start writing a DivRep application or maintain existing code … in matter of hours (not days)
People just want to get things done A large collection of simple components can be better understood
than a single complex component
Framework Boundaries (Native App / Static Web Page / Flash) Most frameworks are either too rich or too thin
Too rich: Force web application to behave like a native application Too thin: Framework that is focused too much on business logic.
DivRep allows optimal level of user interaction Add functionality that matters most With smallest possible learning / development
Installation Using Common Components Application Structure DivRep Life Cycle HelloWorld DivRep ID Event Handling Redraw() DivRep on JSP
Button Link Image Button Text Box Text Area Check Box Select Box (Can be Grouped) High-level components
Toggler, Form, Contact Editor, etc..
class Form extends DivRepForm{
DivRepTextBox name;DivRepTextBox tel;
public Form(DivRep _parent) {//Second argument is the return address of this form//after user hit submit (sucessfully) or cancel the form, this is where browser redirectssuper(_parent, "http://www.iu.edu");
name = new DivRepTextBox(this);name.setLabel("Full Name");name.setSampleValue("Soichi Hayashi");name.setRequired(true);
tel = new DivRepTextBox(this);tel.setLabel("Telephone Number");tel.setSampleValue("222-333-4444");tel.addEventListener(new TelephoneNumberFormatterEventListener());
}
//When user clicks submit and if the form passes validations, this function will be calledprotected Boolean doSubmit() {
//Do sometihng with the valuealert("Thank you, " + name.getValue());
//return false to stay on the formreturn false;
}}
class Form extends DivRepForm{
DivRepTextBox name;DivRepTextBox tel;
public Form(DivRep _parent) {//Second argument is the return address of this form//after user hit submit (sucessfully) or cancel the form, this is where browser redirectssuper(_parent, "http://www.iu.edu");
name = new DivRepTextBox(this);name.setLabel("Full Name");name.setSampleValue("Soichi Hayashi");name.setRequired(true);
tel = new DivRepTextBox(this);tel.setLabel("Telephone Number");tel.setSampleValue("222-333-4444");tel.addEventListener(new TelephoneNumberFormatterEventListener());
}
//When user clicks submit and if the form passes validations, this function will be calledprotected Boolean doSubmit() {
//Do sometihng with the valuealert("Thank you, " + name.getValue());
//return false to stay on the formreturn false;
}}
DivRep component is organized in a tree structure similar to traditional GUI applications
Swing DivRep
User Opens Page
User Opens Page
Initialize DivRep PageRoot
Initialize DivRep PageRoot
doGet() terminatesdoGet() terminates
DivRepPageRoot
DivRepPageRoot
DivRepComponen
t B
DivRepComponen
t B
DivRepComponen
t A
DivRepComponen
t A
Updated
Content
Updated
Content
User receives updated content on browser
User receives updated content on browser
User Interact with DivRep Component A
User Interact with DivRep Component A
Time Line
Container Session
Servlet doGet()
Render page and DivRep Roots
Render page and DivRep Roots
DivRep ServletDivRep Servlet
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException
{
PrintWriter out = response.getWriter();
out.write("<html><head>");
//Load DivRep / Jquery Javascript
out.write("<script type=\"text/javascript\" src=\"http://divrep.googlecode.com/files/divrep.js\"></script>");
out.write("<script type=\"text/javascript\" src=\"http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js\"></script>");
out.write("</head><body>");
//Initialize pageroot
DivRepPage pageroot = DivRepRoot.initPageRoot(request);
HelloWorld hello = new HelloWorld(pageroot);
hello.render(out);
out.write(“</body></html>");}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException
{
PrintWriter out = response.getWriter();
out.write("<html><head>");
//Load DivRep / Jquery Javascript
out.write("<script type=\"text/javascript\" src=\"http://divrep.googlecode.com/files/divrep.js\"></script>");
out.write("<script type=\"text/javascript\" src=\"http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js\"></script>");
out.write("</head><body>");
//Initialize pageroot
DivRepPage pageroot = DivRepRoot.initPageRoot(request);
HelloWorld hello = new HelloWorld(pageroot);
hello.render(out);
out.write(“</body></html>");}
class HelloWorld extends DivRep{
public HelloWorld(DivRep _parent) {
super(_parent);
}
public void render(PrintWriter out) {
out.write("<div id=\""+getNodeID()+"\“>");
out.write("<h2>Hello World</h2>");
out.write("</div>");
}
protected void onEvent(DivRepEvent e) {
} }
class HelloWorld extends DivRep{
public HelloWorld(DivRep _parent) {
super(_parent);
}
public void render(PrintWriter out) {
out.write("<div id=\""+getNodeID()+"\“>");
out.write("<h2>Hello World</h2>");
out.write("</div>");
}
protected void onEvent(DivRepEvent e) {
} }
<div id=“divrep_1234”>
Content
</div>
<div id=“divrep_1234”>
Content
</div>
public void render(PrintWriter out) {out.write("<div id=\""+getNodeID()+"\“>");out.write("<h2>Content</h2>"); out.write("</div>");
}
public void render(PrintWriter out) {out.write("<div id=\""+getNodeID()+"\“>");out.write("<h2>Content</h2>"); out.write("</div>");
}
class HelloWorld extends DivRep{
public HelloWorld(DivRep _parent) {
super(_parent);
// TODO Auto-generated constructor stub
}
public void render(PrintWriter out) {
out.write("<div id=\""+getNodeID()+"\" onclick=\"divrep(this.id, event);\">");
out.write("<h2>Click Me</h2>");
out.write("</div>");
}
protected void onEvent(DivRepEvent e) {
alert("Clicked!");
} }
class HelloWorld extends DivRep{
public HelloWorld(DivRep _parent) {
super(_parent);
// TODO Auto-generated constructor stub
}
public void render(PrintWriter out) {
out.write("<div id=\""+getNodeID()+"\" onclick=\"divrep(this.id, event);\">");
out.write("<h2>Click Me</h2>");
out.write("</div>");
}
protected void onEvent(DivRepEvent e) {
alert("Clicked!");
} }
Handle event from my own component
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException
{PrintWriter out = response.getWriter();out.write("<html><head>");
//Load DivRep Stuffout.write("<script type=\"text/javascript\" src=\"divrep.js\"></script>");out.write("<script type=\"text/javascript\" src=\"http://jqueryjs.googlecode.com/files/jquery-
1.3.2.min.js\"></script>");
out.write("</head><body>");
//Initialize pagerootDivRepPage pageroot = DivRepRoot.initPageRoot(request);HelloWorld hello = new HelloWorld(pageroot);hello.addEventListener(
new DivRepEventListener() {public void handleEvent(DivRepEvent e) {
hello.alert("Clicked event caught by event listener!");}
} );
hello.render(out);out.write(“</body></html>");
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException
{PrintWriter out = response.getWriter();out.write("<html><head>");
//Load DivRep Stuffout.write("<script type=\"text/javascript\" src=\"divrep.js\"></script>");out.write("<script type=\"text/javascript\" src=\"http://jqueryjs.googlecode.com/files/jquery-
1.3.2.min.js\"></script>");
out.write("</head><body>");
//Initialize pagerootDivRepPage pageroot = DivRepRoot.initPageRoot(request);HelloWorld hello = new HelloWorld(pageroot);hello.addEventListener(
new DivRepEventListener() {public void handleEvent(DivRepEvent e) {
hello.alert("Clicked event caught by event listener!");}
} );
hello.render(out);out.write(“</body></html>");
}
Handle event that happens on other DivRep component
class HelloWorld extends DivRep{
int counter = 0;
public HelloWorld(DivRep _parent) {super(_parent);// TODO Auto-generated constructor stub
}
public void render(PrintWriter out) {out.write("<div id=\""+getNodeID()+"\" onclick=\"divrep(this.id);\">");out.write("<h2>You have clicked me " + counter + " times</h2>"); out.write("</div>");
}
protected void onEvent(DivRepEvent e) {counter++;redraw();
} }
class HelloWorld extends DivRep{
int counter = 0;
public HelloWorld(DivRep _parent) {super(_parent);// TODO Auto-generated constructor stub
}
public void render(PrintWriter out) {out.write("<div id=\""+getNodeID()+"\" onclick=\"divrep(this.id);\">");out.write("<h2>You have clicked me " + counter + " times</h2>"); out.write("</div>");
}
protected void onEvent(DivRepEvent e) {counter++;redraw();
} }
Event Handler can call redraw() on itself, or on different DivRep component to redraw its content.
<%@ page import="java.io.PrintWriter, com.webif.divrep.*, com.webif.divrep.common.*" %><%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"><title>DivRep on JSP</title>
<script type="text/javascript" src="http://divrep.googlecode.com/files/divrep.js"></script><link href="css/divrep.css" rel="stylesheet" type="text/css"/><link href="css/divrep.samples.css" rel="stylesheet" type="text/css"/><script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
</head><body>
<%DivRepPage pageroot = DivRepRoot.initPageRoot(request);PrintWriter writer = new PrintWriter(out);
final DivRepButton button = new DivRepButton(pageroot, "Click Me");button.addEventListener(new DivRepEventListener() {public void handleEvent(DivRepEvent e) {button.alert("Clicked via Event Listener!");}});button.render(writer);%></body></html>
<%@ page import="java.io.PrintWriter, com.webif.divrep.*, com.webif.divrep.common.*" %><%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"><title>DivRep on JSP</title>
<script type="text/javascript" src="http://divrep.googlecode.com/files/divrep.js"></script><link href="css/divrep.css" rel="stylesheet" type="text/css"/><link href="css/divrep.samples.css" rel="stylesheet" type="text/css"/><script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
</head><body>
<%DivRepPage pageroot = DivRepRoot.initPageRoot(request);PrintWriter writer = new PrintWriter(out);
final DivRepButton button = new DivRepButton(pageroot, "Click Me");button.addEventListener(new DivRepEventListener() {public void handleEvent(DivRepEvent e) {button.alert("Clicked via Event Listener!");}});button.render(writer);%></body></html>
Make less memory intensive More native components & make the more
responsive Make it enterprise ready
For more info… http://code.google.com/p/divrep/
Feel free to contact me at… (Email) [email protected] (IM) soichih@GTalk