1. Grid Operations Center Infrastructure Team Soichi Hayashi, Arvind Gopu

2.  About Us  What is DivRep?  What problem does it solve?  Demo (OIM)  Using DivRep  Q/A

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

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

5.  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 – 3 rd 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)

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

8.  Installation  Using Common Components  Application Structure  DivRep Life Cycle  HelloWorld  DivRep ID  Event Handling  Redraw()  DivRep on JSP

9. 1. Create a default Dynamic (J2EE) web application project 2. Download the latest divrep.jar and commons-lang-2.4.jar from http://divrep.googlecode.com/files and place it under /WebContent/WEB- INF/lib http://divrep.googlecode.com/files 3. Add divrep.jar to the project build path 4. Add Servlet Definition for DivRep to web.xml DivRepServlet com.webif.divrep.DivRepServlet DivRepServlet /divrep

10.  Button  Link  Image Button  Text Box  Text Area  Check Box  Select Box (Can be Grouped)  High-level components  Toggler, Form, Contact Editor, etc..

11. 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 redirects super(_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 called protected Boolean doSubmit() { //Do sometihng with the value alert("Thank you, " + name.getValue()); //return false to stay on the form return 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 redirects super(_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 called protected Boolean doSubmit() { //Do sometihng with the value alert("Thank you, " + name.getValue()); //return false to stay on the form return false; }

12. JFrameJPanelJTreeComponent JMenuBarComponentJListComponent JPanelComponent DivRepRoot DivRep Page DivRep Page DivRep  DivRep component is organized in a tree structure similar to traditional GUI applications Swing DivRep

13. User Opens Page User Opens Page Initialize DivRep PageRoot doGet() terminates DivRepPage Root DivRep Component B DivRep Component B DivRep Component A DivRep Component A Updated Content Updated Content User receives updated content on browser User Interact with DivRep Component A Time Line Container Session Servlet doGet() Render page and DivRep Roots DivRep Servlet

16. Content Content public void render(PrintWriter out) { out.write(" "); out.write(" Content "); out.write(" "); } public void render(PrintWriter out) { out.write(" "); out.write(" Content "); out.write(" "); }

17. Handle event from my own component

18. Handle event that happens on other DivRep component

19. 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(" "); out.write(" You have clicked me " + counter + " times "); out.write(" "); } 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(" "); out.write(" You have clicked me " + counter + " times "); out.write(" "); } protected void onEvent(DivRepEvent e) { counter++; redraw(); } Event Handler can call redraw() on itself, or on different DivRep component to redraw its content.

20. <%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%> DivRep on JSP <% 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); %> <%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%> DivRep on JSP <% 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); %>

21.  Make less memory intensive  More native components & make the more responsive  Make it enterprise ready

22.  For more info…  http://code.google.com/p/divrep/  Feel free to contact me at…  (Email) hayashis@indiana.edu  (IM) soichih@GTalk