Tech talk live custom content viewers in alfresco share
1 like2,542 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.
Tech talk live custom content viewers in alfresco share
- 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?