Web Studio Tutorial - Power Toys Site

[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.

Back to Web Studio Tutorials

Table of Contents

• 1 Overview


• 2 Tutorial
  
  
  
  • 2.1 Getting Started
  
  
  • 2.2 Web Content
    
    
    
    • 2.2.1 Images
    
    
    • 2.2.2 Video
    
    
    • 2.2.3 Audio
    
    
  
  
  • 2.3 Web Components
    
    
    
    • 2.3.1 Alfresco DOJO Fishtank
    
    
    • 2.3.2 Widgetbox - News
    
    
    • 2.3.3 Widgetbox - Weather
    
    
    • 2.3.4 Widgetbox - Super Mario
    
    
  
  

Overview

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.

Tutorial

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:

• http://localhost:8080/studio
  
• Note: This assumes that Alfresco Web Studio is installed on your local machine.
  

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

400px

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.

400px

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

400px

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:

640px

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.

235px

Images

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.

400px

Video

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.

400px

Audio

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.

400px

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.

234px

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.

400px

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.

400px

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.

400px

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!

400px