Customizing Share Document Previews

Will AbsonSenior Integrations Engineer and Share

Extras Project Lead

Upfront Notes

● This session will be recorded● Type questions into the chat panel● See me at DevCon

Agenda

● Background on Document Previews● Web Preview implementation● Hands-on customization examples from

Share Extras Media Viewers project

What are Document Previews?

● Rich view of the (document) content● Found on the Document Details page● May render the content itself or a rendition

Changes in Alfresco 4

● More screen space for previews● Support for more formats● Extend the default set

The web-preview Component

web-preview Implementation

As it was in Alfresco 3

Web Scripts / Spring Surf

document-details

YUI2 / Share JS Framework

Alfresco.WebPreview

Web Tier Client-side (Web Browser)

Can override but but not extend

web-preview.get

web-preview Implementation

New implementation in Alfresco 4

Web Scripts / Spring Surf

document-details

YUI2 / Share JS Framework

Alfresco.WebPreview Plugins

Web Tier Client-side (Web Browser)

Extend via client-side Plugin classes

web-preview.get

OOTB WebPreview Plugins

FlashFlashFlashFoxStrobeMediaPlaybackWebPreviewer

Non-FlashAudioImageVideo

(See the code in webapps/share/components/preview )

Plugin Configuration and Order

● Held in component configuration file web-preview.get.config.xml

● Allows setting of plugin configuration attributes

● Determines the order in which plugins are used (since multiple plugins could be used for a particular content item)

(See the code in webapps/share/components/preview/web-preview.js )

Plugin Order

The order in which plugins are used may be...● Statically configured

○ Via component configuration (previous slide)○ Based on MIME type or 'thumbnail' definitions○ Results in a list of plugins to be tried for a content

item● Dynamically determined at run time

○ Plugins are given the opportunity to 'test' a content item

○ Based on <anything>, e.g. browser type/version○ If they say 'no', the next plugin in turn is used

Sample Component Configuration

<config>

<plugin-conditions>

<condition mimeType="video/mp4" thumbnail="imgpreview">

<plugin poster="imgpreview" posterFileSuffix=".png">StrobeMediaPlayback</plugin>

<plugin poster="imgpreview" posterFileSuffix=".png">FlashFox</plugin>

<plugin poster="imgpreview" posterFileSuffix=".png">Video</plugin>

</condition>

<condition mimeType="video/m4v" thumbnail="imgpreview">

...

</condition>

...

</plugin-conditions>

<config>

Plugin applicability determined by <condition> element attributesPlugin configuration determined by <plugin> element attributes

Implementing Custom Plugins

We need to implement1. Custom plugin class2. Localized strings for the UI3. Presentation resources (images, CSS, etc.)We need to configure● Viewer registration in component

configuration

Example: Inline PDF Viewer

File PDF.js

(Note: Not enabled in Media Viewers add-on, but 'Embed' plugin does a similar job)

Example: Inline PDF Viewer

● The usual Share object prototype approach is used

● Property attributes can be used to customize behaviour

● Function report() returns null if the plugin can be used or a string if not indicating the reason

● Function display() returns a string containing HTML markup or null if Dom manipulation has already been used

Example: Custom Flash Video Player

File FLVPlayer.js

Example: Custom Flash Video Player

To pull in the custom JavaScript file FLVPlayer.js containing our plugin class, either● Declare a custom DocLib JS dependency

<config evaluator="string-compare" condition="DocLibCustom"> <dependencies> <js src="/extras/components/preview/FLVPlayer.js" /> </dependencies></config>

● Or use an Extensibility Module to add the dependencies onto web-preview.get.head.ftl○ But see http://blogs.alfresco.com/wp/ddraper/2012/05/24/customizing-

share-javascript-widget-instantiation-part-2/ if targetting 4.1+

Example: Custom Flash Video Player

CSS files can be brought in at the same time as the JavaScript files

Example: Custom Flash Video Player

To pull in our custom UI labels, either● Use a Spring bean to expand the global

message scope<config evaluator="string-compare" condition="DocLibCustom"> <dependencies> <js src="/extras/components/preview/pdf.js" /> </dependencies></config>

● Or use an Extensibility Module to add the messages onto web-preview.get.properties

Example: Custom Flash Video Player

Lastly we must configure the web-preview.get component to use the FLVPlayer plugin

<condition mimeType="video/mp4"> <plugin>FLVPlayer</plugin> </condition>

Example: pdf.js Viewer

Summary

● The Web Preview component is an important part of Share

● Alfresco 4 allows us to display our content in new and interesting ways○ Or, display content that is not supported OOTB

● We can re-use our existing Share customization skills to bring in powerful tools such as pdf.js

Questions?