Introduction to Alfresco Surf Platform
Upcoming SlideShare
Loading in...5
×
 

Introduction to Alfresco Surf Platform

on

  • 21,216 views

Alfresco Surf allows you to easily build user interfaces for your content apps. Part of Alfresco 3.0

Alfresco Surf allows you to easily build user interfaces for your content apps. Part of Alfresco 3.0

Statistics

Views

Total Views
21,216
Views on SlideShare
19,516
Embed Views
1,700

Actions

Likes
9
Downloads
687
Comments
2

12 Embeds 1,700

http://www.alfresco.com 1590
http://www.slideshare.net 96
http://www.e-presentations.us 3
http://static.slidesharecdn.com 2
https://wcm.alfresco.com 2
http://sjiwaji.alfrescowww.www--sandbox.wcm.alfresco.com 1
http://opensocialcontentmanagement.com 1
http://www2.man.alfresco.com 1
http://www.alfrescosw.com 1
http://www.ig.gmodules.com 1
http://www.alfrescocms.com 1
http://e-presentations.us 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

12 of 2

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • Jogando.net/mu - 02

    Olá, venho divulgar o melhor servidor de MU on-line do
    Brasil.
    -Season 6 Ep. 3 em todos os Servers. Sendo 7 servers diferenciados proporcionando sua diversão,
    VEJA ALGUMAS NOVIDADES :
    - NOVOS KITS : DEVASTATOR e SUPREMO DIAMOND V2 com Rings e Pendat Mysthical ;
    - Novos Shields Power v3 18 opts;
    - Novas Asas, Rings e Shields JDiamonds;
    - Novas compras com troca de asas e shields para asas e shields JDiamond.
    - Conheça também o site de Animes Cloud: http://www.animescloud.com, mais de 20.000 videos online.
    E NÃO PERCA ~> 1ª Mega Maratona Jogando.net ~> MAIS DE 30 DIAS DE EVENTOS .
    ENTRE JÁ NO SITE : http://www.jogando.net/mu/ >> CADASTRE-SE E GANHE 5 DIAS DE VIP
    Are you sure you want to
    Your message goes here
    Processing…
  • Great Presentation, much better than the docs availble on the site.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • 05/06/09

Introduction to Alfresco Surf Platform Introduction to Alfresco Surf Platform Presentation Transcript

  • 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
    <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
    • 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
  • Demo - Create a Page - 2
    • &quot;Landing&quot; Template has Region &quot;Content&quot; that's not defined
    • Add New Components that haven't been added
      • page.content.newpage.xml site-datacomponents
      • <?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-datapage-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 3 rd party libraries
    • Repository (Data) Tier
      • Alfresco Repository
      • REST Interface to outside world
      • Web Script Runtime
      • FreeMarker Processor
      • 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=&quot;string-compare&quot; condition=&quot;Remote&quot;> <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=&quot;string-compare&quot; condition=&quot;Remote&quot;> <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