Web Studio Tutorial - Power Toys Site

Showing results for 
Search instead for 
Did you mean: 

Web Studio Tutorial - Power Toys Site

0 0 7,729

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-surfSpring 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 Tutorials


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 following sections are to be followed in order.  For the most part, the click paths are described but you should feel to experiment where appropriate.

This tutorial assumes that you have completed the basic introductory tutorial and are familiar with Web Studio usage.

Getting Started

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

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 administrator credentials:

  • Login Name: admin
  • Password: admin

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.


  • Expand the Create Web Site option
  • Under Based on the following, select Power Toys
  • Provide a name for your web site


Be sure to specify a name for your new site and click Create.

Web Studio notifies you that it is creating your web site.  It will create a Web Project inside of Alfresco WCM and then download the contents of the 'Power Toys' sample site from Alfresco Network.  This will be installed into your web project, your user sandbox will be established, the cache will be refreshed and you will be taken to your web site.

You should then see something like the following:


The dotted regions represent Alfresco Surf regions which do not have any components in them.

This tutorial is not foremost concerned with page layout or component bindings.  Rather, we will explore some of the interesting types of components that Web Studio can let you work with.

Web Content

The Power Toys site comes with several files that are added into your web project.  These include various media types.

To access these, click on the floating menu on the lower left, and open the 'Web Content' slider. Now, expand the tree to show the contents of your virtualized web application.



As shown in the previous tutorials, dragging images into the page will instantiate Image Components to display the images.

  • Location: /ROOT/files
  • Mimetypes: image/*, any image mimetype
  • Component: Image Component

You can experiment with dragging these images into your page.

You may also wish to drag the /files folder itself into the page to bind in a Display List component.

As an example, you might consider dragging the file happyholidays.gif which features Alfresco's Chief Architect decked out in a Santa Hat.  Making merry.  Spreading the holiday cheer.



By dragging and dropping video files into the page, Web Studio will bind an appropriate player into place for the given mimetype.

  • Location: /ROOT/video
  • Mimetypes: video/*, FLV, MP4, application/octet-stream, MPEG
  • Component: Video Component or JW Player (GPL license, non-Enterprise)

Drag the dramatic_gopher.flv video onto a region. Here is a screenshot of what that will look like, once the video is done playing.



By dragging and dropping audio files into the page, Web Studio will bind an appropriate player into place for the given mimetype.

  • Location: /ROOT/audio
  • Mimetypes: audio/*, MP3
  • Component: Audio Component or Flash MP3 Player

Let's drop an audio component onto a region. For this, let's use the dukes.mp3.


Web Components

Alfresco Web Studio utilizes the Alfresco Surf platform to provide dynamic content store loading into the Web Script runtime.  As such, your web sites can include custom templates and web scripts which are stored entirely within Alfresco WCM.

In this case, the Power Toys site includes a few additional web scripts that are seamlessly 'consumed' into the Web Scripts runtime when the sandbox is mounted.

To access these web components, simply click on the Components slider on the left-hand panel.


To use them, simply drag them into the page and bind them into a region.

Alfresco DOJO Fishtank

This component was pulled in from the DOJO javascript framework and assembled by our own esteemed architect, Dr. Yong Qu.  It demonstrates the use of a third-party framework which is dynamically loaded by Web Studio and aggregated into the site. In this particular exmample, the fish tank component was bound to the template's footer region.


Widgetbox - News

An example of a third-party Flash component demo from Widgetbox that displays news headlines as aggregated by Reuters.  This is an example of pulling in third-party content but also an example of dynamically mashing together various data sources into a single user experience.


Widgetbox - Weather

Another example of a simple Flash component demo from Widgetbox that simply displays the weather.  Users may wish to adopt this pattern for consuming services from other service providers such as Google.  In addition, Alfresco may opt to provide remote component services in the future.


Widgetbox - Super Mario

A final example of a Flash component demo delivered from Widgetbox.  Well, this was just too interesting not too include.  Here you have it - a small little holiday gift for everyone who waited so patiently for Web Studio to arrive!