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. Drupal Based User Interface

13. Surf User Interface

14. Architecting an Alfresco User Interface

15. Some Alfresco UI Architectures

16. 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

17. Alfresco UI Platforms

18. 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

19. Building a Development Environment

20. 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

21. Code Deployment

22. JAR Deployment into Lib * Overrides still work!

23. Deployment Caveats Deploying to WEB-INF/lib Use only for development in most cases Deploying to shared/classes or lib Use only for development shared/lib no longer recommended by Tomcat Production Deployment Recommended Approach is to use an AMP Other Approaches may cause Problems!

24. Example: A New Page in Share

25. A Disclaimer Alfresco 4 and Beyond the Infinite

26. 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

27. 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

28. 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

29. 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

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

31. Freemarker Template Defining a Basic Share-Style Page

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

33. 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

34. 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

35. jQuery UI ThemeRoller

36. Page Regions and Components

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

38. Component Webscripts

39. $(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)

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

41. So What Did We Get?

42. UI Construction Summary

43. 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"); } });

44. 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"); } });

45. Resources

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

47. A Late Breaking Development… Watch for new example code tutorials!

48. Summary

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

50. 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

51. Questions?