Post on 14-Dec-2015
Alfresco UI PlatformsShare
• 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 PlatformsShare
• 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
Requirements for the ExampleDITA “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 PageThree 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 FileXML File that Defines the Page Id and Template Instance
Deploy to site-data/pages• Add Corresponding Definitions in Messages
<?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>
Template Instance DefinitionXML 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 TemplateDefining 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
<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>
Leveraging YUI Layout Templates• See the Yahoo Developer Network for Details
Freemarker Template
<#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></@>….
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
Client Side jQuery LibrariesCSS 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
<?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>
Maps Page Region to Webscript
Deploy to site-data/components
Component Webscripts
<script> $(function() { $( "#accordion" ).accordion(); }); </script>
Freemarker jQuery• jQuery Handler -> Header Injection (.head.ftl)
• Calls jQueryUI method
<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>
• HTML Reference -> Body (.ftl)
Adding the Page to a Site
<config evaluator="string-compare" condition="SitePages" replace="false"> <pages> <page id="dita-builder">dita-builder</page> </pages> </config>
Adding a Reference to the Page
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"); } } });
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