Hippo notes I

1. 1. Introduction
2. 2. Getting Started
3. 3. Setup Hippo Project
   1. 3.1. Hello page
4. 4. MVC in Hippo: A Hello Page
5. 5. Resolve Links to Static Resources
6. 6. Include Head Contributions
7. 7. Include Pages
8. 8. Configure Banners
9. 9. Confiure Search

• Introduction

Hippo is a java based Content Management System (CMS) that allows you to create, control, and deliver engaging content to your visitors in every channel. Hippo CMS is an open-source, dual licensed platform.

Ref: onehippo

There are three components to Hippo CMS (wiki):

1. Delivery tier
   The Hippo Site Toolkit is the presentation framework, using either JSP or FreeMarker to generate pages. Alternatively a EST API can be defined to serve structured content.
2. Interface
   The user interface through which the content management and administrative functionalities can be used.
3. Content repository
   All content, metadata and configuration is stored in a modified version of Apache Jackrabbit.

With Hippo’s open-source technology which integrates with a wide range of tools and data sources, you can analyse the behaviour of your visitors and optimise the performance of your content in any context, whether it’s web, mobile, social, apps, displays, billboards, or Internet-of-Things devices. It’s also easy to experiment and build new digital properties rapidly with Hippo’s open architecture and easy-to-use interface, bringing businesses the agility and freedom needed for creating the best next personalized digital customer experience.

• Getting Started

Learn Hippo: Demo, Tutorials & downloads.

Step 1: Create the ‘myhippoproject’ from the Hippo maven archetype using the command below.

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

Do not use special characters such as dot or dash in the artifactId. Also avoid using ‘cms’ or ‘hippo’ as artifactId because these are known to cause naming conflicts.

Type n at the prompt if you want to customize your project name or other parameters.

Step 2: Go to your project root folder ‘myhippoproject’and build your new project.

cd myhippoproject
mvn clean verify

If you are doing this for the first time, it might take some time as Maven will download all project dependencies from a remote repository server.

Step 3: Launch Hippo CMS by running the following command in myhippoproject

mvn -P cargo.run -Drepo.path=storage

This creates WAR files and immediately runs the project using Cargo.

Hippo CMS is now running and you are ready to start implementing your Hippo-based website.

Hippo CMS UI at http://localhost:8080/cms
Use admin/admin or editor/editor or author/author as username/password combination.

Hippo CMS Console at http://localhost:8080/cms/console

Setup Application at http://localhost:8080/essentials
The setup application provides a Feature Library from which features can be added to your project.
The first time you use the application it will show a setup screen. Read carefully and if needed, change the default parameters before clicking on Get Started.

Website at http://localhost:8080/site
The website will initially be empty. Once you have added some features from the library to the site it will render them using a default bootstrap theme.

• Setup Hippo Project

1. Choose templating language
   Either JSP or FreeMarker
2. The project needs to rebuild after adding plugins
3. Note that the pending changes will be deleted automatically by the setup application.
4. You don’t need to rebuild for every single feature you add to the project, it is sufficient to rebuild after you added a batch of features.

• Hello page

  1. Compile and run the project by using the following Maven commands:

     mvn verify
     mvn –P cargo.run

  2. Put the home.jsp file in site/src/main/webapp/WEB-INF/jsp/.

  3. Open hippo console, in the hst:hst/hst:configurations/myhippoproject/hst:templates, add a node and name it homepage. Add property hst:renderpath with value jsp/home.jsp.
  4. Select the hst:pages node and add a child node called home of type hst:component. Add a property hst:template to the home node with the value homepage (referring to the homepage just created).

  5. Select the hst:sitemap node and add a child node called root of type hst:sitemapitem. Add a property called hst:componentconfigurationid and set the value to hst:pages/home (referring to the page configuration just created).

     In Hippo, each page configuration consists of a hierarchy of components. Each component has their own template.

  6. Click on the Write changes to repository button in the top right corner.

  7. Open the site ( http://localhost:8080/site/) to see the wonderfully simple page created.
  8. Not convenient: every time making a change to the .jsp file, the project needs to rebuild.

• MVC in Hippo: A Hello Page

1. View
   In http://localhost:8080/cms/ -> content
   a. Create a document type
   b. Create a document

2. Model
   In http://localhost:8080/essentials/, Tools tab, click on Use Beanwriter. It will generate the beans for you. Then in site/src/main/java/org/example/beans/Simpledocument.java,

@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");
   }
}

3. Controller
   Create a new Java class in the site module, in the package org.example.components, named SimpleComponent with

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();
 
        // Retrieve the document based on the URL
        Simpledocument document = (Simpledocument) ctx.getContentBean();
 
        if (document != null) {
            // Put the document on the request
            request.setAttribute("document", document);
        }
   }
}

4. Dynamic view
   In home.ftl file,

<#assign hst=JspTaglibs["http://www.hippoecm.org/jsp/hst/core"] >
<html>
<head>
</head>
<body>
  <#if document??>
    <h1>${document.title?html}</h1>
    <div>
      <@hst.html hippohtml=document.content />
    </div>
    <#else>
      <h1>Goodbye? cruel world</h1>
  </#if>
</body>
</html>

5. Rebuild project
6. Configure the MVC Component

In cms/console:

/hst:hst/hst:configurations/myhippoproject/hst:components
    + simplecomponent [hst:component]
        - hst:componentclassname = org.example.components.SimpleComponent

/hst:hst/hst:configurations/myhippoproject/hst:pages/home
    - hst:referencecomponent = hst:components/simplecomponent
    - hst:template = homepage

7. Map the URL to the Content
   The template engine currently executes the logic for not having a document present. This makes sense, because you have configure your view and your controller, but not yet where to retrieve your model (and thus, your document).

/hst:hst/hst:configurations/myhippoproject/hst:sitemap/root
    - hst:componentconfigurationid = hst:pages/home
    - hst:relativecontentpath = hello-world

• Resolve Links to Static Resources

The exact URLs of those static resources depend on the context in which the application is deployed. They must be resolved dynamically using <@hst.webfile>.

E.g., replace:

<link rel="stylesheet" media="screen" type="text/css" href="css/yui-css.css" />

to

<link rel="stylesheet" media="screen" type="text/css"
      href="<@hst.webfile path="/css/yui-css.css"/>" />

Note that the path attribute of the <@hst.webfile> tag starts with a slash, where the original href attribute of the < link> element didn’t.

• Include Head Contributions

Components further down in the hierarchy may require additional CSS and Javascript files to be loaded. In that case those components will make a head contribution. The top level component’s template must include those contributions.

Inside the html element, just before the closing tag, insert the following line:

<@hst.headContributions categoryIncludes="htmlHead" xhtml=true/>

Inside the html element, just before the closing tag, insert the following line:

<@hst.headContributions categoryIncludes="htmlBodyEnd" xhtml=true/>

Open the file bootstrap/webfiles/src/main/resources/site/freemarker/hstdefault/essentials-carousel.ftl. This is the template for the out-of-the-box banner carousel.
In the template you can see an example of head contributions:

<@hst.headContribution category="htmlBodyEnd">
   <script type="text/javascript" src="<@hst.link path="/js/jquery-2.1.0.min.js"/>"></script>
 </@hst.headContribution>
 <@hst.headContribution category="htmlBodyEnd">
   <script type="text/javascript" src="<@hst.link path="/js/bootstrap.min.js"/>"></script>
 </@hst.headContribution>

• Include Pages

Include other html markup by using code

<@hst.include ref="menu"/>

Generate dynamic menus in bootstrap/webfiles/src/main/resources/site/freemarker/gogreen/base-top-menu.ftl. (Note that the file name and ref name is of difference.)

<#include "../include/imports.ftl">
<#if menu??>
  <#if menu.siteMenuItems??>
    <nav>
      <ul class="navigation" id="main-navigation">
        <#list menu.siteMenuItems as item>
          <#if  item.selected || item.expanded>
            <li><a href="<@hst.link link=item.hstLink/>" class="activelink"><span class="label-nav">${item.name?html}</span> </a></li>
          <#else>
            <li><a href="<@hst.link link=item.hstLink/>"><span class="label-nav">${item.name?html}</span></a></li>
          </#if>
        </#list>
      </ul>
    </nav>
  </#if>
  <@hst.cmseditmenu menu=menu/>
<#else>
  <#if editMode>
    <h5>[Menu Component]</h5>
    <sub>Click to edit Menu</sub>
  </#if>
</#if>

By following the same way, we have

<@hst.include ref="main"/>
<!-- and -->
<@hst.include ref="footer"/>

with the corresponding files like and homepage-main.ftl and base-footer.ftl.

Ref: Base page configuration

• Configure Banners

In homepage-main.ftl, add a container.

<#include "../include/imports.ftl">
<@hst.include ref="container"/>

Then, in http://localhost:8080/cms/, add images in Content/Images -> folder banners.

Then, create banner documents in Content/Documents -> folder banners.

1. Add related banner image and artical link
2. Publish it

Then, in Channel/YourWebsite/, click Edit. Drag the Carousel component icon into the rectangle labeled container in the home page’s main content area.

A configuration dialog will appear. In the Carousel Item 1 field click on the looking glass icon, browse to one of the Banner documents you added and select it. Click Save, then close the configuration dialog. The Banner Carousel now displays the selected banners.

Click Changes, then Publish.

• Confiure Search

Test search plugin: http://localhost:8080/site/search?query=news.

In base-layout.ftl, replace the value of the

element’s action attribute with <@hst.link siteMapItemRefId="search" />. It should now look like this:

<div class="searchbox">
  <form action="<@hst.link siteMapItemRefId="search" />" method="get">
    <input type="text" class="searchbox-inputtext" id="searchbox-inputtext" name="query"
      placeholder="Search" /> <label class="searchbox-icon" for="searchbox-inputtext"></label> <input
      type="submit" class="searchbox-submit" value="Search" />
  </form>
</div>

---