5/22/2011

Beginners Guide to Liferay Web Contents (Web CMS)

When you are using Liferay as a Web Content Management System, you can´t  get around creating Web Contents. This post shows you how to create them, and how to use Structures & Templates. It surely is a beginners guide to this field and I intend to add additional posts when I have the time.

What are Web Contents ?

Web Contents are pieces of content that can consist of HTML markus, javascript and CSS. So basically, a Web Content is a small HTML page. The internal description of Web Content is JournalArticle, that´s why (if you are a programmer) you will find all WebContents in the dataTable "journalarticle" and you have to use JournalArticleLocalServiceUtil to access the table. Web Contents, in contrast to portlets, can be created and administrated by end users, marketing departments or secretaries. 

How to create a simple Web Content

To create a Web Content, you need to have the right to enter the Liferay Control Panel. Open It, and on the right side, you´ll see the "Web Content".

Web Content Selection in Liferay Control Panel
The important parts on this page are "Web Content", "Structures" and "Templates". Structures define a data structure that will hold the data types (Strings, boolean values, images, link) that your Web Content will consist of. Templates take the data structure created in Structures and use it to create a web page. Web Contents specify the actual content that is used by the Template to build the displayed entity. This allows us to re-use Templates to create Web Contents that always will look and behave the same.

To start creating a first Web Content, select the "Structures" tab and click on "Add Structure". 


Creating a Structure
At the beginning, our structure is empty. Click on "Autogenerate ID" to let Liferay handling the ID creation. Enter "Hello World" as name and "Hello World Description" as our description. We will now create a simple Web Content that will have a headline, a picture and some content. To do so, click on "Add Row" three times. This will create three rows for our three data types. Give the three rows the names "headline", "pic" and "content". Next, select the type in the dropdown box next to the name field. For "headline" it's "Text", for pic it´s "Image Gallery" and for content it´s "Text Box (HTML)". This allows the editor later to enter a headline text, to select an image from the image gallery and to enter an html-formatted text. Even with javascript.

At the end, your structure will look like this:

Your structure

If you did this, click on "Save" and we are done with our Structure. Next, click on "Templates" and "Add Template". We need a template to transform our structure into something viewable. Let Liferay generate the ID, enter a name and a description and click on "Structure". By selecting our "Hello World" Structure, we link our template to it. 
The next thing, you have to do, is to write the template. This is done in velocity, and velocity itself is worth a couple of books. What we will do here is to write a little velocity script that will do nothing but to display our data. Here are the basics:



  • You can use HTML.
  • You can use Javascript.
  • To access a structures data (for example the value we will later enter into "headline") use $structurename.data.

Add the following HTML snippet into your Template Editor:


<p>
    <h1>$headline.data</h1></br>
    <img src="$pic.data"/></br>
    $content.data
</p>

This will create a simple headline followed by an image and our content. 
Now it`s time to put it all together. Upload an image of your choice to the Image Gallery, enter the "Web Content" section and click on "Create WebContent". Now - on the right side, select the template we just added, You will notice, that the structure is selected automatically.
You will also notice, that you now have some more fields to fill out - for the headline, the picture and the content. Enter some data and your screen should look like this:




This will be the editing screen all the people that don´t really care for data structures, velocity and all that stuff. Click on "Publish" when you finished and leave the control center.


Go to any page you want to display the Web Content and click on "Add" and then "Web Content Display":




Now, click on "Select Web Content" and you should see the Select Web Content View:




Click on "Save" and close the window and you are done. You should now see your Web Content:




If you want, you can change the headline. Click on the Portlet Menu, select "Look and Feel", click on "Use Custom Title" and enter a fancy name. If you don´t want any header (no title) deselect "Show Borders".


Read Part 2 here.



If you like this tutorial it would be very nice, if you could click on some of the google ads you see on the right side. It helps me run this block and motivates me ;)

If you have any questions, feel free to leave a comment.