Download Developing Grid User Interface Components

Developing Grid User
Interface Components
Portlets, gadgets, etc.
Under the Hood: Building Components
 OGCE portlets use the Java COG Abstraction Layer to
access Grid services.
 Provides a buffer over different Grid toolkits and
versions.
 Provides ability to compose graph-based workflows.
 Tutorial in itself
 Portlets can be built with our Apache Velocity bridge.
 “Template” or “steal this code” approach.
 We have also developed Grid Tag Libraries and Beans
(GTLAB) to simplify this process.
GTLAB Features
 Extends Java Server Faces.
o Tag components wrap major COG Abstraction Layer features
 Allows you to do standalone development.
 Use JSF portlet bridge to convert into portlets
 No new coding, just change, add config files and jars.
 Or forget about portlets and
o Convert into Google Gadgets
o Develop as a Facebook application
o Etc.
o Status: GTLAB is under active development, can be used to build
simple things, but still has many loose ends.
o You need to be technically adept to work with it now.
o But you are welcome to give feedback or contribute.
Installing GTLAB
 You need to install the OGCE portal
o GTLAB depends on many shared jars.
 Download the release code from www.collab-ogce.org or
check out from SVN:
o svn checkout
https://ogce.svn.sourceforge.net/svnroot/ogce/GTLAB
 Edit GTLAB/jsf_standalone/pom.xml
o <catalina.home> should point to your OGCE portal server.
 Edit
GTLAB/jsf_standalone/src/main/resources/resources.properti
es.
 Run “mvn clean install” in GTLAB/jsf_standalone/
Levels of Abstraction in GTLAB code
You can use prepackaged gadgets/portlets.
You can mix and match repeatable sections of
tags via “include” statements.
You can develop new applications using
existing tag libraries.
You can hack the code
 Note JSF is compatible with JSP, so you can mix and
match.
 And you can embed JavaScript
 YUI, Scriptaculous user interface goodies.
 Google and Facebook APIs.
MyProxy Example
<h:form id="form">
<h:outputText value="Username:"/>
<h:inputText value="#{resource.username}" required="true"/>
<h:outputText value="Password: "/>
<h:inputSecret value="#{resource.password}" required="true"/>
<h:outputText value="MyProxy Server: "/>
<h:inputText value="#{resource.myproxyHostname}" required="true"/>
<o:submit id="submit" value="Submit" binding="#{builder.body}"
action="#{builder.junkAction}" >
<o:multitask id="multi" persistent="true" taskname="#{resource.taskname}">
<o:myproxy id="mypr" hostname="#{resource.myproxyHostname}"
lifetime="2" password="#{resource.password}" port="7512"
username="#{resource.username}"/>
</o:multitask>
</o:submit>
</h:form>
Show the Proxy Credential
<h:dataTable value="#{myproxy.storedProxyList}" border="1"
binding="#{myproxy.storedProxyTable}"
var="proxyEntry"
id="proxyTable">
<h:column>
<f:facet name="header">
<h:outputFormat id="subject" escape="false” value="Subject"/>
</f:facet>
<h:outputText id="proxySubject" value="#{proxyEntry.subject}"/>
</h:column>
<h:column>
<f:facet name="header">
<h:outputFormat id="Remove" escape="false” value="Delete"/>
</f:facet>
<h:commandButton id="deleteProxy" value="Remove”
actionListener="#{myproxy.deleteCredential}"/>
</h:column>
</h:dataTable>
Executing Multiple Task
<o:submit id="submit" value="Submit" binding="#{builder.body}"
action="#{builder.junkAction}" >
<o:multitask id="multi" persistent="true"
taskname="#{resource.taskname}">
<o:jobsubmit id="js" myfaces="true"
arguments="#{resource.arguments}"
executable="#{resource.executable}"
hostname="#{resource.hostname}"
provider="#{resource.provider}"
stdout="#{resource.stdout}"/>
<o:filetransfer id="ft" myfaces="true"
from="#{resource.from}" to="#{resource.to}" />
<o:dependency id="dep" task="ft" dependsOn="js"/>
</o:multitask>
</o:submit>
GTLAB Example
Description
MyProxyExample
Get a credential and store in OGCE
global proxy store.
Various examples showing how to
submit a grid job and get output.
JobSubmitExamples
Dashboard Examples
Runs showq on Big Red, Cobalt, and
Mercury and formats output.
DirectoryBrowser
Displays and downloads files on a
remote host via GridFTP
Shows how to couple file transfers,
operations, and
MultipleTaskExample
TaskMonitorExample
View task state and metadata.
These will work as gadgets, portlets,
or standalone applications
GTLAB gadgets
can also run as
portlets with no
code changes by
using the JSF
portlet bridge.
iGoogle
Client
Aggregator
Tomcat Web Server
+
Portlet Container
Tomcat
Web
Server
Compile and deploy into server
GTLAB Gadgets
Code
Base
Decorate with bridge
and container jars, xml
config files.
GTLAB Portlets
Code
Base
Common science
gateway architecture.
Aggregation is in the
portlet container.
Users have limited
selections of
components.
HTML/HTTP
Tomcat
+
Portlets and
Container
SOAP/HTTP
Grid and Web
Services
(TeraGrid, OSG, etc)
Grid and Web
Services
(TeraGrid, OSG, etc)
Grid and Web
Services
(TeraGrid, OSG, etc)
Gadget containers
aggregate content
from multiple
providers. Content is
aggregated on the
client by the user.
Nearly any web
application can be a
simple gadget (as
Iframes)
Other Gadgets
Providers
Tomcat + GTLAB
Gadgets
Other Gadgets
Providers
RSS Feed, Cloud, etc
Services
Grid and Web
Services
(TeraGrid, OSG, etc)
Social Network
Services (Orkut,
LinkedIn,etc)
Making GTLAB Gadgets into Portlets
 Do all development in jsf_standalone.
 When you are ready to convert:
 cd GTLAB/transition
 mvn clean process-resources
 cd GTLAB/portlets
 mvn clean install
 You will need to manually edit portlet.xml, group.xml, and
layout.xml in GTLAB/portlet/src/main/webapp/WEB-INF/
 That’s it.
Making GTLAB Google Gadgets
 A Gadget is a standalone application that is integrated
into your personal iGoogle display.
 They can run on your Web server.
 You can use SSL/HTTPS
 Google Gadgets have two versions
 http: these use Google’s JavaScript APIs
 url: these wrap external applications with IFrames.
 Limitations:
 Not much real estate (but location, location, location)
 Cookies manage state on gadgets from the same server
but we need a way to integrate multiple independent
servers.
Click “Add stuff” and
then “Add feed or
gadget”. Type the
URL of your gadget.
GTLAB Applications as Google Gadgets:
MOAB dashboard, remote directory
browser, and proxy management.
Various GTLAB
applications deployed
as portlets:
Remote directory
browsing, proxy
management, and
LoadLeveler queues.
Example Gadget Config File
<?xml version="1.0" encoding="UTF-8" ?>
<Module>
<ModulePrefs title="MyProxy Gadget Example"
scrolling="true"
height="500"/>
<Content type="url"
href="http://…/:8080/GTLAB/examples/MyProxyExample.jsf">
</Content>
</Module>
Save this as MyProxy.xml and place
in a Web accessible place.
Some Web 2.0 Resources
 See recent tutorials by Geoffrey Fox and me:
 http://grids.ucs.indiana.edu/ptliupages/pres
entations/Web2.0Tutorial.ppt
 http://grids.ucs.indiana.edu/ptliupages/pres
entations/CTSTechFutures_May19-08.pptx
 Includes material on Google Gdata, Facebook
API, Open Social, Microformats, etc.
 See also full examples at
http://communitygrids.blogspot.com