An introduction to Alfresco 3.0 Surf. Covers how Surf came to be and introduces some high-level Surf Concepts.

1. Alfresco Surf Code Camp
Introduction

2. Objectives
By the end of this module you should know
• How Surf came to be
• Why learning something about Surf makes sense
• High-level Surf concepts
07/11/08 Optaros and Client confidential. All rights reserved. 2

3. Why Surf?

4. Alfresco gap: The WCM “blinking cursor”
Alfresco is a “decoupled” CMS
• Unlike Drupal, there is no “Default Web Site” that you get out-of-
the-box with Alfresco
Alfresco Dynamic Web Site
• Tried to address this gap
• Example web site, set of web forms, JSPs, navigation management
• Showed one way to build a dynamic web site on top of Alfresco
Other developments at about this time
• Web Script Framework launched
• Growing frustration with limitations of JSF
• Desire to separate the “web client” from the “repository”
• Explosion of REST/AJAX toolkits and web application development
frameworks
07/11/08 Optaros and Client confidential. All rights reserved. 4

5. Need: A new framework for Alfresco-centric
apps
Engineering needed a new framework to replace JSF
• Rebuild the web client, make it easier to reuse web client
components
• Build new clients like Share
Alfresco was looking for a way to broaden community
involvement
• Need an easy way to develop and share “components”
• Lightweight framework that is fun/fast to code
Customers wanted a way to build Alfresco-centric apps
fast
• Lightweight framework
• Eventually, browser-based “page builder” type of tool
07/11/08 Optaros and Client confidential. All rights reserved. 5

6. Surf is born
Web application development framework
Web scripts at its core, plus:
• Presentation tier concepts such as “page”, “theme”,
“components”
• Rudimentary navigation
• API for making remote calls to Alfresco web scripts (or any other
HTTP endpoint)
• Alfresco concepts such as associating pages with Alfresco content
types
All configuration is done through XML
Deploys as a web application
• Can be separate app server or even separate physical node from
the Alfresco repository
Alfresco Share is Alfresco's first Surf-based application
07/11/08 Optaros and Client confidential. All rights reserved. 6

7. Yet Another Web Framework?
Alfresco Services (REST & SOAP) make it easy to build
solutions with various front-end technologies
• Java portal servers: Liferay, JBoss Portal, etc.
• Java frameworks: Spring, JBoss SEAM
• PHP portal servers: Drupal
• P-Language frameworks: Symfony (PHP), Django (Python)
Does the world need another framework? If not, what
are we doing here?
• Learn how to customize and extend Alfresco clients built on Surf
• Help expand the community by building Surf components others
can incorporate in their Surf-based clients or custom sites
• Establish Surf as an option for the development of complete
Alfresco-based web apps when none of the more widely-adopted
frameworks don't meet our needs
07/11/08 Optaros and Client confidential. All rights reserved. 7

8. Technical Overview

9. Alfresco Surf Design Objectives
Lightweight and Scriptable
• Web Scripts for User Interface
Easy to Customize
• XML Configuration files
Works with Alfresco WCM
• Manage the site using Alfresco WCM
• Read and write from AVM stores
Site Construction model / Component model
• Provided out-of-the-box and extensible
Site Dispatcher
• Provided out-of-the-box and extensible
Developer API
07/11/08 9

10. Alfresco Surf Architecture
Presentation Tier
• Alfresco Surf-Powered Application
• Web Script Runtime
• FreeMarker Processor
• Spring
• Some 3rd party libraries
Repository Tier
• Alfresco Repository
• REST Interface to outside world
• Web Script Runtime
• FreeMarker Processor
• Spring
• Hibernate
• 3rd party libraries
07/11/08 10

11. Two Tier Architecture
Model Presentation Tier
Objects
Dispa
tcher
Pages Spring FreeMarker
Templates
Components Web Scripts Surf
Themes
Associations
Connectors
JSON JSON
REST
Web Scripts
Content
Graph
Repository
CMIS
Documents
Social
Folders
UI
Associations
Aspects
Repository Tier
07/11/08 11

12. Model-View-Controller
Two Levels
Page Construction
Renderers
07/11/08 12

13. Page Contruction vs. Renderer
Page
Renderer
Renderer Renderer
Renderer
07/11/08 13

14. Web Script Renderer Model-View-Controller
All your base are
belong to us!
Controller
Java Script
View Model
Document
FreeMarker Metadata
PHP Root-Scoped
XSL Context
Config
07/11/08 14

15. Web Script Renderer Model-View-Controller
Model
• Alfresco Repository elements (i.e. document, person, space, etc)
• Root-scoped variables like search, avm, url
• Configuration loaded from config files
View
• FreeMarker FTL
• Alternative Template Processors (PHP, XSL)
Controller
• Java Script or JavaBeans if you write java-backed web scripts
07/11/08 15

16. Page Construction Model-View-Controller
All your base are
belong to us!
Site
Controller
Dispatcher
Renderers Model Objects
Pages
Freemarker Templates
Template Instances
Chrome
Components
HTML
Themes
JSP
Associations
07/11/08 16

17. Page Construction Model-View-Controller
Model
• Template Instances • Template Types
• Components • Component Types
• Pages • Page Types
• Page Associations • Configurations
• Content Associations • Chrome
• Themes
View
• Renderers such as Web Script Renderer, JSP Renderer, etc
Controller
• Site Dispatcher (XML configurable)
07/11/08 17

18. Learning Alfresco Surf
Renderers
• Build a component
• Learn about remoting
Site Dispatching
• Build a site
• Learn about site composition
Put it all together
• See if we can do something cool
07/11/08 18

19. Renderers
Out of the Box Renderers
• Web Script
• Java Bean
• JSP
• FTL
Let’s start with Web Scripts
• The most common and most powerful rendering facility
• No Java coding, no server restarts
• Rich underlying API for easy extension
Most Surf Components will be written using Web
Scripts!
Surf allows you to build your own renderers in
addition to the ones that it provides out-of-the-box
07/11/08 19

20. Web Scripts
Presentation Web Scripts
• Web Scripts on the Presentation Tier
• Responsible for generating markup (HTML)
• Isolated from Alfresco Repository
• Model context purely derived from framework (no “document”)
• Can call over to Alfresco using “remote” variable
Data Web Scripts
• Web Scripts on the Repository Tier
• Responsible for generating JSON, XML (ATOM) or other serialized
data format
• Wired into the Alfresco Repository
• Context includes Alfresco Repository elements (“document”)
07/11/08 20

21. How are Presentation Web Scripts used?
Surf Components
Share Dashlets
07/11/08 21

22. Web Script Review
http://wiki.alfresco.com/wiki/Web_Scripts
Writing a Presentation Web Script
• Same as writing a Repository Web Script
07/11/08 22

23. Wrap-up
In this module, you learned...
• Surf evolved out of early efforts to provide a site building
framework on top of Alfresco
• There are many ways to build presentation tiers on top of Alfresco
—Surf is the one chosen by Alfresco to build their clients
• Surf is a two-tier web application framework
• Each tier follows an MVC pattern
• Web scripts on the Surf or presentation tier can communicate with
the repository remotely
• Web scripts on the repository tier return serialized data as JSON or
XML
07/11/08 Optaros and Client confidential. All rights reserved. 23