Introduction to Alfresco Surf Platform

Introducing Alfresco Surf Platform Jean Barmash Director, Technical Services

Agenda

Introduction to Surf

Single Tier Surf Applications

Templates

Pages

Components

Demo - Create New Page

Two Tier Surf Applications

Remote Connectors

Demo – Remote Component

(Little bit) Share and Future of Surf

Q & A

What is Surf?

Page Layout and Component Framework for Creating Web Apps

Highly Extensible & Customizable

Many Programming Options, but

Plays Nicely with Web Scripts

Separate Application

No Dependencies On Alfresco Repository

However, Allows Two Tiered Applications

Ability to Call Remote Web Services (i.e. REST)

Alfresco Repository as Backend "Model"

Mashup

Take a Page navigation

Split it Up Into Template + Components box1 box2 box2 content navigation footer global scope

Alfresco Surf Design Objectives

Lightweight and Scriptable

Web Scripts for User Interface

Easy to Customize

XML Configuration files

Works with 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

Single Tier Architecture

Presentation Tier

Alfresco Surf-Powered Application

Web Script Runtime

FreeMarker Processor

Spring

Some 3 rd party libraries

Model View Controller

Model Objects

Template

Page

Component

Other – Theme, Site Coniguration, Page Associations, etc.

Model-View-Controller

Two Levels

Template (Page)

Component

Both Have Renderers

Page Renderer Renderer Renderer Renderer

Renderers

Different Methods to Generate Output

Typically HTML Markup based on the Model

Out of the Box Renderers

FreeMarker Templates

Web Script

Java Bean

JSP

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!

Can Build Your Own Renderers

Renderer Root Scoped Objects

To Access the Model, Renderers Have These Objects Exposed

context

The request context

user

The current user

content

The content object being rendered

instance

The renderer instance (equivalent of "this")

sitedata

Site Construction helper

remote

Connection management helper

Page Dispatching Logic

Execute the Template Renderer for path: /surf/home

FreeMarker renderer

/WEB-INF/classes/alfresco/templates/sample/home.ftl

Regions have Scopes

Page

Template

Global

Execute the region tag and find matching components

/WEB-INF/classes/alfresco/site-data/components

Search for components in page scope, bound to home page for the region ‘ test ’

page.test.home.xml

Site Data

/WEB-INF/classes/alfresco

/site-data /chrome /components /component-types /configurations /content-associations /page-associations /pages /page-types /template-instances /template-types /themes

Note: bolded elements are the ones where developers spend most of their time

Walk Through

Page Dispatching LifeCycle

Example: Hitting the home page

http://testserver:8080/sample/page?p=home

Look up Page Home (in /site-data/pages)

Page XML has a template reference

Look up Template (in /site-data/templates)

Look up Renderer for Template – FTL file

Process FTL, and Regions in Template by Id

Find Component Bindings for those region ids based on scope

Component Definitions (in /site-data/components)

Component XMLs Define Component Renderers

Additional Elements

Associations

Page Association

Content Association

Site

Configuration

Theme

Chrome

Demo - Create a Page - 1

Use Existing Page Template

Newpage.xml in site-datapages

<?xml version='1.0' encoding='UTF-8'?>

<page>

<title>New Page</title>

<template-instance>landing</template-instance>

<authentication>none</authentication>

</page>

View New Page http://localhost:8080/surf/page?f=default&p=newpage

"Landing" Template has Region "Content" that's not defined

Add New Components that haven't been added

page.content.newpage.xml site-datacomponents

<component>

<scope>page</scope>

<region-id>content</region-id>

<source-id>newpage</source-id>

<url>/blocks/image</url>

<properties>

<src>${url.context}/images/age/palanga.jpg</src>

</properties>

</component>

Using OOB Web Script

/blocks/image

/blocks/include

Now Let's Add this to Navigation – Page Association

Add home-newpage.xml in site-datapage-associations

<page-association>

<source-id>home</source-id>

<dest-id>newpage</dest-id>

<assoc-type>child</assoc-type>

<order-id>5</order-id>

</page-association>

Additional Surf Capabilities

Infrastructure Elements – Site Dispatcher

Site Configuration

Page Dispatching

Link Builders

Page Mappers

I18N

Remote Connections

Agenda

Introduction to Surf

Single Tier Surf Applications

Templates

Pages

Components

Demo - Create New Page

Two Tier Surf Applications

Remote Connectors

Demo – Remote Component

(Little bit) Share and Future of Surf

Q & A

Two Tier Architecture

Presentation Tier

Alfresco Surf-Powered Application

Web Script Runtime

Spring

Some 3 rd party libraries

Repository (Data) Tier

Alfresco Repository

REST Interface to outside world

Web Script Runtime

Spring

Hibernate

3 rd party libraries

Uses Web Scripts

Web Scripts

Lightweight scriptable REST framework

Multiple uses

Roll your own API

Create new UI components

Create portlets/widgets

Expose WCM/AVM features

Script-based implementation

Server-side JavaScript

Freemarker

Limited only by your imagination

Integration: Create a mashup

Search: Exposed to other systems.

Rich Internet Applications

Cross-language

Cross-platform

JavaScript (Controller) Freemarker (View) Alfresco Repository (Model) Consumer / Client

Surf - Two Tiers Remote Repository (Model) JavaScript (Controller) Freemarker (View) Alfresco Repository (Model) JavaScript (Controller) Freemarker (View) Remote Data Model Data (Repository) Tier Consumer / Client

Two Tier Architecture Connectors Model Objects Pages Templates Components Themes Associations JSON Web Scripts Repository CMIS Social UI JSON Content Graph Documents Folders Associations Aspects Presentation Tier Repository Tier Spring REST Web Scripts FreeMarker Dispatcher Surf

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

Root-scoped: remote ScriptRemote

A remote connection helper

Access to Alfresco Web Framework remoting faciltiies

Stateless Connections

Stateful Connections (scoped to user)

Credential Management and Binding (stateful)

Credential Vault (persistent and non-persistent)

Customizable (XML config driven)

Remoting Configurations

Get a connector for a given endpoint

Endpoints

any arbitrary id

defines connection information to the remote location

Connector

knows how to “talk” with specific types of back end servers

Authenticator

knows how to “handshake” for authentication with back end servers

Alfresco Ticket, MediaWiki, WordPress, etc.

Endpoint Authenticator Connector

Remoting Configurations Endpoint Connectors Authenticators HTTP alfresco RMI Alfresco www.wikipedia.org mediawiki wordpress alfresco.com

Remote Configuration Endpoints

Endpoints

Properties

id Defines the endpoint ID to be “alfresco”

connector-id The id of the connector to use when connecting

endpoint-url The base URL for the connection

identity How to manage user connection state (user, none)

<config evaluator="string-compare" condition="Remote"> <remote> <endpoint> <id> alfresco </id> <name>Alfresco - user access</name> <connector-id> alfresco </connector-id> <endpoint-url> http://localhost:8080/alfresco/s </endpoint-url> <identity> user </identity> </endpoint> </remote> </config>

Remote Configuration Connectors

Connectors

Properties

id Defines the connector ID to be “alfresco”

class The Java implementation class name

authenticator-id The id of the authenticator to use when authenticating

<config evaluator="string-compare" condition="Remote"> <remote> <connector> <id> alfresco </id> <name>Alfresco Connector</name> <class> org.alfresco.connector.AlfrescoConnector </class> <authenticator-id> alfresco-ticket </authenticator-id> </connector> </remote> </config>

Walk Through Remote Weather Component

Remote Weather Component