GridSphere Tutorial

Kurt Mueller Steve Mock 8/24/04

Intro

GridSphere is

a framework for portlet development a portlet container modeled on IBMs WebSphere an open source project
http://www.gridsphere.org

developed by the EU GridLab project

http://www.gridlab.org

Huh? Portlets?
modular groupings of presentation and
server-side logic
login portlet file manager portlet job submission portlet

managed by a portlet container, such as

GridSphere or Jetspeed.

Portlets are nice because

modularity should allow easy sharing and
deployment
JSR-168 will be trivial to move between GridSphere, WebSphere, JetSpeed, etc. GridSphere is JSR-168-compliant

Portlets are nice because

separation of presentation and logic
perl cgi script with embedded HTML:
Show_jobs.cgi: #Get the keys from one job hash foreach $label (keys %job_keys){ $htmlstr .= "<td Class=heading bgcolor=white>$label</td>\n"; } $htmlstr .= "</tr>\n"; return $htmlstr;

Portlets are nice because

separation of presentation and logic
JSP for presentation:
Jobs.jsp: <h1>Job listing:</h1> Name: <c:out value=${job.name} /><br> Owner: <c:out value=${job.owner} /><br>

and Java for logic:

JobList.java: String jobID = request.getParameter(jobID); Jobs jobs = dataBase.getJobs(); Job myJob = jobs.getJob(jobID); Request.setParameter(job, myJob); RequestDispatcher rd = request.getRequestDispatcher("/contacts.jsp"); rd.forward(request, response);

GridSphere portlet container provides:

Security
Authentication and session management Role-based access control User/group management (admin only) Layout Themes Localization

Interface customization

Webapp deployment (admin only)

Portlet container provides:

Various helper portlets
File Manager Notepad Banner display Text messaging

Authentication
Pluggable architecture
Default is simple username/password database Can login with Grid credentials from Myproxy server Can write your own module

Prioritize login mechanisms, so can fall

back to default if more complex mechanisms fail.

Role-Based Access Control

Users are one of:
USER ADMIN SUPER

User / Group management

QuickTime and a TIFF (LZW) decompressor are needed to see this picture.

User / Group management

Also, can restrict or provide access to webapps on a per-user basis

QuickTime and a TIFF (LZW) decompressor are needed to see this picture.

Layout customization

QuickTime and a TIFF (LZW) decompressor are needed to see this picture.

Localization
Portlet.properties:
QuickTime and a TIFF (LZW) decompressor are needed to see this picture.

LOGIN_NAME=User Name LOGIN_PASS=Password LOGIN_SUCCESS=Welcome LOGIN_FAILED=Your username and/or password is incorrect. Please try again. LOGIN_ACTION=Login LOGIN_CONFIGURE=Configure Login LOGIN_CONFIG_MSG=Login configuration options LOGIN_CONFIG_ALLOW=Allow users to create new accounts on the portal? LOGIN_SIGNUP=Create new account

Portlet_de.properties:

QuickTime and a TIFF (LZW) decompressor are needed to see this picture.

LOGIN_NAME=Nutzername LOGIN_PASS=Passwort LOGIN_SUCCESS=Willkommen LOGIN_FAILED=Der Nutzername und/oder das Passwort war nicht korrekt. Bitte versu chen Sie es nocheinmal. LOGIN_ACTION=Anmelden LOGIN_CONFIGURE=Login konfigurieren LOGIN_CONFIG_MSG=Konfigurations Optionen f\u00FCr Login LOGIN_CONFIG_ALLOW=Sollen Nutzer eine neues Konto anlegene k\u00F6nnen? LOGIN_SIGNUP=Neues Konto erstellen

Webapp deployment

QuickTime and a TIFF (LZW) decompressor are needed to see this picture.

Installing GridSphere

Installing GridSphere
Software requirements: JDK 1.4.2+ Apache Ant 1.6.1+ Jakarta Tomcat 4.1.18+, Tomcat 5.0.25+

Installing GridSphere
Environment requirements: ANT_HOME set to ant install directory JAVA_HOME set to jdk install directory CATALINA_HOME set to tomcat install directory ant and java executables in your PATH

Installing GridSphere
Install tomcat: Download tomcat from http://jakarta.apache.org , then
% tar xvfz jakarta-tomcat4.1.30.tar.gz

Set CATALINA_HOME to ${HOME}/jakartatomcat-4.1.30

Installing GridSphere
Get GridSphere from GridSphere CVS:
% cvs -d :pserver:anonymous@portal.aei.m pg.de:/home/repository login % <no password; press enter> % cvs -d :pserver:anonymous@portal.aei.m pg.de:/home/repository co gridsphere

Installing GridSphere
Or, get snapshot prepared for this class: http://rewind.sdsc.edu/gridsphere Download gridsphere.tar.gz
% tar xvfz gridsphere.tar.gz

Installing GridSphere
Install GridSphere to tomcat:
% cd gridsphere % ant install

Startup tomcat and test your GridSphere installation:

% cd $CATALINA_HOME % bin/startup.sh Try it out in your web browser! http://<hostname>:8080/gridsphere/gridsphere

QuickTime and a TIFF (LZW) decompressor are needed to see this picture.

Creating a portlet

Development considerations
ALWAYS develop in ${HOME}/gridsphere
(or wherever you downloaded from cvs) and deploy to tomcat. DO NOT modify files directly in tomcat after deploying. Edits will be lost next time you deploy from ${HOME}/gridsphere.

ant install vs. ant deploy

First time you deploy gridsphere or your project
to tomcat, use ant install.
Removes previous content Initializes database and persistence management Creates all docs; takes a long time for gridsphere

Subsequently, use ant deploy

Quicker, doesnt wipe out database Might have to do ant install for troubleshooting later

Our first portlet

Eight steps: 1. Create a new gridsphere project 2. Write our Java code 3. Edit gridsphere-portlet.xml 4. Edit layout.xml 5. Edit web.xml 6. Deploy project to tomcat

Create a new gridsphere project

% % % cd ${HOME}/gridsphere mkdir projects ant new-project

Name your project and give it a title: Demo Portlets, demo. Choose jsr for JSR-168 compliance.
% cd projects/demo/src % mkdir -p demo/portlets/ % vi demo/portlets/HelloWorld.java

Create HelloWorld.java
package demo.portlets.helloworld; import import javax.portlet.*; java.io.*;

public class HelloWorld extends GenericPortlet { public void doView(RenderRequest request, RenderResponse response) throws PortletException, IOException { response.setContentType("text/html"); PrintWriter out = response.getWriter(); out.println("<h1>Hello World</h1>"); //* } } * no separation of logic and presentation!

Edit layout.xml
In projects/demo/webapp/WEB-INF, edit layout.xml
<portlet-tabbed-pane> <portlet-tab label="Demo Portlets"> <title lang="en">Demo Portlets</title> <portlet-tabbed-pane style="sub-menu"> <portlet-tab label="helloworldtab"> <title lang="en">Hello World</title> <table-layout> <row-layout> <column-layout> <portlet-frame label="helloworld"> <portlet-class>demo.portlets.HelloWorld</portletclass> </portlet-frame> </column-layout> </row-layout> </table-layout> </portlet-tab> </portlet-tabbed-pane> </portlet-tab> </portlet-tabbed-pane>

Edit group.xml
<?xml version="1.0" encoding="UTF-8"?> <portlet-group> <group-name>demo</group-name> <group-description>The demo group</group-description> <group-visibility>PUBLIC</group-visibility> <portlet-role-info> <portlet-class>demo.portlets.HelloWorld</portletclass> <required-role>USER</required-role> </portlet-role-info> </portlet-group>

Edit portlet.xml
<?xml version="1.0" encoding="UTF-8"?> <portlet-app xmlns="http://java.sun.com/xml/ns/portlet/portlet-app_1_0.xsd" version="1.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/portlet/portlet-app_1_0.xsd"> <portlet> <description xml:lang="en">The classic Hello World example</description> <portlet-name>HelloPortlet</portlet-name> <display-name xml:lang="en">Hello World</display-name> <portlet-class>demo.portlets.HelloWorld</portlet-class> <expiration-cache>60</expiration-cache> <supports> <mime-type>text/html</mime-type> <portlet-mode>edit</portlet-mode> <portlet-mode>help</portlet-mode> </supports> <supported-locale>en</supported-locale> <portlet-info> <title>Hello World</title> <short-title>Hello World</short-title> <keywords>hello</keywords> </portlet-info> </portlet> </portlet-app>

Deploy to tomcat
Once weve put HelloWorld.java into place and modified layout.xml, portlet.xml, and group.xml appropriately, we must deploy our demo webapp to tomcat:
% % cd ${HOME}/gridsphere/projects/demo ant install

This compiles, packages, and deploys our webapp

Finally, restart tomcat

% % % % cd ${HOME}/jakarta-tomcat-4.1.30 bin/shutdown.sh rm logs/catalina.out bin/startup.sh

Enable Demo Portlets

And here it is

Portlet modes
QuickTimeto see this TIFF (LZW) decompressor areView - default mode picture. needed and a QuickTimeto see this picture. TIFF (LZW) decompressor areEdit - change user-configurable options needed and a
QuickTime and a TIFF (LZW) to see this picture. are needed decompressor

Configure - administrator configuration

are needed to see this picture.

QuickTimeto see this picture. and a TIFF (LZW) decompressor are Help QuickTime needed and a TIFF (LZW) decompressor

Portlet modes
Stock quote portlet example:

View - see your chosen stock prices Edit - change the stocks you want to see Configure - change the back-end stock quote
server from which you get data

Help - describe how to use the portlet

Portlet modes
Implementing portlet modes in HelloWorld.java:
public void doEdit(RenderRequest request, RenderResponse response) throws PortletException, IOException { response.setContentType("text/html"); PrintWriter out = response.getWriter(); out.println("<h1>This is the edit mode!</h1>"); }

Portlet modes
QuickTime and a TIFF (LZW) decompressor are needed to see this picture.

QuickTime and a TIFF (LZW) decompressor are needed to see this picture.

Layout customization

Customizing the look

QuickTime and a TIFF (LZW) decompressor are needed to see this picture.

QuickTime and a TIFF (LZW) decompressor are needed to see this picture.

Look defined in xml files

In gridsphere/webapps/gridsphere/WEB-INF/layouts: GuestUserLayout.xml: Describes default layout of portal for non-authenticated (guest) users TemplateLayout.xml: Describes default layout of portal for authenticated users. ErrorLayout.xml: Describes error layout

<?xml version="1.0" encoding="UTF-8"?> <page-layout theme="xp" title="GridSphere Portal">

Default GuestUserLayout.xml

<!-- Header components --> <portlet-header> <table-layout style="header"> <row-layout> <column-layout width="70%"> <portlet-content include="/html/pagehead.html"/> </column-layout> <column-layout width="30%"> <portlet-frame transparent="true" outer-padding="0" label="locale"> <portlet-class> org.gridlab.gridsphere.portlets.core.locale.LocalePortlet.1 </portlet-class> </portlet-frame> </column-layout> </row-layout> </table-layout> </portlet-header> <!-- Tabbed Panes --> QuickTime and a TIFF (LZW) decompressor are needed to see this picture.

Custom GuestUserLayout.xml
<?xml version="1.0" encoding="UTF-8"?> <page-layout theme="sdsc" title="Grid-Development @ SDSC"> <!-- Header components --> <portlet-header> <portlet-content include="/html/pagehead.html"/> </portlet-header>

QuickTime and a TIFF (LZW) decompressor are needed to see this picture.

Default pagehead.html
gridsphere/webapps/gridsphere/html/pagehead.html: <div id="page-logo"><img width="40" height="48" src="/gridsphere/html/gridlablogo.jpg"> GridSphere Portal</div>

QuickTime and a TIFF (LZW) decompressor are needed to see this picture.

Custom pagehead.html
<table border="0" cellpadding="0" cellspacing="0" width="800"> <tr> <td><img src="http://www.sdsc.edu/images/spacer.gif" width="553" height="1" border="0" name="undefined_2"></td> <td><img src="http://www.sdsc.edu/images/spacer.gif" width="247" height="1" border="0" name="undefined_2"></td> <td><img src="http://www.sdsc.edu/images/spacer.gif" width="1" height="1" border="0" name="undefined_2"></td> </tr> <tr> <td colspan="2"><img name="sdsc_top_nav8_r1_c1" src="http://www.sdsc.edu/images/sdsc_top_nav8_r1_c1.gif" width="800" height="58" border="0" usemap="#m_sdsc_top_nav8_r1_c1"></td> <td><img src="http://www.sdsc.edu/images/spacer.gif" width="1" height="58" border="0" name="undefined_2"></td> </tr> <tr> <td align="left" valign="top" bgcolor="#0063DE"><img name="sdsc_top_nav8_r2_c1" src="/gridsphere/html/sdsc_top_nav8_r2_c1.gif" width="553" height="37" border="0" usemap="#m_sdsc_top_nav8_r2_c1"></td> <th bgcolor="#0063DE" nowrap align="center" background="http://www.sdsc.edu/../images/sdsc_top_nav8_r2_c2.gif" valign="middle" > <table width="100%" cellpadding="0" cellspacing="0" border="0" height="25">

QuickTime and a TIFF (LZW) decompressor are needed to see this picture.

Custom GuestUserLayout.xml
<!-- Tabbed Panes --> <portlet-tabbed-pane selected="0" style="menu"> <portlet-tab label="home"> <title lang="en">Home</title> <portlet-tabbed-pane selected="0" style="sub-menu"> <portlet-tab label="intro"> <title lang="en">Intro</title> <portlet-content include="/html/home-intro.html"/> </portlet-tab> <portlet-tab label="calendar"> <title lang="en">Calendar</title> <portlet-content include="/html/home-calendar.html"/> </portlet-tab> </portlet-tabbed-pane> </portlet-tab>

QuickTime and a TIFF (LZW) decompressor are needed to see this picture.

GridSphere vs webapp layout

GuestUserLayout.xml,
TemplateLayout.xml, etc. define overall GridSphere look and layout Webapp layout.xml (webapps/demo/WEBINF/layout.xml) defines tab and portlet structure for individual webapps.

GridSphere themes
Defined in gridsphere/themes/<themename> Collection of graphic images used to construct tabs and portlet mode icons, etc, and Cascading Style Sheets (CSS) that describe text formatting, spacing, colors, etc.

More Portlets

PortletUI tag library

GridSphere provides a JSP tag library that
wraps many HTML elements Tags are rendered using gridsphere CSS for consistent look and feel Simplifies coding Enables sharing of objects between JSP and portlet classes through ActionPortlet model.

PortletUI tag library

Example portlet:

QuickTime and a TIFF (LZW) decompressor are needed to see this picture.

Html to render it:

PortletUI tag library

<table cellspacing="1" cellpadding="1" border="0" width="100%" > <tr> <td class="portlet-section-body> Welcome!<br><br> <span class="portlet-msg-info" >Provide your information:</span> </td> </tr> <form action="http://127.0.0.1:8080/gridsphere/gridsphere?cid=setup" method="POST" name="form1"> <tr> <td class="portlet-section-body" > <span class="portlet-msg-info" >Name</span> </td> <td class="portlet-section-body" > <input class="portlet-form-input-field" type="text" name="" /> </td> </tr> <tr> <td class="portlet-section-body" > <span class="portlet-msg-info" >Description</span> </td> <td class="portlet-section-body" > <textarea class="portlet-msg-info" name="" cols="40" rows="5" ></textarea> </td> </tr> <tr> <td class="portlet-section-body" > <input class="portlet-form-button" type="submit" name="action=doSetupSubmit" value="Submit"/> </td> </tr> </form> </table>

Instead of HTML, use PortletUI JSP tags:

<ui:panel> <ui:tablerow> <ui:tablecell > Welcome!<br><br> <ui:text value="Provide your information:" /> </ui:tablecell> </ui:tablerow> <ui:form> <ui:tablerow> <ui:tablecell> <ui:text value="Name" /> </ui:tablecell> <ui:tablecell> <ui:textfield beanId=name/> </ui:tablecell> </ui:tablerow> <ui:tablerow> <ui:tablecell> <ui:text value="Description" /> </ui:tablecell> <ui:tablecell> <ui:textarea beanId=desc rows="5" cols="40" /> </ui:tablecell> </ui:tablerow> <ui:tablerow> <ui:tablecell> <ui:actionsubmit action="doSubmit" value="Submit"/> </ui:tablecell> </ui:tablerow> </ui:form> </ui:panel>

PortletUI tag library

QuickTime and a TIFF (LZW) decompressor are needed to see this picture.

ActionPortlet model
public class SimpleActionPortlet extends ActionPortlet { public void init(PortletConfig config) throws UnavailableException { super.init(config); DEFAULT_VIEW_PAGE = "simple/view.jsp"; DEFAULT_CONFIGURE_PAGE = "simple/config.jsp"; DEFAULT_EDIT_PAGE = simple/edit.jsp; DEFAULT_HELP_PAGE = simple/help.jsp; } public void doSubmit(FormEvent event) { log.debug("in doSubmit"); TextBean name = event.getTextBean(name); // output name to Description field of JSP page: TextBean desc = event.getTextAreaBean(desc); desc.setValue(got a name: + name.getValue()); setNextState(event.getPortletRequest(), DEFAULT_VIEW_PAGE); } }

gridportlets webapp

gridportlets
Provided as a stand-alone web application by
the GridSphere team Provides Grid-aware portlets and services Available via cvs:
% cd gridsphere/projects % cvs -d :pserver:anonymous@portal.aei.mpg.de:/home/repository co gridportlets

gridportlets
Once downloaded, do ant docs in gridportlets
root directory. Then read documentation in build/docs for complete installation instructions. Basic steps:
Install ogsa-3.0.2-bin to tomcat as a separate webapp. Copy ogsa libs to gridportlets/lib/ext ant install in gridportlets In gridsphere, Configure Group Membership to enable gridportlets

gridportlets
Certificate management tools Credential retrieval Job submission and monitoring <demo>

Resources http://www.gridsphere.org

http://www.gridsphere.org http://grid-devel.rocksclusters.org:8080/gridsphere/gridsphere http://www-106.ibm.com/developerworks/library/gr-portlets /index.html?ca=drs-g0904 Built-in docs: http://<gridsphere-host>:8080/gridsphere/gridsphere/

QuickTime and a TIFF (LZW) decompressor are needed to see this picture.

Resources
GridSphere mailing lists:
https://www.gridlab.org/mailman/listinfo/gridsphere-dev https://www.gridlab.org/mailman/listinfo/gridsphere-users

Authors: Jason Novotny (novotny@aei.mpg.de) Michael Russell (michael.russell@aei.mpg.de) Oliver Wehrens (wehrens@aei.mpg.de)