UPDATE – Alfresco Community 3.3 is now available for download which includes the AWE files. Download the alfresco-community-webeditor-3.3.zip file from the Community download page.

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.

alfresco-web-editor-2

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:

alfresco-web-editor-3

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.

alfresco-web-editor-4

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!