1. Alfresco Web Editor
TTL – 9th April 2010
Ben Hagan
WCM Product Manager
www.alfresco.com

2. Agenda
● Design Requirements
● Alfresco Web Editor
● Web Editor Framework
● Component Overview
● Example Architectures
● JSP Support – Tag Library
● Demo - Getting Started
● Documentation

3. Design Requirements
Semantic Content Editor
Presentation Content Editor

4. Alfresco Web Editor
● Alfresco 3.3 – Community available NOW for download!
● Evolution of Web Studio Agenda
● Consists of:
● AWE - Spring Surf application incorporating the Alfresco Forms Engine
● WEF – Web Editor Framework
● Edits core repository content (non AVM)
● Deployed either:
● Stand alone
● As part of your Surf application

5. Web Editor Framework (WEF)
● Provides a common JS client side framework
● Renders a toolbar Agenda
● Used by Alfresco and Spring Surf
● Accessible – graceful degradation with JS and or CSS
● Based on Yahoo’s YUI
● Extensible, pluggable
● Drop in new components - Create custom tabs, buttons etc.

6. Example Architecture
Application Server Web Browser
Web Application Web Editor Framework
(WEF)
AWE Tag Library
JSP Support (AWE.jar)
AWE.war
Alfresco.war

7. Component Overview
Web Editor Framework
(spring-webeditor.jar)
CSS Web Scripts
JavaScript Java Beans
Alfresco Web Editor
(alfresco-webeditor-plugin-3.3.jar)
AWE.war
CSS Web Scripts
JavaScript Java Beans
AWE.war = Spring Surf
Forms Service + Forms Service
(alfresco-forms-client.jar) + AWE + WEF
CSS Web Scripts
JavaScript Java Beans
Spring Surf

8. JSP Support - Taglib
● JSP Support – tag library
● Helper, decorating the page with HTML and JavaScript Agenda
● Provides the hooks to the AWE JavaScript
● Other languages
● PHP, Freemarker etc
● Documentation
● Template Developer
● Add “Edit Content” placeholders
● Available stand alone for use outside of an Alfresco environment
● Graceful Degradation - JavaScript and CSS

9. JSP Support - Taglib
● startTemplate
● Agenda
The startTemplate tag bootstrap's the WEF via a "script" element that
executes a webscript, this tag should therefore be placed in the "head"
section of your page.
● markContent
● The markContent tag indicates an editable area of the page. The tag
renders an edit icon that when clicked displays a form for editing the
corresponding Alfresco content and/or properties.
● endTemplate
● Responsible for initializing AWE with details of all the marked content
areas on the page. It also renders a "script" element that executes the
WEF resources webscript which starts the process of downloading all
the assets required to render and display the toolbar and all configured
plugins, this tag should therefore be placed just before the closing body
element.

10. Getting Started
● “Customer” web application
● Demonstration Agenda

11. Extensions
● Custom Tabs, buttons, controls etc
● Packaged as a single JAR file Agenda
● Sample in the Spring Surf repository
● Spring-Surftrunkspring-webeditor-pluginsspring-webeditor-plugin-
sample

12. Thanks
● Alfresco Web Editor
Agenda
● http://wiki.alfresco.com/wiki/Web_Editor
● Web Editor Framework
http://wiki.alfresco.com/wiki/Web_Editor_Framework
● Install and Configuration Guide
● http://wiki.alfresco.com/wiki/Community_Edition_file_li
st_3.3
● Getting Started Guide
● http://www.benh.co.uk/alfresco/alfresco-web-
editor/getting-started/