Tech talk live share extras extension modules feb 13

Using Share Extensibility Modules
in Share Extras

Will Abson (@wabson)

Agenda
•  Introduction
•  Custom Doclib Views
•  Customizing Custom Views
•  Customizing Dashlets
•  Customizing Document Details page

About Me
•  Integrations Engineer @ Alfresco
•  Founder and Lead of Share Extras
•  Creator of Site Geotagged Content Add-on

Recap – Share Extensibility
•  TTL by Dave Draper, May 2012
•  Share Customizations Live by Dave
Draper and Erik Winlöf, Alfresco DevCon,
Nov 2012

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

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

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

Originally just a Site Dashlet

Now also a Custom Doclib View

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

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

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>

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>
</@>

Renderer Controller Extension
components/documentlibrary/documentlist.get.js

model.viewRendererNames.push("geo");
model.geoRendererClass =
"Extras.DocumentListGMapsGeoViewRenderer";

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) {...}
}

Demo
•  Site Geotagged Content Dashlet
•  Site Geographic View

Introducing Leaflet
•  A great alternative to
Google Maps
•  Open Source
•  Mobile-friendly
•  Plugin a wide range
of mapping providers

leafletjs.com

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

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>

Renderer Override Controller
Extension

model.geoRendererClass =
"Extras.DocumentListLeafletGeoViewRenderer";

Demo
•  Site Geographic View with Leaflet

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

Demo
•  Site Geotagged Content Dashlet with
Leaflet

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

Previewer Controller Extension
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;
}
}

More Information
•  http://sharextras.org
•  http://www.slideshare.net/alfresco/tech-
talk-live-on-share-extensibility
•  http://blogs.alfresco.com/wp/developer/
author/ddraper/

Tech talk live share extras extension modules feb 13

Tech talk live share extras extension modules feb 13

More Related Content

What's hot (20)

Similar to Tech talk live share extras extension modules feb 13 (20)

More from Alfresco Software (20)

Tech talk live share extras extension modules feb 13