Overview

This tutorial is a more advanced introduction into site building. It introduces the concepts of creating a new web site, navigation trees, dynamic templates, and content associations.

We'll begin by creating a blank web site and then create a few dynamic templates and bind them to pages. Since our web site won't have much content in it, we'll focus on drawing content from the Alfresco Repository.

The following sections are to be followed in order. For the most part, the click paths are described but experiment where appropriate.

This tutorial assumes that you are familiar with the basic concepts presented in the previous tutorial.

Web Studio notifies you that it is creating your web site. It will create a Web Project inside of Alfresco WCM and create a home page for you. Your user sandbox will be established, the cache will be refreshed and you will be taken to your web site.

This is what Web Studio shows when it doesn't know what else to show. In this case, your custom site contains only the minimum set of elements:

A site configuration

A home page (the root page for the site)

Web Studio does its best to render the home page for you.Since the home page doesn't yet have any presentation associated to it, Web Studio shows you a friendly page to tell you this.

Associate a Presentation Template

In order for this page to show something, we first need to tell it what kind of presentation template to use.

Web Studio allows you to have many presentation templates for a single page. Usually, weâ€™re interested in the default format (default) which corresponds to HTML output. However, we may also be interested in other formats such as:

PDF

Printer friendly

Wireless

RSS

In fact, we could have as many different 'formats' as we would like for this page. We can use a different template for each format.

The nice thing about templates is that they can be reused across pages. They provide a way for you to define the look and feel of your site and get the most benefit out of reuse. This helps to establish consistent and easy-to-manage look and branding.

Let's keep it simple for now. Let's just try to set up a default template.

Click Associate a Presentation Template to bring up the list of the presentation templates in use by this page. They will be listed and sorted by Format. There will be a single presentation template listed for each format.

Note that in this case, nothing is listed. This makes sense - we havenâ€™t defined any yet!

Under the Formats selector, you will be able to pick from the default out-of-the-box formats. These are Default, Print and Wireless (WAP). You can, of course, add additional ones if you would like. This is done through configuration but is not covered in this tutorial.

Under the Templates selector, you will be able to pick which presentation template to use. There are several which are included with Web Studio but you are also free to create your own. A graphical editor is provided with Web Studio to help you do this and you can also build your own using Freemarker (FTL).

The default templates include:

Basic - Home Page â€“ a simple home page layout with regions for header, navigation, body content (left, center and right) as well as a footer.

Basic - Landing Page â€“ a simple landing page layout with regions for header, navigation body content (left and right) as well as a footer.

In this case, since weâ€™re putting together a â€œHomeâ€ page, weâ€™ll just use the basic home page template.

This presents us with a tree view of our site's pages and navigation structure. The top most page is the root page of the site. This has the name Home Page by default. Child pages will appear underneath the root page and so on.

Click Home Page. It will highlight for you.

Notice that the buttons within the slider change state. You are now permitted to add child pages to this root page.

That's it. We have created a region with the name header in the global scope.

Create a 'nav' region

Using the methods described previously, create a region in the second row with the following attributes:

Region name: nav

Region scope: global

Create a 'body' region

Using the methods described previously, create a region in the third row with the following attributes:

Region name: body

Region scope: page

Associate your New Template to your New Page(s)

By going back to the Pages slider, you can now double-click on your new page to tell Web Studio to navigate to that page. Since your new page doesn't have any presentation associated with it, it will display with the now familiar 'missing presentation' helper page.

You should be able to follow the same steps from the Associate a Presentation Template section to associate your new template as the presentation to be used when rendering the page under the Default format.

Associate your new template to this page for the Default format.

Refresh the page to see your new template

Add a Navigation Component

We'll now add a navigation component to our site. We'll bind this into the globally scoped nav region. Since this is a globally scoped region, binding it once will allow all templates to instantly reuse the component.

Note that both of our templates have a nav region in the global scope.

The Components shown are those which are included as stock or sample components along with Web Studio. They are standard Surf components which you may elect to use or discard. They may also serve as a reference for building your own.

In this case, they are fully usable and provide some useful, basic functionality. Here, we will binding in the navigation for our site.

Click the Navigation component

Drag the Navigation component to the nav region on the page

When you mouse over the nav region, you will notice that the region darkens to indicate that you can interact with it.

This will tell Web Studio that you wish to bind a Navigation Component to that region. A new instance of a Navigation Component will be created and will be bound to the nav region. The region will reload for you to reflect this update.

Drag the Data Dictionary folder into your page. Drop it someplace convenient such as in one of the page scoped regions.

When you mouse over the nav region, you will notice that the region darkens to indicate that you can interact with it.

This will tell Web Studio that you wish to bind a Display List to that region. A new instance of a Display List Component will be created and will be bound to the region. The region will reload for you to reflect this update.

Add Content Driven Presentation

So far, we've looked at the association of presentation to pages. If Alfresco Surf is told to dispatch a page, this association tells Surf which template to use.

This is convenient if our site involves users clicking on navigation links (or pages). However, we may not always want to dispatch from a page. We may want to dispatch from a piece of content.

Consider the case where users click things like articles or press releases in your web site. You may want to set up specific content presentation templates. These templates would provide the end with their requested content but also provide relevant things like related items, navigation or contact information.

We can use Web Studio to set up these content presentation templates. [[Surf Platform|Alfresco Surf] supports dispatching of templates for an arbitrary number of content types. First and foremost, it has excellent support for Alfresco Content Types.

Let us revisit our Display List component from the previous section. It is rendering a list of folders. It appears as shown here.

If a user selects a folder, a URL is generated which tells Surf to dispatch based on the content object id. You can give it a shot to see how this works.

Select a folder from the list

This will tell the Surf framework to dispatch to the template responsible for rendering that content in the current format. The current format happens to be Default so it will look for the template associated to the content object for the given format.

Of course, this currently just takes us to a page which tells us that no such association exists. In the middle of the page, you should see something like the following:

This means that Surf can't figure out which template to use. Why? Well, because we don't have any content-associated presentation templates set up. Web Studio is just being nice to us and giving us a friendly update on the situation.

We can now set up a Content Presentation Template for this content type. To do so, we can either click the link given to us or we can use the Content Associations menu option under the Web Projects menu. This will bring up the Content Type Associations panel.

What we would like to do here is tell Alfresco Surf how to display content of the given type.

In this case, we have a listing of Alfresco folders within our Display List component. When a user selects one of the folders, they are clicking on an object of type {http://www.alfresco.org/model/content/1.0}folder. Thus, we can fill in the form:

By doing so, the component will 'bind itself' to the currently rendering object. The object's metadata will be loaded ahead of time by the Alfresco Surf framework. It will be available to your component.

Components operate against this content in exactly the same way as they would operate against content loaded from the Alfresco Spaces or Sites repositories, retrieved from a remote URL or fetched via virtual content retrieval from a web project.

The net effect is that component developers only need to write their components once. A component can be used on content presentation templates just as well as page templates.