introduction to alfresco surf platform
DESCRIPTION
Alfresco Surf allows you to easily build user interfaces for your content apps. Part of Alfresco 3.0TRANSCRIPT
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
Demo - Create a Page - 2
● "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
Demo - Create a Page - 3
● 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
JavaScript (Controller)JavaScript (Controller)
Freemarker (View)Freemarker (View)
Alfresco Repository (Model)Alfresco Repository (Model)
JavaScript (Controller)JavaScript (Controller)
Freemarker (View)Freemarker (View)
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