Customizing Document Previews
•
1 like•2,537 views
The document discusses customizing document previews in Alfresco Share. It provides background on document previews and how they were implemented in Alfresco 4 to allow extending the default preview options. It then gives examples of implementing custom preview plugins, including an inline PDF viewer using pdf.js and a custom Flash video player. The key points are that plugins can be built as JavaScript classes and configured in the web-preview component to be used based on file type or other conditions. This allows richly displaying different file formats within Share.
Recommended
Recommended
More Related Content
What's hot
What's hot (20)
Viewers also liked
Viewers also liked (8)
Similar to Customizing Document Previews
Similar to Customizing Document Previews (20)
More from Alfresco Software
More from Alfresco Software (20)
Recently uploaded
Recently uploaded (20)
Customizing Document Previews
- 1. Customizing Share Document Previews Will Abson Senior Integrations Engineer and Share Extras Project Lead
- 2. Upfront Notes ● This session will be recorded ● Type questions into the chat panel ● See me at DevCon
- 3. Agenda ● Background on Document Previews ● Web Preview implementation ● Hands-on customization examples from Share Extras Media Viewers project
- 4. What are Document Previews? ● Rich view of the (document) content ● Found on the Document Details page ● May render the content itself or a rendition
- 5. Changes in Alfresco 4 ● More screen space for previews ● Support for more formats ● Extend the default set
- 7. web-preview Implementation As it was in Alfresco 3 Web Tier Client-side (Web Browser) document-details Alfresco.WebPreview web-preview.get Web Scripts / Spring Surf YUI2 / Share JS Framework Can override but but not extend
- 8. web-preview Implementation New implementation in Alfresco 4 Web Tier Client-side (Web Browser) document-details Alfresco.WebPreview Plugins web-preview.get Web Scripts / Spring Surf YUI2 / Share JS Framework Extend via client-side Plugin classes
- 9. OOTB WebPreview Plugins Flash Non-Flash Flash Audio FlashFox Image StrobeMediaPlayback Video WebPreviewer (See the code in webapps/share/components/preview )
- 10. 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 )
- 11. 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
- 12. Sample Component Configuration Plugin applicability determined by <condition> element attributes Plugin configuration determined by <plugin> element attributes <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>
- 13. Implementing Custom Plugins We need to implement 1. Custom plugin class 2. Localized strings for the UI 3. Presentation resources (images, CSS, etc.) We need to configure ● Viewer registration in component configuration
- 14. Example: Inline PDF Viewer File PDF.js (Note: Not enabled in Media Viewers add-on, but 'Embed' plugin does a similar job)
- 15. 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
- 16. Example: Custom Flash Video Player File FLVPlayer.js
- 17. 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+
- 18. Example: Custom Flash Video Player CSS files can be brought in at the same time as the JavaScript files
- 19. 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
- 20. 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>
- 22. 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
- 23. Questions?