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.
Customizing Share
  Document Previews
               Will Abson
Senior Integrations Engineer and Share
          Extras Pr...
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 Extra...
What are Document Previews?
● Rich view of the (document) content
● Found on the Document Details page
● May render the co...
Changes in Alfresco 4
● More screen space for previews
● Support for more formats
● Extend the default set
The web-preview Component
web-preview Implementation
As it was in Alfresco 3
Web Tier                    Client-side (Web Browser)


  document-deta...
web-preview Implementation
New implementation in Alfresco 4
Web Tier                    Client-side (Web Browser)


  docu...
OOTB WebPreview Plugins
Flash                                        Non-Flash
Flash                                      ...
Plugin Configuration and Order
● Held in component configuration file web-
    preview.get.config.xml
● Allows setting of ...
Plugin Order
The order in which plugins are used may be...
● Statically configured
  ○ Via component configuration (previo...
Sample Component Configuration
Plugin applicability determined by <condition> element attributes
Plugin configuration dete...
Implementing Custom Plugins
We need to implement
1. Custom plugin class
2. Localized strings for the UI
3. Presentation re...
Example: Inline PDF Viewer
File PDF.js




(Note: Not enabled in Media Viewers add-on,
but 'Embed' plugin does a similar j...
Example: Inline PDF Viewer
● The usual Share object prototype approach
  is used
● Property attributes can be used to
  cu...
Example: Custom Flash Video Player
File FLVPlayer.js
Example: Custom Flash Video Player
To pull in the custom JavaScript file
FLVPlayer.js containing our plugin class,
either
...
Example: Custom Flash Video Player
CSS files can be brought in at the same time as
the JavaScript files
Example: Custom Flash Video Player
To pull in our custom UI labels, either
● Use a Spring bean to expand the global
  mess...
Example: Custom Flash Video Player
Lastly we must configure the web-preview.get
component to use the FLVPlayer plugin
    ...
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...
Questions?
Upcoming SlideShare
Loading in …5
×

of

Tech talk live custom content viewers in alfresco share Slide 1 Tech talk live custom content viewers in alfresco share Slide 2 Tech talk live custom content viewers in alfresco share Slide 3 Tech talk live custom content viewers in alfresco share Slide 4 Tech talk live custom content viewers in alfresco share Slide 5 Tech talk live custom content viewers in alfresco share Slide 6 Tech talk live custom content viewers in alfresco share Slide 7 Tech talk live custom content viewers in alfresco share Slide 8 Tech talk live custom content viewers in alfresco share Slide 9 Tech talk live custom content viewers in alfresco share Slide 10 Tech talk live custom content viewers in alfresco share Slide 11 Tech talk live custom content viewers in alfresco share Slide 12 Tech talk live custom content viewers in alfresco share Slide 13 Tech talk live custom content viewers in alfresco share Slide 14 Tech talk live custom content viewers in alfresco share Slide 15 Tech talk live custom content viewers in alfresco share Slide 16 Tech talk live custom content viewers in alfresco share Slide 17 Tech talk live custom content viewers in alfresco share Slide 18 Tech talk live custom content viewers in alfresco share Slide 19 Tech talk live custom content viewers in alfresco share Slide 20 Tech talk live custom content viewers in alfresco share Slide 21 Tech talk live custom content viewers in alfresco share Slide 22 Tech talk live custom content viewers in alfresco share Slide 23
Upcoming SlideShare
Alfresco Day BeNelux: Customer Success Showcase - Credendo Group
Next
Download to read offline and view in fullscreen.

1 Like

Share

Download to read offline

Tech talk live custom content viewers in alfresco share

Download to read offline

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

Related Books

Free with a 30 day trial from Scribd

See all

Tech talk live custom content viewers in alfresco share

  1. 1. Customizing Share Document Previews Will Abson Senior 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 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. 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. 9. OOTB WebPreview Plugins Flash Non-Flash Flash Audio FlashFox Image StrobeMediaPlayback Video WebPreviewer (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 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. 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. 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. 14. Example: Inline PDF Viewer File 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 Player File FLVPlayer.js
  17. 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. 18. Example: Custom Flash Video Player CSS files can be brought in at the same time as the JavaScript files
  19. 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. 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>
  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?
  • DavidCiamberlano

    Sep. 11, 2013

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

Views

Total views

3,694

On Slideshare

0

From embeds

0

Number of embeds

4

Actions

Downloads

44

Shares

0

Comments

0

Likes

1

×