1. #SummitNow The Share Widget Library 13 th November 2013 Dave Draper (@_DaveDraper)

2. #SummitNow A Brief History… Alfresco Surf used in Share 3.0, 3.1 & 3.2 Alfresco Surf becomes Spring Surf (first used in Share 3.3) Initial extensibility features added in 4.0 Dynamic configuration added for 4.1 WebScript refactor for Share 4.2

3. #SummitNow Share Customization Information http://www.youtube.com/watch?v=rx-uaKTc8xs

4. #SummitNow The Annual Spring Surf Question…

5. #SummitNow Why Change?

6. #SummitNow What’s Changed?

7. #SummitNow Introducing the new “Widget Library”

8. #SummitNow What is a Widget? JavaScript HTML CSS i18n

9. #SummitNow Old Widget Granularity

10. #SummitNow New Widget Granularity

11. #SummitNow Page Models

12. #SummitNow JSON Structure Example The widget to instantiate The instantiation arguments ID of the definition in the model ID of the root element in the resulting DOM Assigns to a variable of the enclosing widget Used by the enclosing widget Passed as an argument during instantiation

13. #SummitNow Single WebScript Pages

14. #SummitNow Page XML Template XML WEBSCRIPT Template Page model WebScript Updated Surf Object Hierarchy

15. #SummitNow URL Tokens

16. #SummitNow /{pageid}/ws/{webscript} /{pageid}/p/{pagename} Matches document name /Data Dictionary/ShareResources/Pages Matches URL in WebScript Descriptor

17. #SummitNow http://localhost:8081/share/page/rp/p/LogoPagehttp://localhost:8081/share/page/hrp/p/LogoPage

18. #SummitNow How Does it Work?

19. #SummitNow What is AMD? “Asynchronous module definition (AMD) is a JavaScript API for defining modules such that the module and its dependencies can be asynchronously loaded. It is useful in improving the performance of websites by bypassing synchronous loading of modules along with the rest of the site content. In addition to loading multiple JavaScript files at runtime, AMD can be used during development to keep JavaScript files encapsulated in many different files. This is similar to other programming languages, for example java, which support keywords such as import, package, and class for this purpose. It is then possible to concatenate and minify all the source JavaScript into one small file used for production deployment.” - Wikipedia “It is then possible to concatenate and minify all the source JavaScript into one small file used for production deployment”

20. #SummitNow

21. #SummitNow Surf Page Model JavaScript Modules JavaScript Bootstrap CSS Resource (includes i18n object) (includes HTML fragments) (can includes Base64 encoded images)

22. #SummitNow Dynamic Dependency Analysis

23. #SummitNow Dependency Example A A B B C C E E D D Requesting A results in B, C, D & E being loaded C is only loaded once (despite being depended on twice)

24. #SummitNow JavaScript “bootstrap” resource JavaScript dependency layer CSS dependencies Image Sprite * Resource Goals

25. #SummitNow What About Performance?

26. #SummitNow Decoupling

27. #SummitNow

28. Why Dojo?

29. #SummitNow (but it’s not just Dojo)

30. #SummitNow (and it’s better than just AMD)

31. #SummitNow What Widgets are Available?

32. #SummitNow Menu Widgets

33. #SummitNow Form Widgets NOT JUST DOJO

34. #SummitNow Layout Widgets NOT JUST DOJO

35. #SummitNow Document Widgets

36. #SummitNow HTML5 Previewer NOT JUST DOJO

37. #SummitNow Where are the Widgets?

38. #SummitNow tomcat/webapps/share/js/alfresco (server) slingshot/source/web/js/alfresco (SVN)

39. #SummitNow Where is this in Share 4.2?

40. #SummitNow

41. What Does This Mean for Customization?

42. #SummitNow alfresco/menus/AlfMenuBar alfresco/menus/AlfMenuBarItem third/party/MenuBarItem

43. #SummitNow http://blogs.alfresco.com/wp/developer/2013/09/04/customizing-the-share-header-menu-part-1/

44. #SummitNow CSS Theme Tokens

45. #SummitNow.alfresco-dialog-AlfDialog.dijitDialog { border: $theme-border-1; border-radius: 6px 6px 6px 6px; box-shadow: $theme-box-shadow; font-family: $theme-font-family-2; font-size: $theme-font-size-1; }.alfresco-dialog-AlfDialog.dijitDialog { border: $theme-border-1; border-radius: 6px 6px 6px 6px; box-shadow: $theme-box-shadow; font-family: $theme-font-family-2; font-size: $theme-font-size-1; }

46. #SummitNow Light Theme theme.lightTheme Open Sans Condensed,Arial,sans-serif Open Sans,Arial,sans-serif Open Sans Bold,Arial,sans-serif 13px #333 #ccc Light Theme theme.lightTheme Open Sans Condensed,Arial,sans-serif Open Sans,Arial,sans-serif Open Sans Bold,Arial,sans-serif 13px #333 #ccc share/WEB-INF/classes/alfresco/site-data/themes/lightTheme.xml

47. #SummitNow So, What’s Next?

48. #SummitNow What Does This Mean For You?

49. #SummitNow Any Questions?

50. #SummitNow