tech talk live custom content viewers in alfresco share
DESCRIPTION
Slide deck to accompany today's webinar on Custome Document views in Alfresco Share with Will Abson and Jeff PottsTRANSCRIPT
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?