Page Creation and Management

You have a few options for accessing the page creation interface. To unify this, it necessitates that we cover the Dockbar's Manage menu slightly out of order. There are two interfaces to be aware of: Site Pages and Page. You can get to these from multiple places. Depending on what you're editing and where you are on the portal, you'll use either the Manage menu or the control panel to work with your pages. From the control panel, make sure that you have the correct site selected in the context menu and click the Site Pages link in the content section. If you're currently navigated to the site you wish to manage, click Manage from the Dockbar and select Site Pages. This is the exact same interface that you see in the control panel. To modify the single page in the site that you're on, click Manage and select Page.

Figure 2.1: Managing Individual Pages

For convenience, you can also navigate to the Sites page under the Portal section of the control panel and click Actions → Manage Pages. To quickly add a single page while you're browsing a site, click Add from the Dockbar and select Page, and a page is added immediately. You can then enter a name for the page and work on it immediately.

Figure 2.2: Managing Site Pages

Site Pages is an interface to view existing pages, create new pages, view pages, and export or import pages using Liferay Archive (LAR) files. Note that you can switch between managing a set of pages and managing a single page using the left-hand side navigation menu. Click on Public Pages or Private Pages to manage the group or click on an individual page to manage just that one. Switching views like this changes this list of available tabs to the right. By default, liferay.com, which we renamed nosester.com, contains a single public page called Welcome.

Liferay's page groups are always associated with sites. Even users' personal pages are part of their personal sites. All pages must belong to one of two sets of pages: public pages or private pages. By default, anyone, even guests, can access a site's public pages. Private pages are accessible only to users who are members of the site which owns the pages. This means that the private pages of an organization's site would be viewable only by members of the organization.

Regardless of whether the pages are public or private, Liferay uses the same interface to manage them. Let's look at this interface more closely.

Managing Pages

From the Manage Site Pages dialog box, you can add a page to the site by clicking the Add Page button. Because Public Pages is selected on the left, clicking Add Page here adds a top level page next to the Welcome page. You can, however, nest pages as deeply as you like. To create a sub-page under the Welcome page, select the Welcome page first and then create your page. 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 Community. We'll use this page for the Recent Bloggers and Wiki portlets.

Figure 2.3: Adding Pages

When you create a new page, you can create either a blank page or a page prepopulated with portlets from a page template. When you're entering the name of the page, you can select from a list of page templates that are currently available. To view the pages once you add them, click the View Pages button. This is how you'd populate your pages with content and applications. This is covered in succeeding chapters.

If you're using the Manage Pages interface to create a new page, you'll have some additional options to create different types of pages. There are Portlet Pages, Panel Pages, Embedded Pages, URL Pages, and Link to Page. By default all pages are created as portlet pages, but in some situations you might want to use one of the other options.

Portlet Pages are the pages that we're usually talking about. They have a layout which you can drag and drop portlets into. The overwhelming majority of pages that you create will be portlet pages.

Panel Pages can have any number of portlets on them, as selected by an administrator, but only one will be displayed at a time. The users select which portlet they want to use from a menu on the left side of the page, and the selected portlet takes up the entire page.

Figure 2.4: A panel page

Embedded Pages display content from another website inside of your portal. An administrator can set a URL from in the page management interface, and that page will appear in the context and within the navigation of your Liferay portal.

URL Pages are just redirects to any URL specified by an administrator. You can use this to link to pages within your portal on another community, or to an external site. These should be used with caution, as blind redirects can create a poor user experience.

A Link to Page is a portal page which functions as an immediate redirect to another page within the same site. You can select which page to link to from a dropdown in the page management interface. This can be useful for putting a deeply nested page in the primary navigation, or just for confusing your users.

Once you've created pages and populated them with content, Liferay provides a way for you to back them up to separate files. Let's see how that works.

Backing up and Restoring Pages

Next to the Add Page button in the Manage Site Pages screen are two buttons labeled Export and Import. The Export button exports the pages you create into a single file, called a LAR (Liferay Archive). You can then import this file into any server running Liferay to re-create the pages. If you have a LAR that you would like to import, use the Import button. Exporting and Importing LARs is a great way to take content from one environment (say, a development or QA environment) and move it all in one shot to your production server. Note that you should not make it a regular process to do this. If you want to regularly move pages from one server to another, you should use Liferay's staging environment, which is covered in chapter 3.

LARs are also a good way to back up your site's content. You can export them 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 administrators and export a LAR file for backup purposes. Click on the Export button and then name the file nosesterv1.lar. Use the check boxes to determine what you'd like to export. For this initial export, select everything. Note that if you select the More Options link, the list expands to include data from many of Liferay's applications, including the Documents and Media Library, Message Boards, and Web Content. You can also export the theme you're using.

Once you click Export, your browser prompts you to save the file. Once you have the file, you can copy it to a backup location for safekeeping 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 by clicking the Import button from the Manage Site Pages dialog box, browsing to it, and selecting it.

Next, we'll look at the options on the right side menu, starting with Look and Feel.

Customizing the Look and Feel

When you open the Manage Site Pages dialog box it defaults to the Look and Feel tab. On this tab, you're presented with an interface that allows you to choose a theme for the current site. Themes can transform the entire look of the portal. They are created by developers and are easily installed using the Liferay Marketplace. Since we don't have any themes beyond the default one installed yet, we'll use the default theme for our pages.

Figure 2.5: Look and Feel Interface

Many themes include more than one color scheme. This allows you to keep the existing look and feel while giving your site a different flavor. Change the color scheme from blue to green by selecting Green under Color Schemes. If you now go back to the site (by clicking Back to nosester.com in the top left corner of the control panel), you'll see that some parts of the page are now tinged in a greenish hue.

If you apply a color scheme to a set of public or private pages it is, by default, applied to each page in the set. If, however, you open the Manage Pages dialog box for a particular page, you can select Define a specific look and feel for this page to make the color scheme apply to this page only. You can use this feature to choose a different color scheme for a particular page than the one defined for the set of public or private pages to which it belongs.

There are a few more configurable settings for your theme. You can switch the bullet style between dots and arrows and you can choose whether or not to show portlet borders by default.

Also notice that themes can apply to regular browsers or mobile devices. You could create another site for mobile users attached to the http://m.nosester.com address and serve up a page designed for the smaller screens on phones.

The CSS section 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.

The next option configures the logo that appears for your site.

Using a custom logo

If you want to use your own logo for a specific site, use the Logo tab. Adding a custom logo is easy: select the Logo tab and browse to the location of your logo. Make sure that your logo fits the space in the top left corner of the theme you're using for your web site. If you don't, you could wind up with a site that's difficult to navigate, as other page elements are pushed aside to make way for the logo.

In the logo tab, you can also choose whether or not to display the site name on the site. If you check the box labeled Show Site Name the site name will appear in the the top right corner of the page. This option is enabled by default, and cannot be disabled if the Allow Site Administrators to set their own logo option is disabled in Portal Settings. It is also not available on the default community -- only newly created communities and user pages have the option to have the name display.

When you click on a specific page, some other options become available to you.

Changing options for individual pages

When you select a single page, some different options appear. Let's look at what these do.

Details: lets you name the page for any localizations you need. You can also set the HTML title that appears in the browser window for the page. Finally, you can set an easy to remember, friendly URL for the page.

SEO: provides several means of optimizing the data the page provides to an indexer that's crawling the page. You can set the various meta tags for description, keywords, and robots. There's also a separate Robots section that lets you tell indexing robots how frequently the page is updated and how it should be prioritized. If the page is localized, you can select a box to make Liferay generate canonical links by language. If you want to set some of these settings for the entire site, you can specify them from the Sitemaps and Robots tabs of the Manage Site Settings dialog box (see below).

---

tip

In previous versions of Liferay, it was possible that a single page could be indexed multiple times. In Liferay 6.1, to improve search ratings for your pages, all URLs that direct to the same page will only create one entry in the index. So, for example while previously the simple URL http://www.nosester.com/web/guest/blog/-/blogs/thenose and different versions of the URL which provided additional information about the referring page and what not, like http://www.nosester.com/web/guest/blog/-/blogs/thenose?redirect_33&... would have different entries in the index, now there is only one. From the search engines point of view, this will make your pages rank higher, since, for example, any references to any variations of a specific URL will be considered references to the one page.]

---

Look and Feel: lets you set a page-specific theme.

Layout: lets you specify how portlets are arranged on a page. Choose from the available installed templates to modify the layout. It's very easy for developers to define custom layouts and add them to the list, and this is covered in both the Liferay Developer's Guide and in Liferay in Action.

JavaScript: gives you the ability to paste custom Javascript code to be executed on this page.

Custom fields: If custom fields have been defined for pages (which can be done from the Custom Fields page of the control panel), they appear here. These are metadata about the page, and can be anything you like, such as author or creation date.

Advanced: contains several optional features. You can set a query string to provide parameters to the page. This can become useful to web content templates, which you'll see in the next chapter. You can set a target for the page so that it either pops up in a particularly named window or appears in a frameset. And you can set an icon for the page that appears in the navigation menu.

Mobile Rule Groups: allows you to apply rules for how this page should be rendered for various mobile devices. You can set these up in the Mobile Device Rules section of the control panel.

Customization Settings: lets you mark specific sections of the page that you want users to be able to customize.

Note that the Manage → Page Layout menu directs you to the same Layout tab that's in Manage → 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 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, select Manage → Page Layout from the Dockbar.

Now, select the 2 Columns (70/30) layout and click Save. Once saved, you'll return to the page and it'll seem as though nothing has happened. Once we start adding portlets, however, you'll notice that 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, use the Nested Portlets portlet to embed a layout inside another layout. This portlet is a container for other portlets. It lets you 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.

The next option in the Manage menu is page customizations.

Page Customizations

Page Customizations are a new feature in Liferay 6.1. With Page Customizations, any user can create personalized versions of any public page that has customizations enabled. Customizations are based on the rows and columns of a page layout. Administrators can activate or deactivate customizations for any row or column on any page. When users customize a page, they have the option to use either their version or the default version of a page. Users can't see alternate versions of pages other than their own.

Figure 2.6: Setting Customizable Columns

When an administrator activates Page Customizations for a page, any portlets that are in a Customizable row or column can be moved around the page or removed from the page. Users can add new portlets of their own choosing to the page. If at any time users determine that they don't like their customizations, they can click Reset My Customizations to revert their pages back to the default.

Now that you know how to configure pages, let's look at the settings for the site as a whole.

Configuring Site Settings

As with Site Pages, you can access Site Settings through the control panel or directly from the site using the Dockbar (Manage → Site Settings).

Figure 2.7: Site Settings

You'll find options to specify details and metadata about your site, set up friendly URLs and virtual hosts, configure search engine optimization settings, turn staging on or off, and specify a Google Analytics ID. Let's take a closer look.

Details: allows an administrator to change the description and membership type of a site, and also to specify tags and categories for the site. The membership type can be set as open, restricted, or private based on the privacy needs of the site. Users can join and leave an open site at will. To join a restricted site, a user has to be added by the site administrator, but can request to be added through the Sites section of the control panel. A private site is like a restricted site, but doesn't appear in the Sites section of the control panel for users who aren't members.

Pages: From Site Settings, click on Pages to manage some basic features of the pages on a site. If no pages have been defined yet, you can set site templates for the public or private pages. If pages already exist, links are provided to view them. You can also change the site's application adapter, which is a special type of hook plugin that customizes out of the box functionality for specific sites.

Site URL: Set the virtual host for your site and/or a friendly URL here. The Friendly URL option lets you manage the path to your site in the portal's URL. This needs to be a unique name, of course. Having a human-readable friendly URL assists indexing bots, and is critical to good search engine optimization.

Virtual Hosts make web navigation much easier for your users by connecting a domain name to a site. This tab allows you to define a domain name (i.e., www.mycompany.com) for your site. This can be a full domain or a subdomain. This enables you to host a number of web sites as separate sites on one Liferay server.

For instance, if we set this up for Nose-ster's Development Network, users in that site could use developers.nosester.com to get to their site, provided that Nose-ster's network administrators created the domain name and pointed it to the Liferay server.

To set this up, the DNS name developers.nosester.com should point to your portal's IP address first. Then enter http://developers.noseter.com in the Virtual Host tab for the Developers site. This helps users quickly access their site without having to recall an extended URL.

Site Template: If you've created the site from a site template, this section displays information about the link between the site template and the site. Specifically, you can see which site template was used and whether or not it allows modifications to the pages inherited from it by site administrators. If you're not using site templates for this site, you can safely ignore this section.

Sitemap: lets you send a sitemap to some search engines so they can crawl your site. It uses the sitemap protocol, which is an industry standard. You can publish your site to Yahoo or Google, and their web crawlers 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.

By selecting one of the search engine links, the sitemap will be sent to them. It's only necessary to do this once per site. 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, select the Preview link to see the generated XML.

Robots: If you're using virtual hosting for this site, you can configure robots.txt rules for the domain. The Robots page gives you the option to configure your robots.txt for both public and private pages on a site. If you don't have Virtual Hosting set up, this tab is rather boring.

Staging: enables you to edit and revise a page behind the scenes, and then publish changes to your site once they have been completed and reviewed. For a full explanation of Staging, see Chapter 3: Managing Content.

Analytics: 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 free service which lets you do all kinds of traffic analysis on your site, so you can see who visits, where visitors are 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.

Next in the menu is Site Memberships, which is covered in chapter 12. There, you'll learn how to administer a Liferay portal and define users and permissions.

Page Templates and Site Templates

Page Templates and Site Templates are invaluable tools for building similar pages on larger portals. As you continue to add pages to sites in your portal, you'll notice repeatable patterns in the designs of those pages. Page templates enable you to preconfigure a single page and then apply it to any new page that you create. Site Templates allow you to do the same thing, but on the scale of a site--if you have multiple sites that use a similar structure of pages, you can create a single site template and use it to create as many sites as desired. For a full explanation of Page Templates and Site Templates, see chapter 12.

Site Content

Liferay 6.1 makes it easier to access Web Content management without using the control panel. You can now click Manage and then Site Content to access the same Web Content controls that are featured in the control panel right from your portal page.

Figure 2.10: Site Content

You can manage the following kinds of content:

• Recent Content
• Web Content
• Documents and Media
• Bookmarks
• Calendar
• Message Boards
• Blogs
• Wiki
• Polls
• Software Catalog
• Tags
• Categories
• Social Equity
• Dynamic Data Lists

For details about Liferay's social collaboration suite, see chapter 4.