In addition to themes, Liferay Portal has several enhancements that make it very straightforward to combine static CMS articles and functionality-rich portlets on the same portal page. One direct application of this capability is to create your public website using Liferay, and thereby enable the inclusion of portlets on your website. Not only would you be able to reuse functional components and find innovative ways to use them, but you could also quickly build new pages out of common components within a tightly-managed CMS framework.

As an example, suppose an insurance company wants to show their prospective customers how much they can save by switching to their insurance plan. Online visitors can go to their website, fill out a short form, and receive pricing information instantaneously. If this insurance company uses Liferay to build their website, they can easily develop a pricing calculator portlet, grant guest access, and display it on the front page of their website. The CMS-managed article describing the plan can be placed right beside the calculator portlet.

Also, incorporating portlets into your website helps to encourage reuse. If two different pages on your website need to offer the same functionality, one portlet can simply be placed in both pages.

Liferay Portal also comes with portlets specifically designed to help you build a public website easily. The Breadcrumb Portlet keeps track of how deep a user has gone into the navigation of a site. The Navigation Portlet can be configured to act as a standard nested navigation menu. These and other portlets can be re-used and easily included on every content page where they are needed. Once the main Theme layout has been created, pages can be put together using these portlets without touching the presentation code. Layout is handled strictly through portal page configuration.

Besides providing functionality, a website also needs to provide information. Liferay Portal allows CMS articles to be inserted into your portal just like any other portlet. You can thus easily bring various articles together to assemble a website.

Using the above example, the insurance company may want one portlet containing a CMS article describing their pricing. Right next to it is another portlet with CMS articles on customer testimonials. The layout of the page the articles live in is managed within the portal’s admin section, and the content and layout of the individual articles is easily maintained through the journal portlet.

Liferay Portal also ships with the Runtime Portlet and the Portlet Aggregator. The Runtime Portlet is used to embed portlets into CMS articles. This portlet is used at Liferay.com to embed an instance of the Login Portlet within the article that is displayed on the main web page.

The Portlet Aggregator provides a flexible means to lay out several portlets. You are no longer confined to the strict rigidity of a column layout, but you can set the layout of several portlets dynamically using HTML and CSS.

Note: For documentation on Liferay’s CMS, please see the Liferay Portal User Guide.

Example of CMS and Web Portal Integration

Liferay’s main website was recently rebuilt to utilize the portal instead of using linked CMS pages. In this new version, each page on the website is a layout (page) comprised of several different portlets. To illustrate, let’s take Liferay’s "Company Overview" page as an example. Figure 2.1.4.1 shows the webpage with each of the five portlets marked. (You can view the actual page here)

Figure 2.1.4.1 Company Overview

"Company Overview," like most other pages on Liferay.com, is a portal layout (page) with two columns, one narrow and one wide, containing various portlets that supply its content. Portlets two and four, denoted in Figure 2.1.4.1, are instances of the Navigation and Breadcrumb Portlets, respectively. The remaining three portlets are instances of the Journal Content portlet; each contains its own CMS article. Portlet one and three contain a single picture each, and portlet five contains a detailed overview of Liferay.

You can add, delete, and organize page layouts by using the Admin section (Figure 2.1.4.2), accessed by the "Content and Layout" button.

Figure 2.1.4.2 Admin Portlet

For the Company page, we added the "Company" layout right under the "Home" layout. Also notice the Friendly URL field. This field allows you to assign a simple URL to a layout. So instead of linking to this page with the URL www.liferay.com/c/portal/layout?p_p_id=34..., you can use a simplified URL like www.liferay.com/web/guest/company.

Once the "Company" page layout has been added, you can add different portlets to quickly assemble your webpage.

For example, to add the Breadcrumb Portlet to the right column:

To add a CMS article in the left column:

Note: When assembling your webpage, remember to extract all the presentation attributes to your theme. This way, all the attributes are centralized. For example, to remove the gap between the wide and narrow columns, we set the "margin" attribute in the "Brochure" theme to zero.