Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Tech talk live custom content viewers in alfresco share


Published on

Slide deck to accompany today's webinar on Custome Document views in Alfresco Share with Will Abson and Jeff Potts

Published in: Technology
  • Be the first to comment

Tech talk live custom content viewers in alfresco share

  1. 1. Customizing Share Document Previews Will AbsonSenior Integrations Engineer and Share Extras Project Lead
  2. 2. Upfront Notes● This session will be recorded● Type questions into the chat panel● See me at DevCon
  3. 3. Agenda● Background on Document Previews● Web Preview implementation● Hands-on customization examples from Share Extras Media Viewers project
  4. 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. 5. Changes in Alfresco 4● More screen space for previews● Support for more formats● Extend the default set
  6. 6. The web-preview Component
  7. 7. web-preview ImplementationAs it was in Alfresco 3Web Tier Client-side (Web Browser) document-details Alfresco.WebPreview web-preview.getWeb Scripts / Spring Surf YUI2 / Share JS FrameworkCan override but but not extend
  8. 8. web-preview ImplementationNew implementation in Alfresco 4Web Tier Client-side (Web Browser) document-details Alfresco.WebPreview Plugins web-preview.getWeb Scripts / Spring Surf YUI2 / Share JS FrameworkExtend via client-side Plugin classes
  9. 9. OOTB WebPreview PluginsFlash Non-FlashFlash AudioFlashFox ImageStrobeMediaPlayback VideoWebPreviewer(See the code in webapps/share/components/preview )
  10. 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. 11. Plugin OrderThe 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. 12. Sample Component ConfigurationPlugin applicability determined by <condition> element attributesPlugin 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. 13. Implementing Custom PluginsWe 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
  14. 14. Example: Inline PDF ViewerFile PDF.js(Note: Not enabled in Media Viewers add-on,but Embed plugin does a similar job)
  15. 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. 16. Example: Custom Flash Video PlayerFile FLVPlayer.js
  17. 17. Example: Custom Flash Video PlayerTo pull in the custom JavaScript fileFLVPlayer.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 share-javascript-widget-instantiation-part-2/ if targetting 4.1+
  18. 18. Example: Custom Flash Video PlayerCSS files can be brought in at the same time asthe JavaScript files
  19. 19. Example: Custom Flash Video PlayerTo 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
  20. 20. Example: Custom Flash Video PlayerLastly we must configure the web-preview.getcomponent to use the FLVPlayer plugin <condition mimeType="video/mp4"> <plugin>FLVPlayer</plugin> </condition>
  21. 21. Example: pdf.js Viewer
  22. 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. 23. Questions?