Introduction to Alfresco Surf Platform
Download as PPT, PDF12 likes3,676 views
The document introduces the Alfresco Surf platform, highlighting its architecture for creating web applications through a flexible component framework and customizable templates. It details the functionality of both single and two-tier surf applications, including demos for page creation and remote integration with web services. Additionally, it emphasizes the ease of development with lightweight scripting, the use of web scripts, and resources for learning more about the platform.
Introduction to Alfresco Surf Platform
- 1. Introducing Alfresco Surf Platform Jean Barmash Director, Technical Services
- 2. 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
- 3. 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
- 4. Take a Page navigation
- 5. Split it Up Into Template + Components box1 box2 box2 content navigation footer global scope
- 6. 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
- 7. 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.
- 8. Model-View-Controller Two Levels Template (Page) Component Both Have Renderers Page Renderer Renderer Renderer Renderer
- 9. 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
- 10. 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
- 11. 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>
- 12. 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
- 13. Walk Through
- 14. 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
- 15. Additional Elements Associations Page Association Content Association Site Configuration Theme Chrome
- 16. 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
- 17. 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
- 18. 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>
- 19. Additional Surf Capabilities Infrastructure Elements – Site Dispatcher Site Configuration Page Dispatching Link Builders Page Mappers I18N Remote Connections
- 20. 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
- 21. 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
- 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) Freemarker (View) Alfresco Repository (Model) Consumer / Client
- 23. 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
- 24. 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
- 25. 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”)
- 26. 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)
- 27. 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
- 28. Remoting Configurations Endpoint Connectors Authenticators HTTP alfresco RMI Alfresco www.wikipedia.org mediawiki wordpress alfresco.com
- 29. 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>
- 30. 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>
- 31. Walk Through Remote Weather Component
- 32. Remote Weather Component Web Script Uses HTTP EndPoint to Connect to Yahoo Weather Service No Authentication Required Page Weather calls the Web Script
- 33. 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
- 34. 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
- 35. 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
Editor's Notes
- #2: 05/06/09