1. Extreme User Interfaces for Alfresco Kevin Dorr Sr. Solutions Engineer Americas Channel

2. An Alfresco User Interface Gallery

3. Alfresco Share

4. Share Document Library

5. Share Forms

6. Share Activiti Console

7. Alfresco Records Management

8. Alfresco RM Dialog

9. RM Console

10. Share jQuery User Interface

11. Share jQuery Dialog

12. Surf User Interface

13. Architecting an Alfresco User Interface

14. Some Alfresco UI Architectures

15. Alfresco UI Platforms Share Modify existing pages Add new pages Surf Build a New UI Leveraging Surf capabilities Standalone Build a New UI with your Favorite Framework

16. Alfresco UI Platforms

17. Use Cases and Platforms Share Existing Users Users that need Collaborative Features Surf Reusable UI Components Web Sites Standalone Highly Custom Look and Feel Developer Tool Familiarity Web Sites

18. Building a Development Environment

19. Getting Started “Manual” Development Environments The “Old” (3.0) Way The “New” (4.0) Way There is an example of both directory structures in the sample source code Eclipse / Maven A Sample Project is Available

20. Code Deployment

21. Overrides Still Work!

22. Example: A New Page in Share

23. A Disclaimer Alfresco 4 and Beyond the Infinite

24. Requirements for the Example DITA “Map Generator” Page Find, Display and Select all DITA Maps Show the XML for the Map as a Tree Allow a User to Create New Items in the Tree by Associating DITA Topics Integrate with a Collaboration Site Publishers Often Need This Look Cool – Custom Style

25. Architecture Choices: Use Share as the Base Platform Leverage Surf Infrastructure Leverage Share Infrastructure Create a New Share Page Admin can Add to Appropriate Sites Use jQuery Tools for Layout and Interaction

26. Getting Started with a New Page Three Files are Required (Minimum) Page Definition File Template Instance Definition Freemarker Template Add the Share Look and Feel Component Definitions Add the jQuery Library References

27. Page Definition File XML File that Defines the Page Id and Template Instance Deploy to site-data/pages Add Corresponding Definitions in Messages dita-builder DITA Map Builder page.dita-builder.title DevCon DITA Map Builder Example page.dita-builder.description dita-builder user

28. Template Instance Definition XML File that Defines where the Page Template is Stored org/alfresco/dita-builder Deploy to site-data/template- instances

29. Freemarker Template Defining a Basic Share-Style Page

30. Freemarker Template Leveraging YUI Layout Templates See the Yahoo Developer Network for Details

31. Freemarker Template …. Include Files and Headers Provide access to the Alfresco framework Provide access to jQuery framework Can Inject more into the Header Later Deploy to location specified in template-instance

32. Client Side jQuery Libraries CSS and Images Javascript Libraries Deploy to a Client Accessible Location Webapps/ROOT for the old way In jar META-INF for the new way

33. jQuery UI ThemeRoller

34. Page Regions and Components

35. Page Component Definition template ditamapselector dita-builder /components/dita-builder/dita-mapselector Maps Page Region to Webscript Deploy to site-data/components

36. Component Webscripts

37. $(function() { $( "#accordion" ).accordion(); }); Freemarker jQuery jQuery Handler -> Header Injection (.head.ftl) Calls jQueryUI method Map One This is dita map one. Map Two This is dita map two. HTML Reference -> Body (.ftl)

38. Adding the Page to a Site dita-builder Adding a Reference to the Page Add to share-config-custom.xml

39. So What Did We Get?

40. UI Construction Summary

41. Calling Webscripts with Alfresco Util // Add New Map Dialog $('#addnew_dialog').dialog({ autoOpen: false, width: 800, buttons: { "Add": function() { Alfresco.util.Ajax.request({ method: "POST", url: "/alfresco/service/ditabldr/createmap", contentRequestType: “JSON", dataForm: $(“#addnew_map_data”); successCallback: function( data ) { updateMapList( data ); } }); $(this).dialog("close"); }, "Cancel": function() { $(this).dialog("close"); } });

42. Calling Webscripts with jQuery // Add New Map Dialog $('#addnew_dialog').dialog({ autoOpen: false, width: 800, buttons: { "Add": function() { var form_data = $("#addnew_map_data").serializeObject(); var json_data = JSON.stringify( form_data ); $.ajax({ type: "POST", contentType: "application/json", url: "/alfresco/service/ditabldr/createmap", data: json_test, dataType: "json", complete: function( data ) { updateMapList( data ); } }); $(this).dialog("close"); }, "Cancel": function() { $(this).dialog("close"); } });

43. Resources

44. Learning About Surf (and Share) Books Training Blogs

45. Summary

46. Stepwise Process to Create a Share Page Include 3 rd Party Libraries and Inject JS Handlers Leverage Alfresco Framework to Post to Webscripts

47. Summary Use 3 rd Party Library AJAX Built ins to Post to Webscripts for a Standalone Page Use RM implementation for another UI example Possibilities are Limited Only by Your Imagination

48. Questions?