Article:Web Studio Simple 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 Getting Started
  
  
  
  • 1.1 Creating a new Blank Web Site
  
  
  • 1.2 Associating a Presentation Template
  
  
  • 1.3 Accessing the In-Context Editor
    
    
    
    • 1.3.1 Regions
    
    
  
  
  • 1.4 Adding Content and Assets to Your Site
  
  
  • 1.5 Binding in a Header Component
  
  
  • 1.6 Setting up the Home Page
  
  

Getting Started

This tutorial focuses on creating an empty web site with just a few bells and whistles. Nothing too complex.

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.
   

Associating 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
  

YOu can use as many different formats for this page as you like. For example, the home page could have a default HTML format for browsers, with alternative formats for various types of customer devices.

To set up a default template:

1. Click Associate a Presentation Template to display the presentation templates associated by page. There is a single presentation template listed for each format.
   
   
   template-association.PNG
   
   
   
   
   
2. Click Associate a Template. This displays the form from which you can establish this page’s presentation for various formats.
   
   
   400px
   
   
   
   
   
3. Select Default from the out-of-the-box options in the Formats list. This sets up the template for the HTML format. You can add additional formats through configuration, which is not covered in this tutorial.
   
   
   template-selector.PNG
   
   
   
   
   
4. Select Basic - Home Page from the out-of-the-box options in the Templates list. You can create your own templates using graphical editor provided with Web Studio or you can build templates 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.
   
   
   
   
   Home-page-template-association.PNG
   
   
   
   
   
5. Click Save to complete the associations. The template associations panel reflects the update.
   
   
   template-association-list.PNG
   
   
   
   
   
6. Click X in the upper right of the form to close it.
   
7. 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 the floating menu. The in-context editor opens. 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 clicking the button in each of the slider titlebars.

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

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:

700px|

Adding Content and Assets to Your Site

With Web Studio, you can drag 'things' from the sliders into the web page regions. For instance, if you drag a piece of content into a region, it creates a relationship between that piece of content and that region on the page.

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

In short, Web Studio automatically creates Alfresco Surf component bindings.

You can drag the following into the page to establish component instances:

• 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
  

A component instance is like a gadget or a portlet. You might use this to drop in any of the following, just to name a few:

• 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
  

Binding in a Header Component

1. Open 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, you are 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.
   
   
2. Select the header.jpg file from Web Site -> images - home.
   
   
   header-jpg.PNG
   
   
   
   
   
3. 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 and create the Image Component binding.
   
   
   400px
   

Setting up the Home Page

Now you can assemble the rest of the page using the remaining image files from Web Site -> images -> home.

The final result looks as follows:


600px