Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Quickly Customizing Alfresco Share<br />2<br />AingaranPillai<br />Founder, Zazi<br />twitter: @apillaiz<br />
Use case: Adding Simple Extensions<br />3<br /><ul><li>Based on Alfresco Share v3.3
Simple Extensions
Practical Examples – Tag Cloud, Twitter Feed, Red Theme</li></li></ul><li>What’s an Extension?<br />4<br />Anything utilis...
Tag Cloud Dashlet<br />5<br />Site Dashlet<br />Displays dynamic data<br />Tags associated with the current site, as a tag...
6<br />
Typical Dashlet Pattern<br />7<br />(function()<br />{<br />   ...<br />Alfresco.dashlet.SiteTags = functionSiteTags_const...
Code Walk Though<br />8<br />Client-side JS source/web/components/dashlets/site-tags.js<br />Web script config/alfresco/si...
Twitter Feed Dashlet<br />9<br />Generic Dashlet (User or Site dashboards)<br />Displays last ten tweets of a specific use...
10<br />
Code Walk Though<br />11<br />Client-side JS source/web/components/dashlets/twitter-user-timeline.js<br />Web script confi...
Dashlet Development Considerations<br />12<br />How should I load my data?<br />Web tier only for simple dashlets<br />Com...
Custom Red Theme<br />13<br />Custom Theme for Alfresco Share<br />Provides custom CSS plus (optional) images<br />Allow s...
Custom Theme Walk-Through<br />14<br />Changing the title bar colour/background<br />Changing the site navigation bar<br /...
15<br />
Code Walk Though<br />16<br />
Packaging Extensions<br />17<br />Always package simple extensions in JAR format where possible<br />Share Extras uses a s...
Tools<br />18<br />Use whatever tools you like, BUT<br />Separate your source from your deployment<br />Do not develop ins...
General Points<br />19<br />Share is a powerful platform<br />But modularity leads to a lot of files<br />You may want to ...
Upcoming SlideShare
Loading in …5
×

Quickly Customizing Alfresco

7,747 views

Published on

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.

Published in: Technology, Design
  • Be the first to comment

Quickly Customizing Alfresco

  1. 1. Quickly Customizing Alfresco Share<br />2<br />AingaranPillai<br />Founder, Zazi<br />twitter: @apillaiz<br />
  2. 2. Use case: Adding Simple Extensions<br />3<br /><ul><li>Based on Alfresco Share v3.3
  3. 3. Simple Extensions
  4. 4. Practical Examples – Tag Cloud, Twitter Feed, Red Theme</li></li></ul><li>What’s an Extension?<br />4<br />Anything utilising a general Share extension point<br />Custom Dashlets<br />Custom Themes<br />Document Library actions<br />Custom page components (see Advanced Customizationpresentation)<br />Share Header (new in 3.4)<br />Scriptable, templatable<br />No Java involved!<br />Easily deployable (JARs/AMPs)<br />
  5. 5. Tag Cloud Dashlet<br />5<br />Site Dashlet<br />Displays dynamic data<br />Tags associated with the current site, as a tag cloud<br />Loads data from repository via existingRESTful API<br />GET /alfresco/service/api/tagscopes/site/{site}/tags<br />GET /alfresco/service/api/tagscopes/site/{site}/{container}/tags<br />Business logic could be implemented entirely in the web tier<br />But better using client-side JavaScript<br />Allows ‘refreshing’ of data<br />Deploy as a JAR<br />
  6. 6. 6<br />
  7. 7. Typical Dashlet Pattern<br />7<br />(function()<br />{<br /> ...<br />Alfresco.dashlet.SiteTags = functionSiteTags_constructor(htmlId)<br /> {<br />returnAlfresco.dashlet.SiteTags.superclass.constructor.call(this, "Alfresco.dashlet.SiteTags", htmlId);<br />};<br />YAHOO.extend(Alfresco.dashlet.SiteTags, Alfresco.component.Base,<br />{<br /> options:<br /> {<br /> ...<br /> },<br />onReady: function SiteTags_onReady()<br />{<br /> ...<br /> },<br /> ...<br /> }<br />}<br />
  8. 8. Code Walk Though<br />8<br />Client-side JS source/web/components/dashlets/site-tags.js<br />Web script config/alfresco/site-webscripts/org/alfresco/components/dashlets/site-tags.get<br />
  9. 9. Twitter Feed Dashlet<br />9<br />Generic Dashlet (User or Site dashboards)<br />Displays last ten tweets of a specific user<br />Loads data from Twitter JSON API<br />GET /alfresco/service/api/tagscopes/site/{site}/tags<br />GET /alfresco/service/api/tagscopes/site/{site}/{container}/tags<br />Data loading performed by a second ‘list’ web script<br />Dashlet web script just acts as a container<br />Allows simple refreshing of data<br />Configuration dialogue UI to set Twitter username<br />Yet another web script!<br />Glue it all together using client-side JavaScript<br />Deploy as a JAR<br />
  10. 10. 10<br />
  11. 11. Code Walk Though<br />11<br />Client-side JS source/web/components/dashlets/twitter-user-timeline.js<br />Web script config/alfresco/site-webscripts/org/alfresco/components/dashlets/twitter-user-timeline.get<br />Web script config/alfresco/site-webscripts/org/alfresco/components/dashlets/twitter-user-timeline-list.get<br />Web script config/alfresco/site-webscripts/org/alfresco/modules/dashlets/config-twitter-user-timeline.get<br />
  12. 12. Dashlet Development Considerations<br />12<br />How should I load my data?<br />Web tier only for simple dashlets<br />Complement with client-side JavaScript where needed<br />More client-side JS allows richer user experience and shifts processing burden onto the clients<br />What format? JSON, XML or direct HTML?<br />What configuration parameters can be applied?<br />e.g. Number of tags, default Twitter user<br />Configuration dialogue allows users to change it<br />Store default values in .config.xmlfile<br />Are any user preferences required?<br />
  13. 13. Custom Red Theme<br />13<br />Custom Theme for Alfresco Share<br />Provides custom CSS plus (optional) images<br />Allow selection of theme in Admin Console<br />Deploy as an AMP (not a JAR)<br />
  14. 14. Custom Theme Walk-Through<br />14<br />Changing the title bar colour/background<br />Changing the site navigation bar<br />Changing the hyperlink colour<br />Changing the default logos<br />YUI Controls<br />YUI Tree controls<br />YUI Buttons<br />YUI Menus<br />
  15. 15. 15<br />
  16. 16. Code Walk Though<br />16<br />
  17. 17. Packaging Extensions<br />17<br />Always package simple extensions in JAR format where possible<br />Share Extras uses a standard source structure and Ant built script to acheivethis<br />Some extensions (e.g. Custom themes) cannot be packaged as JARs - use AMP files instead<br />Use a build process to do the hard work<br />Create directory structures<br />Create JAR/AMP files<br />JavaScript compression<br />See example in Share Extras projects<br />
  18. 18. Tools<br />18<br />Use whatever tools you like, BUT<br />Separate your source from your deployment<br />Do not develop inside the webapp!<br />Use a source code management tool<br />Use a standard project structure<br />Build tools (e.g. Ant) can help you<br />JavaScript/FreeMarker code completion/syntax checking will save you a LOT of time<br />Eclipse can do all of this<br />Test across different browsers<br />Firefox/Firebug and Google Chrome are best for debugging<br />
  19. 19. General Points<br />19<br />Share is a powerful platform<br />But modularity leads to a lot of files<br />You may want to copy/paste from similar areas of functionality<br />Don’t forget to document!<br />
  20. 20. More Information<br />20<br />Share Extras project - http://code.google.com/p/share-extras/<br />Advanced Share Customisation<br />Using Forms in Share<br />

×