Developing Grid User Interface ComponentsPortlets, 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 FeaturesExtends 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 Gadgetso Develop as a Facebook applicationo 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 GTLABYou 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.properties.

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 codeNote JSF is compatible with JSP, so you can

mix and match.

And you can embed JavaScriptYUI, 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.

JobSubmitExamples

Various examples showing how to submit a grid job and get output.

Dashboard Examples

Runs showq on Big Red, Cobalt, and Mercury and formats output.

DirectoryBrowser Displays and downloads files on a remote host via GridFTP

MultipleTaskExample

Shows how to couple file transfers, operations, and

TaskMonitorExample

View task state and metadata.

These will work as gadgets, portlets, or standalone applications

GTLAB Gadgets CodeBase

GTLAB PortletsCodeBase

Tomcat Web

Server

Tomcat Web Server

+ Portlet Container

iGoogleClient

Aggregator

Compile and deploy into server

Decorate with bridge and container jars, xml config files.

GTLAB gadgets can also run as portlets with no code changes by using the JSF portlet bridge.

Tomcat +

Portlets and Container

Grid and Web Services

(TeraGrid, OSG, etc)

Grid and Web Services

(TeraGrid, OSG, etc)

Grid and Web Services

(TeraGrid, OSG, etc)

HTML/HTTP

SOAP/HTTP

Common science gateway architecture. Aggregation is in the portlet container. Users have limited selections of components.

Other GadgetsProviders

Tomcat + GTLAB Gadgets

Grid and Web Services

(TeraGrid, OSG, etc)

Other GadgetsProviders

Social Network Services (Orkut,

LinkedIn,etc)

RSS Feed, Cloud, etc

Services

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)

Making GTLAB Gadgets into Portlets

Do all development in jsf_standalone.

When you are ready to convert:cd GTLAB/transitionmvn clean process-resourcescd GTLAB/portletsmvn 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 versionshttp: these use Google’s JavaScript APIsurl: 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/

presentations/Web2.0Tutorial.ppthttp://grids.ucs.indiana.edu/ptliupages/

presentations/CTSTechFutures_May19-08.pptx

Includes material on Google Gdata, Facebook API, Open Social, Microformats, etc.

See also full examples at http://communitygrids.blogspot.com