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?