extreme uis - final format
DESCRIPTION
jkTRANSCRIPT
![Page 1: Extreme UIs - Final Format](https://reader036.vdocuments.net/reader036/viewer/2022062308/55cf9c32550346d033a8fc37/html5/thumbnails/1.jpg)
Extreme User Interfaces for Alfresco
Kevin DorrSr. Solutions Engineer
Americas Channel
![Page 2: Extreme UIs - Final Format](https://reader036.vdocuments.net/reader036/viewer/2022062308/55cf9c32550346d033a8fc37/html5/thumbnails/2.jpg)
An Alfresco User Interface Gallery
![Page 3: Extreme UIs - Final Format](https://reader036.vdocuments.net/reader036/viewer/2022062308/55cf9c32550346d033a8fc37/html5/thumbnails/3.jpg)
Alfresco Share
![Page 4: Extreme UIs - Final Format](https://reader036.vdocuments.net/reader036/viewer/2022062308/55cf9c32550346d033a8fc37/html5/thumbnails/4.jpg)
Share Document Library
![Page 5: Extreme UIs - Final Format](https://reader036.vdocuments.net/reader036/viewer/2022062308/55cf9c32550346d033a8fc37/html5/thumbnails/5.jpg)
Share Forms
![Page 6: Extreme UIs - Final Format](https://reader036.vdocuments.net/reader036/viewer/2022062308/55cf9c32550346d033a8fc37/html5/thumbnails/6.jpg)
Share Activiti Console
![Page 7: Extreme UIs - Final Format](https://reader036.vdocuments.net/reader036/viewer/2022062308/55cf9c32550346d033a8fc37/html5/thumbnails/7.jpg)
Alfresco Records Management
![Page 8: Extreme UIs - Final Format](https://reader036.vdocuments.net/reader036/viewer/2022062308/55cf9c32550346d033a8fc37/html5/thumbnails/8.jpg)
Alfresco RM Dialog
![Page 9: Extreme UIs - Final Format](https://reader036.vdocuments.net/reader036/viewer/2022062308/55cf9c32550346d033a8fc37/html5/thumbnails/9.jpg)
RM Console
![Page 10: Extreme UIs - Final Format](https://reader036.vdocuments.net/reader036/viewer/2022062308/55cf9c32550346d033a8fc37/html5/thumbnails/10.jpg)
Share jQuery User Interface
![Page 11: Extreme UIs - Final Format](https://reader036.vdocuments.net/reader036/viewer/2022062308/55cf9c32550346d033a8fc37/html5/thumbnails/11.jpg)
Share jQuery Dialog
![Page 12: Extreme UIs - Final Format](https://reader036.vdocuments.net/reader036/viewer/2022062308/55cf9c32550346d033a8fc37/html5/thumbnails/12.jpg)
Surf User Interface
![Page 13: Extreme UIs - Final Format](https://reader036.vdocuments.net/reader036/viewer/2022062308/55cf9c32550346d033a8fc37/html5/thumbnails/13.jpg)
Architecting an Alfresco User Interface
![Page 14: Extreme UIs - Final Format](https://reader036.vdocuments.net/reader036/viewer/2022062308/55cf9c32550346d033a8fc37/html5/thumbnails/14.jpg)
Some Alfresco UI Architectures
![Page 15: Extreme UIs - Final Format](https://reader036.vdocuments.net/reader036/viewer/2022062308/55cf9c32550346d033a8fc37/html5/thumbnails/15.jpg)
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
![Page 16: Extreme UIs - Final Format](https://reader036.vdocuments.net/reader036/viewer/2022062308/55cf9c32550346d033a8fc37/html5/thumbnails/16.jpg)
Alfresco UI Platforms
![Page 17: Extreme UIs - Final Format](https://reader036.vdocuments.net/reader036/viewer/2022062308/55cf9c32550346d033a8fc37/html5/thumbnails/17.jpg)
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
![Page 18: Extreme UIs - Final Format](https://reader036.vdocuments.net/reader036/viewer/2022062308/55cf9c32550346d033a8fc37/html5/thumbnails/18.jpg)
Building a Development Environment
![Page 19: Extreme UIs - Final Format](https://reader036.vdocuments.net/reader036/viewer/2022062308/55cf9c32550346d033a8fc37/html5/thumbnails/19.jpg)
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
![Page 20: Extreme UIs - Final Format](https://reader036.vdocuments.net/reader036/viewer/2022062308/55cf9c32550346d033a8fc37/html5/thumbnails/20.jpg)
Code Deployment
![Page 21: Extreme UIs - Final Format](https://reader036.vdocuments.net/reader036/viewer/2022062308/55cf9c32550346d033a8fc37/html5/thumbnails/21.jpg)
Overrides Still Work!
![Page 22: Extreme UIs - Final Format](https://reader036.vdocuments.net/reader036/viewer/2022062308/55cf9c32550346d033a8fc37/html5/thumbnails/22.jpg)
Example: A New Page in Share
![Page 23: Extreme UIs - Final Format](https://reader036.vdocuments.net/reader036/viewer/2022062308/55cf9c32550346d033a8fc37/html5/thumbnails/23.jpg)
A DisclaimerAlfresco 4 and Beyond the Infinite
![Page 24: Extreme UIs - Final Format](https://reader036.vdocuments.net/reader036/viewer/2022062308/55cf9c32550346d033a8fc37/html5/thumbnails/24.jpg)
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
![Page 25: Extreme UIs - Final Format](https://reader036.vdocuments.net/reader036/viewer/2022062308/55cf9c32550346d033a8fc37/html5/thumbnails/25.jpg)
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
![Page 26: Extreme UIs - Final Format](https://reader036.vdocuments.net/reader036/viewer/2022062308/55cf9c32550346d033a8fc37/html5/thumbnails/26.jpg)
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 27: Extreme UIs - Final Format](https://reader036.vdocuments.net/reader036/viewer/2022062308/55cf9c32550346d033a8fc37/html5/thumbnails/27.jpg)
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>
![Page 28: Extreme UIs - Final Format](https://reader036.vdocuments.net/reader036/viewer/2022062308/55cf9c32550346d033a8fc37/html5/thumbnails/28.jpg)
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
![Page 29: Extreme UIs - Final Format](https://reader036.vdocuments.net/reader036/viewer/2022062308/55cf9c32550346d033a8fc37/html5/thumbnails/29.jpg)
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></@>
![Page 30: Extreme UIs - Final Format](https://reader036.vdocuments.net/reader036/viewer/2022062308/55cf9c32550346d033a8fc37/html5/thumbnails/30.jpg)
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
![Page 31: Extreme UIs - Final Format](https://reader036.vdocuments.net/reader036/viewer/2022062308/55cf9c32550346d033a8fc37/html5/thumbnails/31.jpg)
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
![Page 32: Extreme UIs - Final Format](https://reader036.vdocuments.net/reader036/viewer/2022062308/55cf9c32550346d033a8fc37/html5/thumbnails/32.jpg)
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 33: Extreme UIs - Final Format](https://reader036.vdocuments.net/reader036/viewer/2022062308/55cf9c32550346d033a8fc37/html5/thumbnails/33.jpg)
jQuery UI ThemeRoller
![Page 34: Extreme UIs - Final Format](https://reader036.vdocuments.net/reader036/viewer/2022062308/55cf9c32550346d033a8fc37/html5/thumbnails/34.jpg)
Page Regions and Components
![Page 35: Extreme UIs - Final Format](https://reader036.vdocuments.net/reader036/viewer/2022062308/55cf9c32550346d033a8fc37/html5/thumbnails/35.jpg)
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
![Page 36: Extreme UIs - Final Format](https://reader036.vdocuments.net/reader036/viewer/2022062308/55cf9c32550346d033a8fc37/html5/thumbnails/36.jpg)
Component Webscripts
![Page 37: Extreme UIs - Final Format](https://reader036.vdocuments.net/reader036/viewer/2022062308/55cf9c32550346d033a8fc37/html5/thumbnails/37.jpg)
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)
![Page 38: Extreme UIs - Final Format](https://reader036.vdocuments.net/reader036/viewer/2022062308/55cf9c32550346d033a8fc37/html5/thumbnails/38.jpg)
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
![Page 39: Extreme UIs - Final Format](https://reader036.vdocuments.net/reader036/viewer/2022062308/55cf9c32550346d033a8fc37/html5/thumbnails/39.jpg)
So What Did We Get?
![Page 40: Extreme UIs - Final Format](https://reader036.vdocuments.net/reader036/viewer/2022062308/55cf9c32550346d033a8fc37/html5/thumbnails/40.jpg)
UI Construction Summary
![Page 41: Extreme UIs - Final Format](https://reader036.vdocuments.net/reader036/viewer/2022062308/55cf9c32550346d033a8fc37/html5/thumbnails/41.jpg)
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"); } } });
![Page 42: Extreme UIs - Final Format](https://reader036.vdocuments.net/reader036/viewer/2022062308/55cf9c32550346d033a8fc37/html5/thumbnails/42.jpg)
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"); } } });
![Page 43: Extreme UIs - Final Format](https://reader036.vdocuments.net/reader036/viewer/2022062308/55cf9c32550346d033a8fc37/html5/thumbnails/43.jpg)
Resources
![Page 44: Extreme UIs - Final Format](https://reader036.vdocuments.net/reader036/viewer/2022062308/55cf9c32550346d033a8fc37/html5/thumbnails/44.jpg)
Learning About Surf (and Share)
Books
Training
Blogs
![Page 45: Extreme UIs - Final Format](https://reader036.vdocuments.net/reader036/viewer/2022062308/55cf9c32550346d033a8fc37/html5/thumbnails/45.jpg)
Summary
![Page 46: Extreme UIs - Final Format](https://reader036.vdocuments.net/reader036/viewer/2022062308/55cf9c32550346d033a8fc37/html5/thumbnails/46.jpg)
Summary
• Stepwise Process to Create a Share Page
• Include 3rd Party Libraries and Inject JS Handlers
• Leverage Alfresco Framework to Post to Webscripts
![Page 47: Extreme UIs - Final Format](https://reader036.vdocuments.net/reader036/viewer/2022062308/55cf9c32550346d033a8fc37/html5/thumbnails/47.jpg)
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
![Page 48: Extreme UIs - Final Format](https://reader036.vdocuments.net/reader036/viewer/2022062308/55cf9c32550346d033a8fc37/html5/thumbnails/48.jpg)
Questions?
![Page 49: Extreme UIs - Final Format](https://reader036.vdocuments.net/reader036/viewer/2022062308/55cf9c32550346d033a8fc37/html5/thumbnails/49.jpg)