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
<?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/templateinstances
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
jQuery UI ThemeRoller
Page Regions and Components
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
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
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)
Training
Blogs
Books
Summary
Summary
• Stepwise Process to Create a
Share Page
• Include
Party Libraries and
Inject JS Handlers
rd
3
• Leverage Alfresco Framework to
Post to Webscripts
Summary
• Use
Party Library AJAX Built ins
to Post to Webscripts for a
Standalone Page
rd
3
• Use RM implementation for
another UI example
• Possibilities are Limited Only by
Your Imagination
Questions?