tech talk live alfresco web editor [compatibility mode]
DESCRIPTION
TRANSCRIPT
Alfresco Web EditorTTL – 9th April 2010
Ben Hagan
WCM Product Manager
www.alfresco.com
Agenda
● Design Requirements
● Alfresco Web Editor
● Web Editor Framework
● Component Overview
● Example Architectures● Example Architectures
● JSP Support – Tag Library
● Demo - Getting Started
● Documentation
Design Requirements
Semantic Content Editor
Presentation Content Editor
Agenda● Alfresco 3.3 – Community available NOW for download!
● Evolution of Web Studio
● Consists of:
● AWE - Spring Surf application incorporating the Alfresco Forms Engine
● WEF – Web Editor Framework
Alfresco Web Editor
● WEF – Web Editor Framework
● Edits core repository content (non AVM)
● Deployed either:
● Stand alone
● As part of your Surf application
Agenda
Web Editor Framework (WEF)
● Provides a common JS client side framework
● Renders a toolbar
● Used by Alfresco and Spring Surf
● Accessible – graceful degradation with JS and or CSS
● Based on Yahoo’s YUI● Based on Yahoo’s YUI
● Extensible, pluggable
● Drop in new components - Create custom tabs, buttons etc.
Example Architecture
AWE Tag LibraryJSP Support (AWE.jar)
Web Application
Web BrowserApplication Server
Web Editor Framework
(WEF)
Alfresco.war
AWE.war
Component Overview
Web Editor Framework
(spring-webeditor.jar)
Alfresco Web Editor
(alfresco-webeditor-plugin-3.3.jar)
CSS
JavaScript
Web Scripts
Java Beans
AWE.war
CSS
JavaScript
Web Scripts
Java Beans
JavaScript Java Beans
Forms Service
(alfresco-forms-client.jar)
AWE.war = Spring Surf
+ Forms Service
+ AWE + WEF
CSS
JavaScript
Web Scripts
Java Beans
Spring Surf
Agenda
JSP Support - Taglib
● JSP Support – tag library
● Helper, decorating the page with HTML and JavaScript
● Provides the hooks to the AWE JavaScript
● Other languages
● PHP, Freemarker etcPHP, Freemarker etc
● Documentation
● Template Developer
● Add “Edit Content” placeholders
● Available stand alone for use outside of an Alfresco environment
● Graceful Degradation - JavaScript and CSS
Agenda
JSP Support - Taglib
● startTemplate
● 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 ● 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.
Agenda
Getting Started
● “Customer” web application
● Demonstration
Agenda
Extensions
● Custom Tabs, buttons, controls etc
● Packaged as a single JAR file
● Sample in the Spring Surf repository
● \Spring-Surf\trunk\spring-webeditor-plugins\spring-webeditor-plugin-sample
Agenda
Thanks
● Alfresco Web Editor
● http://wiki.alfresco.com/wiki/Web_Editor
● Web Editor Frameworkhttp://wiki.alfresco.com/wiki/Web_Editor_Framework
● Install and Configuration Guide
● http://wiki.alfresco.com/wiki/Community_Edition_file_list_3.3
● Getting Started Guide
● http://www.benh.co.uk/alfresco/alfresco-web-editor/getting-started/