Customizing Share  Document Previews               Will AbsonSenior Integrations Engineer and Share          Extras Projec...
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 Me...
What are Document Previews?● Rich view of the (document) content● Found on the Document Details page● May render the conte...
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  ...
web-preview ImplementationNew implementation in Alfresco 4Web Tier                    Client-side (Web Browser)  document-...
OOTB WebPreview PluginsFlash                                        Non-FlashFlash                                        ...
Plugin Configuration and Order● Held in component configuration file web-    preview.get.config.xml● Allows setting of plu...
Plugin OrderThe order in which plugins are used may be...● Statically configured  ○ Via component configuration (previous ...
Sample Component ConfigurationPlugin applicability determined by <condition> element attributesPlugin configuration determ...
Implementing Custom PluginsWe need to implement1. Custom plugin class2. Localized strings for the UI3. Presentation resour...
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  custom...
Example: Custom Flash Video PlayerFile FLVPlayer.js
Example: Custom Flash Video PlayerTo pull in the custom JavaScript fileFLVPlayer.js containing our plugin class,either● De...
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...
Example: Custom Flash Video PlayerLastly we must configure the web-preview.getcomponent to use the FLVPlayer plugin    <co...
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...
Questions?
Upcoming SlideShare
Loading in …5
×

Tech talk live custom content viewers in alfresco share

3,110 views
2,911 views

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
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,110
On SlideShare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
41
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

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 http://blogs.alfresco.com/wp/ddraper/2012/05/24/customizing- 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 web-preview.get.properties
  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?

×