Alfresco Surf Code Camp

Introduction

07/11/08 Optaros and Client confidential. All rights reserved. 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

Why Surf?

07/11/08 Optaros and Client confidential. All rights reserved. 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. 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. 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. 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

Technical Overview

07/11/08 9

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

Alfresco Surf Design Objectives

07/11/08 10

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

Alfresco Surf Architecture

07/11/08 11

Presentation Tier

Repository Tier

Spring

Connectors

REST

Web Scripts

FreeMarker

Dis

pa

tch

er

Surf

Model Objects

PagesTemplates

ComponentsThemes

Associations

JSON

Web Scripts

RepositoryCMIS

SocialUI

JSON

Content Graph

DocumentsFoldersAssociationsAspects

Two Tier Architecture

07/11/08 12

Two Levels

Page Construction

Renderers

Model-View-Controller

07/11/08 13

Page

Renderer

Renderer Renderer

Renderer

Page Contruction vs. Renderer

07/11/08 14

Java Script

Model

DocumentMetadataRoot-ScopedContextConfig

View

FreeMarkerPHPXSL

Controller

All your base arebelong to us!

Web Script Renderer Model-View-Controller

07/11/08 15

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

Web Script Renderer Model-View-Controller

07/11/08 16

Site Dispatcher

Model Objects

PagesTemplate InstancesComponentsThemesAssociations

Renderers

Freemarker TemplatesChrome

HTMLJSP

Controller

All your base arebelong to us!

Page Construction Model-View-Controller

07/11/08 17

Model• Template Instances

• Components

• Pages

• Page Associations

• Content Associations

• Themes

View• Renderers such as Web Script Renderer, JSP Renderer, etc

Controller• Site Dispatcher (XML configurable)

Page Construction Model-View-Controller

• Template Types

• Component Types

• Page Types

• Configurations

• Chrome

07/11/08 18

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

Learning Alfresco Surf

07/11/08 19

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

Renderers

07/11/08 20

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”)

Web Scripts

07/11/08 21

Surf Components

Share Dashlets

How are Presentation Web Scripts used?

07/11/08 22

http://wiki.alfresco.com/wiki/Web_Scripts

Writing a Presentation Web Script• Same as writing a Repository Web Script

Web Script Review

07/11/08 Optaros and Client confidential. All rights reserved. 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