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 SurfDesign 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 3rd 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

RendererRoot 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

<html> <body> <@region id=“test” scope=“page” /> </body></html>

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

1. Look up Page Home (in /site-data/pages)1. Page XML has a template reference

2. Look up Template (in /site-data/templates)1. Look up Renderer for Template – FTL file

2. Process FTL, and Regions in Template by Id

3. Find Component Bindings for those region ids based on scope1. Component Definitions (in /site-data/components)

2. 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-data\pages\

<?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-data\components\<?xml version='1.0' encoding='UTF-8'?>

<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-data\page-associations

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

<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● FreeMarker Processor● Spring● Some 3rd party libraries

● Repository (Data) Tier● Alfresco Repository● REST Interface to outside world● Web Script Runtime● FreeMarker Processor● Spring● Hibernate● 3rd party libraries

22

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)JavaScript (Controller)

Freemarker (View)Freemarker (View)

Alfresco Repository (Model)Alfresco Repository (Model)

Consumer / ClientConsumer / Client

Remote Repository (Model)

23

Surf - Two Tiers



Alfresco Repository (Model)Alfresco Repository (Model)



Remote Data ModelRemote Data Model

Consumer / ClientConsumer / Client

Data (Repository) Tier

Two Tier Architecture

Presentation Tier

Repository Tier

Spring

Connectors

REST

Web Scripts

FreeMarker

Dis

pa

tch

er

Surf

Model Objects

PagesTemplates

ComponentsThemes

Associations

JSON

Web Scripts

RepositoryCMISSocial

UI

JSON

Content Graph

DocumentsFoldersAssociationsAspects

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: remoteScriptRemote

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

RemotingConfigurations

● 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

RemotingConfigurations

HTTP

alfresco

RMI Alfresco

www.wikipedia.org

mediawiki wordpress

Endpoint

Connectors

Authenticators

alfresco.com

Remote ConfigurationEndpoints

● 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 ConfigurationConnectors

● 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

● Web Script● Uses HTTP EndPoint to Connect to Yahoo Weather Service● No Authentication Required ● Page Weather calls the Web Script

Advantages of Surf

● Based on Best Practices from the Field

● No need for presentation framework● i.e. Portal Container

● Working on Web Studio – IDE for Surf● Expected Soon

● No Java Coding Requires● All lightweight scripting – Freemarker and JavaScript

● Ability to manage this in AVM

● Alfresco Share Build on Surf Platform● Uses Alfresco Repository as Storage● In Alfresco Labs 3B – Available Now

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

Further Info

● Overview - http://wiki.alfresco.com/wiki/Surf_Platform

● Developer's Guide -http://wiki.alfresco.com/wiki/Surf_Platform_-_Developers_Guide

● Surf FreeMarker & JavaScript API● http://wiki.alfresco.com/wiki/Surf_Platform_-_Freemarker_Template_and_JavaScript_API

● A few Dashlets● http://drquyong.com/myblog

● Web Scripts Review● http://wiki.alfresco.com/wiki/Web_Scripts

introduction to alfresco surf platform

Technology

page home

page associations

page layout

page scope

template renderer

use existing page

navigation page associationadd

landing template