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.

Tech talk live share extras extension modules feb 13


Published on

Slide deck to accompany Episode 62 of Alfresco's Tech Talk Live webinar series.

  • Be the first to comment

Tech talk live share extras extension modules feb 13

  1. 1. Using Share Extensibility Modules in Share Extras Will Abson (@wabson)
  2. 2. Agenda•  Introduction•  Custom Doclib Views•  Customizing Custom Views•  Customizing Dashlets•  Customizing Document Details page
  3. 3. About Me•  Integrations Engineer @ Alfresco•  Founder and Lead of Share Extras•  Creator of Site Geotagged Content Add-on
  4. 4. Recap – Share Extensibility•  TTL by Dave Draper, May 2012•  Share Customizations Live by Dave Draper and Erik Winlöf, Alfresco DevCon, Nov 2012
  5. 5. Extensibility Main Points•  Declare modules in site-data/extensions•  Change component behaviors by modifying the script model via a controller .js extension•  Add HTML markup before, after, or instead of the default component content via @region directive –  As of 4.2.b, many components support adding markup into the component via the @markup directive
  6. 6. Extensibility Main Points•  Add additional client-side dependencies via .head.ftl extensions, or (in 4.2) using the @script and @link directives in a .html.ftl extension•  Add or override UI labels with additional .properties files
  7. 7. Site Geotagged Content•  Visualize Geotagged Content in Share –  Using Google Maps•  Tika provides automatic extraction of Geographic info from files –  e.g. EXIF data in digital photos
  8. 8. Site Geotagged ContentOriginally just a Site Dashlet
  9. 9. Site Geotagged ContentNow also a Custom Doclib View
  10. 10. Custom DocLib Views•  Allows us to add in our own views, which can be selected by the user•  Requires Alfresco 4.0.2 / 4.2.a or later•  More information on blog post by Ray Gauss II•  Implemented as client-side renderer classes
  11. 11. Geographic Renderer•  Built on top of the thumbnail renderer•  We need to define –  Module definition –  Additional HTML markup (via Freemarker) –  Component controller extension –  Client-side renderer class –  CSS, icon, labels
  12. 12. Renderer Module Definitionorg_sharextras_doclib-geo-view.xml<extension> <modules> <module> <id>Document List Geographic View</id> <customizations> <customization> <targetPackageRoot>org.alfresco</targetPackageRoot> <sourcePackageRoot>org.sharextras.customization.doclib-geo-view</sourcePackageRoot> </customization> </customizations> </module> </modules></extension>
  13. 13. Renderer HTML Markupcomponents/documentlibrary/documentlist.get.html.ftl<@markup id="customDocLibView" target="documentListContainer" action="after"> <div id="${args.htmlid}-geo" class="alf-geo documents"></div> <div id="${args.htmlid}-geo-empty" class="hidden"> <div class="yui-dt-liner"></div> </div> <div id="${args.htmlid}-geo-item-template" class="alf-geo-item hidden”>...</div> ... <script type="text/javascript">//<![CDATA[ YAHOO.Bubbling.subscribe("postSetupViewRenderers", function(layer, args) { var scope = args[1].scope; var geoViewRenderer = new ${geoRendererClass}("geo") geoViewRenderer.zoomLevel = ${preferences.zoomLevel!15}; = "${(!)?js_string}"; geoViewRenderer.mapTypeId = "${(preferences.mapTypeId!)?js_string}"; scope.registerViewRenderer(geoViewRenderer); }); //]]></script></@>
  14. 14. Renderer Controller Extensioncomponents/documentlibrary/documentlist.get.jsmodel.viewRendererNames.push("geo");model.geoRendererClass ="Extras.DocumentListGMapsGeoViewRenderer";
  15. 15. Renderer Client-side Classsource/web/extras/components/documentlibrary/documentlist-geo.jsExtras.DocumentListGMapsGeoViewRenderer = functionDocumentListGMapsGeoViewRenderer_constructor(name){ ...}YAHOO.extend(Extras.DocumentListGMapsGeoViewRenderer,Extras.DocumentListGeoViewRendererBase,{ setupRenderer: function DL_GVR_setupRenderer(scope) {...}, renderView: function DL_GVR_renderView(scope, sRequest, oResponse,oPayload) {...}}
  16. 16. Demo•  Site Geotagged Content Dashlet•  Site Geographic View
  17. 17. Introducing Leaflet•  A great alternative to Google Maps•  Open Source•  Mobile-friendly•  Plugin a wide range of mapping providers
  18. 18. Changing the View Behaviour•  We’ll use a second module for this –  Order is important!•  We need to provide –  Module definition –  A further webscript controller extension
  19. 19. Renderer Override Moduleorg_sharextras_doclib-geo-view-leaflet.xml<extension> <modules> <module> <id>Document List Geographic View</id> <customizations> <customization> <targetPackageRoot>org.alfresco</targetPackageRoot> <sourcePackageRoot>org.sharextras.customization.doclib-geo-view-leaflet</sourcePackageRoot> </customization> </customizations> </module> </modules></extension>
  20. 20. Renderer Override ControllerExtensioncomponents/documentlibrary/documentlist.get.jsmodel.geoRendererClass ="Extras.DocumentListLeafletGeoViewRenderer";
  21. 21. Demo•  Site Geographic View with Leaflet
  22. 22. Changing other Components•  The same approach is valid for most OOTB components, which populate the model.widgets object –  The @createWidgets Freemarker directive new in 4.2 then renders the widget markup•  To demonstrate this, let’s also change the dashlet behavior
  23. 23. Demo•  Site Geotagged Content Dashlet with Leaflet
  24. 24. Custom DocLib Previewers•  The ability to ‘intervene’ between the widget configuration being declared and it being rendered is incredibly useful in other places, too!•  Let’s look at the PdfJs viewer included in the Media Viewers add-on as an example
  25. 25. Previewer Controller Extensioncomponents/documentlibrary/documentlist.get.jsif (model.widgets) // Protection for older versions{ for (var i = 0; i < model.widgets.length; i++) { var widget = model.widgets[i]; if ( == "WebPreview") { // Insert new pluginCondition(s) at start of the chain var conditions = [{...}]; var oldConditions = eval("(" + widget.options.pluginConditions + ")"); // Add the other conditions back in for (var j = 0; j < oldConditions.length; j++) { conditions.push(oldConditions[j]); } // Override the original conditions model.pluginConditions = jsonUtils.toJSONString(conditions); widget.options.pluginConditions = model.pluginConditions; }}
  26. 26. Demo•  PdfJs Viewer
  27. 27. More Information•• talk-live-on-share-extensibility• author/ddraper/