Web Studio Tutorial - Power Toys Site

Document created by resplin Employee on Jun 6, 2015Last modified by alfresco-archivist on Aug 31, 2016
Version 14Show Document
  • View in full screen mode

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



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:


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

Outcomes