Developing with Hippo - Enterprise Java Content management system - Hippo CMS

This article covers a Hippo CMS version 7.9. There's an updated version available that covers our most recent release.

Developing with Hippo

An introduction to the Hippo internals

This page describes, step-by-step, how to implement a simple Hello World page using Hippo CMS and the Hippo Site Toolkit. This content is specifically aimed towards Java developers who want to get started with Hippo development. However, anyone with some basic Java knowledge and access to an IDE should be able to follow.

What about the Hippo Essentials Feature Library?

Before we start, just a small note. Some of you might have seen that Hippo provides a special Feature Library that contains plenty out of the box features, allowing you to quickly kickstart your project. We will not use them here (or at least not all of them),. Instead, we start from scratch. That being said, if you prefer to use the out of the box approach, you can follow the Getting Started Trail.

A very simple Hello World

First, we will build a simple static Hello World page that is served by Hippo CMS. We first learn how to add JSP (and/or) Freemarker templates to the project and how to configure Hippo CMS to use them.

Step 1: Create a new project

If you do not already have a working development environment , please make sure you have done the  prerequisites before going further.

The first step to any new Hippo project is to generate a new project based on an archetype. The command itself is quite simple:

mvn archetype:generate \ 
-DarchetypeGroupId=org.onehippo.cms7 \ 
-DarchetypeArtifactId=hippo-project-archetype \ 
-DarchetypeVersion=2.00.05 \ 
-DarchetypeRepository=http://maven.onehippo.com/maven2

(Note: remove the  if you are on Windows)

You will be asked for several parameters to set up the project, for now the default options are just fine. After the archetype is generated, open the generated project in the IDE of your choice.

 

Step 2: Add a page

In your IDE, open the site project. This project will contain the templates and component logic we will need. Browse to the WEB-INF/jsp folder and create a folder called home and add a home.jsp file to it. Paste the following code in the file:

<%@ include file="/WEB-INF/jspf/htmlTags.jspf" %>
<html>
    <head>        
    </head>
    <body>
        <h1>Hello World </h1>
    </body>        
</html>

 

Step 3: Build the project

Now that we have added the correct jsp to the project we can compile it by using the following maven commands.

mvn clean install && mvn –Pcargo.run

This creates fresh war files and immediately runs the project using cargo. If you are doing this for the first time, it might take some time as all the dependencies will be downloaded as well.

 

Step 4: Introducing the console

You will be notified quickly (or it might take a bit longer if you needed to download all the dependencies) that the project is up and running. You can now browse to the Hippo CMS console. This tool is an important part of development, as it provides access to the configuration part of the CMS. By default, you can find the console on http://localhost:8080/cms/console. By using the default admin / admin credentials, we can log in to the Hippo CMS console. It is important to understand how Hippo CMS stores the data, because it might be a bit different than what you are used to. Especially when looking at the console. You see, all the data in Hippo CMS, including content, is stored in 'nodes' in the JCR. The Hippo CMS console displays these nodes in a tree like structure. Click on a node allows to change the specific properties of this node. These nodes are quite similar to XML elements, because nodes also have a 'schema' that defines things like what data should be present and what is not allowed. For this lab, the area we will be working in is the configuration section, in the hst:hst/hst:configurations node, that holds all the configuration for all HST sites.

 

Step 5: Configure the template

Let's get started by configuring Hippo to use the template we just created. If you created the site through the archetype and left all settings to the default value, the configuration we will need to modify is the myhippoproject one. Open the node and you will see something similar to this:

//onehippo-prod.global.ssl.fastly.net/binaries/ninecolumn/content/gallery/console.png

 

console

The node contains several other nodes with configuration, but for this specific step we are mostly interested in the the hst:templates node. In this node we will add a new node, by either selecting the node and clicking on Add node at the top or by right clicking the node. Name it homepage. The node type should be set to hst:template by default. Click OK to create. After this, click on the Add Property button above the properties.

//onehippo-prod.global.ssl.fastly.net/binaries/ninecolumn/content/gallery/connect/trails/add-property.png

add-property

This will open the Add property dialog, which we will use to add a property named hst:renderpath. We can set the value to the JSP file we created before (jsp/home/home.jsp). Click OK to close the dialog.

 

Step 6: Add a page (component)

As you may know, a big part of Hippo CMS is the separation of presentation (template), code (components) and content. Because of this separation, we can reuse pretty much every aspect of our implementation. So far we created a (reusable) template by telling Hippo where to find our JSP file. However, this template is just one part of the equation, because we have not used the template anywhere yet.

Whenever to output needs to be rendered, the Hippo Site Toolkit (HST) uses a component based hierarchy to render each component individually. So, in order to get our template to show up, we need to add it to the hierarchy.

To do this, we will add a node called home under the hst:pages node. When you add the node, you will notice there is no node type for a page. That is because, in Hippo, pages are actually components. The separation between a page and a component is actually just there for the developer, so you can distinguish between top level and other levels.

So we now have a component called home in our hst:pages node. We can quickly tell the HST to use the template we defined before by adding a property called hst:template with the value homepage.

//onehippo-prod.global.ssl.fastly.net/binaries/ninecolumn/content/gallery/connect/trails/add-page.png

add-page

You will see that Hippo CMS will reference the right template because it will display the full path in the view.

 

Step 7: Configure the sitemap

We have setup almost everything we need. The final thing left to do is to map the right URL to our newly created 'page'. Hippo CMS has a very flexible URL structure, implemented by the nodes in hst:sitemap. In order to link the component to the site root we will have to add a new node in the hst:sitemap.

Create a new node named root. After, add a new property called hst:componentconfigurationid and set the value to the newly created hst:pages/home.

Step 8: Write the changes

When you click the big button in the top right hand corner the changes to the configuration will be written to the repository, enabling our new configuration with the new page, template and sitemap. Apart from Hippo CMS automatically exporting the changes we made (so we can bootstrap these changes in a new / empty environment as well), this will make sure the site application uses the new configuration as well.

So, if we open the site, which should be running on http://localhost:8080/site/ we should see the wonderfully simple page we just created:

//onehippo-prod.global.ssl.fastly.net/binaries/ninecolumn/content/gallery/connect/trails/simple-page.png

simple-page

A more dynamic Hello World

In the previous part we created a static template. However, a big part of content management is, of course, the fact that you can manage the information that is displayed. So, in this part we will use some of the powerful content management features of Hippo CMS.

 

Step 1: Create a document type

Like mentioned before, within Hippo CMS we have a strict separation of content and presentation. In Hippo CMS, content is stored in so-called documents. These documents have a clearly defined structure, making it very easy for editors to work with. The separation makes it easy for editors to work on the actual content. No HTML knowledge is required, and, best of all, you can reuse the content anywhere.

Let's get to work. In order to show content, we first need to make a document type. For this we will use the CMS document type editor. If you followed the first tutorial, the system should still be running, but if not, you can start the application using the command :

mvn clean install && mvn -Pcargo.run

Now we can browse to http://localhost:8080/cms and use the admin / admin credentials to log in.

Open the Documents perspective and click on Configuration. You can now open the myhippoproject namespace and click on the New Document Type option in the dropdown.

!{new-document-type](images/new-document-type.png)

In a normal implementation you will want to be as specific as possible when creating document types (so editors work on documents like News or Blogs rather than a generic document), but for this example, we will build a new document type called simpledocument.

Next, we will select the layout of the document type. This is used to determine the layout for the CMS user, so it has no direct relationship with the site. Select the 2 column layout option.

//onehippo-prod.global.ssl.fastly.net/binaries/ninecolumn/content/gallery/connect/trails/doc-type-editor.png

doc-type-editor

The document type editor allows you to add fields to the type. Add a String field (Primitive) for our title and set the Caption to Title and Path to title. Next, add a Rich Text Editor (Compound Field) to the document type. Set the Caption to Content and the path to content. After adding the fields, click Done and then select Type Actions, Commit. The document type is now ready for use in the CMS.

Step 2: Create a document

We can now go back to the documents tab and add a new document to the root folder.

//onehippo-prod.global.ssl.fastly.net/binaries/ninecolumn/content/gallery/connect/trails/add-document.png

add-document

Name the document hello world. Also, note the URL name in the field below. It uses the name to create a URL friendly version of the document, which is used as the filename. When we click OK, we will be presented with the document editor interface containing the fields we configured for this document type.

//onehippo-prod.global.ssl.fastly.net/binaries/ninecolumn/content/gallery/connect/trails/document-editor.png

document-editor

Enter some information in the document fields and click Save & Close. This document is currently unpublished and therefore our site cannot use it. For now, just click on the Publish option in the Publication menu.

Step 3: Using the content

If you would browse to the site and refresh the page, you would still see the same page we saw before. This is because our template is not using the information in the document yet. We have created the 'storage' part, but our template has no knowledge of this document or document type. We will use one of the tools provided by the Hippo Essentials to fix that.

Browse to http://localhost:8080/essentials/ and select the template language you want. Click on Get started to move on to the main part of the application. Next, click on the 'Tools' tab. Click on Use Beanwriter. The Beanwriter tool will save you a lot of time when creating document types in the CMS, because it will generate the beans rather than you having to write them yourself. After we generated the bean, we should have some code similar to this in our IDE

@HippoEssentialsGenerated(internalName = "myhippoproject:simpledocument")
@Node(jcrType = "myhippoproject:simpledocument")
public class Simpledocument extends BaseDocument {
   @HippoEssentialsGenerated(internalName = "myhippoproject:title")
    public String getTitle() {
        return getProperty("myhippoproject:title");
   }

   @HippoEssentialsGenerated(internalName = "myhippoproject:content")
    public HippoHtml getContent() {
        return getHippoHtml("myhippoproject:content");
   }
}

In the next steps we will do some simple development to ensure our template gets the information it needs.

Step 4: Create a Java component

As you might recall, we have added a component to the system (as the page). We then set the template property to link it to the right JSP file. But, there is more we can do with a component. We can also execute any type of business logic that we want by referencing a Java component, which is what we will do now to make our page more dynamic.

Building a Hippo Java component is actually quite easy. Use your IDE to create a new Java class in the org.example.components package named SimpleComponent. Paste the following code in there.

package org.example.components;

import org.example.beans.Simpledocument;
import org.hippoecm.hst.component.support.bean.BaseHstComponent;
import org.hippoecm.hst.core.component.HstComponentException;
import org.hippoecm.hst.core.component.HstRequest;
import org.hippoecm.hst.core.component.HstResponse;
import org.hippoecm.hst.core.request.HstRequestContext;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;

public class SimpleComponent extends BaseHstComponent {

    public static final Logger log = LoggerFactory.getLogger(SimpleComponent.class);

   @Override
    public void doBeforeRender(final HstRequest request, final HstResponse response) throws HstComponentException {
        super.doBeforeRender(request, response);
       final HstRequestContext ctx = request.getRequestContext();

        // Load the document based on the URL
       Simpledocument document = (Simpledocument) ctx.getContentBean();

        if (document != null) {
            // Pass the loaded document to the request
           request.setAttribute("document", document);
       }
   }
}

There is just one method in our class, the doBeforeRender method. This method is an override of the BaseHstComponent, which ensures that this method will be called by the HST whenever the component needs to render something. As you can see, it is just normal Java, so you can make it do (almost) anything you want.

In the method we do a couple of things. First, we will use the request (a Hippo specific version of a normal ServletRequest) to get the request context. This class provides access to most of the Hippo specific methods. For instance, we use the context to get the right content bean, the SimpleDocument bean. Finally, whenever a document is there, we will use the request object to pass the variable to the template.

Step 5: Change the template

We pass the document to the template, but the template is still the static JSP we created before. So, open the JSP file in the IDE and change the body of the document to:

<c:choose>
    <c:when test="${not empty document}" >
        <h1><c:out value="${document.title}" /></h1>
        <div>
            <hst:html hippohtml="${document.content}" />
        </div>
    </c:when>
    <c:otherwise>
        <h1>Goodbye? cruel world </h1>
    </c:otherwise>
</c:choose>

In the JSP we use normal JSTL tags to handle the specifics such as validating. The most special tag here is the hst:html tag. This is a special tag in the HST tag library that will process the data contained by the Rich Text Editor, ensuring all internal links are validated and rewritten to the right URL.

We are now done with all the code changes, so let's rebuild the project and move on!

mvn clean install && mvn -Pcargo.run

Step 6: Back to the console

After the build is done, we can go back to the http://localhost:8080/cms/console to add the newly created Java component. We could add this classname directly as a property on our page, but let's explore a different path.

In the console, we will add a new hst:component (node) to the hst:components section. Call it simplecomponent and after it is created, add a property called hst:componentclassname and set the value to org.example.components.SimpleComponent. We have now added our first completely reusable component!

We can also make sure the page uses this logic, rather than having it's own. To do so, select the home node in hst:pages. Add a property to it named hst:referencecomponent and set the value to hst:components/simplecomponent.

Don't forget to write your changes and visit the site again. http://localhost:8080/site/

//onehippo-prod.global.ssl.fastly.net/binaries/ninecolumn/content/gallery/connect/trails/goodbye.png

goodbye

Step 7: Linking the document to the URL

Our template currently executes the logic for not having a document present. This makes sense, because we did not tell the HST where to find our document. In our configuration, there is just one tiny thing missing, which is easily fixed.

Go back to http://localhost:8080/cms/console for one last time and open the hst:sitemap node. Select the root node. In here we will add a property called hst:relativecontentpath and set the value to hello-world. This will tell the CMS to locate the content on that relative path. As you can see, here we use the URL name we have talked about before. If you created a folder to store your document, you will enter a relative path similar to /.

Just so you know, in a normal project you will use a lot of wildcards to handle this, so you don't have to manually link all documents to a specific URL. If you write the changes and test it again, we actually see the page we would expect!

//onehippo-prod.global.ssl.fastly.net/binaries/ninecolumn/content/gallery/connect/trails/final-result.png

final-result

 

Next step : Building your website !

 

This article covers a Hippo CMS version 7.9. There's an updated version available that covers our most recent release.

Developing with Hippo

An introduction to the Hippo internals

This page describes, step-by-step, how to implement a simple Hello World page using Hippo CMS and the Hippo Site Toolkit. This content is specifically aimed towards Java developers who want to get started with Hippo development. However, anyone with some basic Java knowledge and access to an IDE should be able to follow.

What about the Hippo Essentials Feature Library?

Before we start, just a small note. Some of you might have seen that Hippo provides a special Feature Library that contains plenty out of the box features, allowing you to quickly kickstart your project. We will not use them here (or at least not all of them),. Instead, we start from scratch. That being said, if you prefer to use the out of the box approach, you can follow the Getting Started Trail.

A very simple Hello World

First, we will build a simple static Hello World page that is served by Hippo CMS. We first learn how to add JSP (and/or) Freemarker templates to the project and how to configure Hippo CMS to use them.

Step 1: Create a new project

If you do not already have a working development environment , please make sure you have done the  prerequisites before going further.

The first step to any new Hippo project is to generate a new project based on an archetype. The command itself is quite simple:

mvn archetype:generate \ 
-DarchetypeGroupId=org.onehippo.cms7 \ 
-DarchetypeArtifactId=hippo-project-archetype \ 
-DarchetypeVersion=2.00.05 \ 
-DarchetypeRepository=http://maven.onehippo.com/maven2

(Note: remove the  if you are on Windows)

You will be asked for several parameters to set up the project, for now the default options are just fine. After the archetype is generated, open the generated project in the IDE of your choice.

 

Step 2: Add a page

In your IDE, open the site project. This project will contain the templates and component logic we will need. Browse to the WEB-INF/jsp folder and create a folder called home and add a home.jsp file to it. Paste the following code in the file:

<%@ include file="/WEB-INF/jspf/htmlTags.jspf" %>
<html>
    <head>        
    </head>
    <body>
        <h1>Hello World </h1>
    </body>        
</html>

 

Step 3: Build the project

Now that we have added the correct jsp to the project we can compile it by using the following maven commands.

mvn clean install && mvn –Pcargo.run

This creates fresh war files and immediately runs the project using cargo. If you are doing this for the first time, it might take some time as all the dependencies will be downloaded as well.

 

Step 4: Introducing the console

You will be notified quickly (or it might take a bit longer if you needed to download all the dependencies) that the project is up and running. You can now browse to the Hippo CMS console. This tool is an important part of development, as it provides access to the configuration part of the CMS. By default, you can find the console on http://localhost:8080/cms/console. By using the default admin / admin credentials, we can log in to the Hippo CMS console. It is important to understand how Hippo CMS stores the data, because it might be a bit different than what you are used to. Especially when looking at the console. You see, all the data in Hippo CMS, including content, is stored in 'nodes' in the JCR. The Hippo CMS console displays these nodes in a tree like structure. Click on a node allows to change the specific properties of this node. These nodes are quite similar to XML elements, because nodes also have a 'schema' that defines things like what data should be present and what is not allowed. For this lab, the area we will be working in is the configuration section, in the hst:hst/hst:configurations node, that holds all the configuration for all HST sites.

 

Step 5: Configure the template

Let's get started by configuring Hippo to use the template we just created. If you created the site through the archetype and left all settings to the default value, the configuration we will need to modify is the myhippoproject one. Open the node and you will see something similar to this:

//onehippo-prod.global.ssl.fastly.net/binaries/ninecolumn/content/gallery/console.png

 

console

The node contains several other nodes with configuration, but for this specific step we are mostly interested in the the hst:templates node. In this node we will add a new node, by either selecting the node and clicking on Add node at the top or by right clicking the node. Name it homepage. The node type should be set to hst:template by default. Click OK to create. After this, click on the Add Property button above the properties.

//onehippo-prod.global.ssl.fastly.net/binaries/ninecolumn/content/gallery/connect/trails/add-property.png

add-property

This will open the Add property dialog, which we will use to add a property named hst:renderpath. We can set the value to the JSP file we created before (jsp/home/home.jsp). Click OK to close the dialog.

 

Step 6: Add a page (component)

As you may know, a big part of Hippo CMS is the separation of presentation (template), code (components) and content. Because of this separation, we can reuse pretty much every aspect of our implementation. So far we created a (reusable) template by telling Hippo where to find our JSP file. However, this template is just one part of the equation, because we have not used the template anywhere yet.

Whenever to output needs to be rendered, the Hippo Site Toolkit (HST) uses a component based hierarchy to render each component individually. So, in order to get our template to show up, we need to add it to the hierarchy.

To do this, we will add a node called home under the hst:pages node. When you add the node, you will notice there is no node type for a page. That is because, in Hippo, pages are actually components. The separation between a page and a component is actually just there for the developer, so you can distinguish between top level and other levels.

So we now have a component called home in our hst:pages node. We can quickly tell the HST to use the template we defined before by adding a property called hst:template with the value homepage.

//onehippo-prod.global.ssl.fastly.net/binaries/ninecolumn/content/gallery/connect/trails/add-page.png

add-page

You will see that Hippo CMS will reference the right template because it will display the full path in the view.

 

Step 7: Configure the sitemap

We have setup almost everything we need. The final thing left to do is to map the right URL to our newly created 'page'. Hippo CMS has a very flexible URL structure, implemented by the nodes in hst:sitemap. In order to link the component to the site root we will have to add a new node in the hst:sitemap.

Create a new node named root. After, add a new property called hst:componentconfigurationid and set the value to the newly created hst:pages/home.

Step 8: Write the changes

When you click the big button in the top right hand corner the changes to the configuration will be written to the repository, enabling our new configuration with the new page, template and sitemap. Apart from Hippo CMS automatically exporting the changes we made (so we can bootstrap these changes in a new / empty environment as well), this will make sure the site application uses the new configuration as well.

So, if we open the site, which should be running on http://localhost:8080/site/ we should see the wonderfully simple page we just created:

//onehippo-prod.global.ssl.fastly.net/binaries/ninecolumn/content/gallery/connect/trails/simple-page.png

simple-page

A more dynamic Hello World

In the previous part we created a static template. However, a big part of content management is, of course, the fact that you can manage the information that is displayed. So, in this part we will use some of the powerful content management features of Hippo CMS.

 

Step 1: Create a document type

Like mentioned before, within Hippo CMS we have a strict separation of content and presentation. In Hippo CMS, content is stored in so-called documents. These documents have a clearly defined structure, making it very easy for editors to work with. The separation makes it easy for editors to work on the actual content. No HTML knowledge is required, and, best of all, you can reuse the content anywhere.

Let's get to work. In order to show content, we first need to make a document type. For this we will use the CMS document type editor. If you followed the first tutorial, the system should still be running, but if not, you can start the application using the command :

mvn clean install && mvn -Pcargo.run

Now we can browse to http://localhost:8080/cms and use the admin / admin credentials to log in.

Open the Documents perspective and click on Configuration. You can now open the myhippoproject namespace and click on the New Document Type option in the dropdown.

!{new-document-type](images/new-document-type.png)

In a normal implementation you will want to be as specific as possible when creating document types (so editors work on documents like News or Blogs rather than a generic document), but for this example, we will build a new document type called simpledocument.

Next, we will select the layout of the document type. This is used to determine the layout for the CMS user, so it has no direct relationship with the site. Select the 2 column layout option.

//onehippo-prod.global.ssl.fastly.net/binaries/ninecolumn/content/gallery/connect/trails/doc-type-editor.png

doc-type-editor

The document type editor allows you to add fields to the type. Add a String field (Primitive) for our title and set the Caption to Title and Path to title. Next, add a Rich Text Editor (Compound Field) to the document type. Set the Caption to Content and the path to content. After adding the fields, click Done and then select Type Actions, Commit. The document type is now ready for use in the CMS.

Step 2: Create a document

We can now go back to the documents tab and add a new document to the root folder.

//onehippo-prod.global.ssl.fastly.net/binaries/ninecolumn/content/gallery/connect/trails/add-document.png

add-document

Name the document hello world. Also, note the URL name in the field below. It uses the name to create a URL friendly version of the document, which is used as the filename. When we click OK, we will be presented with the document editor interface containing the fields we configured for this document type.

//onehippo-prod.global.ssl.fastly.net/binaries/ninecolumn/content/gallery/connect/trails/document-editor.png

document-editor

Enter some information in the document fields and click Save & Close. This document is currently unpublished and therefore our site cannot use it. For now, just click on the Publish option in the Publication menu.

Step 3: Using the content

If you would browse to the site and refresh the page, you would still see the same page we saw before. This is because our template is not using the information in the document yet. We have created the 'storage' part, but our template has no knowledge of this document or document type. We will use one of the tools provided by the Hippo Essentials to fix that.

Browse to http://localhost:8080/essentials/ and select the template language you want. Click on Get started to move on to the main part of the application. Next, click on the 'Tools' tab. Click on Use Beanwriter. The Beanwriter tool will save you a lot of time when creating document types in the CMS, because it will generate the beans rather than you having to write them yourself. After we generated the bean, we should have some code similar to this in our IDE

@HippoEssentialsGenerated(internalName = "myhippoproject:simpledocument")
@Node(jcrType = "myhippoproject:simpledocument")
public class Simpledocument extends BaseDocument {
   @HippoEssentialsGenerated(internalName = "myhippoproject:title")
    public String getTitle() {
        return getProperty("myhippoproject:title");
   }

   @HippoEssentialsGenerated(internalName = "myhippoproject:content")
    public HippoHtml getContent() {
        return getHippoHtml("myhippoproject:content");
   }
}

In the next steps we will do some simple development to ensure our template gets the information it needs.

Step 4: Create a Java component

As you might recall, we have added a component to the system (as the page). We then set the template property to link it to the right JSP file. But, there is more we can do with a component. We can also execute any type of business logic that we want by referencing a Java component, which is what we will do now to make our page more dynamic.

Building a Hippo Java component is actually quite easy. Use your IDE to create a new Java class in the org.example.components package named SimpleComponent. Paste the following code in there.

package org.example.components;

import org.example.beans.Simpledocument;
import org.hippoecm.hst.component.support.bean.BaseHstComponent;
import org.hippoecm.hst.core.component.HstComponentException;
import org.hippoecm.hst.core.component.HstRequest;
import org.hippoecm.hst.core.component.HstResponse;
import org.hippoecm.hst.core.request.HstRequestContext;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;

public class SimpleComponent extends BaseHstComponent {

    public static final Logger log = LoggerFactory.getLogger(SimpleComponent.class);

   @Override
    public void doBeforeRender(final HstRequest request, final HstResponse response) throws HstComponentException {
        super.doBeforeRender(request, response);
       final HstRequestContext ctx = request.getRequestContext();

        // Load the document based on the URL
       Simpledocument document = (Simpledocument) ctx.getContentBean();

        if (document != null) {
            // Pass the loaded document to the request
           request.setAttribute("document", document);
       }
   }
}

There is just one method in our class, the doBeforeRender method. This method is an override of the BaseHstComponent, which ensures that this method will be called by the HST whenever the component needs to render something. As you can see, it is just normal Java, so you can make it do (almost) anything you want.

In the method we do a couple of things. First, we will use the request (a Hippo specific version of a normal ServletRequest) to get the request context. This class provides access to most of the Hippo specific methods. For instance, we use the context to get the right content bean, the SimpleDocument bean. Finally, whenever a document is there, we will use the request object to pass the variable to the template.

Step 5: Change the template

We pass the document to the template, but the template is still the static JSP we created before. So, open the JSP file in the IDE and change the body of the document to:

<c:choose>
    <c:when test="${not empty document}" >
        <h1><c:out value="${document.title}" /></h1>
        <div>
            <hst:html hippohtml="${document.content}" />
        </div>
    </c:when>
    <c:otherwise>
        <h1>Goodbye? cruel world </h1>
    </c:otherwise>
</c:choose>

In the JSP we use normal JSTL tags to handle the specifics such as validating. The most special tag here is the hst:html tag. This is a special tag in the HST tag library that will process the data contained by the Rich Text Editor, ensuring all internal links are validated and rewritten to the right URL.

We are now done with all the code changes, so let's rebuild the project and move on!

mvn clean install && mvn -Pcargo.run

Step 6: Back to the console

After the build is done, we can go back to the http://localhost:8080/cms/console to add the newly created Java component. We could add this classname directly as a property on our page, but let's explore a different path.

In the console, we will add a new hst:component (node) to the hst:components section. Call it simplecomponent and after it is created, add a property called hst:componentclassname and set the value to org.example.components.SimpleComponent. We have now added our first completely reusable component!

We can also make sure the page uses this logic, rather than having it's own. To do so, select the home node in hst:pages. Add a property to it named hst:referencecomponent and set the value to hst:components/simplecomponent.

Don't forget to write your changes and visit the site again. http://localhost:8080/site/

//onehippo-prod.global.ssl.fastly.net/binaries/ninecolumn/content/gallery/connect/trails/goodbye.png

goodbye

Step 7: Linking the document to the URL

Our template currently executes the logic for not having a document present. This makes sense, because we did not tell the HST where to find our document. In our configuration, there is just one tiny thing missing, which is easily fixed.

Go back to http://localhost:8080/cms/console for one last time and open the hst:sitemap node. Select the root node. In here we will add a property called hst:relativecontentpath and set the value to hello-world. This will tell the CMS to locate the content on that relative path. As you can see, here we use the URL name we have talked about before. If you created a folder to store your document, you will enter a relative path similar to /.

Just so you know, in a normal project you will use a lot of wildcards to handle this, so you don't have to manually link all documents to a specific URL. If you write the changes and test it again, we actually see the page we would expect!

//onehippo-prod.global.ssl.fastly.net/binaries/ninecolumn/content/gallery/connect/trails/final-result.png

final-result

 

Next step : Building your website !