Tech talk live custom content viewers in alfresco share
Upcoming SlideShare
Loading in...5
×
 

Tech talk live custom content viewers in alfresco share

on

  • 2,890 views

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

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

Statistics

Views

Total Views
2,890
Views on SlideShare
2,887
Embed Views
3

Actions

Likes
1
Downloads
39
Comments
0

2 Embeds 3

https://twitter.com 2
http://bottlenose.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Tech talk live custom content viewers in alfresco share Tech talk live custom content viewers in alfresco share Presentation Transcript

    • 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 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
    • 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
    • OOTB WebPreview PluginsFlash Non-FlashFlash AudioFlashFox ImageStrobeMediaPlayback VideoWebPreviewer(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 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
    • 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>
    • 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
    • Example: Inline PDF ViewerFile 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 PlayerFile FLVPlayer.js
    • 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 http://blogs.alfresco.com/wp/ddraper/2012/05/24/customizing- share-javascript-widget-instantiation-part-2/ if targetting 4.1+
    • Example: Custom Flash Video PlayerCSS files can be brought in at the same time asthe JavaScript files
    • 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 web-preview.get.properties
    • 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>
    • 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?