Upload
jbg2010
View
21
Download
2
Tags:
Embed Size (px)
DESCRIPTION
jk
Citation preview
Extreme User Interfaces for Alfresco
Kevin DorrSr. 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
Share jQuery User Interface
Share jQuery Dialog
Surf User Interface
Architecting an Alfresco User Interface
Some Alfresco UI Architectures
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
Alfresco UI Platforms
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
Building a Development Environment
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
Code Deployment
Overrides Still Work!
Example: A New Page in Share
A DisclaimerAlfresco 4 and Beyond the Infinite
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
jQuery UI ThemeRoller
Page Regions and Components
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
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
So What Did We Get?
UI Construction Summary
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"); } } });
Resources
Learning About Surf (and Share)
Books
Training
Blogs
Summary
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
Questions?