510 likes | 761 Views
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.
E N D
Extreme User Interfaces for Alfresco • Kevin Dorr • Sr. Solutions Engineer • Americas Channel
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
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
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
A Disclaimer Alfresco 4 and Beyond the Infinite
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
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
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
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
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
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> </@>
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>
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
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
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
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>
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
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"); } } });
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"); } } });
Learning About Surf (and Share) Training Blogs Books
Summary • Stepwise Process to Create a Share Page • Include 3rd Party Libraries and Inject JS Handlers • Leverage Alfresco Framework to Post to Webscripts
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