1 / 49

Extreme User Interfaces for Alfresco

Extreme User Interfaces for Alfresco. Kevin Dorr Sr. Solutions Engineer Americas Channel. An Alfresco User Interface Gallery. Alfresco Share. Share Document Library. Share Forms. Share Activiti Console. Alfresco Records Management. Alfresco RM Dialog. RM Console.

elliot
Download Presentation

Extreme User Interfaces for Alfresco

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

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

  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 <?xml version='1.0' encoding='UTF-8'?> <page> <id>dita-builder</id> <page-type>dita-builder</page-type> <title>DITA Map Builder</title> <title-id>page.dita-builder.title</title-id> <description>DevCon DITA Map Builder Example</description> <description-id>page.dita-builder.description</description-id> <template-instance>dita-builder</template-instance> <authentication>user</authentication> </page> • Deploy to site-data/pages • Add Corresponding Definitions in Messages

  28. Template Instance Definition XML File that Defines where the Page Template is Stored <?xml version='1.0' encoding='UTF-8'?> <template-instance> <template-type>org/alfresco/dita-builder</template-type> </template-instance> Deploy to site-data/template-instances

  29. Freemarker Template Defining a Basic Share-Style Page <@templateBody> <div id="alf-hd"> <@region id="header" scope="global"/> <@region id="title" scope="template"/> <@region id="navigation" scope="template"/> </div> <div id="bd"> <div class="yui-t1" id="ditabldr-body"> <div id="yui-main"> <div class="yui-b" id="dita-fileselector"> <@region id="ditamapaction" scope="template" /> </div> </div> <div class="yui-b" id="dita-mapselector"> <@region id="ditamapselector" scope="template" /> </div> </div> </div> </@> <@templateFooter> <div id="alf-ft"> <@region id="footer" scope="global"/> </div> </@>

  30. Freemarker Template • Leveraging YUI Layout Templates • See the Yahoo Developer Network for Details <div id="bd"> <div class="yui-t1" id="ditabldr-body"> <div id="yui-main"> <div class="yui-b" id="dita-fileselector"> <@region id="ditamapaction" scope="template" /> </div> </div>

  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 <#include "/org/alfresco/include/alfresco-template.ftl" /> <@templateHeader> <meta charset="utf-8"> <link rel="stylesheet" href="${url.context}/res/ditabldr/css/jquery-ui-1.9.1.custom.min.css"> <script type="text/javascript" src="${url.context}/res/ditabldr/js/jquery-1.8.2.js"></script> <script type="text/javascript" src="${url.context}/res/ditabldr/js/jquery-ui-1.9.1.custom.min.js"></script> </@> …. 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 Maps Page Region to Webscript <?xml version='1.0' encoding='UTF-8'?> <component> <scope>template</scope> <region-id>ditamapselector</region-id> <source-id>dita-builder</source-id> <url>/components/dita-builder/dita-mapselector</url> </component> Deploy to site-data/components

  36. Component Webscripts

  37. Component Webscripts • Freemarker jQuery • jQuery Handler -> Header Injection (.head.ftl) • Calls jQueryUI method <script> $(function() { $( "#accordion" ).accordion(); }); </script> • HTML Reference -> Body (.ftl) <div id="accordion"> <h3><a href="#">Map One</a></h3> <div> <p>This is dita map one.</p> </div> <h3><a href="#">Map Two</a></h3> <div> <p>This is dita map two.</p> </div> </div>

  38. Adding the Page to a Site Adding a Reference to the Page <config evaluator="string-compare" condition="SitePages" replace="false"> <pages> <page id="dita-builder">dita-builder</page> </pages> </config> 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) Training Blogs Books

  45. Summary

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

  47. Summary • Use 3rd 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?

More Related