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

Share jQuery User Interface

Share jQuery Dialog

Surf User Interface

Architecting an Alfresco User Interface

Some Alfresco UI Architectures

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

Alfresco UI Platforms

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

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

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

Freemarker Template Defining a Basic Share-Style Page

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

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

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

jQuery UI ThemeRoller

Page Regions and Components

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

Component Webscripts

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

Adding the Page to a Site dita-builder 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

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

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

Questions?