Creating the Securities Portal

You have installed and tested the Liferay installation on your machine. Now, open Liferay Portal by typing this URL into your web browser:

http://localhost:8080.

You need to log in before you create your first portal page. At the top-right corner of the screen, you will find a Welcome! drop-down menu. Click the down arrow to see the list of menu choices, and select Sign In to pull up a sign-in screen (see Figure 2-1).

Enter the following login information:
Login: This e-mail address is being protected from spambots. You need JavaScript enabled to view it
Password: test

After successful login, Liferay displays the Terms of Use on your screen. If you tested yourinstallation earlier (as described in Chapter 1), you will not get the Terms screen again.When you accept the terms, you will see the Welcome page. You’ll see a Welcome tab at the top-left corner of the page and an Add Page hyperlink at the top-right corner. You will use the latter to add pages to your portal.

Adding a Page

Clicking the Add Page menu adds a blank page to your portal and asks you to name the correspondingtab. Enter the name Home in the tab and click the Save button next to it. You now have a new page with the tab name Home (see Figure 2-2). Click this newly created tab to switch to your Home page, which is just a blank page right now. You need to add applications to it to make it meaningful.Figure 2-2. A blank Home page

Deleting a Page

Before you add more pages to your web portal, you should understand how to delete a pagefrom the portal. If you accidentally add a page that you don’t want, deleting it is simple. To gothrough the process, you’ll delete the newly created Home page. First deselect the Home pageby selecting another page—the Welcome page, in this case. Now place the mouse cursor onthe Home tab. You will notice that a red button appears on the top-right corner of it. This is thebutton for deleting the page.

When you click this button, both the Home tab and Home page disappear from your portal.Of course, before deleting the page, Liferay asks you for confirmation. The page is deletedfrom the portal only when you confirm that you want it removed.

Changing the Page Name

If you want to change the name of an existing page during portal development, you can simplyclick the tab name of the desired page. When you hover the mouse cursor over the name, thecursor becomes a text-insertion icon. Clicking the tab at this point pops up an edit box withthe current tab name. You can now edit the displayed name. Click the Save button next to theedit box or simply hit the Enter key to save your changes. The new name now appears in thetab. If you decide to discard the changes, click any other tab to deselect the current page or hitthe Esc key. Doing this discards your changes and retains the old name in the display tab.Now that you’ve seen the process of creating and deleting a web page in your portal alongwith changing the name of an existing page, you should add several more pages.

Adding Multiple Pages

Because our portal will cater to the needs of both fundamental and technical analysts, you’llcreate portal pages to meet the requirements of both groups. The page for those who believemore in fundamental analysis will aggregate the corporations’ fundamental information andprovide analysis by experts. The page for technical analysts will contain technical informationsuch as charts, tickers, and so on.In addition to the fundamental and technical pages, you’ll also create a page for communitycollaboration. You’ll host several community-related activities on this page such asmessage boards, blogs, calendars, wikis, and so on.Finally, you’ll need a page for the portal administrator. So you’ll create these new pagesfor your portal, following the previous instructions on adding pages:

• Home
• Fundamentals
• Technicals
• Community
• Admin

Adding Child Pages

So far you have created the portal’s main pages, whose names appear in their page tabs. Mostof the time you’ll find it sufficient to create only the main pages, but in certain situations youmight want to create child pages for the main pages. The user will access these child pagesthrough submenus of the main pages’ tab names. You’ll now add a few child pages to theCommunity page.

To add a child page, click the Welcome drop-down box shown on the top-right corner ofthe screen. Select the Manage Pages menu option from the displayed list (see Figure 2-3).Figure 2-3. Menu options available under your login

Clicking the Manage Pages menu option opens the application that lets you manage yourweb pages (see Figure 2-4).

Here, you will find options for editing a page, changing its look and feel, and exportingand importing page data. By default, the application opens in page-edit mode and displays theinformation on the currently selected page. On the left side of the page, you will see the hierarchyof all the pages currently defined in the portal.To add a child page under the Community page, first click Community from the list ofpages on the left and then click the Children tab. This changes the screen to child-page mode(see Figure 2-5).

Enter Fundamental Analysts as the name for the new page. Leave the other values as theirdefaults and click the Add Page button to add the page under the Community main page. Addtwo more child pages under the Community page with the names Technical Analysts andGeneral Investors. Each time you add a child page, the hierarchy on the left side of the screenupdates to show you the newly added page.nNote You will be required to expand the node hierarchy to see the child pages. Initially, before any childpages are defined, the nodes don’t display expansion icons. Once you add child pages, you can access theirnodes using the new expansion icons in the tree.After you add the three child pages, your page hierarchy should look like the one shown inFigure 2-6.

Now, return to the main screen by clicking the Return to Full Page link at the top-rightcorner of the screen.Changing the Page’s Display OrderSo you’ve added several pages to your web portal. But perhaps you are not satisfied with theorder in which the pages are arranged in the display tabs. To modify the order, click the Pagestab in the Manage Pages application and select the top node in the displayed list. Select theDisplay Order tab on the right side of the page to bring up the list of child pages in a list box.Alongside the list box, you will find up and down arrow buttons. Select one of the childpages in the list box and use the arrow buttons to move it up or down in the list. Once you aresatisfied with the new list order, click the Update Display Order button. Click Return to FullPage to examine your changes.To set the display order of any other node’s child pages, select the node in the tree hierarchyand follow the same steps. Figure 2-7 shows how the screen looks when you select theCommunity node and access the Display Order tab.

Editing a Page

You can edit a page to change its tab name, HTML title, and so on. In the Manage Pages application,select the top-level Pages tab, then the Page tab underneath. Select the page you wantto edit from the hierarchy; let’s do the Fundamentals page first (see Figure 2-8).If you wish to change the page name, type it in the Name edit box. In the HTML Title editbox, type the title for the page. Leave the type as Portlet. In the Friendly URL edit box, changethe default URL to /Fundamental. By default, Liferay assigns a URL to every page that you create.It would be difficult to remember all the machine-generated URLs, so it’s a good idea toassign a URL of your choice to each created page using the Friendly URL edit box.You can set the page’s icon using the Browse button to populate the Icon field. Once youare satisfied with your edits, click the Save button to save your changes.Likewise, select other pages in the hierarchy to edit them. After you complete the edits onall the desired pages, click the Return to Full Page link to return to your portal and verify your changes.

Applying Themes

So far, you have learned to add, delete, and customize pages in your portal. A page added tothe portal is displayed in the tab list.

Clicking any tab brings the corresponding page to the forefront. But how do you changethe look of your entire portal? In other words, how do you change the header, footer, pagelogo, placement of tabbed menus, and so on? Liferay allows you to change the look and feel ofyour entire portal by providing themes. A theme basically defines the look of your web page.Liferay provides some default themes, and many more themes created by Liferay user communitiesare available to you.You will now learn to apply a new theme to our web portal. Start the Manage Pages applicationand select the Look and Feel tab from the top-left corner of the page (see Figure 2-9).The changes you make here will apply to all the pages you have created.

On this screen, you will find a list of themes provided in the Liferay installation. Each itemon the list also shows a thumbnail image of how your screen will look after applying the correspondingtheme. The currently applied theme for our portal is Classic. Select the Liferay Jeditheme instead. Observe the changes by returning to full-page view and navigate to differentpages to verify the application of the new theme.The Welcome page of our web portal after the Liferay Jedi theme is applied is shown inFigure 2-10.

Individual Page Themes

It is also possible to apply a different theme to each page in your portal. To do so, once againstart the Manage Pages application. Select the page to which you want to apply a new theme.You will see several options for editing the page; click the Look and Feel tab. You will see thelist of available themes as you did when applying a theme to the entire portal. Select a differenttheme for the chosen page. Likewise, select different pages from the page hierarchy and applya new theme to each one. Once you have completed the changes, return to the portal. Nowview the pages by clicking their respective tabs. You will find that each displayed page has adifferent look depending on the applied theme.

Installing New Themes

Liferay provides many themes beyond what’s included in the basic product. You can downloadand install these themes from the web portal that you have created so far. The themesare packaged in .war files as web applications. You will need to download and deploy theseon your web server using the Plugin Installer application that Liferay provides. As the namesuggests, Plugin Installer allows you to install new themes, portlets, and layout templates. I’llshow you how to add this application to the web portal’s Admin page.

Click the Admin tab to activate the administration page. This page is currently blank; itdoes not contain any applications. To add an application to this page, select Add Applicationfrom the Welcome menu (see Figure 2-11).

Clicking the Add Application menu displays the list of available applications on the leftside of the screen (see Figure 2-12).

The applications are arranged by category. Click the Admin menu item, select the PluginInstaller application, and click the Add button next to it. You will find that the application hasbeen added to your Admin web page (see Figure 2-13).

Caution You must be connected to the Internet while performing these steps.

In the Plugin Installer application, you will find theme plugins, portlet plugins, layouttemplateplugins, and web plugins. Click the Theme Plugins tab to see the list of availablethemes and select the Envision 5.1.1.2 theme as an example.

Selecting the theme displays the product information on the next screen (see Figure 2-14)

Click the Install button to download and install the theme. After the theme downloadssuccessfully, you will get a Done message at the bottom of the screen, after which Liferayperforms the installation. It takes a few seconds to install the theme on the server; you canmonitor the installation process on the web-server console. Once the theme has deployed successfully,return to the full-page view of your portal.You can now apply the new theme to a page of your choice. When you drill down to theThemes option in your Manage Pages application, you will see the newly added theme asshown in Figure 2-15.

Select the new theme to apply it to your web page. If you’re using the Envision theme,your page will look like the one shown in Figure 2-16.

The Plugin Installer application makes it easy to download and install themes directlythrough your Liferay portal. But you’ll need to follow a different process to use themes fromLiferay’s user communities. I’ll discuss that next.

Downloading Community Themes

You can download the community themes from the Liferay web site (http://www.liferay.com).Under the Downloads menu option, you will find the Official Plugins and Community Pluginsmenu options. Select Community Plugins to display a product list that includes portlet plugins,layout-template plugins, and theme plugins. The list runs across multiple pages, but I’veincluded a partial screenshot of one of the pages (see Figure 2-17).

Scroll down the list on the first page and select the Transparentia theme for our portal.(If you do not find this theme listed on the first page by the time you read this book, usethe search facility to locate it.) This takes you to the product description page as shown inFigure 2-18.
 

At the bottom of the screen, click the Actions button associated with the most recent versionof the plugin. Then click Direct Download to start downloading the plugin’s .war file. Savethe file to a desired location.

Installing Community Themes

To install the Transparentia theme you just downloaded from the Liferay web site, start thePlugin Installer application and click the Upload File tab. You will see the screen shown inFigure 2-19.

Click the Browse button to select the previously downloaded .war file corresponding to thedesired theme, then click the Install button to install the new theme on the application server.You can verify that the theme is installed by viewing the available themes in the Manage Pagesapplication, and you can apply the new theme from there.

By this time, you have learned to add portal pages and delete them, edit individual pages,set page themes, and so on. Now for the most important part: adding content to your portalpages.

Aggregating Content

In this section, you will learn to add applications and aggregate their contents for display ona single page. You’ll be aggregating Java portlets from Liferay and its community sites. In general,you should study the functionality of the available portlets to see whether they suit yourportal’s requirements. In this case, you’ll initially focus on applications that fulfill the businessrequirements described in the section “Defining the Securities Portal.”Begin by customizing the Home page: activate the Home page on the portal by clickingthe respective tab. To display the list of available applications, select the Add Applicationmenu item from the Welcome drop-down list. (You saw this list earlier while adding the PluginInstaller to your Admin page.) Let’s now examine the different categories and applicationsavailable for use:

• Admin
• CMS
• Collaboration
• Community
• Entertainment
• Finance
• News• Polls
• Religion
• Sample
• Shopping
• Tools
• Undefined
• Wiki

Setting Up the Home Page:

Adding an Introduction

To put a portal introduction on the Home page, add the Journal Content application fromthe CMS category. After you’ve done this, your screen should look like the one shown inFigure 2-20.Figure 2-20.
 

The Journal Content application screenAt the top of the application screen, you will find links that allow you to set the look andfeel and to configure the application. Next to the Configuration link, you will find the Closelink. Clicking this link removes the application from the web page (after you confirm you’dlike to delete it, of course). At the bottom of the application screen, you will find two icons: oneallows you to select an existing article for display; the other allows you to add a new article.You don’t have any articles yet, so select the option to create a new one.

Creating an Article

Click the Add Article icon to bring up the screen shown in Figure 2-21. Here, you will be able tocreate a new article for display.Figure 2-21. Adding contents to a new journal articleIn the article editor, enter the following information:Welcome toInernational Security Investors PortalAre you a small investor or a big investor? Do you invest in domestic markets or worldmarkets? Are you a short-term investor or a long-term investor? Do you trust technicalanalysis or fundamental analysis? It doesn’t matter. As long as you trade in securities,this portal is for you.

After entering the information, select and format the text as you wish. (I’ll show you sometypical sample output later in this section.) After you are done with the text editing, enter thearticle name as Welcome Journal and click the Save and Approve button at the bottom of thescreen. This returns you to the portal Home page, where you’ll be able to see the journal-articleentry as you formatted it.

Adding an Image

You will now add an image to the journal article. Open the main Journal Content applicationscreen to display your article list. Select an article and click the Edit Article icon to open it inthe editor. Place the cursor at the top-left corner of the article where you would like to add theimage, and click the Insert/Edit Image icon in the editor toolbox to open the Image Properties dialog (see Figure 2-22).
 

Selecting an image for the journal articleIn the Image Properties dialog, you need to enter the URL of your image. You haven’tloaded the image on the server yet, so click the Browse Server button to see the list of availableservers. Select the Guest folder and create a new subfolder called Images where you will storeyour uploaded image documents. The corresponding screenshot is shown in Figure 2-23.

Selecting a folder for uploading imagesSelect the Images folder and click the Browse button to locate the image file you want toupload. After selecting the file, click the Upload button to upload the image file to the server.After the image is uploaded, you will return to the Browse Server screen where you can selectthe recently uploaded file. The URL of the file now appears in the edit box in front of theBrowse Server button on the Image Properties screen.

Stay in the Image Properties screen and enter some Alternative Text in the correspondingedit box, such as ISI Logo. When you hover the mouse cursor over the image, thealternative text you just entered will appear as a tool tip. At this stage, you should be ableto see the image along with the rest of the text in your Image Properties window. Click theOK button in the image-selection dialog, then click the Save button in the editor window toreturn to the Home page and view the changes. You should be able to see both the text andimage in the journal entry.

Setting Look and Feel

You will now add some design elements to the article. Click the Configuration button (the firstbutton on the left in the group of four buttons displayed in the right-hand corner) and selectthe Look and Feel menu item from the displayed list. You will see the configuration dialog asshown in Figure 2-24.

Here, you will be able to set the text, background, border styles, margins, and paddings.Click the Background Styles tab to set the background color for the article (selectblue, in this case).

Now set the margins and paddings using the Margin and Padding tab. Set the Padding to20 px and leave the Margin setting as is. Now set the portlet title by clicking the Portlet Configurationtab. You’ll opt for a blank title, so remove any contents from the Portlet Title edit box.Check the Use Custom Title check box and uncheck the Show Borders check box next to it. Thelatter action will remove the application border when it is displayed on the portal page.

Click the Save button to save all the changes you have made to the Journal Content portlet.Close the dialog to return to the Home page, where all your changes should be reflectedin the displayed journal entry. At this stage, your Home page should look similar to the oneshown in Figure 2-25. (The appearance might differ, depending on the colors you chose andthe picture you uploaded.)

Now you’ll add a few more applications to your Home page, starting with the News applicationthat lets the user see the latest stock-related news when visiting the portal.

Adding News

Liferay provides a portal application for an online news feed. You will find this News portletlisted under the News category of the Add Application list. Add this News application to yourHome page and view the changes (see Figure 2-26)

As in the case of the Journal Content application, you will find icons for setting the lookand feel of the application and configuring it. In addition to these two icons, you will find twonew icons called Preferences and Guest Preferences, which let you set the news feed. Use thePreferences option to get news related to equities markets. After clicking the Preferences icon,you will find the News Selections dialog with several news categories displayed in it. By default,two news feeds are already selected for you:

• International relations under the Society category
• Top stories under the Top Stories category

Deselect these default options by clicking their respective links and unchecking the correspondingcheck boxes. Click the Save button to persist your changes and the Back button to goback to the previous screen. Now click the Finance category to see its various news feeds (seeFigure 2-27).Figure 2-27.
 

News feeds available under the Finance categorySelect the Securities and Stock Exchanges options. Save your changes and return to fullscreenmode. You will find that the news related to the selected choices is displayed in theNews portlet. You can select different news feeds by returning to the Preferences dialog.

Adding an RSS Feed

Now you’ll add an RSS feed to your Home page. You will find the RSS application listed in theNews category of the Add Applications menu list. Add this application to your Home page. Asyou did with the News application, you will need to customize this application by selecting thesource for the RSS feed. To select a new URL for the RSS feed, click the Configuration icon. Youwill find three URL sources listed on this page. Remove these sources by clicking the deleteicon next to each one. Add these two new URLs by clicking the URL icon and entering the followinginformation in the URL text boxes:

http://www.nyse.com/audience/systemstatus/TraderUpdates.xml
http://www.nyse.com/audience/systemstatus/flooralerts.xml

After you make the changes, your screen should look like the one shown in Figure 2-28.

Figure 2-28. Setting the RSS feed sourceThese URLs provide news on the NYSE (New York Stock Exchange). Feel free to add anyRSS feed of your choice. You can add multiple URLs for different RSS feeds. Once you completeyour edits, save your changes and return to the Home page. You will find the news relatedto your selected topics displayed in the RSS portlet on your Home page.

Using the Sign-In and Site-Navigation Portlets

Finally, you will add two more applications to your Home page: Sign In and Site Map. The SignIn portlet, listed under the Tools category, allows the user to log in to the portal and displaysthe user information after she logs in. The Site Map application, listed under the CMS category,displays the map of the entire portal site and allows the user to navigate to any page easily.Add both applications to your Home page. The use of these applications is self-explanatory.As an alternative to the Site Map portlet, you can use the Breadcrumb portlet or the Navigationportlet under the CMS category to display site-location information on your page. TheNavigation portlet allows you to set the display and bullet styles for the displayed map path,whereas the Breadcrumb portlet allows you to set only the display style. These two portlets arealso context-sensitive. For instance, the Navigation portlet shows only navigation options tochild pages of the page where it is being shown. The Breadcrumb portlet allows you to view acontext-sensitive list of your navigation history.Now that you have added a few applications to the Home page, you’ll rearrange their positionson the page to get the look you want and improve usability as a result.

Changing Page Layouts

Liferay provides several templates you can use to customize your page layouts. To apply anew template to your page, select the Layout Template menu option under the Welcome dropdownmenu. You’ll see a dialog box displaying several layout options (see Figure 2-29).
 

Layout-selection dialogHere, you will find several layouts containing different combinations of columns androws. If you apply the Freeform template to your page, for example, you will be able to setthe absolute position for each application on the page. But for the time being, select the 1-2Columns (30/70) layout template for the Home page. Saving your selection returns you to theHome page with the new template applied to it. Now, you will need to rearrange your applicationsbased on this template .To move an application to a new location on the page, move the cursor to the application’stitle bar. Notice the pointer changes into a hand-like icon. Click and drag the applicationto the desired location. As you drag the application on the screen, Liferay displays the layoutscreen in the background. This makes it easy for you to identify and set the new position foryour application. The application width automatically adjusts to the new width of your layoutrow or column.Move all the applications to rearrange the page in a way that is most convenient for youruse. A typical layout result is shown in Figure 2-30.

.If you are not satisfied with Liferay’s official layouts, you can always download third-partylayouts from the community-downloads section of the Liferay site. The procedure for downloadingand installing the additional layouts is similar to the process for downloading andinstalling themes, as described earlier. When you download and install a layout, it gets addedto the layout-selection dialog automatically. Simply select the new layout of your choice toapply it to your page.