Tech talk live share extras extension modules feb 13
-
Upload
alfresco-software -
Category
Documents
-
view
2.625 -
download
2
description
Transcript of Tech talk live share extras extension modules feb 13
![Page 1: Tech talk live share extras extension modules feb 13](https://reader033.fdocuments.in/reader033/viewer/2022052522/554c118bb4c905e7568b487a/html5/thumbnails/1.jpg)
Using Share Extensibility Modules in Share Extras
Will Abson (@wabson)
![Page 2: Tech talk live share extras extension modules feb 13](https://reader033.fdocuments.in/reader033/viewer/2022052522/554c118bb4c905e7568b487a/html5/thumbnails/2.jpg)
Agenda
• Introduction • Custom Doclib Views • Customizing Custom Views • Customizing Dashlets • Customizing Document Details page
![Page 3: Tech talk live share extras extension modules feb 13](https://reader033.fdocuments.in/reader033/viewer/2022052522/554c118bb4c905e7568b487a/html5/thumbnails/3.jpg)
About Me
• Integrations Engineer @ Alfresco • Founder and Lead of Share Extras • Creator of Site Geotagged Content Add-on
![Page 4: Tech talk live share extras extension modules feb 13](https://reader033.fdocuments.in/reader033/viewer/2022052522/554c118bb4c905e7568b487a/html5/thumbnails/4.jpg)
Recap – Share Extensibility
• TTL by Dave Draper, May 2012 • Share Customizations Live by Dave
Draper and Erik Winlöf, Alfresco DevCon, Nov 2012
![Page 5: Tech talk live share extras extension modules feb 13](https://reader033.fdocuments.in/reader033/viewer/2022052522/554c118bb4c905e7568b487a/html5/thumbnails/5.jpg)
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
![Page 6: Tech talk live share extras extension modules feb 13](https://reader033.fdocuments.in/reader033/viewer/2022052522/554c118bb4c905e7568b487a/html5/thumbnails/6.jpg)
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
![Page 7: Tech talk live share extras extension modules feb 13](https://reader033.fdocuments.in/reader033/viewer/2022052522/554c118bb4c905e7568b487a/html5/thumbnails/7.jpg)
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
![Page 8: Tech talk live share extras extension modules feb 13](https://reader033.fdocuments.in/reader033/viewer/2022052522/554c118bb4c905e7568b487a/html5/thumbnails/8.jpg)
Site Geotagged Content
Originally just a Site Dashlet
![Page 9: Tech talk live share extras extension modules feb 13](https://reader033.fdocuments.in/reader033/viewer/2022052522/554c118bb4c905e7568b487a/html5/thumbnails/9.jpg)
Site Geotagged Content
Now also a Custom Doclib View
![Page 10: Tech talk live share extras extension modules feb 13](https://reader033.fdocuments.in/reader033/viewer/2022052522/554c118bb4c905e7568b487a/html5/thumbnails/10.jpg)
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
![Page 11: Tech talk live share extras extension modules feb 13](https://reader033.fdocuments.in/reader033/viewer/2022052522/554c118bb4c905e7568b487a/html5/thumbnails/11.jpg)
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
![Page 12: Tech talk live share extras extension modules feb 13](https://reader033.fdocuments.in/reader033/viewer/2022052522/554c118bb4c905e7568b487a/html5/thumbnails/12.jpg)
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>
![Page 13: Tech talk live share extras extension modules feb 13](https://reader033.fdocuments.in/reader033/viewer/2022052522/554c118bb4c905e7568b487a/html5/thumbnails/13.jpg)
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> </@>
![Page 14: Tech talk live share extras extension modules feb 13](https://reader033.fdocuments.in/reader033/viewer/2022052522/554c118bb4c905e7568b487a/html5/thumbnails/14.jpg)
Renderer Controller Extension components/documentlibrary/documentlist.get.js
model.viewRendererNames.push("geo"); model.geoRendererClass = "Extras.DocumentListGMapsGeoViewRenderer";
![Page 15: Tech talk live share extras extension modules feb 13](https://reader033.fdocuments.in/reader033/viewer/2022052522/554c118bb4c905e7568b487a/html5/thumbnails/15.jpg)
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) {...}
}
![Page 16: Tech talk live share extras extension modules feb 13](https://reader033.fdocuments.in/reader033/viewer/2022052522/554c118bb4c905e7568b487a/html5/thumbnails/16.jpg)
Demo
• Site Geotagged Content Dashlet • Site Geographic View
![Page 17: Tech talk live share extras extension modules feb 13](https://reader033.fdocuments.in/reader033/viewer/2022052522/554c118bb4c905e7568b487a/html5/thumbnails/17.jpg)
Introducing Leaflet
• A great alternative to Google Maps
• Open Source • Mobile-friendly • Plugin a wide range
of mapping providers
leafletjs.com
![Page 18: Tech talk live share extras extension modules feb 13](https://reader033.fdocuments.in/reader033/viewer/2022052522/554c118bb4c905e7568b487a/html5/thumbnails/18.jpg)
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
![Page 19: Tech talk live share extras extension modules feb 13](https://reader033.fdocuments.in/reader033/viewer/2022052522/554c118bb4c905e7568b487a/html5/thumbnails/19.jpg)
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>
![Page 20: Tech talk live share extras extension modules feb 13](https://reader033.fdocuments.in/reader033/viewer/2022052522/554c118bb4c905e7568b487a/html5/thumbnails/20.jpg)
Renderer Override Controller Extension components/documentlibrary/documentlist.get.js
model.geoRendererClass = "Extras.DocumentListLeafletGeoViewRenderer";
![Page 21: Tech talk live share extras extension modules feb 13](https://reader033.fdocuments.in/reader033/viewer/2022052522/554c118bb4c905e7568b487a/html5/thumbnails/21.jpg)
Demo
• Site Geographic View with Leaflet
![Page 22: Tech talk live share extras extension modules feb 13](https://reader033.fdocuments.in/reader033/viewer/2022052522/554c118bb4c905e7568b487a/html5/thumbnails/22.jpg)
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
![Page 23: Tech talk live share extras extension modules feb 13](https://reader033.fdocuments.in/reader033/viewer/2022052522/554c118bb4c905e7568b487a/html5/thumbnails/23.jpg)
Demo
• Site Geotagged Content Dashlet with Leaflet
![Page 24: Tech talk live share extras extension modules feb 13](https://reader033.fdocuments.in/reader033/viewer/2022052522/554c118bb4c905e7568b487a/html5/thumbnails/24.jpg)
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
![Page 25: Tech talk live share extras extension modules feb 13](https://reader033.fdocuments.in/reader033/viewer/2022052522/554c118bb4c905e7568b487a/html5/thumbnails/25.jpg)
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;
} }
![Page 26: Tech talk live share extras extension modules feb 13](https://reader033.fdocuments.in/reader033/viewer/2022052522/554c118bb4c905e7568b487a/html5/thumbnails/26.jpg)
Demo
• PdfJs Viewer
![Page 27: Tech talk live share extras extension modules feb 13](https://reader033.fdocuments.in/reader033/viewer/2022052522/554c118bb4c905e7568b487a/html5/thumbnails/27.jpg)
More Information
• http://sharextras.org • http://www.slideshare.net/alfresco/tech-
talk-live-on-share-extensibility • http://blogs.alfresco.com/wp/developer/
author/ddraper/
![Page 28: Tech talk live share extras extension modules feb 13](https://reader033.fdocuments.in/reader033/viewer/2022052522/554c118bb4c905e7568b487a/html5/thumbnails/28.jpg)