Developing Grid User Interface Components - PowerPoint PPT Presentation

developing grid user interface components n.
Skip this Video
Loading SlideShow in 5 Seconds..
Developing Grid User Interface Components PowerPoint Presentation
Download Presentation
Developing Grid User Interface Components

play fullscreen
1 / 19
Developing Grid User Interface Components
Download Presentation
Download Presentation

Developing Grid User Interface Components

- - - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript

  1. Developing Grid User Interface Components Portlets, gadgets, etc.

  2. 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.

  3. GTLAB Features • Extends Java Server Faces. • 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 • Convert into Google Gadgets • Develop as a Facebook application • Etc. • Status: GTLAB is under active development, can be used to build simple things, but still has many loose ends. • You need to be technically adept to work with it now. • But you are welcome to give feedback or contribute.

  4. Installing GTLAB • You need to install the OGCE portal • GTLAB depends on many shared jars. • Download the release code from or check out from SVN: • svn checkout • Edit GTLAB/jsf_standalone/pom.xml • <catalina.home> should point to your OGCE portal server. • Edit GTLAB/jsf_standalone/src/main/resources/ • Run “mvn clean install” in GTLAB/jsf_standalone/

  5. Levels of Abstraction in GTLAB 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.

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

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

  8. 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:jobsubmitid="js" myfaces="true" arguments="#{resource.arguments}" executable="#{resource.executable}" hostname="#{resource.hostname}" provider="#{resource.provider}" stdout="#{resource.stdout}"/> <o:filetransferid="ft" myfaces="true" from="#{resource.from}" to="#{}" /> <o:dependency id="dep" task="ft" dependsOn="js"/> </o:multitask> </o:submit>

  9. These will work as gadgets, portlets, or standalone applications

  10. 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 Portlets Code Base GTLAB Gadgets Code Base Decorate with bridge and container jars, xml config files.

  11. 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)

  12. 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)

  13. 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.

  14. 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.

  15. Click “Add stuff” and then “Add feed or gadget”. Type the URL of your gadget.

  16. GTLAB Applications as Google Gadgets: MOAB dashboard, remote directory browser, and proxy management.

  17. Various GTLAB applications deployed as portlets: Remote directory browsing, proxy management, and LoadLeveler queues.

  18. 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.

  19. Some Web 2.0 Resources • See recent tutorials by Geoffrey Fox and me: • • • Includes material on Google Gdata, Facebook API, Open Social, Microformats, etc. • See also full examples at