Firstly to clarify, Web Studio is no longer part of the Community Alfresco product so is no longer available for download.  Web Studio was not part of an Enterprise release and was therefore not supported as part of the core product by Alfresco.  The Surf framework that Web Studio utilised has been committed to Spring Source.  The Surf framework is the underlying framework for Alfresco Share and Alfresco will continue to invest in Surf and surrounding developer tools.

With 3.3 Alfresco started to heavily invest in WCM utilising the core Alfresco repository (non AVM).  As part of this strategy we introduced the Web Editor (in-context editing) and Web Editor Framework (WEF).  The Web Editor Framework provides a standard plug-in framework that people can develop any type of functionality on.  The framework can be loosely considered to be a ribbon toolbar that can be customised e.g. adding custom tabs, buttons and any other UI required.  Most importantly it is a common framework that Alfresco, the Alfresco community, partners, customers, the Spring community and anyone else can develop on.  A lot of effort has gone into the way that toolbars, buttons and components in general can be packaged into a single file, allowing for new plug-in’s to easily be “dropped in” to a WEF environment.

The Web Editor was Alfresco’s first core product (documented, supported) feature that was built utilising the Web Editor Framework i.e. the Web Editor has a dependency upon the WEF.  The Web Editor addresses a single specific use case which is to edit content (semantic page content) in the context of the web site.  In context editing.  This functionality is something we are now looking to build on in future releases, expanding this functionality above and beyond simple editing.  The Web Editor focus however of the next release (internally named “Swift”) is still on the content editorial process for the Web Editor.

There is also a great deal of interest in what I will term “presentation management”, and this is where Web Studio really sparked peoples thoughts around Alfresco WCM.  By this I mean providing the ability for a site administrator  to manage sites, site structures, templates, components, navigation etc.  In order to provide these features in a consistent, supportable manner, an underlying model is required within the repository which can then be utilised by a  delivery framework.  As the WCM functionality moves forward, we will start to implement such a model, and utilise Spring Surf and the WEF to deliver the presentation management functionality.  The Swift release remains focused on web content production, so no presentation management capabilities are in scope for this release, however the building blocks around the model and Spring Surf will start emerge.

Speaking to Alfresco partners, customers and community member recently, I know people are already starting to implement the Web Editor Framework and build out their required functionality.  We have current customers who have built presentation management capabilities with full custom clients, and the Web Editor Framework provides a powerful  alternative to this route.

As we approach the final stages of development for 3.3 functionality, I thought it would be useful to write a brief introduction to the AWE to help people get started.  Please note that this article describes features currently found in HEAD, and are subject to change.

The Alfresco Web Editor (AWE) is a Spring Surf based web application that utilises the Forms Service to provide in-context editing capabilities to Alfresco repository content (non AVM).  Alfresco 3.3 also introduces the Web Editor Framework (WEF), which is a client side JavaScript framework that is a dependency of the AWE.  More on the WEF later.   The AWE is packaged as a stand-alone WAR file so that it can be deployed to web applications that are remote to the Alfresco application server.

Documentation:
Web Editor – http://wiki.alfresco.com/wiki/Web_Editor
Web Editor Framework – http://wiki.alfresco.com/wiki/Web_Editor_Framework

AWE Components

The diagram below shows the core components of the AWE in a basic configuration where all components (Alfresco and the AWE) are installed on a single application server:

JSP Support

With the initial release, the AWE will support JSP based web sites by providing a tag library.  Additional languages will be supported in future releases with Freemarker and PHP being top of the list.  The tags have been designed for easy implementation so that a developer can enable the AWE with minimal effort, and without effecting the CSS layout and design of the site.

Web Editor Framework (WEF)

One of the key design requirements for the AWE was to provide a client side framework that could be extended and built upon by our community.  As a result, the Web Editor Framework was developed.  This provides a client side JavaScript framework built using YUI that can be extended easily.  New tabs and buttons can be packaged and “dropped in” to the framework.  This allows Alfresco to provide core product features, and the Spring Surf and wider community to build out any custom plugins that are required.

As noted above, when the AWE is enabled, the WEF is a dependency that renders the toolbar and basic in-context editing buttons and functionality.  If the WEF is deployed stand-alone, the default blank toolbar is rendered.

A great deal of work has been done by Alfresco to package the WEF into and modular framework.  Were really hoping to see custom functionality being built and exchanged.

Build and Deploy

As well as the AWE itself, Alfresco Development have also provided a sample “customer” web application that allows you to easily test the in-context editing functionality.  The customer web app includes a simple tag library for calling content items from the repository.

There are a number of options for building the AWE and customer sample application.  Setting the APP_TOMCAT_HOME environment variable allows the builds to deploy directly to your Tomcat webapps directory.  For example:

APP_TOMCAT_HOME=C:\alfresco\tomcat


The build options are as follows:

clean-webeditor-projects - Cleans all projects related to the web editor project.

deploy-webeditor-tomcat - Deploys the web editor WAR to the application Tomcat server

incremental-webeditor-tomcat – Performs an incremental build and deployment of the Web Editor WAR

deploy-webeditor-sample - Performs a build and deployment of the customer sample website

To quickly get up and running, run:

ant incremental-webeditor-tomcat-exploded deploy-webeditor-sample-exploded

This will create both the customer and AWE web applications in your Tomcat webapps directory:

Sample “Customer” Web Application

The “customer” web application provides some simple examples and tests for the AWE.  Bundled with the customer web application example is a “customer” tag library.  This provides a simple mechanism for fetching content from the Alfresco repository.  In a production environment, the web application could be loading the content in any number of ways, so the customer tag library just gets you up and running quickly for the purpose of testing the AWE.

Open up \customer\includes\noderefs.jsp file.  You will see the two node references for sample content items:


<%
String mainTextNodeRef = "workspace://SpacesStore/301a540e-7101-489c-a8a7-859102a99ea5";
String subTextNodeRef = "workspace://SpacesStore/e94797ce-c6e9-47eb-b28c-c6a4eb3ce666";
%>

The two node refs are used throughout the example pages.  Create two example html files on your local disk, add some textual content, and upload these to a location within the repository.  Browse to these files using the node browser, and add the appropriate node references to the noderefs.jsp file.  Save the file and then browse to http://localhost:8080/customer/, and you should see the page rendered and the WEF toolbar.  You should be able to go ahead and edit any of the content items.

AWE Tag Library

As noted previously, the customer tag library is simply providing a mechanism to load a content item from the repository.  Within the index.jsp example, you will see the customer:property and customer:content tags used.  These are relatively self explanatory in that either a property or the content is loaded, hence if you have null displayed for your title, that is because it has not been set.

The template has a awe:startTemplate tag which resides within the <head></head> section of the page, and also a awe:endTemplate tag which sits just inside the closing </body> tag.  The awe:startTemplate tag essentially outputs a <script> tag and loads the WEF bootstrap webscript.  The awe:endTemplate tag on the other hand sets up the config for AWE i.e. a list of editable content items on the page and then renders a <script> tag to load the WEF resources script.

The awe:markContent tag is used to mark editable content on the page.  An edit icon is displayed on the page wherever the tag is used, or if CSS is disabled, an edit link with no image is used .  It is an option for the template developer as to where these are positioned, providing flexibility on where the most appropriate and logical position is for the content item in question.  In the example below, two parameters are specified, the id of the content item i.e. the node ref, and the title.  The title is used on the toolbar dropdown to list the available editable content items.  Note that within this example, no form is specified so the default form is assumed:

<awe:markContent id="<%=mainTextNodeRef%>" title="Edit Press Release" />

The example used later within the page utilises two additional attributes.  The formId allows the developer to specify a specific form to use, and the nestedMarker flag defines if the awe:markContent tag is used within a nested element.  If so, the element is used for a JavaScript flash effect, when a user is navigating using the drop down menu.  For example, a surrounding <div> element.


<div id="xyz">
<awe:markContent id="<%=subTextNodeRef%>" formId="description" title="Edit Trailing Text" nestedMarker="true" />
</div>

Please see the links below for documentation. Hopefully this has provided a good introduction to some of the AWE and WEF capabilities.  Comments and feedback welcome!

Documentation:
Web Editor – http://wiki.alfresco.com/wiki/Web_Editor
Web Editor Framework – http://wiki.alfresco.com/wiki/Web_Editor_Framework