More Ways of Extending Share
•Télécharger en tant que PPTX, PDF•
6 j'aime•9,015 vues
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.
![Whatwe’ll cover 3 ,[object Object]](data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7)
Recommandé
Recommandé
Contenu connexe
Plus de Alfresco Software
Plus de Alfresco Software (20)
Dernier
Dernier (20)
More Ways of Extending Share
- 1. More Ways of Customizing Alfresco Share 2 Erik Winlöf UI Team, Alfresco twitter: @erikwinlof
- 3. Use case: Acme Enterprises™
- 6. <client-debug-autologging> - browser logging
- 7. <mode>development</mode> - fewer restarts & refreshes
- 9. Server JS debugging: WebScriptJavascript debugger
- 16. Using collaboration sites for their core projects
- 17. Marketing needs sites with event statistics
- 19. Changed column layout on “My Tasks”
- 20. Replace “links” component on document details
- 22. acme header messages & news icon 11 acme.jar!/alfresco/messages/acme.properties header.acme-about.label=About Acme header.acme-about.description=About Acme Enterprises header.acme-news.label=Acme News header.acme-news.description=News about the Acme Company acme.jar!/META-INF/components/images/header/acme-news.png /share/res/components/images/header/acme-news.png
- 23. Adding a resource bundle (acme.properties) 12 .jar!/alfresco/web-extension/custom-slingshot-acme-context.xml <?xml version='1.0' encoding='UTF-8'?> <!DOCTYPE beans PUBLIC '-//SPRING//DTD BEAN//EN' 'http://www.springframework.org/dtd/spring-beans.dtd'> <beans> <bean id="flot.acme.resources" class="org.springframework.extensions.surf.util.ResourceBundleBootstrapComponent"> <property name="resourceBundles"> <list> <value>alfresco.messages.acme</value> </list> </property> </bean> </beans>
- 25. Changed column layout on “My Tasks”
- 26. Replace “links” component on document details
- 28. Override the My Task lists cell renderer 15 …and place the new method implementation in: ${TOMCAT_HOME}/shared/lib/acme.jar!/META-INF/acme/components/workflow/task-list.js // Override "icon" column in My Tasks list Alfresco.component.TaskList.prototype.renderCellTaskInfo= function Acme_TL_renderCellTaskInfo(elCell, oRecord, oColumn, oData) { elCell.innerHTML = <custom code goes here>; };
- 30. Changed column layout on “My Tasks”
- 31. Replace “links” component on document details
- 33. How a page is rendered… URL: /share/page/site/engineering/{pageId} pages/{pageId}.xml: <template-instance>{templateInstance}</template-instance> template-instances/{templateInstance}.xml: <template>{template}</template> <component> <region-id>{regionId}</region-id> <url>{webscriptURL}</url> <component> templates/…/{template}.ftl: <html><@region id=“{regionId}”scope”{scope}”></html> components/webscript.get.desc.xml: <url>{webscriptURL}</url> 18
- 34. … find the scope, region-id & templateinstance… 19 URL: /share/page/site/engineering/document-details pages/document-details.xml: <template-instance>document-details</template-instance> template-instances/document-details.xml: <template>document-details</template> <component> <region-id>document-links</region-id> <url>/components/document-details/document-links</url> <component> templates/…/ document-details.ftl: <html><@region id=“document-links” scope”template”></html> components/ document-links.get.desc.xml: <url>/components/document-details/document-links</url>
- 35. …and override the componentbinding 20 web-extension/site-data/components/template.document-links.document-details.xml <?xml version='1.0' encoding='UTF-8'?> <component> <url>/acme/components/document-details/document-syndication</url> </component>
- 37. Changed column layout on “My Tasks”
- 38. Replace “links” component on document details
- 40. Calendarrenamed to ”Marketing Events”
- 41. New ”Event Statistics” page
- 43. presets.xml – bind in the dashlets 24 <components> <!-- dashlets --> <component> <scope>page</scope> <region-id>component-1-1</region-id> <source-id>site/${siteid}/dashboard</source-id> <url>/components/dashlets/docsummary</url> </component> <component> <scope>page</scope> <region-id>component-2-1</region-id> <source-id>site/${siteid}/dashboard</source-id> <url>/components/dashlets/calendar</url> </component> </components>
- 44. presets.xml – define the pages and theirtitles 25 <page id="site/${siteid}/dashboard"> <properties> <!-- Read by collaboration-navigation.get.js to render links --> <sitePages> [ {"pageId":"documentlibrary"}, {"pageId":"calendar"}, {"pageId":"flot-event-statistics"} ] </sitePages> <pageMetadata> { "calendar": { "titleId":"page.acme-marketing-calendar.title", "descriptionId":"page.acme-marketing-calendar.description” } } </pageMetadata> </properties> </page>
- 45. Display new preset in create site dialog 26 web-extension/site-webscripts/org/alfresco/modules/create-site.get.js varsitePresets = [ { id: "site-dashboard", name: msg.get("title.collaborationSite") }, { id: "acme-marketing-preset", name: msg.get("title.acme-marketing-site") }]; model.sitePresets = sitePresets;
- 46. The ”Event Statistics” page 27 title navigation component-{i}
- 47. templates/…/flot-grid.ftl 28 <#include "org/alfresco/include/alfresco-template.ftl" /> <@templateHeader "transitional"> <@scripttype="text/javascript" src="${url.context}/res/flot/js/flot.js"/> <@scripttype="text/javascript" src="${url.context}/res/flot/js/jquery.js"/> <@scripttype="text/javascript" src="${url.context}/res/flot/js/jquery.flot.js"/> </@> <@templateBody> <div id="alf-hd"> <@region id="header" scope="global" protected=true /> <@region id="title" scope="template" protected=true /> <@region id="navigation" scope="template" protected=true /> </div> <div id="bd"> <#list 1..9 as cid><div style="float: left;"> <@region id="${'component-' + cid}" scope="page" protected=true/> </div></#list> <div style="clear: both;"></div> </div> </@> <@templateFooter> <div id="alf-ft”><@region id="footer" scope="global" protected=true /></div> </@>
- 48. template-instances/flot-collaboration-grid.xml 29 <?xml version='1.0' encoding='UTF-8'?> <template-instance> <template-type>flot-grid</template-type> <components> <component> <region-id>title</region-id> <url>/components/title/collaboration-title</url> </component> <component> <region-id>navigation</region-id> <url>/components/navigation/collaboration-navigation</url> </component> </components> </template-instance>
- 49. pages/flot-event-statistics.xml 30 <?xml version='1.0' encoding='UTF-8'?> <page> <id>flot-event-statistics</id> <title>Event Statistics</title> <template-instance>flot-collaboration-grid</template-instance> <authentication>user</authentication> <components> <component> <region-id>component-1</region-id> <url>/flot/components/event-statistics</url> <properties> <title>flot.title.events-last-30-days</title> <days>-30</days> </properties> </component> <component> <region-id>component-2</region-id> <url>/flot/components/event-statistics</url> <properties> <title>flot.title.events-next-7-days</title> <days>7</days> </properties> </component> </components> </page>
- 50. components/…/event-statistics.get.html.ftl 31 <#assign el=args.htmlid?js_string> <script type="text/javascript">//<![CDATA[ new Flot.component.EventStatistics("${el}").setOptions({ siteId: "${page.url.templateArgs.site!""}", days: ${args.days!7} }).setMessages( ${messages} ); //]]></script> <div id="${el}-body" class="flot-event-statistics"> <h1>${msg(args.title!"header")}</h1> <div id="${el}-chart" style="width: ${args.width!"500px"}; height: ${args.height!"500px"};"></div> <div id="${el}-control" class="control" style="width: ${args.width!"500px"};"></div> <div id="${el}-tooltip" class="tooltip theme-bg-color-2 theme-border-4" style="display: none;"></div> </div>
- 51. event-statistics.js(client side) 32 Flot.component.EventStatistics= function(htmlId) { Flot.component.EventStatistics.superclass.constructor.call (this, "Flot.component.EventStatistics", htmlId, ["button"]); return this; }; YAHOO.extend(Flot.component.EventStatistics, Alfresco.component.Base, { options: { days: null }, onReady: function () { // Create chart... } });
- 53. If you need to override client side resources place them in a file named share-extension.jar
- 54. Prefix with “3rd party” name:
- 55. pages – flot-event-statistics.xml
- 56. templates – flot-grid.xml
- 57. template-instances – flot-collaboration-grid.ftl
- 58. css selectors - .flot-event-statistics
- 59. Use packages where possible:
- 60. webscripts:
- 62. javascript:
- 65. Sweep of configuration possibilities & hookpoints
- 66. Scope overrides
- 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.
- 69. Learn More 36 wiki.alfresco.com forums.alfresco.com twitter: @AlfrescoECM
- 70. 37 Shape & Color Pallette Normal Text Normal Text Normal Text
- 71. 38
- 72. Summary… 39 URL: /share/page/site/{siteId}/flot-event-statistics pages/flot-event-statistics.xml: <template-instance>flot-collaboration-grid</template-instance> <component> <region-id>component-1</region-id> <url>/flot/components/event-statistics</url> <component> template-instances/flot-collaboration-grid.xml: <template>flot-grid</template> <component> <region-id>title</region-id> <url> /components/title/collaboration-title </url> <component> components/…/event-statistics.get.desc.xml: <url>/flot/components/event-statistics</url> components/…/collaboration-title.get.desc.xml: <url> /components/title/collaboration-title </url> templates/…/flot-grid.ftl: <@region id=“title” scope”template”> <@region id=“component-1” scope”page”>
Notes de l'éditeur
- 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.