Hippo

Create a portal project

Create a project for the portal to be built. Create a folder on your filesystem for the new project. For the remainder of the document, we assume you created the folder

c:/projects/gettingstarted-portal

for this purpose. Let's call this project the "Getting Started Portal". Open a console in the folder you just created and execute the following command:

maven hp:create-portal-project

This generates a basic project structure. If you want to know more about the file structure generated by the Hippo Portal Maven plugin, go to this page .

Change the artifactId value in

c:/projects/gettingstarted-portal/project.xml

from portal-template to gettingstarted.

If you want to use Eclipse for development environment, go to this reference page to learn how to import and configure the new project in Eclipse.

The new project needs to be configured in order to successfully build, deploy and test the portal. This is mainly done through Maven build properties. The Maven build properties must be defined in the file:

c:/projects/gettingstarted-portal/project.properties.

The Hippo Portal plugin creates an example project.properties.template in the same folder describing all these properties.
You can copy/rename that file to project.properties and fill in the values corresponding with your project.

Easier for now is just to copy/paste the minimal configuration needed for our getting-started portal as displayed below:

# Location of the web application, e.g. Tomcat.
nl.hippo.portal.server.home=c:/tomcat-5.5

# Portal Database Settings.
nl.hippo.portal.database.default.name=mysql
nl.hippo.portal.database.url=jdbc:mysql://127.0.0.1:3306/helloWorldPortal
nl.hippo.portal.database.driver=com.mysql.jdbc.Driver
nl.hippo.portal.database.user=root
nl.hippo.portal.database.password=

# The location of the database JDBC driver.
nl.hippo.portal.jdbc.drivers.path=${nl.hippo.portal.server.home}/common/endorsed/mysql-connector-java-5.0.4.jar

Create the project.properties file and adjust the properties values where needed.

For the remainder of the document, it is assumed that the installation dir of Tomcat is c:/tomcat-5.5

Create a portlet application project

Create a folder on your filesystem for the new project. For the remainder of the document, we assume that you created the folder

c:/projects/hello-world-pa

for this purpose. Let's call this project the "Hello World Portlet Application". Open a console in the folder you just created and execute the following command:

maven hp:create-pa-project

This generates a basic project structure. If you want to know more about the file structure generated by the Hippo Portal Maven plugin, go to this page .

Change the artifactId element value in

c:/projects/hello-world-pa/project.xml to hello-world-pa.

If you want to use Eclipse for development environment, go to this page to learn how to import and configure the new project in Eclipse.

Configuring the Hello World Portlet

We'll configure a portlet that will present content from an XML document in Hippo Repository. You don't need to write any Java code for this. Instead, we are going to use an out-of-the-box portlet which comes with Hippo Portal called the "XSLTContentPortlet". This portlet takes an XML document from Hippo Repository as input and renders the view with an XSLT stylesheet. To configure this portlet, follow the steps outlined below.

• To define the HelloWorldPortlet, having an XSLT stylesheet as preference parameter, edit file
  
  c:/projects/hello-world-pa/src/webapp/WEB-INF/portlet.xml
  
  and replace the contents of this file with the following XML:

<portlet-app
  xmlns="http://java.sun.com/xml/ns/portlet/portlet-app_1_0.xsd"
  xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  xsi:noNamespaceSchemaLocation="http://java.sun.com/xml/ns/portlet/portlet-app_1_0.xsd"
  version="1.0">

  <portlet>
    <portlet-name>HelloWorldPortlet</portlet-name>
    <portlet-class>nl.hippo.portal.cms.portlets.XSLTContentPortlet</portlet-class>
    <supports>
      <mime-type>text/html</mime-type>
    </supports>
    <portlet-info>
      <title>Hello World Portlet</title>
    </portlet-info>
    <portlet-preferences>
      <preference>
        <name>xslt</name>
        <value>/WEB-INF/xslt/helloWorld.xslt</value>
      </preference>
    </portlet-preferences>
  </portlet>

</portlet-app>

• To define the XSLT stylesheet, create file
  
  c:/projects/hello-world-pa/src/webapp/WEB-INF/xslt/helloWorld.xslt
  
  with the following content:

<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">

  <xsl:template match="/">
    <!-- the title of the document -->
    <h2><xsl:value-of select="/root/title"/></h2>
    <!-- the HTML content of the document -->
    <p>
      <xsl:copy-of select="/root/body/html/body/node()"/>
    </p>
  </xsl:template>

</xsl:stylesheet>

The xslt code above will transform a simple XML document to a HTML snippet, which will be the output of the portlet.

The Getting Started Portal Application

First we build and deploy the Getting Started Portal. From the root folder of the Getting Started Portal project, execute the following commands after each other:

The Hello World Portlet Application

From the root folder of the Hello World Portlet Application project, execute the following command:

maven clean war

and copy

c:/projects/hello-world-pa/target/hello-world-pa.war

to

c:/tomcat-5.5/webapps/gettingstarted/WEB-INF/deploy

Every portlet application running on Jetspeed has to be deployed via the deploy folder. Jetspeed needs to register every portlet application internally, in order to invoke portlets.

The Demo Portlet Application

First download the Jetspeed Demo portlet application (right-click the link and select Save as..). Rename the file to "demo.war" and copy the renamed file to

c:/tomcat-5.5/webapps/gettingstarted/WEB-INF/deploy

Using the CMS to change content

Now for the finale, go to your CMS in another browser at http://localhost:50000/ (if you haven't done already, for details see component applications ). Now navigate to Documents (middle top tab) and in the left tree open the node root/documents/example. Select the document named helloworld and open the document editor using the workflow box on the right side, item Edit document

Change the text into, for example, Hello Hippo! and save the document.

Go to the your browser pointing at your portal and refresh the page to see that the content text has changed! Congratulations and thank you for using Hippo Portal!