Page Creation and Management
Your pages must contain something, right? The reason web pages exist at all is to display content. Whether you're using the web to share project information, advertise to potential customers, or demonstrate a golf swing—you're displaying content. And with Liferay's CMS, you'll find that the process of loading your pages up with content is extremely easy and straightforward, and you don't ever need to leave your browser.
Essentially, CMS is a suite of various portlets that include functionality for creating and displaying various types of content. Don't be concerned by the sheer number of applications you see in this category in the Add → More menu: we'll go over everything in a step-by-step fashion. We'll start by taking a look at page creation and management.
There are three ways to access the Manage Pages interface. If you are currently on the set of pages you wish to manage, simply go up to the Dockbar and select Manage, then Page. You can also access the Manage Pages tool two other ways in the Control Panel.
Illustration 34: Two paths to managing pagesThe first way is to simply select the community or organization that you want to work with in the Content section, and click on Pages in the left column. The second way is to select Actions and then select Manage Pages from the community or organization you're working with down in the portal section of the Control Panel.
If you only need to add a single page very quickly, you can simply go to Add → Page in the Dockbar, and a page will be added immediately. You can then click on the page in the navigation and begin working on it immediately.
Once you're in Manage Pages, you'll see an interface to create new pages, change various settings related to the set of pages you've selected, and export or import pages using Liferay Archive (LAR) files. We're just going to stay on the first tab under the Public Pages tab for now, so we can focus on the set of pages available to anyone visiting the site. By default, Liferay contains a single page called Welcome, and we'll leave it that way.
Understanding Public and Private Pages
Liferay's page groups are always associated with Users, Organizations, or Communities. And even under the hood, a user's personal pages are part of a private community just for that user.
All sets of pages are divided into two groups: Public Pages and Private Pages. Public Pages, by default, are accessible to anyone—including those who haven't logged in to the portal.
Private Pages, by default, are only accessible to the users who belong to the Organization or Community to which the pages belong. This means that an Organization's private pages would only be viewable by members of the Organization. The tabs for public and private pages have the same interface.
Manage Pages Interface
Illustration 35: Adding pages to a community is easy to do. As you can see, the screen defaults to the New Page tab. Because the name of the community is selected on the left, adding a page here will add a top level page next to the Welcome page. But you can nest pages as deeply as you wish. If you wanted to create a sub-page under the Welcome page, all you'd have to do is select the Welcome page first and then create your page. And if you later decide you don't like the order of your pages, you can drag and drop them in the list to put them in whatever order you want. Let's go ahead and add another top level page and name it Collaboration. We'll use this page for portlets such as Blogs and Wiki.
When you're finished adding your pages, you can get back to them by clicking the View Pages button just above the page hierarchy. Let's not do that just yet; we've got a few more options to cover.
Look and Feel
If you click the second tab, you'll be presented with an interface which allows you to choose a theme for the site upon which you are currently working. Themes can transform the entire look of the portal. Themes can be created by developers and can be installed very easily by using the Plugin Installer from the Control Panel, and this is detailed in Chapter 6.
Illustration 36: Many themes include more than one color scheme. This allows you to keep the existing look and feel, but give your site a bit of a different flavor than the default.
Since we don't have any themes beyond the default one installed yet, we'll use the default theme for our pages. Some themes have more than one color scheme which can be selected, including the default theme. Let's change the color scheme by selecting Themes and then clicking on the Green color scheme. If you then go back to the site (by clicking Back to Spartan Internet in the top left corner of the Control Panel), you'll see that some parts of the theme are now tinged in a greenish hue.
Also, notice that you can choose themes for regular browsers or mobile devices. You might create another community for mobile users attached to the http://m.spartansoftware.com address and serve up a page that is designed for the smaller screens on phones.
The CSS tab allows you to enter custom CSS that will also be served up by your theme. In this way, you can tweak a theme in real time by adding new styles or overriding existing ones.
Let's move on to the final tab under Pages.
Export / Import
The Export / Import tab allows you to export the pages you create into a single file, called a LAR (Liferay Archive). You can then import this file into any server running Liferay, and all of your pages will be copied. This is a great way to take your content from one environment (say, a development or QA environment) and move it all in one shot to your production server.
This is also a good way to back up your site's content. You can export it to a specific location on your server which is backed up, and if you ever have to restore your site, all you need to do is import the latest LAR file. One limitation on LAR files, however, is that they are version dependent, so you can't use an export from an old version of Liferay and import it into a newer version.
Let's be good admins and export a LAR file for backup purposes. Select the Export / Import tab and then name the file spartansoftwareV1.lar. We're asked what we would like to export. Let's select everything for this initial export. Note that if you select the More Options link, the list expands to include data from many of Liferay's applications, including the Document Library and the Wiki. You can also export the theme you're using.
Once you click the Export button, your browser will prompt you to save the file. Once you have the file, you can copy it to a backup location for safe keeping or import it into another installation of Liferay Portal. If you must rebuild or wish to revert back to this version of your site, you can import this file be selecting Export / Import and then selecting Import and then browsing to the file.
The Settings tab gives us several powerful tools. In this tab you'll find options to customize the logo, stage the content, connect a domain to a community or organization, take advantage of the Liferay's integration with Google Analytics, and more. Let's take a look at them in order.
You can make web navigation much easier for your users by connecting a domain name to a community or organization. This tab allows you to define a domain name (i.e., www.mycompany.com) for your community. This can be a full domain or a subdomain. This enables you to host a number of web sites as separate communities on one Liferay server.
For instance, if we set this up for Spartan Software's marketing community, users in that community could use marketing.spartansoftware.com to get to their community, provided that Spartan's network administrators created the domain name and pointed it to the Liferay server.
To set this up, you would simply configure the DNS for marketing.spartansoftware.com at the web address for your portal, and enter http://marketing.spartansoftware.com in the Virtual Host tab for the marketing community.
This can help users quickly access their community without recalling an extended URL.
If you want to use your own logo for a specific community or organization, you can configure an alternate logo here. To add a custom logo, select the Logo tab, then browse to the location of your file and select the Use Logo box. Be careful to make sure that your logo fits the space in the top left corner of the theme you are using for your web site.
The next tab lets you generate a sitemap to help you optimize your site for search engines. The Sitemap tab publishes your site using the sitemap protocol, a protocol that helps search engines crawl your web site to index all relevant information. You can publish your site to Yahoo or Google, and their search indexes will use the sitemap to index your site.
Liferay Portal makes this very simple for administrators by generating the sitemap XML automatically for all public web sites.
Illustration 37: Site Map Options
By selecting one of the search engine links, the sitemap will be sent to them. It's only necessary to do this once per community or organization. The search engine crawler will periodically crawl the sitemap once you've made the initial request.
If you're interested in seeing what is being sent to the search engines, selecting the Preview link allows you to see the generated XML.
The Monitoring tab allows you to integrate your pages with Google Analytics. Liferay provides seamless integration with Google Analytics, allowing you to place your ID in one place, and then it will get inserted automatically on every page. This enables you to focus your efforts on building the page, rather than remembering to put the code everywhere. Google Analytics is a fantastic, free service which lets you do all kinds of traffic analysis on your site, so you can see who visits, where they visit from, and what pages they most often visit. This helps you to tweak your site so that you can provide the most relevant content to your users.
Staging is a major feature of Liferay CMS. The concept of staging is a simple one: you don't want your users seeing your web site change before their eyes as you are modifying it, do you? Liferay's staging environment allows you to make changes to your site in a specialized staging area, and then when you are finished, publish the whole site to your users.
You can use staging in multiple ways. Larger organizations may consider having a staging server—a separate instance of Liferay Portal which is used just for staging. Content creators can then use this server to make their changes while the live server handles the incoming user traffic. When changes to the site are ready to be published, they can be pushed remotely to the live server.
Alternatively, you may want to host both your staging environment and your live environment on the same server—particularly if you are part of a smaller organization with less resources to purchase servers. Either way, once set up, the interface is the same; the only difference comes when it's actually time to publish your content.
Enabling the Staging Environment
The Staging tab allows us to make changes in a staging environment and preview our work before publishing it to the live site. Let's create a staging environment for the Spartan Software's Corporate Headquarters community.
First, we'll need to create the community. Go the Control Panel, select the Communities tab, and then select Add. In the Name field, type in Corporate Headquarters. Add a description and leave the type set to Open. After you've completed these steps, select Save.
Illustration 38: Setting up an Open Community
Now we're going to add a page to our new community. Since you're already in the Communities interface, you can simply select Actions → Manage Pages for the Corporate Headquarters community.
Add a new public page named News and Events. Next, click the View Pages button and add the Alerts and Announcements portlets to it.
Now we're ready to activate the staging feature for this community. You should now have two tabs or windows open in your browser to Liferay: one is on the Control Panel, and one contains the page you have just created. Return to the Control Panel tab where you're editing the page structure and select Settings → Staging.
Illustration 39: You can choose what content should be staged and what content should not be staged.
We'll assume we don't have a separate staging server, and so we'll select a staging type of Local Live. If you were to select Remote Live, you would also have needed to supply the name or IP of the remote server where staged content should be published, the port (80 if Liferay is sitting behind a web server, or the port your application server is listening on if not), and the remote community or organization ID. You can find this ID by selecting Actions → Edit on any community or organization in the Control Panel. Either way, once we make a selection (Local Live or Remote Live), many more options will become available to us.
We'll cover many of the collaboration portlets listed here when we come to chapter 5. For now you just need to be aware that the option is available to enable or disable staging for any of them, and you need to decide if you would like to stage content for these portlets. In the case of the collaborative portlets, the answer would of course be "no." Why? Because portlets such as the Message Boards are designed for user interaction. If their content were staged, you'd have to manually publish your site whenever somebody posted a message on the message boards in order to make that message appear on the live site.
Generally, you'll want Web Content to be staged, because end users aren't creating that kind of content—that's the stuff you publish to your site. But portlets like the message boards or the wiki would likely benefit from not being staged.
Under Advanced Options, you can select a number of Editorial Stages your content needs to go through. This means you can have your pages reviewed through up to six levels of approval before they get published. If you select a number of stages here, you'll next be asked to define roles for each stage. Users in these roles will need to approve the changes through however many stages you have selected in order for the changes to be published live. Let's see how all of this works.
Using the Staging Environment
If we navigate back to the News and Events page of the Corporate Headquarters community we'll now notice an orange border around the page, and the Staging link will be in the Dockbar. Select the Staging button and then View Staged Area. The page now has a red border.
Illustration 40: The live site has an orange border; the staged site has a red border.
Add the wiki portlet and then from the Dockbar select Staging → View Live Page. Notice that the wiki portlet isn't there. As you can see, only the page changes are staged; web content itself can go through a whole different workflow process (which we'll get to later). If you select Staging → View Staged Page, you'll also see that since we didn't configure the Wiki portlet to stage its content (because that content is user-submitted), the Wiki portlet in our staged area displays a warning message telling us that its content is not staged.
Now, let's say that our page is exactly the way we want it, and we want to publish it to the live site. If we have enabled more than one Editorial Stage, we can submit a proposal to have the content reviewed. If not, we can simply publish it to the live site.
To submit a proposal, you must be viewing the staged page. From there, you can go up to the Dockbar and select Staging → Propose Publication. Once you do this, a small dialog box will pop up asking you for the proposal description as well as allowing you to select the reviewer who should be able to review this proposal. The list of reviewers is populated from the roles you selected when you enabled Editorial Stages.
Once you've submitted your proposal, it will no longer be possible to submit more proposals. Your proposal will have to be dealt with by someone with the role who reviews the content at this editorial stage. To view the proposals, go back up to the Dockbar and select Staging → View Proposals. You'll then see the proposal you've submitted.
Illustration 41: Proposals must be approved or deleted.
Click on the proposal to view it. Here, you'll be able to change the approver, set a due date, select the next reviewer (from the role which is configured for that editorial stage), and, of course, the other options you'd expect: preview the proposed changes, approve, and reject.
Once rejected, the proposal needs to either be approved later or deleted. If the proposal is approved, it goes on to the next stage, if there's another approver. Otherwise, a Publish to Live button is enabled. In order to get the modified pages onto the live site, somebody has to push this button; there isn't a way to cause the pages to be published automatically upon the last approval.
Illustration 42: There's a specific workflow to use when publishing content using the staging environment.To publish the modified page we simply need to return to the proposal and click Publish to Live. Once this is done, Liferay will ask you what you wish to publish. In our example, we have only one page to publish, and it's already selected. All we have to do is click Publish. The changes are now live!
When it comes time to modify your site again, you simply repeat the process. You can enable staging on an individual community or organization basis, depending on your needs. This makes it really easy to put strict controls in place for your public web site, but to open things up for individual communities that don't need such strict controls. Liferay's staging environment is extremely easy to use and makes maintaining a content-rich web site a snap.
Editing a Page
There are a lot of other things you can do beyond placing portlets on a page. So let's move on from staging back to the Spartan Software community, which is not staged. You can do this by going up to the Dockbar and clicking Go To → Spartan Internet.
We'll use the Collaboration page you created earlier in the chapter. Navigate to the Collaboration page and select Manage → Page from the Dockbar.
This screen should now be familiar to you, but we haven't yet looked at all of its options.
The Page tab allows you to:
change the name of the page
enter HTML code for the title
choose the page type
hide the page from the theme navigation
define a friendly URL to the page
choose an icon to be displayed
choose a frame target for the page
copy an existing page
The Children tab lets you create child pages underneath the page you've selected. You can nest pages as deep as you like, but for every page below the top level hierarchy, you must provide navigation to it via a Navigation or Breadcrumb portlet, at least with most themes (including the default). Developers can create themes which have cascading menu bars which show the full hierarchy, and some examples of that are in Liferay's plugin repositories.
For now, let's just stick with the Page tab. Change the title to Collaborate with Spartan!, click Save, and then click Return to full page.
Modifying Page Layouts
Page layouts allow you to arrange your pages so that the content appears the way you want it to. Liferay comes shipped with many layouts already defined. Developers can create more and they can be deployed to your portal for your use.
In order to prepare for the portlets we'll soon be adding, let's change the layout of the Collaboration page. To access layouts, go up to the Dockbar and select Manage → Page Layout.
Now, select the 2 Columns (50/50) layout and then Save. Once saved, you'll return to the page and it'll seem as though nothing has happened. However, once we start adding portlets you'll notice how the page is now equally divided into two columns. You can stack portlets on top of each other in these columns. There are, of course, more complicated layouts available, and you can play around with them to get the layout that you want.
Sometimes a particular layout is almost what you want, but not quite. In this case, you can use the Nested Portlets portlet to embed a layout inside another layout. This portlet is simply a container for other portlets. Its configuration allows you to select from any of the layouts installed in Liferay, just like the layouts for a page. This gives you virtually unlimited options for laying out your pages.
As we discussed earlier, Liferay Portal pages are composed of portlets. All of your site's functionality, from blogs to shopping, is composed of portlets.
Adding portlets to a page is simple. Let's add some to our Collaboration page.
In the Dockbar, select Add → More.
In the window that appears, expand the Collaboration category.
Drag the Blogs portlet off the Add Application window onto the right column of our page.
Next, drag the Wiki portlet to the left column.
See how easy it is to add applications to your pages? We've gone one step further: we've got the Wiki portlet, the Blogs portlet, and then a nested portlet with a different layout and the Alerts, Unit Converter, and RSS portlets.
Illustration 43: Yeah, we're showoffs. But as you can see, your page layout options are virtually limitless.
You'll find it is very easy to make your pages look exactly the way you want them to. If the layout options provided aren't enough, you can even develop your own. More information about that can be found in Liferay's official guide to development, Liferay in Action.
By default, public pages are just that: public. They can be viewed by anybody, logged in or not logged in. And private pages are really only private from non-members of the community. If someone has joined your community or is a member of your organization, that person can see all of the private pages. You can, however, modify the permissions on individual pages in either page group so that only certain users can view them.
So, let's say we wanted to create a page only for administrators to see. We can do this with the following procedure:
Go to the Dockbar and select Manage → Control Panel.
Click the Pages link in the left navigation.
Click the Private Pages tab to switch to the Private Pages. Remember, these pages by default are viewable only by members of the community or organization.
Create a page called Admin Forums.
Click on the page in the tree on the left and then select the Page tab.
Click the Permissions button.
Uncheck the View permission next to the Guest role.
Uncheck the View and Add Discussion permissions next to the Community Member role.
Click the Save button.
Illustration 44: Permissions for Admin Forums
Congratulations! You've just changed the permissions for this page so that only community administrators can view it. Any users you add to this role will now be able to see the page. Other users, even members of this community, won't have the permissions to see it.
You now understand how to manage pages in Liferay Portal. It's time to move on to adding content to those pages. Liferay's Web Content Management (WCM) is a highly powerful, yet flexible, set of tools that enables you to successfully manage your web site.
You'll soon discover that Liferay's WCM is easy to learn and highly configurable. If you already have experience with WCM, you'll see some new features and improvements to old ones. If you're new to Liferay's WCM, then you'll be surprised at how fast you will be adding, editing, and scheduling content on your site. Once you're familiar with portlets such as Web Content Display and Asset Publisher, your ability to manage an immense site with a large amount of content will simply amaze you.
We'll be using Liferay's WCM to publish simple pieces of content, develop templates to define how content is to be displayed, set up a workflow for content to be approved, schedule when content is to be published and much, much more.
What is Web Content Management?
Web Content Management is a system which allows non-technical users to publish content to the web without having advanced knowledge of web technology or programming of any sort. Liferay CMS empowers you to publish your content with a simple point and click interface, and it helps you to keep your site fresh. You'll find yourself easily creating, editing, and publishing content within just a few minutes of being exposed to its features. But Liferay CMS doesn't sacrifice power for simplicity. If need be, you can use your developer skills to create complex presentation layer templates that make your content "pop" with dynamic elements. Once these templates have been deployed into the portal, your non-technical users can manage content using these templates as easily as they would manage static content. All of this makes Liferay CMS an appropriate choice for sites with only a few pages or sites with gigabytes of content.
How Can Liferay's WCM Help You?
With Liferay's WCM you have the ability to create, edit, stage, publish, and approve content with easy to learn yet powerful tools. Liferay's WCM streamlines site changes for the end user versus doing a site in HTML. Some ways Liferay WCM makes this possible include:
Once set up, non-technical users can manage the site.
Liferay's fine-grained permissions system ensures your content gets to the right users.
To manage the site, no programming is required.
Content can be staged.
Content can be passed through a workflow.
Content can be published on a schedule.
WCM is integrated with Liferay's services, so advanced template developers can use them to query for data stored elsewhere in Liferay.
What Features Does Liferay WCM Have?
Liferay's WCM has a host of features the makes managing the content of your site easier.
WYSIWYG Editor: A complete HTML editor that allow you to modify fonts, add color, insert images and much more.
Structure Editor: Easily add and remove fields you want available to content creators and then dynamically move them around. This editor includes an entire suite of form controls you can drag and drop onto your structure.
Template Editor: Import template script files that inform the system how to display the content within the fields determined by the structure.
Web Content Display: A portlet that allows you place web content on a page in your portal.
Asset Publisher: A portlet which can aggregate different types of content together in one view.
Scheduler: Lets you schedule when content is reviewed, displayed, and removed.
Workflow Integration: Run your content through an approval or review process.
Liferay's Web Content Management is a powerful and robust tool for creating and organizing content on your web site. Now that you've seen the basics of what you can do with Liferay's WCM, let's apply some of these concepts and create some content.