Web Studio Tutorials

[resplin]

Obsolete Pages{{Obsolete}}

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

Web Studio

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.

Back to Web Studio.

__toc__

Alfresco Web Studio is a visual, drag-and-drop designer for the Alfresco Surf platform.

It features graphical overlays that facilitate the building of your web site's pages, navigation structure, templates and presentation layout.  Web components snap into your site's pages through simple drag-and-drop interactions.

Using Alfresco Web Studio, users can quickly realize their custom web sites while entirely leveraging the strengths of the Alfresco Web Content Management runtime and repository.

One of the major themes to Web Studio is simplicity.  Users should be able to create moderately complex Alfresco Surf-powered web sites with ease.

A key objective for achieving this was to promote as much reuse as possible.  As such, Alfresco Surf provides a scriptable way of building web site elements, sharing them and reusing them.  You can even package an entire web site up and share it - all of its pages, templates, components, themes, chrome, etc... You name it.

We've leveraged this capability to make it easy for folks to get started.

On this page, you'll find three tutorials which walk through web site creation using Alfresco Web Studio.  The first tutorials are pretty simple but they get more complex as you go on.

Table of Contents

• 1 Alfresco Green Energy Starter Tutorial


• 2 Build a Custom Site Tutorial


• 3 Power Toys Site Tutorial


• 4 Community Tutorials

Alfresco Green Energy Starter Tutorial

This tutorial serves as a very basic introduction to Web Studio.  It introduces concepts such as page assembly and component bindings.

We'll begin with a 'starter site' which includes a few images, pre-stocked templates and pages.  The Alfresco Green Energy Site is currently archived on Alfresco Network as a zip file. We will import it using Web Studio. Web Studio will deploy it to a new Web Project. We can then start to work with the site. This tutorial will show how to bind - into template regions - a few image assets.  The end result will be to produce a basic mockup of the Green Energy site.

The tutorial should take about 30 minutes to complete.

• Green Energy Starter Tutorial
  

Build a Custom Site Tutorial

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 completely blank web site and will then create a few dynamic templates and bind them to pages.  Since our web site won't have much content in it, we we'll focus on drawing content from the Alfresco Repository.

The tutorial should take about 60 minutes to complete.

• Custom Site Tutorial
  

Power Toys Site Tutorial

This tutorial is a fun exercise in playing with a pre-built web site that is stocked with a variety of interesting media types as well as custom web script backed components.

It demonstrates some of the interesting capabilities that come into play with custom Alfresco Surf components and a diversity of file types.

The tutorial should take about 30 minutes to complete.

• Power Toys Site Tutorial
  

Community Tutorials

We're leaving open the option for our community to contribute pre-built sites and tutorials.  Pre-built sites can be bundled and made available via the site creation wizards if accompanied by a tutorial walkthrough similar to those provided here.

If you are interested in providing a tutorial, please contribute to the Community Developer Toolkit.