OFBiz Tutorial-Using CMS for Static Web Pages

In my last post regarding usage of CMS for Front End application we saw how to setup simple static content page using contentId in OFBiz screen definition. You just need to setup the content data and controller entry to make it work.

Now we will see how to setup CMS driven static page for a website. Following four steps are going to be the magic:

  • WebSite Publish Point Setup
  • Decorator Content Data Setup
  • Static Content Data Setup
  • CMS request in Controller

Assumption: A component is already setup; here the name of the component is “cmsdemo” . If you have not done that already please go through my last post OFBiz tutorial on CMS usage for front end application.

Setting up Website Publish Point

Its easy to setup Website publish point in data. Below is an example of  how to do this in the content data file, in this case the name of the file is CmsDemoData.xml:

<content contentId="root" contentTypeId="WEB_SITE_PUB_PT" contentName="Webstore Site Publish Point" description="Root publish point for CMS website"/>
<webSite webSiteId="CmsWebSite" siteName="CMS Web Site"/>
<webSiteContent webSiteId="CmsWebSite" contentId="root" webSiteContentTypeId="PUBLISH_POINT" fromDate="2010-01-01 00:00:00"/>

Also make sure you have webSiteId entry in web.xml of your application as shown below:

<context-param>
    <param-name>webSiteId</param-name>
    <param-value>CmsWebSite</param-value>
    <description>A unique ID used to look up the WebSite entity</description>
</context-param>

Setting CMS Site Main Decorator

Content Data

Content data setup refers to the decorator screen for static pages:

<dataResource dataResourceId="CMS_ST_DEC" dataResourceTypeId="URL_RESOURCE" dataTemplateTypeId="SCREEN_COMBINED"
objectInfo="component://cmsdemo/widget/CommonScreens.xml#cms-main-decorator"/>
<content contentId="CMS_ST_DEC" contentTypeId="DECORATOR" contentName="CMS Site Main Decorator" dataResourceId="CMS_ST_DEC"/>
<contentPurpose contentId="CMS_ST_DEC" contentPurposeTypeId="SECTION"/>

Screens

Setup the main decorator for your site as shown below, it can have more resources included, but right now it has very little information:

<screen name="main-decorator">
    <section>
        <actions>
            <property-map resource="CmsDemoUiLabels" map-name="uiLabelMap" global="true"/>
            <property-map resource="CommonUiLabels" map-name="uiLabelMap" global="true"/>

            <set field="layoutSettings.companyName" from-field="uiLabelMap.CmsDemoCompanyName" global="true"/>
            <set field="layoutSettings.companySubtitle" from-field="uiLabelMap.CmsDemoCompanySubtitle" global="true"/>

            <set field="activeApp" value="cmsdemo" global="true"/>
            <set field="applicationMenuName" value="MainAppBar" global="true"/>
            <set field="applicationMenuLocation" value="component://cmsdemo/widget/CmsDemoMenus.xml" global="true"/>
            <set field="applicationTitle" value="${uiLabelMap.CmsDemoApplication}" global="true"/>
        </actions>
        <widgets>
            <include-screen name="GlobalDecorator" location="component://common/widget/CommonScreens.xml"/>
        </widgets>
    </section>
</screen>

Now you need to setup the cms-main-decorator screen as shown in the code below which will include the above given main decorator of the site.

<screen name="cms-main-decorator">
    <section>
        <actions></actions>
        <widgets>
            <decorator-screen name="main-decorator" location="${parameters.mainDecoratorLocation}">
                <decorator-section name="body">
                    <section>
                        <condition>
                            <not><if-empty field="decoratedContent"/></not>
                        </condition>
                        <widgets>
                            <platform-specific>
                                <html>
                                    <html-template location="component://cmsdemo/webapp/cmsdemo/cms/DecoratedContent.ftl"/>
                                </html>
                            </platform-specific>
                        </widgets>
                        <fail-widgets><label text="Problem in loading static content"/></fail-widgets>
                    </section>
                </decorator-section>
            </decorator-screen>
        </widgets>
    </section>
</screen>

Decorated Content Freemarker Template

The DecoratedContent.ftl that you included in your cms-main-decorator, shown above, needs to be created at a given location by the same name with only the code as shown below, which is setup by the cms event and rendered:

${decoratedContent}

Setup Content Data for Static Page

Setup the content data line like the code below, which will use section-sub-content pattern and will use the decorator content that we created in an earlier step. Here I have given an example of how you can setup a privacy policy page for your site.

<dataResource dataResourceId="privacy" dataResourceTypeId="ELECTRONIC_TEXT" dataTemplateTypeId="FTL"/>
<electronicText dataResourceId="privacy">
    <textData>
        <![CDATA[
                <h1>Privacy Policy</h1>
                <h2><p>This is privacy policy page</p></h2>
                <p>Privacy Policy datailed text Goes here</p>
        ]]>
     </textData>
</electronicText>
<content contentId="privacy" contentTypeId="DOCUMENT" contentName="CMS Site Privacy Page" dataResourceId="privacy" decoratorContentId="CMS_ST_DEC"/>
<contentPurpose contentId="privacy" contentPurposeTypeId="SECTION"/>
<contentAssoc contentId="root" contentIdTo="privacy" contentAssocTypeId="SUB_CONTENT" fromDate="2001-01-01 00:00:00" mapKey="privacyPage"/>

Creating Controller Entry

Now create request entries in controller.xml to handle CMS page requests as shown below:

<!-- default request; call into CMS -->
<default-request request-uri="cms"/>
<request-map uri="cms">
    <event type="java" path="org.ofbiz.content.cms.CmsEvents" invoke="cms"/>
    <response name="success" type="none"/>
    <response name="error" type="view" value="error"/>
</request-map>

Provide links to CMS Page/Pages

Now its time to link CMS page with a menu on your web site as shown below:

<a href="<@ofbizUrl>cms/root/privacyPage</@ofbizUrl>">Privacy Policy</a>

You are done. Just load the data file which you created in CMS site data. Browse the url: http://localhost:8080/cmsdemo/control/cms/root/privacyPage which is based on ContentAssoc record we created earlier for privacy page as mentioned below:

<contentAssoc contentId="root" contentIdTo="privacy" contentAssocTypeId="SUB_CONTENT" fromDate="2001-01-01 00:00:00" mapKey="privacyPage"/>

In the resultant screen you will see following page as per your data setup done:
FinalImage

 

 

 

 

 

 

 

 

 

 

This way you can add in as many pages as you want for a website which are static in nature and let your client feel good when it comes to make any changes in content. They can simply login to Content Manager and can update the content easily without any code modification activity at any point of time.


DATE: Jun 29, 2010
AUTHOR: Pranay Pandey
OFBiz Tutorials, cms, OFBiz Development, OFBiz Tutorial, Content Management System (CMS), OFBiz, Pranay Pandey, ofbiz cms, ofbiz content management