Quickly Customizing Alfresco

19
Quickly Customizing Alfresco Share 1 Aingaran Pillai Founder, Zazi twitter: @apillaiz

description

Find out how easy it is to brand a Share installation. We will create a custom theme using CSS and a Tag cloud dashlet implemented as a simple WebScript that you can later add to the dashboard.

Transcript of Quickly Customizing Alfresco

Page 1: Quickly Customizing Alfresco

1

Quickly Customizing Alfresco Share

Aingaran PillaiFounder, Zazi

twitter: @apillaiz

Page 2: Quickly Customizing Alfresco

2

Use case: Adding Simple Extensions

• Based on Alfresco Share v3.3• Simple Extensions• Practical Examples – Tag Cloud, Twitter Feed, Red Theme

Page 3: Quickly Customizing Alfresco

3

What’s an Extension?

• Anything utilising a general Share extension point• Custom Dashlets• Custom Themes• Document Library actions• Custom page components (see Advanced Customization

presentation)• Share Header (new in 3.4)

• Scriptable, templatable• No Java involved!• Easily deployable (JARs/AMPs)

Page 4: Quickly Customizing Alfresco

4

Tag Cloud Dashlet

• Site Dashlet• Displays dynamic data

• Tags associated with the current site, as a tag cloud

• Loads data from repository via existing RESTful API• GET /alfresco/service/api/tagscopes/site/{site}/tags• GET /alfresco/service/api/tagscopes/site/{site}/{container}/tags

• Business logic could be implemented entirely in the web tier

• But better using client-side JavaScript• Allows ‘refreshing’ of data

• Deploy as a JAR

Page 5: Quickly Customizing Alfresco

5

Page 6: Quickly Customizing Alfresco

6

Typical Dashlet Pattern(function(){ ... Alfresco.dashlet.SiteTags = function SiteTags_constructor(htmlId) { return Alfresco.dashlet.SiteTags.superclass.constructor.call(this, "Alfresco.dashlet.SiteTags", htmlId);

};

YAHOO.extend(Alfresco.dashlet.SiteTags, Alfresco.component.Base, { options: { ... }, onReady: function SiteTags_onReady() { ... }, ... }}

Page 7: Quickly Customizing Alfresco

7

Code Walk Though

• Client-side JS source/web/components/dashlets/site-tags.js• Web script config/alfresco/site-webscripts/org/alfresco/components/dashlets/site-tags.get

Page 8: Quickly Customizing Alfresco

8

Twitter Feed Dashlet

• Generic Dashlet (User or Site dashboards)• Displays last ten tweets of a specific user• Loads data from Twitter JSON API

• GET /alfresco/service/api/tagscopes/site/{site}/tags• GET /alfresco/service/api/tagscopes/site/{site}/{container}/tags

• Data loading performed by a second ‘list’ web script• Dashlet web script just acts as a container• Allows simple refreshing of data

• Configuration dialogue UI to set Twitter username• Yet another web script!

• Glue it all together using client-side JavaScript• Deploy as a JAR

Page 9: Quickly Customizing Alfresco

9

Page 10: Quickly Customizing Alfresco

10

Code Walk Though

• Client-side JS source/web/components/dashlets/twitter-user-timeline.js• Web script config/alfresco/site-webscripts/org/alfresco/components/dashlets/twitter-user-timeline.get

• Web script config/alfresco/site-webscripts/org/alfresco/components/dashlets/twitter-user-timeline-list.get

• Web script config/alfresco/site-webscripts/org/alfresco/modules/dashlets/config-twitter-user-timeline.get

Page 11: Quickly Customizing Alfresco

11

Dashlet Development Considerations

• How should I load my data?• Web tier only for simple dashlets• Complement with client-side JavaScript where needed• More client-side JS allows richer user experience and shifts

processing burden onto the clients• What format? JSON, XML or direct HTML?

• What configuration parameters can be applied?• e.g. Number of tags, default Twitter user• Configuration dialogue allows users to change it• Store default values in .config.xml file

• Are any user preferences required?

Page 12: Quickly Customizing Alfresco

12

Custom Red Theme

• Custom Theme for Alfresco Share• Provides custom CSS plus (optional) images• Allow selection of theme in Admin Console

• Deploy as an AMP (not a JAR)

Page 13: Quickly Customizing Alfresco

13

Custom Theme Walk-Through

• Changing the title bar colour/background• Changing the site navigation bar• Changing the hyperlink colour• Changing the default logos• YUI Controls

• YUI Tree controls• YUI Buttons• YUI Menus

Page 14: Quickly Customizing Alfresco

14

Page 15: Quickly Customizing Alfresco

15

Code Walk Though

Page 16: Quickly Customizing Alfresco

16

Packaging Extensions

• Always package simple extensions in JAR format where possible

• Share Extras uses a standard source structure and Ant built script to acheive this

• Some extensions (e.g. Custom themes) cannot be packaged as JARs - use AMP files instead

• Use a build process to do the hard work• Create directory structures• Create JAR/AMP files• JavaScript compression• See example in Share Extras projects

Page 17: Quickly Customizing Alfresco

17

Tools

• Use whatever tools you like, BUT• Separate your source from your deployment

• Do not develop inside the webapp!• Use a source code management tool• Use a standard project structure• Build tools (e.g. Ant) can help you• JavaScript/FreeMarker code completion/syntax checking will save

you a LOT of time• Eclipse can do all of this

• Test across different browsers• Firefox/Firebug and Google Chrome are best for debugging

Page 18: Quickly Customizing Alfresco

18

General Points

• Share is a powerful platform• But modularity leads to a lot of files• You may want to copy/paste from similar areas of functionality

• Don’t forget to document!

Page 19: Quickly Customizing Alfresco

19

More Information

• Share Extras project - http://code.google.com/p/share-extras/

• Advanced Share Customisation• Using Forms in Share