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.get.js






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

custom is ing extending alfresco share compatibility mode

Documents