Post on 21-Jan-2015
description
1
Quickly Customizing Alfresco Share
Aingaran PillaiFounder, Zazi
twitter: @apillaiz
2
Use case: Adding Simple Extensions
• Based on Alfresco Share v3.3• Simple Extensions• Practical Examples – Tag Cloud, Twitter Feed, Red Theme
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)
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
5
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() { ... }, ... }}
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
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
9
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
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?
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)
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
14
15
Code Walk Though
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
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
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!
19
More Information
• Share Extras project - http://code.google.com/p/share-extras/
• Advanced Share Customisation• Using Forms in Share