
h1. WCM for Beginners 


h2. Objective
You will create your eXo based web site using eXo WCM. Your will use a template, create new pages and manage content. At the end of this tutorial you will know all concepts and keywords of WCM. You should have an eXo WCM running and have administrator access to it. If you need to install WCM first refer to [http://www.exoplatform.com/portal/public/en/services/downloads].

{note}
Screenshots are of WCM 1.0. The publication workflow and the publication dialog have been changed in WCM 1.1 and later.
{note}

h2. Requirements
You should know all functions of GateIn.

h2. Overview

Please login as administrator of your eXo WCM, for example use "root" as login and "exo" as password.

You will see a page that looks like this one: 
 
!wcmStartpage.jpg|width=400!

As you see the *User Workspace* at the left hand side is identical to the eXo Portal user workspace. There are still the standard portlets: the *footer*, the *banner* and the *navigation bar*. Above the banner portlet there is something really new, we call it the _*Admin Tool Bar*_. This tool bar gives you direct access to the most used WCM functions. All these functions already exist in eXo Portal and they are still accessible using the user workspace.

*Edit Mode* 
The only function that is unique to WCM is the on/off switch at the upper right corner. It allows you to switch between the *View Mode* and the *Edit Mode* of WCM. In the edit mode you can modify any part of your portal by clicking on the pencil icon, that appears then at the corner of each portlet. 


*Web Site = Portal* 
As you already know in eXo Portal you can manage several portals at the same time. The first thing to understand is that a WCM web site is identical to a portal in eXo Portal. By creating a new site in WCM, basically you create a new portal. 



When you open WCM for the first time you will see the classic portal, which is there for administration reasons. You also find an example web site called "ACME". You should not modify the existing web sites but create one of your own.





h2. Create a New Site

Click on "Create Site" in the Admin Tool Bar. There you choose a name of your new site. As you already know you are effectively creating a new portal. Let's call our new site "Tools".

!toolsSiteCreation.png!

You have to choose a template for your new site, let's take "ACME". There is no possibility to start with an "empty" template. (In version 1.1 you will be able to choose between several templates.)


*Make it user friendly* 

Your new site opens, it looks like ACME, but the menu entries of the navigation bar are a little bit weird. They have some generic names like "portal.Tools.home". This is a preparation for [internationalization|Portal:Multi-Language Navigation Nodes]. In internationalization you use these placeholders to replace them by the terms in local languages. 

!toolsUglySite.png!


As we don't want to deal with it for the moment we click on *Edit Navigation* in the *Admin Tool Bar*. The *User Workspace* opens. Choose the "portal.Tools.home" node, click right, click on *Edit this node* and replace the Label "#\{portal.Tools.home}" by "Home". Repeat this for all nodes. Don't forget to finish your work by clicking on the green check mark icon. 

!toolsNavLabels.png!



When you are back to your new site. You will see two more navigation menu items called _Administration_ and _Sites Management_. These menus are part of the [navigation | Portal:Navigation+concept] for the administrator group. They are only visible to you and the all the other administrators.


h2. Create Content
You have to accurately distinguish the terms *content* and *page*. A *page* is linked to the site's navigation. Whenever the user clicks on a navigation menu, a specific page is shown. This page _contains_ portlet(s). And the portlet _contains_ *content*. WCM content can be:
* an ECM document (that means any kind of document)
* a WCM content, a web-oriented content, see also [WCM:WebContent Folders].
* a list of contents
# page can of course contain several portlets. Each of these portlets contains one the above points. This way you can for example create the site of a newspaper. A newspaper contains a lot of articles (=content) which are listed in several places of the homepage (=several portlets). Whenever the reader clicks on an article link the complete content is shown.

h3. Direct Content Creation
This functionality creates new content on the *current page*. The content is _immediately published_.

In the navigation bar click on "Product". Go to the Admin Tool Bar and click on "Add Content". Select "Quick web content creation".

!screwDirectContent.png!

Give your content a name: "Screwdrivers". Click Next.
You can create any content. Don't be worried by the other panels called _Illustration_, _default.css_, and _default.js_. Click save. Then leave the permissions unchanged, just click on "Finish" at the lower-right corner.

Congratulation you have just published your first content!

!screwDirectContentFirstTr.png!


You will say, that it's not quite that nice with these two empty portlets saying "This viewer has not been configured yet." above your new text. Let's see what we can do. 

Now the *Edit Mode* enters the game. Go to upper right corner and click on the *on/off switch*. The *pencil icons* appears at each portlet. Click on the pencil of the lower empty portlet. You already know how to create new content, present your drilling machines.

There is still another empty portlet. As we do not need it we wish to delete it: but how? You click on *Edit Page Wizard*. Here you should dig up your portal knowledge: Click on "Next", use the *current layout*, that means click on "Next". You will see the page layout. Go with the upper portlet, which is called "Services" and delete it by clicking on the cross at the upper right corner of this portlet.

!screwDeletePortlet.png!

You will notice the "screwdriver portlet" which is placed at bottom of the page in a portlet. This portlet has been created automatically for your content. The portlet type is a *Single Content Viewer*. The _Single Content Viewer_ has been introduced by WCM to show any content on a web site page. 
The screwdriver portlet's name is generated by WCM and therefore not user-friendly. We will soon see a different way for publishing content.


To make our work complete, drag the "screwdriver portlet" to the place where the "services portlet" was, before you deleted it. Take the portlet at the upper left corner and drop it in the empty space.

!screwDriverDrag.png!

h3. Sites Explorer
Normally content is independent of a certain page. Therefore let's create some independent content. Open the *Sites Explorer* on the far right of the navigation bar (Sites Management - Sites Explorer), possibly you need to use the small arrows to get to this menu item.

{info}
*Content Folder versus Document Folder* 
 
As you know eXo products are based on JCR, where all documents and folder are nodes of a hierarchy. Each node has specific node type. The _Document Folder_ corresponds to the predefined [JCR | JCR:] node type called _nt:folder_. The *Document Folder* is therefore a very restricted folder type which only allows to add special JCR nodes.  
 
 The *Content Folder* however allows you to add any kind of documents or sub folders. Don't worry too much, always use the *Content Folder*!
{info}

Choose the drive called "Tools". Open the "web contents" folder and click right and choose "New Folder". Create a "Content Folder" called "News" and open this new folder. 


!toolsExpAddDoc.png!

Click right and choose "Add Document". You will see a dialog where you should select the "Article" template. Create the news called "Discover Screwdriver XG205". 

!toolsXG205Article.png!


Add more documents in the same folder creating news called "Brazil Branch Opened" and "Welcome Mr Hibal".

!toolsExpDocuments.png!


You have just created news documents, but they are not published anywhere. That means nobody can see your news. Let's *publish* the most important news on the home page:
* Double-click on the document "Brazil Branch Opened", you will see the document content. 
* Click on the publish icon.
* In the navigation choose "Home" and click on the right-arrow. In fact you will notice that you could publish your content at several places at the same time.
* Click on close.

!toolsPublishBrazilBranch.png|width=900!

Click on "Home" in the navigation bar. You will find that your news has been published in a "Single Content Viewer" at the bottom of the Home page. The "Single Content Viewer" is a portlet like any other portlet. There are again two empty portlets, but you have already seen how you can re-arrange the layout of your page by clicking on "Edit Page Wizard"; but wait we still need one these empty portlets.

h2. Create a New Page

You are going to create a new page where we show a list of all news. Nowadays it's modern to call this kind of page a "blog". 

h3. Manage Pages

Go to _eXo Start - Adminstration - Advanced - Manage Pages_ and have a look on all pages of all portals. 

!toolsManagePages.png!

You will also notice the *Add New Page* button.

!toolsAddNewPageButton.png!

Use the name "BlogPage" for the new page. As you want to create a public blog, don't forget to choose the *owner type* "portal". In the *Page Layout Tab* choose "Content List Viewer" (also called CLV). Click on "Save". Voil� the new page is created.

!toolsBlogPageSettings.png!




h3. Content List Viewer
The page is created but completely empty. Search your BlogPage in the list of the Page Manager. Type "Blog", choose "Title" and click on the *magnifying glass*. Do not use the enter key.

!toolsBlogModifyClick.png!


You will see your page with a single portlet which is called "Content List Viewer". You want to change the generic name of this portlet and also wish to fill the portlet with some content. Click on the pencil icon at upper right corner of the portlet.

!toolsBlogCLVPath.png|width=900!

The CLV dialog appears. Please choose the automatic mode. 

{info}
*Automatic* and *Manual mode*

In *Automatic Mode* you select exactly one folder. All documents in that folder are published in the list. They are ordered by the criteria you choose.
 
In *Manual Mode* you select several documents. They are all shown in one list despite the fact they are in different folder. You can adapt the order of published documents to your needs.
{info}

Click on the plus icon next to "Folder path". Navigate to "Tools/web contents". Click on the *green check mark* next to the "News" folder. Don't modify anything else. Close the CLV dialog by clicking on "Save".

!toolsBlogPortletSetting.png!

The standard portlet dialog is still open. Open the tab "Portlet Settings" and modify the "Portlet Title" to "Blog Portlet". Click on "Save".

Finish the Page Wizard by clicking again on "Save".

Congratulations. You just created your first own WCM page!

h3. Navigation
Your page is created but you still need to make your page accessible from the navigation bar. Indeed there can be a number of ready to publish pages in an eXo Portal, that are not linked by the navigation menu.

At first let's delete the "News" from the navigation because it can be confused with "Blog". Select "News". Click right. And delete the node.

{info}
*Page* versus *Navigation* 
 
Don't be afraid when deleting navigation nodes. You are not destroying an existing page. If you delete a navigation node the underlying page remains untouched. In fact pages and navigation nodes are independent.
{info}

You already know that in eXo vocabulary a page is node. Therefore we create a new node for the blog. A node is always part of a hierachy which in this case is the navigation structure. Your node must be placed somewhere in that navigation. We want to place the "Blog" node next to the "Home" node. Click right a little bit to right of the green arrow-up which represents the root of your navigation structure. Choose "Add New Node".
Enter the name "BlogNode" and the label "Blog".

!toollsBlogAddNode.png!

Open the PageSelector tab. Here your create the connection between the navigation and the page. Click on *Search and Select Page* and choose the BlogPage you have created in the previous step. Click on "Save".

!toolsBlogPageSelector.png!

You already see a preview of your blog page, but before finishing let's put your blog to a more prominent position the navigation bar. Click right on the "Blog" Node and move it up. Repeat this until _Blog_ is between _Services_ and _Search_.

!toolsBlogMove.png!

Do not forget to *click the green check mark in order to save your modifications*.

You can see your blog page by clicking on "Blog" in the navigation bar. Congratulations.

!toolsBlogResult.png!

You see that using the CLV all documents of the "News" folder have been *published*.

{info}
*Add Page Wizard* 

You can also create new pages using the *Add Page Wizard*, which you find in the Admin Tool Bar.
This wizards does two things: it *creates a new page* and it adds this page to your *navigation structure*. You can't choose the internal name of your page because this name is generated by the wizard.
{info}

h2. Parameterized Content Viewer

In your Blog click on the "Discover Screwdriver XG205" article. You will see the whole article in a single page. This page is called the *Parameterized Content Viewer* or PCV. It shows a *permalink* for your article, which your visitors can reuse whenever they want to refer to your article. The permalink can also be used for bookmarking a page.

[http//localhost:8080-portal-private-Tools-parameterizedviewer-repository-collaboration-sites content-live-Tools-web contents-News-Discover Screwdriver XG205]

Pay attention to the fact that you are seeing a "private" permalink, because you are still logged in. In order to create a *public permalink* you should first log out and navigate to your article. You will see that the link is nearly identical but the word "private" has been replaced by "public": 

[http//localhost:8080-portal-public-Tools-parameterizedviewer-repository-collaboration-sites content-live-Tools-web contents-News-Discover Screwdriver XG205]

h2. Compose an Individual List

Let's fill your homepage with a list of links which point to different folders. You have already seen how to create a link list to all documents of one folder using the *Content List Viewer* (CLV). There you used the _automatic mode_. Now you try out the *manual mode*.

Open the Sites Explorer, choose the "Tools" drive and navigate to "web contents". In that folder create two new folders called "services" and "about". You still remember to always use _Content Folders_. In each folder add new webcontent using the *Free layout webcontent* template. Call them "SupportDoc" and "CompanyData". Use the titles: "Tools Support Service" and "Company Data". _It's important to use webcontent and not "normal" articles because CLV in manual mode only allows you to webcontent._

After that, click on "Home" and switch the Edit mode on. Click on the pencil icon of the last empty portlet which is shown just above your "Brazil" document. Later, you may delete the other portlets if you wish.

!toolsCLVSelectionManual.png!

The portlet should be a CLV. Switch to manual mode. Then click on the plus icon next to the folder path. Navigate to both the documents you have just created, add them to your list and click on "Save" Back in the CLV main dialog, click "Save" once again.

You will see both your articles in the portlet.

You have seen the main functionalities of eXo WCM. In order to discover more details go to the [WCM Home Page | WCM:]
