fme Alfresco Day 06-2013 - alfresco.js and share

2,480 views
2,157 views

Published on

Alfresco Share provides a lot of helpers and tools for client side Javascript. This is a collection of some of the most important pieces.

Published in: Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,480
On SlideShare
0
From Embeds
0
Number of Embeds
57
Actions
Shares
0
Downloads
43
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

fme Alfresco Day 06-2013 - alfresco.js and share

  1. 1. alfresco.js / share.js Hidden gems in Alfresco Client-Side Javascript 2013-06-27 - Florian Maul (fme AG)
  2. 2. Alfresco.util: Object functions • arrayToObject, deepCopy, dotNotation*
  3. 3. Alfresco.util: Array manipulation • findInArray • arrayContains • arrayRemove • arrayIndex
  4. 4. Alfresco.util: Strings / Formatting • pad, trim, combinePaths
  5. 5. Alfresco.util: Date conversion
  6. 6. Alfresco.util: DOM / HTML • getScrollPosition = function() • insertAtCursor = function(el, txt) • selectText = function(elTextbox, nStart, nEnd) • isVisible = function (el) • decodeHTML = function(html) • encodeHTML = function(text, justified) • encodeURIPath = function(text)activateLinks = function(text) • tweetToHTML = function(text)setSelectedIndex = function(selectEl, value) • setSelectedClass = function(parentEl, selectEl, selectClass) • useAsButton = function(el, callbackFn, callbackObj, callbackScope)  Helper function to listen for mouse click and keyboard enter events on an • element.generateDomId = function(p_el, p_prefix)  Returns a unique DOM ID for dynamically-created content. Optionally applies the new ID to an element.
  7. 7. Alfresco.util: YUI • createYUIButton = function(p_scope, p_name, p_onclick, p_obj, p_oElement) • disableYUIButton = function(p_button) • enableYUIButton = function(p_button) • createTwister = function(p_controller, p_filterName, p_config) • createYUIPanel = function(p_el, p_params, p_custom) • createInfoBalloon = function(p_context, p_params) • createBalloon = function(p_context, p_params) • createInsituEditor = function(p_context, p_params, p_callback) • findEventClass = function(p_eventTarget, p_tagName) • hasEventInterest = function(p_eventGroup, p_args)
  8. 8. Editor that is used for inline editing in the document library for document names and tags: Alfresco.util.createInsituEditor(context, params, callback); Alfresco.util: Insitueditor
  9. 9. Alfresco.util: Insitueditor
  10. 10. Alfresco.util.PopupManager
  11. 11. A.u.PopupManager.displayForm Alfresco.util.PopupManager.displayForm({ title:"Form Title", properties:{ itemKind:"type", mode:"create", itemId:"cm:content", destination:"workspace://SpacesStore/34c94d94-6418-42dc-9bc7-038693990408", success: function() { console.log( "Node Created.");} } } );
  12. 12. A.u.PopupManager.displayWebscript • Display the html contents of a webscript in a Dialog • If you need OK, Cancel Buttons you have to provide them in the HTML Alfresco.util.PopupManager.displayWebscript({ title: "Index", url: Alfresco.constants.PROXY_URI +"index", properties:{} });
  13. 13. Alfresco.util.Ajax • Use Alfresco Ajax for CSRF support!  Alfresco.util.Ajax.jsonGet  Alfresco.util.Ajax.jsonPost  Alfresco.util.Ajax.jsonPut  Alfresco.util.Ajax.jsonDelete • All use:  jsonRequest()
  14. 14. Alfresco.util.Ajax.jsonGet Alfresco.util.Ajax.jsonGet({ url: Alfresco.constants.PROXY_URI + "index", successCallback: { fn: function(result) { console.log(result.serverResponse.responseText); }, scope: this } });
  15. 15. More URL helpers
  16. 16. Alfresco.util.getVar / setVar Alfresco.util.setVar("fme", "it's possible"); Alfresco.util.getVar("fme"); Caution: Data is stored as a JSON object on window.name and survives page requests but it is NOT available when the user opens a new tab! (It‘s used internally for tracking if flash is available in the browser)
  17. 17. Alfresco.Location component • Renders the Breadcrumb l = new Alfresco.Location("template_x002e_title_x002e_repository"); l.setOptions({rootNode:"workspace://SpacesStore/743b079b-a847-4fc2-9a38- 5b3f38638784"}); l.displayByNodeRef("workspace://SpacesStore/2fc3c755-3e4a-4730-a22e-604c2092746b");
  18. 18. Alfresco.Favorite component • Component to render a Favorite link with action: f = new Alfresco.Favourite("page_x002e_title_x002e_user_x007e_admin_x007e_dashboard"); f.setOptions({ nodeRef : "workspace://SpacesStore/f3bb5d08-9fd1-46da-a94a-97f20f1ef208" }); f.render();
  19. 19. Alfresco.Like component • Render a „like“ link with like action (Ajax reload) l = new Alfresco.Like("page_x002e_title_x002e_user_x007e_admin_x007e_dashboard"); l.setOptions(nodeRef : "workspace://SpacesStore/f3bb5d08-9fd1-46da-a94a- 97f20f1ef208"); l.render();
  20. 20. Alfresco.logger Use cheat code: Ctrl, Ctrl, Shift, Shift
  21. 21. Alfresco.constants (1/2) • Alfresco.constants.DEBUG = true; • Alfresco.constants.AUTOLOGGING = false; • Alfresco.constants.PROXY_URI = window.location.protocol + "//" + window.location.host + "/share/proxy/alfresco/"; • Alfresco.constants.PROXY_URI_RELATIVE = "/share/proxy/alfresco/"; • Alfresco.constants.PROXY_FEED_URI = window.location.protocol + "//" + window.location.host + "/share/proxy/alfresco-feed/"; • Alfresco.constants.THEME = "fmeTheme"; • Alfresco.constants.URL_CONTEXT = "/share/"; • Alfresco.constants.URL_RESCONTEXT = "/share/res/"; • Alfresco.constants.URL_PAGECONTEXT = "/share/page/"; • Alfresco.constants.URL_SERVICECONTEXT = "/share/service/"; • Alfresco.constants.URL_FEEDSERVICECONTEXT = "/share/feedservice/"; • Alfresco.constants.USERNAME = "admin"; • Alfresco.constants.SITE = ""; • Alfresco.constants.PAGEID = ""; • Alfresco.constants.PORTLET = false; • Alfresco.constants.PORTLET_URL = unescape(""); • Alfresco.constants.JS_LOCALE = "en_US";
  22. 22. Alfresco.constants (2/2) Alfresco.constants.URI_TEMPLATES = { "sitedashboardpage": "/site/{site}/dashboard", "sitepage": "/site/{site}/{pageid}", "userdashboardpage": "/user/{userid}/dashboard", "userpage": "/user/{userid}/{pageid}", "userprofilepage": "/user/{userid}/profile", "userdefaultpage": "/user/{pageid}", "consoletoolpage": "/console/{pageid}/{toolid}", "consolepage": "/console/{pageid}" }; Alfresco.constants.HELP_PAGES = { "share-help": "http://docs.alfresco.com/4.1/topic/com.alfresco.enterprise.doc/topics/sh-uh-welcome.html", "share-tutorial": "http://docs.alfresco.com/4.1/topic/com.alfresco.enterprise.doc/topics/alfresco-video- tutorials.html" };
  23. 23. Alfresco.Share Alfresco.Share.postActivity("swsdp", "file-liked", "inv I200-109.png", "document-details", { nodeRef: "workspace://SpacesStore/ 723a0cff-3fce-495d-baa3-a3cd245ea5dc"});
  24. 24. Alfresco.component.SimpleDocList • Component to create document lists • e.g. used in My Documents dashlet
  25. 25. Alfresco.component.Base
  26. 26. Alfresco.component.Base (function() { FME.MyComponent = function(htmlId, options) { this.name = "FME.MyComponent"; this.id = htmlId; this.setOptions(options); FME.MyComponent.superclass.constructor.call(this, this.name, this.id, ["button", "container", "connection", "dragdrop", "json" ]); return this; }; YAHOO.lang.extend(FME.MyComponent, Alfresco.component.Base, { onReady: function FMC_onReady() { // add you initialization here } }); })();
  27. 27. Alfresco.component.Base • Creates Button and adds listeners <button type="alfresco-button" name=".onRenameClick" value="${nodeRef}">${msg("button.rename")}</button> • Creates Links and creates events <a href="#" name"@metaDataRefresh" class="${args.htmlid?js_string}" rel="${nodeRef}">${msg("link.metaDataRefresh“)}</a>
  28. 28. Alfresco.util.DataTable
  29. 29. Alfresco.util.DataTable dt = new Alfresco.util.DataTable( { dataTable: { container: "template_x002e_people-finder_x002e_people-finder_x0023_default-body", columnDefinitions: [ { key: "name", sortable: false, formatter: function(elCell, oRecord, oColumn, oData) { elCell.innerHTML = oRecord.getData("fileName"); } }, { key: "type", sortable: false, formatter: function(elCell, oRecord, oColumn, oData) { elCell.innerHTML = oRecord.getData("node").type; } } ] }, dataSource: { url: "/share/service/components/documentlibrary/data/doclist/all/node/alfresco/company/home/Data%20Dictionary?filter=path&size=50&po s=1&sortAsc=true&sortField=cm%3Aname&libraryRoot=alfresco%3A%2F%2Fcompany%2Fhome&view=browse", config: { responseSchema: { resultsList: "items", metaFields: { paginationRecordOffset: "startIndex", totalRecords: "totalRecords", totalRecordsUpper : "totalRecordsUpper" } } } }, paginator: { config: { containers: ["global_x002e_header_x0023_default-userItems"], rowsPerPage: 10 } } });
  30. 30. Alfresco.util.ComponentManager • Some Alfresco components are registered with the Component Manager:
  31. 31. Alfresco.Deferred • Wait for multiple events and execute a callback:
  32. 32. Alfresco.util.bind() • Changes the this context of a function (binds it to a specific object)
  33. 33. Questions, Feedback …? 33
  34. 34. #237191 - © fme AG34

×