Article:Web Studio Full Web Site Tutorial

[resplin]

Obsolete Pages{{Obsolete}}

The official documentation is at: http://docs.alfresco.com

Labs 3Web Studio3.0
NOTE:  Web Studio is no longer part of the Alfresco Community build.  The Surf framework that Web Studio utilised has been committed to Spring Source http://www.springsource.org/extension.../se-surf.  Spring Surf is the underlying framework used by Alfresco Share.

The Web Editor Framework is the recommended platform for developing rich in-context WCM capabilities.

Table of Contents

• 1 Introduction
  
  
  
  • 1.1 Creating a new Blank Web Site
  
  


• 2 Associate a Presentation Template


• 3 Accessing the In-Context Editor


• 4 Adding Content and Assets to your site


• 5 Bind in a Header Component


• 6 Set up the Home Page

Introduction

In this tutorial, we will focus on describing very detailed concepts. The tutorial will build on the earlier Web Studio Quick Start Tutorial and Web Studio Simple Site Tutorial. It will walk you through

• Creating a new blank site
  
• Creating pages
  
• Creating templates using the Template Designers,
  
• Creating Page, Template, Site, and Global scoped regions on the page templates.
  
• Upload new content
  
• How to bind and configure various components to template regions
  

To get started, access Web Studio using the following URL:

http://localhost:8080/studio

Log in to Alfresco Web Studio

Since you are not yet authenticated to Web Studio, you will be prompted to log in.

You can log in using your Alfresco credentials. However, for this walkthrough, log in using the following credentials:

Login Name: admin

Password: admin

Creating a new Blank Web Site

The next step of the wizard offers the option create a new web site or import an existing web site from Alfresco Network or from any web template repository your administrator has set up for you.

In this section, you will create a web site from scratch.

1. In the Based on the following list, select Blank Web Site.
   
   
   400px
   
   
   
   
   
2. Specify the name for your new site and click Create. Web Studio notifies you that it is creating your web site. Once this completes, it refreshes the cache and and displays the following:
   
   
   300px
   
   
   
   
   This message indicates that your new site doesn’t know how to render itself. In the next section, you will change that.
   

Associate a Presentation Template

For the new site home page to display, you must specify what kind of presentation template to use.

Web Studio allows you to have many presentation templates for a single page. The default format(default) corresponds to HTML output. However, you may also be interested in other formats such as:

• PDF
  
• Print
  
• Wireless
  
• RSS
  

In fact, we could have as many different “formats” as we would like for this page.

Thinking this way, we might reason that our home page could have a default HTML format for browsers.  It might also have alternative formats for various types of consumer devices.

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

Click on 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, there are no template associations listed.  We haven’t defined any yet!

template-association.PNG

Click on Associate a Template.  This will bring up a form with which you can establish this page’s presentation for various formats.

associate-a-template.PNG

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.

template-selector.PNG

Click on Default to set up the template for the default (HTML) format.

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 region sfor 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.

Home-page-template-association.PNG

Click on Basic – Landing Template to set up the association to the prebuilt template.

Finally, at the bottom of the form, click on the Save button.

The template associations panel will now reflect the update.

template-association-list.PNG

Click on the X in the upper right of the form to close it.

Refresh the page to see your page’s new presentation!

Accessing the In-Context Editor

At the bottom-left of the page, you will see a “floating menu”.  This is a small menu that floats over your web page and makes available the in-context editor when you click on it.

incontext-menu.PNG

Click on the floating menu.

When you do so, the in-context editor will spring into place.

Notice that your page slides over to the right, giving you full access to work with it.  The in-context editor provides tools that you can use as you work with your page.

Along the top, you will see the in-context editor applications menu.

web-studio-horizontal-nav.PNG

The applications panel reveals several sliders.  You can expand each slider by simply clicking the  button in each of the slider title bars.

The following sliders are available:

Navigation: Set up your site map, site navigation and pages

Templates: Set up presentation templates

Web Components: Add presentation components to your pages

Web Content: Add content from your Alfresco Repository to your pages

Sites: Add content from Alfresco Share sites to your pages

A Note on Regions
Your web page is rather bland at this point.  It renders a template that contains a number of regions.  But each region is “empty”.

Web Studio informs you of these empty regions.  Here is an example:

empty-region-view.PNG

Adding Content and Assets to your site

With Web Studio, we are able to drag “things” from the sliders into our web page’s regions.  For instance, if we drag a piece of content into a region, we create a relationship between that piece of content and that region on the page.

In fact, Web Studio handles a lot Surf wiring for us.  Web Studio instantiates new component instances, configures the component instances to reference the content we are dragging and then associates the component instance to the region on the page.

In short, Web Studio automatically creates Alfresco Surf component bindings for us!

We can drag the following kinds of things into the page:

Files that are stored in our web application
Folders that are part of our web application
Documents from our Alfresco Spaces Repository
Spaces from our Alfresco Spaces Repository
Custom objects from our Alfresco Spaces Repository
Content of various types from our Alfresco Share site
Wiki articles
Blog entries
Document Library files
More
Component Definitions

These are dragged into a page region to establish component instances on the page.  You can think of a component instance like a gadget or a portlet.  You might use this to drop in any of the following:

An image display gadget which renders a company logo.
An article list that shows the top headlines of the day.
A thumbnail browser of popular video content.
A breadcrumb trail
A dynamic navigation selector

You can imagine many more situations.

Bind in a Header Component

Bring up the in-context editor and expand the Web Content slider.

The Web Content slider provides you with full access to your web application content.

When you’re using Web Studio, all of your web application content actually resides inside of a web project in Alfresco WCM.

In fact, we’re looking at the current user’s sandbox.

Also, notice how the regions have responded. The regions become “active” meaning that you can drop things onto them.  Hovering your mouse over a region will cause the region to transition in color, suggesting that you can drop things onto the region.

Now select the “header.jpg” file from Web Site -> images - home.

header-jpg.PNG

Drag the file from the slider onto the region named “header”

This region is in the global scope and is therefore colored pink.

header-region.PNG

The Alfresco Green Energy header image will now snap into place.

green-energy-header.PNG

Congratulations – you’ve just bound a component into the page.

By dragging an image into the page, you’ve created an Image Component binding.

Set up the Home Page

You should now be able to assemble the rest of the page by utilizing the rest of the image files from the Web Site -> images -> home location.

The final result should look like this:

final-page.PNG