Obsolete Pages{{Obsolete}}
The official documentation is at: http://docs.alfresco.com
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
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.
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:
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.
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.
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.
/ROOT/files
image/*
, any image mimetypeYou 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.
/ROOT/video
video/*, FLV, MP4, application/octet-stream, MPEG
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.
/ROOT/audio
audio/*, MP3
Let's drop an audio component onto a region. For this, let's use the dukes.mp3.
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.
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.
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.
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.
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!
Ask for and offer help to other Alfresco Content Services Users and members of the Alfresco team.
Related links:
By using this site, you are agreeing to allow us to collect and use cookies as outlined in Alfresco’s Cookie Statement and Terms of Use (and you have a legitimate interest in Alfresco and our products, authorizing us to contact you in such methods). If you are not ok with these terms, please do not use this website.