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?