BLOG

NEXT STEPS

Posts Tagged ‘ofbiz cms’

OFBiz Tutorial: Quick Updates For CMS Pages In OFBiz

Thursday, July 22nd, 2010

In my earlier posts we saw how can we setup different static pages for a site developed in OFBiz.

Now we will see how your client or a developer can directly make changes to the static pages. For this we use Content Manger application.

The following are easy steps which can be communicated to clients once the static content data setup is completed by the development team and the site is live. Later these changes can be easily managed by client.

  1. Log into backend managment app :https://localhost:8443/content/control/mainOfbiz Tutorial Quick Cms Updates 1
  2. Select Content from the menuOfbiz Tutorial Quick Cms Updates 2
  3. In the search options put in the appropriate search criteria and click on the Find button eg. STORE_POLICIES. Results will show the list of contents matching the search criteriaOfbiz Tutorial Quick Cms Updates 3
  4. Click on the Page name under the Data Resource ID Column to edit. (in this case STORE_POLICIES)Ofbiz Tutorial Quick Cms Updates 4
  5. Click the TEXT or HTML link in the top to view/edit the Text/Html text based on skills to update them one is text editor and other one is html text editorOfbiz Tutorial Quick Cms Updates 5
  6. Edit the text and press the Update button and the page will update the text on the site.

This was one of the process that can be used to update static page contents on the site without requiring any changes in code base. So now whenever it comes to updating text on static pages when the site is live, these changes can be done easily with Content Manger application.
If you want to get more details related to OOTB OFBiz processes contact HotWax Media today.


Pranay

Pranay Pandey is Manager, Enterprise Software Development at HotWax Media (OFBiz Service Provider) and has been involved with the OFBiz project since 2007. He contributes actively to OFBiz, and also trains HotWax Media developers in OFBiz techniques and best practices.

OFBiz Tutorial-Using CMS for Static Web Pages

Tuesday, June 29th, 2010

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:

?View Code LANGUAGE
1
2
3
<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:

?View Code LANGUAGE
1
2
3
4
5
<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:

?View Code LANGUAGE
1
2
3
4
<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:

?View Code LANGUAGE
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<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.

?View Code LANGUAGE
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<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:

?View Code LANGUAGE
1
${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.

?View Code LANGUAGE
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<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:

?View Code LANGUAGE
1
2
3
4
5
6
7
8
<!-- 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:

1
<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. Hit the url:http://localhost:8080/cmsdemo/control/cms/root/privacyPage which is based on ContentAssoc record we created earlier for privacy page:

?View Code LANGUAGE
1
<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 in a site which are static in nature and let  your client feel good when it comes to make any changes in content and they can just go in to Content Manager and can update the content easily without any code modification activity at any point of time.


Pranay

Pranay Pandey is Manager, Enterprise Software Development at HotWax Media (OFBiz Service Provider) and has been involved with the OFBiz project since 2007. He contributes actively to OFBiz, and also trains HotWax Media developers in OFBiz techniques and best practices.

OFBiz Tutorial – Using CMS for Front End Application Static Pages – Part-1‏

Wednesday, March 17th, 2010

In this post we will demonstrate OFBiz Content Management System usage for front end application static pages through simple content data setup and using it in a screen. This gives clients the flexibility to change the text to be shown on a static page when ever they want, without asking for any code change.

Take the example of an OFBiz e-commerce storefront web site.  Often times, clients will wish to include “static” pages like About Us, FAQ, and so on.  We want to empower the client to update this copy him/herself, without needing to request help from a programmer.  The following example gives us a simple look at how that is done.

All the details given here are supported by the out-of-the-box (OOTB) OFBiz CMS implementation.

In this exercise we will:

  • see the basic concept of DataResource and Content record.
  • setup content data to embed FTL markup.
  • setup a content driven screen and use it show the static content setup in data.

• Assumption: a component is already setup; here we using the name “cmsdemo” for component.

DataResource and Content records

Let’s suppose that we want to define content (that we will include in a screen) for the text “This is the text that will appear on screen.”.

Data Resource of type ELECTRONIC_TEXT

First of all we have to define a DataResource representing this text. This gives you greater flexibility because you can store long texts in the textData field. If you want to embed FTL markup (directives etc…) that needs to be processed before the rendering you can achieve this using the dataTemplateTypeId attribute, in this way all the Freemarker instructions in the text will be executed before rendering the screen. Following data needs to be setup in a data file:

?View Code LANGUAGE
1
2
3
4
5
6
7
8
</p>
<DataResource dataResourceId="DS_EXAMPLE" dataResourceTypeId="ELECTRONIC_TEXT" dataTemplateTypeId="FTL"/>
<ElectronicText dataResourceId="DS_EXAMPLE">
<textData><![CDATA[
<h1>CMS DEMO</h1>
<h2>This is the text that will appear on screen.</h2>
]]></textData>
</ElectronicText>
Content

Now we have to create a Content record that is associated to the DataResource. 
No matter what type of data resource you have choosen, the Content record is the same like:

?View Code LANGUAGE
1
<Content contentId="CN_EXAMPLE" contentTypeId="DOCUMENT" contentName="Content 01" dataResourceId="DS_EXAMPLE"/>

Using the element in a screen definition.

Now we can easily include the content directly inside the section of the screen definition with the following directive:

?View Code LANGUAGE
1
2
3
4
5
6
7
8
9
<screen name="main">
<section>
<actions>
</actions>
<widgets>
<content content-id="CN_EXAMPLE"/>
</widgets>
</section>
</screen>

Running the content driven screen

Load data created for static content

Make sure to have an entry in ofbiz-component file for the data file created for CMS date that we created earlier in the step.

?View Code LANGUAGE
1
<entity-resource type="data" reader-name="demo" loader="main" location="data/CmsDemoDemoData.xml"/>

or you can also load it through webtools \–> XML Data Import.

Now make sure you have main request and view defined in your controller file:

?View Code LANGUAGE
1
2
<request-map uri="main"><security https="false" auth="false"/><response name="success" type="view" value="main"/></request-map>
<view-map name="main" type="screen" page="component://cmsdemo/widget/CmsDemoScreens.xml#main"/>

When the request [https://localhost:8443/cmsdemo/control/main] is served you will see the following page that will show up the contents that you have setup in data:

ofbiz cms content management

This was a very basic example of OFBiz CMS capability.  We will expand on the details and demonstrate more OFBiz CMS functionality in upcoming posts.  If you need help with OFBiz CMS in the mean time, contact HotWax Media today!

- Pranay

Pranay Pandey is Manager, Enterprise Software Development at HotWax Media (OFBiz Service Provider) and has been involved with the OFBiz project since 2007. He contributes actively to OFBiz, and also trains HotWax Media developers in OFBiz techniques and best practices.