Develop the Products Feature Part 1: Document Type - Enterprise Java Content management system - Hippo CMS

Develop the Products Feature Part 1: Document Type

Previous Step

Add the Secondary Navigation Menu to the About Page

In the next couple of steps you will develop a complete new feature (Products) from scratch, starting with the Product document type and content bean.

Product Document Type

Point your browser to the web design and study the Products Overview and Product Detail pages. Identify the different properties of a product that are displayed:

  • Title
  • Price
  • One or more images
  • Introduction (short description in products overview)
  • Description (long description on product detail pages)
  • Rating (out of scope in this sprint)

Point your browser to Hippo CMS:  http://localhost:8080/cms/. Log in as user 'admin' with password 'admin'.

Open the Content tab and select Document Types from the dropdown.

Add a new document type to the 'gogreen' namespace by choosing New document type from its context menu.

//onehippo-prod.global.ssl.fastly.net/binaries/ninecolumn/content/gallery/connect/trails/build-a-website/12.5/products-document-type/gogreen-new-document-type.png

In the dialog that appears, enter the name "product" and leave the supertype to the default selection 'basedocument'. Click next.

//onehippo-prod.global.ssl.fastly.net/binaries/ninecolumn/content/gallery/connect/trails/build-a-website/12.5/products-document-type/new-document-type-dialog.png

Choose the 1 Column layout for the new document type. Click finish.

//onehippo-prod.global.ssl.fastly.net/binaries/ninecolumn/content/gallery/connect/trails/build-a-website/12.5/products-document-type/new-document-type-layout.png

The new document type is opened in the document type editor. Add the following fields:

Field Type Caption Path Required Multiple
String Title title yes no
Decimal Number Price price yes no
Text Introduction introduction yes no
Rich Text Editor Description description yes no
Image Link Images images yes yes

Click Done to save your work and close the editor.

From the Type Actions menu choose Commit to activate the new document type.

Load the setup application in your browser:  http://localhost:8080/essentials/.

Use the Template Query Generator in the Tools section to generate template queries for the product document type. Template queries are used to control which document types can be created in which folders.

//onehippo-prod.global.ssl.fastly.net/binaries/ninecolumn/content/gallery/connect/trails/build-a-website/developer-trail-12.3/template-query-generator.png

Click on the Document button, then on the Folder button to generate the template queries.

//onehippo-prod.global.ssl.fastly.net/binaries/ninecolumn/content/gallery/connect/trails/build-a-website/developer-trail-12.3/template-query-generated.png

Back in the CMS, on the Content tab, select Images from the dropdown in the left column and add a new folder 'products' under the root image folder 'GoGreen'.

Upload some product images from the web design, for example:

  • binaries/content/gallery/products/smcenturian_detail.jpg
  • binaries/content/gallery/products/lifeproof-ipad-case.jpg
  • binaries/content/gallery/products/family-tent.jpg

Select Documents from the dropdown in the left column and add a new translated folder 'products' under the root content folder 'GoGreen'.

Open the 'products' folder's context menu and select Edit allowed content...

//onehippo-prod.global.ssl.fastly.net/binaries/ninecolumn/content/gallery/connect/trails/build-a-website/developer-trail-12.3/edit-allowed-content.png

In the dialog that appears, remove the two default template queries (Add new translated... folder and Add new document...) and using the dropdown, add the following two queries:

  • Add new product folder...
  • Add new product document...

//onehippo-prod.global.ssl.fastly.net/binaries/ninecolumn/content/gallery/connect/trails/build-a-website/developer-trail-12.3/edit-allowed-content-dialog.png

Click OK to save the changes. You have now configured the 'products' folder so that only 'product' can be created in it (and in any subfolder created inside it).

Create some product documents in the 'products' folder and publish them.

You can use product names from the web design, and the images you just uploaded, for example:

  • Solar Centurian - Outdoor Security Light
  • Lifeproof nüüd IPad Air Case
  • MEC Lodge 4+4 Tent

//onehippo-prod.global.ssl.fastly.net/binaries/ninecolumn/content/gallery/connect/trails/build-a-website/12.5/products-document-type/edit-product-document.png

Load the setup application in your browser:  http://localhost:8080/essentials/.

Use the Bean Writer in the Tools section to (re-)generate content beans for your project. It will pick up the new product document type and create a new Java class.

Make sure that under Use the following image set for new methods of image return type you check "Imageset".

Make sure Update existing methods with selected image set, too is  not checked.

//onehippo-prod.global.ssl.fastly.net/binaries/ninecolumn/content/gallery/connect/trails/build-a-website/developer-trail-10.0/sprint-2/products-document-type/products-beanwriter.png

Open the file  site/src/main/java/org/example/beans/Product.java that was created in your project.

package org.example.beans;

import org.onehippo.cms7.essentials.dashboard.annotations.HippoEssentialsGenerated;
import org.hippoecm.hst.content.beans.Node;
import org.hippoecm.hst.content.beans.standard.HippoDocument;
import org.hippoecm.hst.content.beans.standard.HippoHtml;
import java.util.List;
import org.example.beans.Imageset;

@HippoEssentialsGenerated(internalName = "gogreen:product")
@Node(jcrType = "gogreen:product")
public class Product extends BaseDocument {
    @HippoEssentialsGenerated(internalName = "gogreen:title")
    public String getTitle() {
        return getProperty("gogreen:title");
    }

    @HippoEssentialsGenerated(internalName = "gogreen:price")
    public Double getPrice() {
        return getProperty("gogreen:price");
    }

    @HippoEssentialsGenerated(internalName = "gogreen:introduction")
    public String getIntroduction() {
        return getProperty("gogreen:introduction");
    }

    @HippoEssentialsGenerated(internalName = "gogreen:description")
    public HippoHtml getDescription() {
        return getHippoHtml("gogreen:description");
    }

    @HippoEssentialsGenerated(internalName = "gogreen:images")
    public List<Imageset> getImages() {
        return getLinkedBeans("gogreen:images", Imageset.class);
    }
}

Note the "get" methods that have been generated for each field you added to the document type.

Stop, rebuild and restart the application.

Next Step

Develop the Products Feature Part 2: Products Overview Page

Develop the Products Feature Part 1: Document Type

Previous Step

Add the Secondary Navigation Menu to the About Page

In the next couple of steps you will develop a complete new feature (Products) from scratch, starting with the Product document type and content bean.

Product Document Type

Point your browser to the web design and study the Products Overview and Product Detail pages. Identify the different properties of a product that are displayed:

  • Title
  • Price
  • One or more images
  • Introduction (short description in products overview)
  • Description (long description on product detail pages)
  • Rating (out of scope in this sprint)

Point your browser to Hippo CMS:  http://localhost:8080/cms/. Log in as user 'admin' with password 'admin'.

Open the Content tab and select Document Types from the dropdown.

Add a new document type to the 'gogreen' namespace by choosing New document type from its context menu.

//onehippo-prod.global.ssl.fastly.net/binaries/ninecolumn/content/gallery/connect/trails/build-a-website/12.5/products-document-type/gogreen-new-document-type.png

In the dialog that appears, enter the name "product" and leave the supertype to the default selection 'basedocument'. Click next.

//onehippo-prod.global.ssl.fastly.net/binaries/ninecolumn/content/gallery/connect/trails/build-a-website/12.5/products-document-type/new-document-type-dialog.png

Choose the 1 Column layout for the new document type. Click finish.

//onehippo-prod.global.ssl.fastly.net/binaries/ninecolumn/content/gallery/connect/trails/build-a-website/12.5/products-document-type/new-document-type-layout.png

The new document type is opened in the document type editor. Add the following fields:

Field Type Caption Path Required Multiple
String Title title yes no
Decimal Number Price price yes no
Text Introduction introduction yes no
Rich Text Editor Description description yes no
Image Link Images images yes yes

Click Done to save your work and close the editor.

From the Type Actions menu choose Commit to activate the new document type.

Load the setup application in your browser:  http://localhost:8080/essentials/.

Use the Template Query Generator in the Tools section to generate template queries for the product document type. Template queries are used to control which document types can be created in which folders.

//onehippo-prod.global.ssl.fastly.net/binaries/ninecolumn/content/gallery/connect/trails/build-a-website/developer-trail-12.3/template-query-generator.png

Click on the Document button, then on the Folder button to generate the template queries.

//onehippo-prod.global.ssl.fastly.net/binaries/ninecolumn/content/gallery/connect/trails/build-a-website/developer-trail-12.3/template-query-generated.png

Back in the CMS, on the Content tab, select Images from the dropdown in the left column and add a new folder 'products' under the root image folder 'GoGreen'.

Upload some product images from the web design, for example:

  • binaries/content/gallery/products/smcenturian_detail.jpg
  • binaries/content/gallery/products/lifeproof-ipad-case.jpg
  • binaries/content/gallery/products/family-tent.jpg

Select Documents from the dropdown in the left column and add a new translated folder 'products' under the root content folder 'GoGreen'.

Open the 'products' folder's context menu and select Edit allowed content...

//onehippo-prod.global.ssl.fastly.net/binaries/ninecolumn/content/gallery/connect/trails/build-a-website/developer-trail-12.3/edit-allowed-content.png

In the dialog that appears, remove the two default template queries (Add new translated... folder and Add new document...) and using the dropdown, add the following two queries:

  • Add new product folder...
  • Add new product document...

//onehippo-prod.global.ssl.fastly.net/binaries/ninecolumn/content/gallery/connect/trails/build-a-website/developer-trail-12.3/edit-allowed-content-dialog.png

Click OK to save the changes. You have now configured the 'products' folder so that only 'product' can be created in it (and in any subfolder created inside it).

Create some product documents in the 'products' folder and publish them.

You can use product names from the web design, and the images you just uploaded, for example:

  • Solar Centurian - Outdoor Security Light
  • Lifeproof nüüd IPad Air Case
  • MEC Lodge 4+4 Tent

//onehippo-prod.global.ssl.fastly.net/binaries/ninecolumn/content/gallery/connect/trails/build-a-website/12.5/products-document-type/edit-product-document.png

Load the setup application in your browser:  http://localhost:8080/essentials/.

Use the Bean Writer in the Tools section to (re-)generate content beans for your project. It will pick up the new product document type and create a new Java class.

Make sure that under Use the following image set for new methods of image return type you check "Imageset".

Make sure Update existing methods with selected image set, too is  not checked.

//onehippo-prod.global.ssl.fastly.net/binaries/ninecolumn/content/gallery/connect/trails/build-a-website/developer-trail-10.0/sprint-2/products-document-type/products-beanwriter.png

Open the file  site/src/main/java/org/example/beans/Product.java that was created in your project.

package org.example.beans;

import org.onehippo.cms7.essentials.dashboard.annotations.HippoEssentialsGenerated;
import org.hippoecm.hst.content.beans.Node;
import org.hippoecm.hst.content.beans.standard.HippoDocument;
import org.hippoecm.hst.content.beans.standard.HippoHtml;
import java.util.List;
import org.example.beans.Imageset;

@HippoEssentialsGenerated(internalName = "gogreen:product")
@Node(jcrType = "gogreen:product")
public class Product extends BaseDocument {
    @HippoEssentialsGenerated(internalName = "gogreen:title")
    public String getTitle() {
        return getProperty("gogreen:title");
    }

    @HippoEssentialsGenerated(internalName = "gogreen:price")
    public Double getPrice() {
        return getProperty("gogreen:price");
    }

    @HippoEssentialsGenerated(internalName = "gogreen:introduction")
    public String getIntroduction() {
        return getProperty("gogreen:introduction");
    }

    @HippoEssentialsGenerated(internalName = "gogreen:description")
    public HippoHtml getDescription() {
        return getHippoHtml("gogreen:description");
    }

    @HippoEssentialsGenerated(internalName = "gogreen:images")
    public List<Imageset> getImages() {
        return getLinkedBeans("gogreen:images", Imageset.class);
    }
}

Note the "get" methods that have been generated for each field you added to the document type.

Stop, rebuild and restart the application.

Next Step

Develop the Products Feature Part 2: Products Overview Page