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) hayashis@indiana.edu (IM) soichih@GTalk