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.

of

Tech talk live   share extras extension modules feb 13 Slide 1 Tech talk live   share extras extension modules feb 13 Slide 2 Tech talk live   share extras extension modules feb 13 Slide 3 Tech talk live   share extras extension modules feb 13 Slide 4 Tech talk live   share extras extension modules feb 13 Slide 5 Tech talk live   share extras extension modules feb 13 Slide 6 Tech talk live   share extras extension modules feb 13 Slide 7 Tech talk live   share extras extension modules feb 13 Slide 8 Tech talk live   share extras extension modules feb 13 Slide 9 Tech talk live   share extras extension modules feb 13 Slide 10 Tech talk live   share extras extension modules feb 13 Slide 11 Tech talk live   share extras extension modules feb 13 Slide 12 Tech talk live   share extras extension modules feb 13 Slide 13 Tech talk live   share extras extension modules feb 13 Slide 14 Tech talk live   share extras extension modules feb 13 Slide 15 Tech talk live   share extras extension modules feb 13 Slide 16 Tech talk live   share extras extension modules feb 13 Slide 17 Tech talk live   share extras extension modules feb 13 Slide 18 Tech talk live   share extras extension modules feb 13 Slide 19 Tech talk live   share extras extension modules feb 13 Slide 20 Tech talk live   share extras extension modules feb 13 Slide 21 Tech talk live   share extras extension modules feb 13 Slide 22 Tech talk live   share extras extension modules feb 13 Slide 23 Tech talk live   share extras extension modules feb 13 Slide 24 Tech talk live   share extras extension modules feb 13 Slide 25 Tech talk live   share extras extension modules feb 13 Slide 26 Tech talk live   share extras extension modules feb 13 Slide 27 Tech talk live   share extras extension modules feb 13 Slide 28
Upcoming SlideShare
Dr. David Prezant - Enterprise Content Management: New York City Fire Department
Next
Download to read offline and view in fullscreen.

2 Likes

Share

Download to read offline

Tech talk live share extras extension modules feb 13

Download to read offline

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

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

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 Content Originally just a Site Dashlet
  9. 9. Site Geotagged Content Now 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 Definition org_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 Markup components/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}; geoViewRenderer.center = "${(preferences.center!'')?js_string}"; geoViewRenderer.mapTypeId = "${(preferences.mapTypeId!'')?js_string}"; scope.registerViewRenderer(geoViewRenderer); }); //]]></script> </@>
  14. 14. Renderer Controller Extension components/documentlibrary/documentlist.get.js model.viewRendererNames.push("geo"); model.geoRendererClass = "Extras.DocumentListGMapsGeoViewRenderer";
  15. 15. Renderer Client-side Class source/web/extras/components/documentlibrary/ documentlist-geo.js Extras.DocumentListGMapsGeoViewRenderer = function DocumentListGMapsGeoViewRenderer_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 leafletjs.com
  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 Module org_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 Controller Extension components/documentlibrary/documentlist.get.js model.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 Extension components/documentlibrary/documentlist.get.js if (model.widgets) // Protection for older versions { for (var i = 0; i < model.widgets.length; i++) { var widget = model.widgets[i]; if (widget.id == "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 •  http://sharextras.org •  http://www.slideshare.net/alfresco/tech- talk-live-on-share-extensibility •  http://blogs.alfresco.com/wp/developer/ author/ddraper/
  • DavidCiamberlano

    Jul. 15, 2013
  • jimenezcaracuel_p

    Feb. 14, 2013

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

Views

Total views

3,359

On Slideshare

0

From embeds

0

Number of embeds

31

Actions

Downloads

29

Shares

0

Comments

0

Likes

2

×