More Ways of Customizing Alfresco Share<br />2<br />Erik Winlöf<br />UI Team, Alfresco<br />twitter: @erikwinlof<br />
Whatwe’ll cover<br />3<br /><ul><li>Development tips, Customization concepts & Best practice
Use case: Acme Enterprises™
Future enhancements
(JavaScript tips)</li></li></ul><li>A noteaboutdevelopment<br />4<br />${TOMCAT_HOME}/shared/classes/alfresco/web-extensio...
<client-debug-autologging>  -  browser logging
<mode>development</mode>  -  fewer restarts & refreshes
Separate Share server  -  quicker restarts</li></ul>http://blogs.alfresco.com/wp/kevinr/2010/04/07/developer-tips-for-alfr...
Server JS debugging: WebScriptJavascript debugger
http://localhost:8081/share/page/api/javascript/debugger</li></li></ul><li>Old customisationconcepts < v3.3<br />5<br /><u...
 ${TOMCAT_HOME}/shared/classes/alfresco</li></ul>/web-extension<br />/web-extension/share-config-custom.xml<br />/web-exte...
New customisationconcepts= v3.3<br />6<br /><ul><li> Override (do NOT modify source files)
 ${TOMCAT_HOME}/shared/classes/alfresco </li></ul>/web-extension<br />/web-extension/share-config-custom.xml<br />/web-ext...
New customisationconcepts >= v3.4b<br />7<br /><ul><li> In Share v3.4b all client side files are brought in using urls lik...
Usecase: ACME Enterprises™<br />8<br /><ul><li>Running Alfresco Share v3.4b
Using collaboration sites for their core projects
Marketing needs sites with event statistics
Uses a 3rd party library: Flot Statistics™</li></li></ul><li>Whatwe are going to do….<br />9<br />ACME’s Share<br /><ul><l...
 Changed column layout on “My Tasks”
 Replace “links” component on document details
 New “Marketing” site preset with a custom statistics page</li></li></ul><li>Configure the header<br />10<br />web-extensi...
acme header messages & news icon <br />11<br />acme.jar!/alfresco/messages/acme.properties<br />header.acme-about.label=Ab...
Adding a resource bundle (acme.properties)<br />12<br />.jar!/alfresco/web-extension/custom-slingshot-acme-context.xml<br ...
Whatwe are going to do….<br />13<br />ACME’s Share<br /><ul><li> Configured header
Changed column layout on “My Tasks”
 Replace “links” component on document details
 New “Marketing” site preset with a custom statistics page</li></li></ul><li>Override the My Task lists cell renderer<br /...
Override the My Task lists cell renderer<br />15<br />…and place the new method implementation in:<br /> ${TOMCAT_HOME}/sh...
Whatwe are going to do….<br />16<br />ACME’s Share<br /><ul><li> Configured header
 Changed column layout on “My Tasks”
Replace “links” component on document details
 New “Marketing” site preset with a custom statistics page</li></li></ul><li>How a page is rendered…<br />17<br />URL: /sh...
How a page is rendered…<br />URL: /share/page/site/engineering/{pageId}<br />pages/{pageId}.xml:<br /><template-instance>{...
 … find the scope, region-id & templateinstance…<br />19<br />URL: /share/page/site/engineering/document-details<br />page...
…and override the componentbinding<br />20<br />web-extension/site-data/components/template.document-links.document-detail...
Whatwe are going to do….<br />21<br />ACME’s Share<br /><ul><li> Configured header
 Changed column layout on “My Tasks”
 Replace “links” component on document details
Upcoming SlideShare
Loading in …5
×

More Ways of Extending Share

11,993 views

Published on

Having looked at basic theming, creating dashlets and Document Library customization, this session will dig deeper into Share extensions. Topics will include: overriding components, changing page layouts, adding new pages and advanced techniques with dashlets. It is assumed you have a basic understanding of Surf concepts as well as a working knowledge of JavaScript and Freemarker. Familiarity with YUI 2.x and CSS will aid understanding during this session.

Published in: Technology, Design
0 Comments
6 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
11,993
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
196
Comments
0
Likes
6
Embeds 0
No embeds

No notes for slide
  • No matter what version of Share you use: never modify source files.Instead you copy the originals and place them in the web-extension folder to be overridden! This is true for all versions!What happens is that Share always looks in web-extension for what it wants before it looks in the webapps folder.New functionality is also placed in shared/classes but just above the web-extenstion folder.Client side resources needs to be placed in a new .war file and all templates that references them needs to be overriden in the web-extension folder.
  • More Ways of Extending Share

    1. 1. More Ways of Customizing Alfresco Share<br />2<br />Erik Winlöf<br />UI Team, Alfresco<br />twitter: @erikwinlof<br />
    2. 2. Whatwe’ll cover<br />3<br /><ul><li>Development tips, Customization concepts & Best practice
    3. 3. Use case: Acme Enterprises™
    4. 4. Future enhancements
    5. 5. (JavaScript tips)</li></li></ul><li>A noteaboutdevelopment<br />4<br />${TOMCAT_HOME}/shared/classes/alfresco/web-extension/share-config-custom.xml<br /><ul><li><client-debug> - un-minified javascript
    6. 6. <client-debug-autologging> - browser logging
    7. 7. <mode>development</mode> - fewer restarts & refreshes
    8. 8. Separate Share server - quicker restarts</li></ul>http://blogs.alfresco.com/wp/kevinr/2010/04/07/developer-tips-for-alfresco-share-33/<br /><ul><li>Client JS debugging: Firebug (FF), Inspector (Safari)
    9. 9. Server JS debugging: WebScriptJavascript debugger
    10. 10. http://localhost:8081/share/page/api/javascript/debugger</li></li></ul><li>Old customisationconcepts < v3.3<br />5<br /><ul><li> Override (do NOT modify source files)
    11. 11. ${TOMCAT_HOME}/shared/classes/alfresco</li></ul>/web-extension<br />/web-extension/share-config-custom.xml<br />/web-extension/custom-slingshot-application-context.xml<br />/web-extension/site-webscripts<br />/site-webscripts- new webscripts<br /><ul><li> ${TOMCAT_HOME}/webapps/share-extension.war </li></ul> (.js, .css, .png etc)<br />
    12. 12. New customisationconcepts= v3.3<br />6<br /><ul><li> Override (do NOT modify source files)
    13. 13. ${TOMCAT_HOME}/shared/classes/alfresco </li></ul>/web-extension<br />/web-extension/share-config-custom.xml<br />/web-extension/site-webscripts<br /><ul><li> ${TOMCAT_HOME}/shared/lib - ONLY new stuff</li></ul>.jar!/alfresco/web-extension/custom-slingshot-{module}-context.xml<br />.jar!/alfresco/site-webscripts<br />.jar!/META-INF (.js, .css, .png etc)<br />
    14. 14. New customisationconcepts >= v3.4b<br />7<br /><ul><li> In Share v3.4b all client side files are brought in using urls like “share/res/…”</li></ul>Which makes it possible to override .js, .css & .png etc in a .jar file’s META-INF directory <br />No need anymore to override the templates that import the resources<br /><ul><li> Ant project for building a share extension .jar</li></ul>https://share-extras.googlecode.com/svn/trunk/Site Tags Dashlet/<br />
    15. 15. Usecase: ACME Enterprises™<br />8<br /><ul><li>Running Alfresco Share v3.4b
    16. 16. Using collaboration sites for their core projects
    17. 17. Marketing needs sites with event statistics
    18. 18. Uses a 3rd party library: Flot Statistics™</li></li></ul><li>Whatwe are going to do….<br />9<br />ACME’s Share<br /><ul><li>Configured header
    19. 19. Changed column layout on “My Tasks”
    20. 20. Replace “links” component on document details
    21. 21. New “Marketing” site preset with a custom statistics page</li></li></ul><li>Configure the header<br />10<br />web-extension/share-config-custom.xml<br /><config replace="true"> <br /> <header><br /> <app-items><br /> <!-- defaults: icon="{id}.png" label="header.{id}.label" <br /> description="header.{id}.description" --><br /> <item type="link" id="acme-about">/acme-about</item><br /> <item type="link" id="acme-news">/acme-news</item><br /> <item type="js" id="sites">Alfresco.module.Sites</item><br /> … <br /> </app-items><br /> </header><br /></config><br />
    22. 22. acme header messages & news icon <br />11<br />acme.jar!/alfresco/messages/acme.properties<br />header.acme-about.label=About Acme<br />header.acme-about.description=About Acme Enterprises<br />header.acme-news.label=Acme News<br />header.acme-news.description=News about the Acme Company<br />acme.jar!/META-INF/components/images/header/acme-news.png<br />/share/res/components/images/header/acme-news.png<br />
    23. 23. Adding a resource bundle (acme.properties)<br />12<br />.jar!/alfresco/web-extension/custom-slingshot-acme-context.xml<br /><?xml version='1.0' encoding='UTF-8'?><br /><!DOCTYPE beans PUBLIC '-//SPRING//DTD BEAN//EN' <br /> 'http://www.springframework.org/dtd/spring-beans.dtd'><br /><beans><br /> <bean id="flot.acme.resources" <br />class="org.springframework.extensions.surf.util.ResourceBundleBootstrapComponent"><br /> <property name="resourceBundles"><br /> <list><br /> <value>alfresco.messages.acme</value><br /> </list><br /> </property><br /> </bean><br /></beans><br />
    24. 24. Whatwe are going to do….<br />13<br />ACME’s Share<br /><ul><li> Configured header
    25. 25. Changed column layout on “My Tasks”
    26. 26. Replace “links” component on document details
    27. 27. New “Marketing” site preset with a custom statistics page</li></li></ul><li>Override the My Task lists cell renderer<br />14<br />Make sure the custom code is used…<br />web-extension/site-webscripts/org/alfresco/components/workflow/task-list.get.head.ftl<br /><#include "../component.head.inc"><br /><!-- Common Workflow Actions --><br /><@script type="text/javascript" src="${page.url.context}/res/components/workflow/workflow-actions.js"></@script><br /><!-- Task List --><br /><@link rel="stylesheet" type="text/css" href="${page.url.context}/res/components/workflow/task-list.css" /><br /><@script type="text/javascript" src="${page.url.context}/res/components/workflow/task-list.js"></@script><br /><!-- Acme's Task List --><br /><@script type="text/javascript" src="${page.url.context}/res/acme/components/workflow/task-list.js"></@script><br />
    28. 28. Override the My Task lists cell renderer<br />15<br />…and place the new method implementation in:<br /> ${TOMCAT_HOME}/shared/lib/acme.jar!/META-INF/acme/components/workflow/task-list.js<br />// Override "icon" column in My Tasks list<br />Alfresco.component.TaskList.prototype.renderCellTaskInfo= function Acme_TL_renderCellTaskInfo(elCell, oRecord, oColumn, oData)<br />{<br />elCell.innerHTML = <custom code goes here>;<br />};<br />
    29. 29. Whatwe are going to do….<br />16<br />ACME’s Share<br /><ul><li> Configured header
    30. 30. Changed column layout on “My Tasks”
    31. 31. Replace “links” component on document details
    32. 32. New “Marketing” site preset with a custom statistics page</li></li></ul><li>How a page is rendered…<br />17<br />URL: /share/page/site/engineering/document-details?nodeRef=…<br />header<br />title<br />navigation<br />path<br />document-actions<br />document-links<br />
    33. 33. How a page is rendered…<br />URL: /share/page/site/engineering/{pageId}<br />pages/{pageId}.xml:<br /><template-instance>{templateInstance}</template-instance><br />template-instances/{templateInstance}.xml:<br /><template>{template}</template><br /><component><br /> <region-id>{regionId}</region-id><br /> <url>{webscriptURL}</url><br /><component><br />templates/…/{template}.ftl:<br /><html><@region id=“{regionId}”scope”{scope}”></html><br />components/webscript.get.desc.xml:<br /><url>{webscriptURL}</url><br />18<br />
    34. 34. … find the scope, region-id & templateinstance…<br />19<br />URL: /share/page/site/engineering/document-details<br />pages/document-details.xml:<br /><template-instance>document-details</template-instance><br />template-instances/document-details.xml:<br /><template>document-details</template><br /><component><br /> <region-id>document-links</region-id><br /> <url>/components/document-details/document-links</url><br /><component><br />templates/…/<br />document-details.ftl:<br /><html><@region id=“document-links” scope”template”></html><br />components/<br />document-links.get.desc.xml:<br /><url>/components/document-details/document-links</url><br />
    35. 35. …and override the componentbinding<br />20<br />web-extension/site-data/components/template.document-links.document-details.xml<br /><?xml version='1.0' encoding='UTF-8'?><br /><component><br /> <url>/acme/components/document-details/document-syndication</url><br /></component><br />
    36. 36. Whatwe are going to do….<br />21<br />ACME’s Share<br /><ul><li> Configured header
    37. 37. Changed column layout on “My Tasks”
    38. 38. Replace “links” component on document details
    39. 39. New “Marketing” site preset with a custom statistics page</li></li></ul><li>Acme’s ”Marketing” sites<br />22<br /><ul><li>Customdashboard (like above)
    40. 40. Calendarrenamed to ”Marketing Events”
    41. 41. New ”Event Statistics” page
    42. 42. No blog, wikilinks in navigation</li></li></ul><li>web-extension/site-data/presets/presets.xml<br />23<br /><presets><br /> <preset id="acme-marketing-preset"><br /> <components><br /><!-- Code to bind in dashlets (visible on the next slide) --><br /> </components><br /> <pages><br /> <page id="site/${siteid}/dashboard"><br /> <title>Marketing dashboard</title><br /> <description>Dashboard for Marketing site</description><br /> <template-instance>dashboard-2-columns-wide-right</template-instance><br /> <authentication>user</authentication><br /> <properties><br /><!-- Arbitrary properties that may be read using: <br />sitedata.getPage("site/" + siteId + "/dashboard").properties--><br /> </properties><br /> </page><br /> </pages><br /> </preset> <br /></presets><br />
    43. 43. presets.xml – bind in the dashlets<br />24<br /><components><br /> <!-- dashlets --><br /><component><br /> <scope>page</scope><br /> <region-id>component-1-1</region-id><br /> <source-id>site/${siteid}/dashboard</source-id><br /> <url>/components/dashlets/docsummary</url><br /> </component><br /> <component><br /> <scope>page</scope><br /> <region-id>component-2-1</region-id><br /> <source-id>site/${siteid}/dashboard</source-id><br /> <url>/components/dashlets/calendar</url><br /> </component><br /></components><br />
    44. 44. presets.xml – define the pages and theirtitles<br />25<br /><page id="site/${siteid}/dashboard"><br /> <properties><br /><!-- Read by collaboration-navigation.get.js to render links --><br /> <sitePages> <br /> [<br /> {"pageId":"documentlibrary"},<br /> {"pageId":"calendar"}, <br /> {"pageId":"flot-event-statistics"}<br /> ]<br /> </sitePages><br /> <pageMetadata><br /> {<br /> "calendar":<br /> {<br /> "titleId":"page.acme-marketing-calendar.title",<br /> "descriptionId":"page.acme-marketing-calendar.description”<br /> }<br /> }<br /> </pageMetadata><br /> </properties><br /></page><br />
    45. 45. Display new preset in create site dialog<br />26<br />web-extension/site-webscripts/org/alfresco/modules/create-site.get.js<br />varsitePresets = [<br />{<br /> id: "site-dashboard", <br /> name: msg.get("title.collaborationSite")<br />},<br />{<br /> id: "acme-marketing-preset",<br /> name: msg.get("title.acme-marketing-site")<br />}];<br />model.sitePresets = sitePresets;<br />
    46. 46. The ”Event Statistics” page<br />27<br />title<br />navigation<br />component-{i}<br />
    47. 47. templates/…/flot-grid.ftl<br />28<br /><#include "org/alfresco/include/alfresco-template.ftl" /><br /><@templateHeader "transitional"><br /> <@scripttype="text/javascript" src="${url.context}/res/flot/js/flot.js"/><br /> <@scripttype="text/javascript" src="${url.context}/res/flot/js/jquery.js"/><br /> <@scripttype="text/javascript" src="${url.context}/res/flot/js/jquery.flot.js"/><br /></@><br /><@templateBody><br /> <div id="alf-hd"><br /> <@region id="header" scope="global" protected=true /><br /> <@region id="title" scope="template" protected=true /><br /> <@region id="navigation" scope="template" protected=true /><br /> </div><br /> <div id="bd"><br /> <#list 1..9 as cid><div style="float: left;"><br /> <@region id="${'component-' + cid}" scope="page" protected=true/><br /> </div></#list><br /> <div style="clear: both;"></div><br /> </div><br /></@><br /><@templateFooter><br /> <div id="alf-ft”><@region id="footer" scope="global" protected=true /></div><br /></@><br />
    48. 48. template-instances/flot-collaboration-grid.xml<br />29<br /><?xml version='1.0' encoding='UTF-8'?><br /><template-instance><br /> <template-type>flot-grid</template-type><br /> <components><br /> <component><br /> <region-id>title</region-id><br /> <url>/components/title/collaboration-title</url><br /> </component> <br /> <component><br /> <region-id>navigation</region-id><br /> <url>/components/navigation/collaboration-navigation</url><br /> </component> <br /> </components><br /></template-instance><br />
    49. 49. pages/flot-event-statistics.xml<br />30<br /><?xml version='1.0' encoding='UTF-8'?><br /><page><br /> <id>flot-event-statistics</id><br /> <title>Event Statistics</title><br /> <template-instance>flot-collaboration-grid</template-instance><br /> <authentication>user</authentication><br /> <components><br /> <component><br /> <region-id>component-1</region-id><br /> <url>/flot/components/event-statistics</url><br /> <properties><br /> <title>flot.title.events-last-30-days</title><br /> <days>-30</days><br /> </properties><br /> </component><br /> <component><br /> <region-id>component-2</region-id><br /> <url>/flot/components/event-statistics</url><br /> <properties><br /> <title>flot.title.events-next-7-days</title><br /> <days>7</days><br /> </properties><br /> </component><br /> </components><br /></page><br />
    50. 50. components/…/event-statistics.get.html.ftl<br />31<br /><#assign el=args.htmlid?js_string><br /><script type="text/javascript">//<![CDATA[<br /> new Flot.component.EventStatistics("${el}").setOptions({<br />siteId: "${page.url.templateArgs.site!""}",<br /> days: ${args.days!7}<br />}).setMessages(<br /> ${messages}<br /> );<br />//]]></script><br /><div id="${el}-body" class="flot-event-statistics"><br /> <h1>${msg(args.title!"header")}</h1><br /> <div id="${el}-chart" <br /> style="width: ${args.width!"500px"}; height: ${args.height!"500px"};"></div><br /> <div id="${el}-control" class="control" style="width: ${args.width!"500px"};"></div><br /> <div id="${el}-tooltip" class="tooltip theme-bg-color-2 theme-border-4" style="display: none;"></div><br /></div><br />
    51. 51. event-statistics.js(client side)<br />32<br />Flot.component.EventStatistics= function(htmlId)<br />{<br />Flot.component.EventStatistics.superclass.constructor.call<br /> (this, "Flot.component.EventStatistics", htmlId, ["button"]);<br /> return this;<br />};<br />YAHOO.extend(Flot.component.EventStatistics, Alfresco.component.Base,<br />{<br />options:<br /> {<br /> days: null<br /> },<br />onReady: function ()<br /> {<br /> // Create chart...<br /> }<br />});<br />
    52. 52. Best practice<br />33<br /><ul><li> Place overrides in shared/classes/org/alfresco/web-extension.
    53. 53. If you need to override client side resources place them in a file named share-extension.jar
    54. 54. Prefix with “3rd party” name:
    55. 55. pages – flot-event-statistics.xml
    56. 56. templates – flot-grid.xml
    57. 57. template-instances – flot-collaboration-grid.ftl
    58. 58. css selectors - .flot-event-statistics
    59. 59. Use packages where possible:
    60. 60. webscripts:
    61. 61. /alfresco/site-webscripts/flot/components/event-statistics.get.desc.xml
    62. 62. javascript:
    63. 63. /flot/components/events/event-statistics.js
    64. 64. Flot.component.EventStatistics</li></li></ul><li>Future<br />34<br /><ul><li>Move out alldatatable renderers
    65. 65. Sweep of configuration possibilities & hookpoints
    66. 66. Scope overrides
    67. 67. I.e “page” overrides “template” but also make “uri” override “template” and “page”. This makes it possible to have “site specific” components on pages.
    68. 68. …and your suggestions in the forums!</li></li></ul><li>JavaScript tips<br />35<br />Alfresco.Location<br />Alfresco.util.DragAndDrop<br />Alfresco.util.DataTable<br />Alfresco.module.DataPicker<br />
    69. 69. Learn More<br />36<br />wiki.alfresco.com<br />forums.alfresco.com<br />twitter: @AlfrescoECM<br />
    70. 70. 37<br />Shape & Color Pallette<br />Normal Text<br />Normal Text<br />Normal Text<br />
    71. 71. 38<br />
    72. 72. Summary…<br />39<br />URL: /share/page/site/{siteId}/flot-event-statistics<br />pages/flot-event-statistics.xml:<br /><template-instance>flot-collaboration-grid</template-instance><br /><component><br /> <region-id>component-1</region-id><br /> <url>/flot/components/event-statistics</url><br /><component><br />template-instances/flot-collaboration-grid.xml:<br /><template>flot-grid</template><br /><component><br /> <region-id>title</region-id><br /> <url><br />/components/title/collaboration-title<br /></url><br /><component><br />components/…/event-statistics.get.desc.xml:<br /><url>/flot/components/event-statistics</url><br />components/…/collaboration-title.get.desc.xml:<br /><url><br />/components/title/collaboration-title<br /></url><br />templates/…/flot-grid.ftl:<br /><@region id=“title” scope”template”><br /><@region id=“component-1” scope”page”><br />

    ×