Configuring and Extending Alfresco Share

Will Abson Solutions Engineer

Share is a Platform
Base content

services

Dashboards, client

framework

Scriptable,

templatable alternative

Lightweight portal 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 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

Portal

alternative scripting and template

Rapid development
Lightweight

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 crosssite view

e.g. Alfresco Network, My Sites, My Tasks

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
Web-tier

JavaScript module Dashlet CSS

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

config/alfresco/extension/templat es/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 sitewebscripts and webscripts folders

e.g. com/mycompany/components/dashlets 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! http://blogs.alfresco.com/wp/kevinr/2010/04/07/developer-tips-foralfresco-share-33/

Development tips

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/webextension/site-webscripts <TOMCAT_HOME>/shared/classes/alfresco/extensio n/templates/webscripts <TOMCAT_HOME>/webapps/ROOT/share-extension

Copy repository-tier scripts to Copy client-side resources to

Dont 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

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 Dashlet 2

Web-tier web script
hello-world.get.desc.xml hello-world.get.html.ftl 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.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 Theme

CSS image assets configuration

Web-tier
Web-tier

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/

Q&A