Alfresco Summit 2013: eSignatures and Alfresco - Manuel Reyes
Custom is Ing Extending Alfresco Share Compatibility Mode
Transcript of Custom is Ing Extending Alfresco Share Compatibility Mode
Configuring and Extending
Alfresco ShareAlfresco Share
Will Abson
Solutions Engineer
Share is a Platform
● Base content services
● Dashboards, client framework
● Scriptable, templatable
● Scriptable, templatable
● Lightweight portal alternative
● Pull data from Alfresco and other applications
Share Technologies
General Development
Considerations
● Consider development across all three tiers
● Client-side, web-tier, repository-tier
● Decide mix between client-side vs. web-tier JavaScript code
• Most extensions will use a combination of both
• But do not duplicate code
● Consider software versions
● Alfresco versions
● Browser versions
● Have a test plan
Configuration vs. Extension
● Configuration via Spring and Surf configuration
● Forms configuration
● Data lists
● Extension involves lightweight development
● Custom Dashlets● Custom Dashlets
● Custom Document Actions
● Custom Themes
● Additional Language Packs
● Custom Pages (More advanced)
Custom Dashlets
● Just a web script!
● BUT can also utilise client-side assets
• Most Alfresco dashlets use client-side JS
● Render HTML areas on dashboards● Render HTML areas on dashboards
● Portal alternative
● Rapid development
● Lightweight scripting and template
● Support overriding existing dashlets
Dashlet Capabilities
● Call repository services, e.g.
● Fetch content metadata
● Invoke actions on content
• e.g. Check out
● Set user preferences
● Call external services
● JSON, Atom, HTML, etc.
● Authentication through custom endpoints
● Manage dashlet configuration
● Internationalisation (I18N)
● Client-side capabilities via YUI
● Resizing
● Dialogues
Types of Dashlet
● User Dashlets (user-dashlet family)
● Available on any user dashboard
● Usually independent of site content, or cross-site view
• e.g. Alfresco Network, My Sites, My Tasks
● Site Dashlets ( family)● Site Dashlets (site-dashlet family)
● Available on any site dashboard
● Typically concerned with content within a site• e.g. Site Wiki
● Combined Dashlets (dashlet family)
● Available on both user and site dashboards
Anatomy of a Dashlet
● Client-side (optional)
●Client-side JavaScript module
●Dashlet CSS● Web-tier
●Web-tier web script, including●Web-tier web script, including• Web script XML descriptor (name,
description, family, etc)
• HTML Freemarker template
• Messages bundle(s) for I18N
• Dashlet controller script (optional)
• Dashlet XML configuration (optional)
● Repository-tier (optional) (or third party)
●Repository-tier data web scripts
Dashlet Source Layout (1)
● Suggested source layout
● Class path resources in config
• Web-tier scripts in config/alfresco/web-extension/site-webscripts
• Repository-tier scripts in • Repository-tier scripts in config/alfresco/extension/templates/webscripts
● Client-side resources in source/web
● Same as Alfresco standard layout
• Easy deployment and packaging using Ant
• Not suitable if you are using Maven
Dashlet Source Layout (2)
● Web scripts layout
●Use sub-packages below site-webscripts and webscripts folders
• e.g. com/mycompany/components/dashlets
Do not use org/alfresco namespace• Do not use org/alfresco namespace
● Client-side assets layout
●Use sub-folders below web folder
• e.g. components/dashlets
Developing Dashlets
● Develop locally
● Copy files into a local Alfresco instance to test
• Do not develop inside an Alfresco instance!
● Development tips
• http://blogs.alfresco.com/wp/kevinr/2010/04/07/developer-tips-for-alfresco-share-33/
● Development tools● Development tools
● Your favourite text editor / IDE
● Firefox plus Firebug OR Google Chrome
● Ant or Maven to deploy changes to your test system and package for distribution
● Source code control, e.g. SVN, Git
● YUI Compressor
Testing Dashlets
● Copy web-tier scripts to <TOMCAT_HOME>/shared/classes/alfresco/web-extension/site-webscripts
● Copy repository-tier scripts to <TOMCAT_HOME>/shared/classes/alfresco/extension/templates/webscriptsn/templates/webscripts
● Copy client-side resources to <TOMCAT_HOME>/webapps/ROOT/share-extension
● Don’t forget to refresh web scripts● http://localhost:8080/share/index
●May be automated using Ant
Packaging & Deploying Dashlets
● Use YUI Compressor to generate -min.js files
● http://developer.yahoo.com/yui/compressor/
● Use JAR files to package where possible
● Web-tier script resources in root
● Client-side resources in META-INF● Client-side resources in META-INF• Reference via /share/res URIs
• May need to rewrite your links
● Can use Ant or Maven for easy packaging
● Deploy into webapps/share/WEB-INF/lib or shared/lib
● AMP files may be used when more complex
Extensions in Action
Hello World Dashlet 1
● Web-tier web script
● hello-world.get.desc.xml
● hello-world.get.html.ftl
● hello-world.get.properties● hello-world.get.properties
Hello World Dashlet 2
● Web-tier web script
● hello-world.get.desc.xml
● hello-world.get.html.ftl
● hello-world.get.properties● hello-world.get.properties
● hello-world.get.js
Hello World Dashlet 3
● Web-tier web script
● hello-world.get.desc.xml
● hello-world.get.html.ftl
● hello-world.get.properties● hello-world.get.properties
● hello-world.get.js
● hello-world.get.config.xml
Anatomy of a Document Action
● Client-side
●Client-side JavaScript action
● Action CSS
● Web-tier
●Web-tier configuration
• Document List component
• Document Details component
● Repository-tier (optional)
●Repository-tier data web script
Custom Backup Action
Anatomy of a Theme
● Client-side
● Theme CSS
● Theme image assets
● Web-tier● Web-tier
●Web-tier configuration
Red Theme
More information
● http://wiki.alfresco.com/wiki/Web_Scripts
● http://wiki.alfresco.com/wiki/Alfresco_Share
● http://blogs.alfresco.com/wp/kevinr/
● http://blogs.alfresco.com/wp/wabson/● http://blogs.alfresco.com/wp/wabson/
Q & A