Kurt Mueller Steve Mock 8/24/04 GridSphere Tutorial Kurt Mueller Steve Mock 8/24/04

Intro

GridSphere is… a framework for portlet development a portlet container modeled on IBM’s 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. Demo various portlets Explain portlet container Portlets extend servlets; portlet container lives in Tomcat servlet container…

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) Interface customization Layout Themes Localization 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

User / Group management Also, can restrict or provide access to webapps on a per-user basis

Layout customization

Localization Portlet.properties: Portlet_de.properties: 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: 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

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-tomcat-4.1.30.tar.gz Set CATALINA_HOME to ${HOME}/jakarta-tomcat-4.1.30

Installing GridSphere Get GridSphere from GridSphere CVS: % cvs -d :pserver:anonymous@portal.aei.mpg.de:/home/repository login % <no password; press enter> % cvs -d :pserver:anonymous@portal.aei.mpg.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

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, doesn’t wipe out database Might have to do ‘ant install’ for troubleshooting later

Our first portlet Eight steps: Create a new gridsphere project Write our Java code Edit gridsphere-portlet.xml Edit layout.xml Edit web.xml 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 javax.portlet.*; import 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</portlet-class> </portlet-frame> </column-layout> </row-layout> </table-layout> </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</portlet-class> <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 we’ve 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 View - default mode Edit - change user-configurable options Configure - administrator configuration Help

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

Layout customization

Customizing the look

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

Default GuestUserLayout.xml <?xml version="1.0" encoding="UTF-8"?> <page-layout theme="xp" title="GridSphere Portal"> <!-- 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> </row-layout> </table-layout> </portlet-header> <!-- Tabbed Panes --> …

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

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>

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> <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> <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"> …

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-tabbed-pane>

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

GridSphere themes Defined in gridsphere/themes/<theme-name> 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:

PortletUI tag library Html to render it: <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"> <td class="portlet-section-body" > <span class="portlet-msg-info" >Name</span> <input class="portlet-form-input-field" type="text" name="" /> <span class="portlet-msg-info" >Description</span> <textarea class="portlet-msg-info" name="" cols="40" rows="5" ></textarea> <input class="portlet-form-button" type="submit" name="action=doSetupSubmit" value="Submit"/> </form> </table>

PortletUI tag library 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:tablecell> <ui:text value="Name" /> <ui:textfield beanId=“name”/> <ui:text value="Description" /> <ui:textarea beanId=“desc” rows="5" cols="40" /> <ui:actionsubmit action="doSubmit" value="Submit"/> </ui:form> </ui:panel>

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://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/

Resources Authors: Jason Novotny (novotny@aei.mpg.de) 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)