0
Alfresco Web Editor
        TTL – 9th April 2010



    Ben Hagan
    WCM Product Manager


    www.alfresco.com
Agenda

● Design Requirements

● Alfresco Web Editor

● Web Editor Framework

● Component Overview

● Example Architecture...
Design Requirements




Semantic Content Editor
Presentation Content Editor
Alfresco Web Editor

● Alfresco 3.3 – Community available NOW for download!

● Evolution of Web Studio                    ...
Web Editor Framework (WEF)

● Provides a common JS client side framework

● Renders a toolbar                             ...
Example Architecture


Application Server       Web Browser


 Web Application        Web Editor Framework
               ...
Component Overview
Web Editor Framework
(spring-webeditor.jar)


     CSS                        Web Scripts
   JavaScript...
JSP Support - Taglib

● JSP Support – tag library

   ●   Helper, decorating the page with HTML and JavaScript          Ag...
JSP Support - Taglib

● startTemplate

   ●                                                                   Agenda
     ...
Getting Started

● “Customer” web application

● Demonstration                     Agenda
Extensions

● Custom Tabs, buttons, controls etc

● Packaged as a single JAR file                                      Age...
Thanks


● Alfresco Web Editor
                                                    Agenda
   ● http://wiki.alfresco.com/wi...
Upcoming SlideShare
Loading in...5
×

Tech talk live alfresco web editor [compatibility mode]

5,639

Published on

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
5,639
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
57
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Transcript of "Tech talk live alfresco web editor [compatibility mode]"

  1. 1. Alfresco Web Editor TTL – 9th April 2010 Ben Hagan WCM Product Manager www.alfresco.com
  2. 2. Agenda ● Design Requirements ● Alfresco Web Editor ● Web Editor Framework ● Component Overview ● Example Architectures ● JSP Support – Tag Library ● Demo - Getting Started ● Documentation
  3. 3. Design Requirements Semantic Content Editor Presentation Content Editor
  4. 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. 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. 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. 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. 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. 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. 10. Getting Started ● “Customer” web application ● Demonstration Agenda
  11. 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. 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/
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×