1. #SummitNow Alfresco 4.2 Share Development Workshop November 6, 2013 Kevin Dorr, Sr. Solutions Engineer, Alfresco US

2. #SummitNow Overview

3. #SummitNow Workshop Outline Development Tools Housekeeping Simple Project Definition Simple Page 10 Minutes on Dojo Simple Widget Big Finish

4. #SummitNow My Perspective

5. #SummitNow Audience Participation

6. #SummitNow Getting Started

7. #SummitNow What You Will Need… Java (JDK 1.7) Maven (3.1) Eclipse (Kepler) m2Eclipse Alfresco Source

8. #SummitNow Lay of the Land

9. #SummitNow Change is Good Dave Draper went over why yesterday There are a lot of benefits for both page and widget development It really is a LOT easier!

10. #SummitNow Where Things Are Source Code: root/projects/slingshot /source/web Widget library is in js/alfresco Also themes, etc. Warning!

11. #SummitNow Where Things Are Widget Code: templates i18n images other special Widget css js alfresco

12. #SummitNow Where Things Should Go For Production: Make an AMP File! Alfresco amps Repo amp share_amps Share amp

13. #SummitNow Where Things Should Go For Development (pages and widgets): tomcat shared lib jar

14. #SummitNow Where Things Should Go For Development (Pages): tomcat shared Site- webscripts classes alfresco Any Arbitrary Path Individual Code Files Web- extension

15. #SummitNow Where Things Should Go

16. #SummitNow Resources You Can Leverage

17. #SummitNow Resources You Can Leverage

18. #SummitNow Resources You Can Leverage Debug mode: tomcat/webapps/share/classes/alfresco/share-config.xml Tomcat/shared/classes/alfresco/web-extension/share-config-custom.xml true

19. #SummitNow “Zero Build” widget resource list widget resource list widget resource list widget resource list JSON Page Definition “Built” Dojo Ipsum loren ipsum Ipsum loren Ipsum loren etc User page rendering CSS Image Dojo CSS Dojo Cached Resources CSS Image Dojo CSS Dojo CSS i18n Dojo CSS Server Page Resources Analyze Resolve and Generate Cache

20. #SummitNow See How Resources are Managed

21. #SummitNow Share Surf Servlet URIs Stand Alone Page Webscripts /share/page/dp/ws/{webscript URL} /share/page/site/{site}/dp/ws/{ws URL} Hybrid Pages (Share header and footer) /share/page/hdp/ws/{ws URL} Hybrid Remote Pages (from Repo) /share/page/site/{site}/p/{page name} /share/page/hrp/p/{page name}

22. #SummitNow A Simple Project

23. #SummitNow Project Concept Special Purpose UI for a Photo Intake Editor Doesn’t need or want to see the rest of Share Just needs to sort photos into keep, maybe, reject Has several “trays” of photos to sort through Has several projects simultaneously

24. #SummitNow UI Sketch Company Header “Slide Tray” Selection Area Tray Filters Photo Viewer Area

25. #SummitNow Page Construction

26. #SummitNow Share Page Example

27. #SummitNow Share Page Example Lightbox Widget Here Accordion Widget Here

28. #SummitNow Share Page Files page-name.get.desc.xml (Webscript Descriptor) page-name.get.js (WebScript Controller) page-name.get.html.ftl (Freemarker Template) page-name.get.properties(Optional Text Strings) Files need to be in the same directory Anywhere under site-webscripts is ok

29. #SummitNow Share Page Descriptor (desc.xml) Create page via JSON editor A page definition for creating pages using a JSON editor Share /page-editor

30. #SummitNow Share Page Template (.html.ftl)

31. #SummitNow Share Page Controller (.js) { "widgets": [ { "id": "SET_PAGE_TITLE", "name": "alfresco/header/SetTitle", "config": { "title": "Alfresco Summit Demo" } }, { "name": "alfresco/layout/AlfSideBarContainer", "config": { "initialSidebarWidth": "300" } ] }

32. #SummitNow Modifying the JSON { "name": "alfresco/layout/AlfSideBarContainer", "config": { "initialSidebarWidth": "300", "widgets": [{ "name": "alfresco/menus/AlfMenuBar", "align": "sidebar", "config": { "widgets": [ { "name": "alfresco/menus/AlfMenuBarItem", "config": { "label": "Filter" } }, { "name": "alfresco/menus/AlfMenuBarItem", "config": { "label": “Project" } }] } } }

33. #SummitNow How Really Cool This Is Last year, I built a Share UI: Page definition Template Instance Scripting Freemarker template CSS Javascript

34. #SummitNow How Really Cool This Is This year, I built this: LightboxAccordion Using this: In 30 Minutes!

35. #SummitNow How Really Cool This Is

36. #SummitNow Dojo in 10 Minutes

37. #SummitNow What is Dojo? It’s a Javascript Library! But seriously, it’s got a lot of really good stuff AMD (asynchronous module definition) Widget Templating Accessibility Constructs Unit Testing

38. #SummitNow What is Dojo? Base DijitDojoX Util (doh) Alfresco Core

39. #SummitNow Including Dojo Basic: <script type=“text/javascript” src=“www/js/dojo/dojo.js”>

40. #SummitNow Including Dojo However, Surf resolves everything for you (share/WEB-INF/surf.xml): /res/js/lib/dojo-1.9.0/dojo/dojo.js alfresco/core/Page /res/

41. #SummitNow Dojo Modules Dojo has a mechanism to define a module Dojo.provide(“myns.mycode”); Which you then include like this: Dojo.require(“myns.mycode”); However, this is just synchronous loading

42. #SummitNow Dojo Modules Asynchronous Module Definition (AMD): Uses “path” syntax instead of dots: “myns/mycode” New keyword and pattern: define([ "dojo/_base/declare", "dijit/_WidgetBase", "dijit/_TemplatedMixin" ], function( declare, _WidgetBase, _TemplatedMixin ){ return declare([ _WidgetBase, _TemplatedMixin ], {}); });

43. #SummitNow Dojo Modules New require format: require([ "dojo/_base/declare", "dijit/_WidgetBase", "dijit/_TemplatedMixin" ], function(declare, _WidgetBase, _TemplatedMixin){ // callback is optional }); This will be built automatically by Surf Cross domain loading is implicit!

44. #SummitNow Dojo Mixins Dojo provides a mechanism to “mix” objects together Base object + object to append Always mixin the alfresco/core/Core module Helps to resolve i18n strings correctly Other wrappers and Alfresco utility functions

45. #SummitNow The Dojo Event Model Pub/Sub Widget publishes events by name Consumers can subscribe to get the events, also by name Bubbling Event “bubbles up” the containing widgets until a handler is found

46. #SummitNow Dijit Widgets Dijit is a UI Widget Library Infrastructure: dijit._widgetBase dijit._TemplatedMixin Menu, Tree, Misc Widget sets Form Widgets Text, Button, ComboBox, Slider, etc. Layout Widgets Container, Border, Tab, Accordion, etc.

47. #SummitNow Widget Construction

48. #SummitNow Where we left off… LightboxAccordion

49. #SummitNow Share Widget Encapsulation Javascript + HTML + CSS + i18N

50. #SummitNow An Accordion Widget Base ours on the one in the Dijit library – AccordionContainer Takes ContentPanes as children Mixin the Alfresco Core to get the Alfresco pattern

51. #SummitNow An Accordion Widget Page JSON AlfAccordionContainer Alfresco Repo AlfContentPanel Instance and Parameters Call WS JSON Result

52. #SummitNow Widget Implementation Class is named by the filename Define and include mixins: define(["dojo/_base/declare", "dijit/_WidgetBase", "dijit/_TemplatedMixin", "alfresco/core/Core", "dojo/text!./templates/AlfAccordionContainer.html", "dijit/layout/AccordionContainer", "dojo/_base/array"], function(declare, _Widget, _Templated, AlfCore, template, Accordion, array) { return declare([_Widget, _Templated, AlfCore], { define(["dojo/_base/declare", "dijit/_WidgetBase", "dijit/_TemplatedMixin", "alfresco/core/Core", "dojo/text!./templates/AlfAccordionContainer.html", "dijit/layout/AccordionContainer", "dijit/layout/ContentPane", "dojo/_base/array"], function(declare, _Widget, _Templated, AlfCore, template, Accordion, ContentPane, array) { return declare([_Widget, _Templated, AlfCore], { // declare callback 1 for 1

53. #SummitNow Widget Implementation Next, pull in the CSS, i18n, and template: // snip… in the declare callback cssRequirements: [{cssFile:"./css/AlfAccordionContainer.css"}], i18nRequirements: [{i18nFile: "./i18n/AlfAccordionContainer.properties"}], templateString: template, //snip…

54. #SummitNow Widget Implementation Define a XHR function to make a call to the repo: // snip… in the declare callback: loadContent: function alfresco_accordion_AlfAccordionContainer__loadContent() { if ( this._contentLoaded ) { this.alfLog("log", “Content already loaded"); } else { this.alfLog("log", "Loading accordion content pages"); var url = this._contentUrl; if ( url == null ) { url = Alfresco.constants.URL_SERVICECONTEXT + “slidedecks/select"; if ( this.currentSite ) { url = url + "/site/" + this.currentSite; } this.serviceXhr({url : url, method: "GET", successCallback: this._contentDataLoaded, failureCallback: this._contentDataLoadFailed, callbackScope: this}); } },

55. #SummitNow Widget Implementation Build the accordion from the data in the postCreate method: //snip… in the declare callback: postCreate: function alfresco_accordion_AlfAccordionContainer__postCreate() { this._accordion = new Accordion( {} ); // add the array of panels built from the Xhr callback array.forEach( _panelList, function(panel, index) { _this._accordion.addChild( panel ); }); this._accordion.placeAt( this.containerNode ); },

56. #SummitNow Finishing My Page

57. #SummitNow Modifying the JSON { "name": "alfresco/layout/AlfSideBarContainer", "config": { "initialSidebarWidth": "300", "widgets": [{ "name": "alfresco/menus/AlfMenuBar", "align": "sidebar", // menu config…. }, { "name": "alfresco/accordion/AlfAccordionContainer", "align": "sidebar" } ]} }

58. #SummitNow The Prototype with the Accordion!

59. #SummitNow The Big Finish

60. #SummitNow What have we learned today? New AMD Infrastructure allows for decoupled encapsulated construction, plus rich features Page Construction all of the icky bits are hidden Widget Construction build and contribute whatever you need

61. #SummitNow Thanks UI Team!

62. #SummitNow Questions

63. #SummitNow