#SummitNow The Share Widget Library 13 th November 2013 Dave Draper

#SummitNow A Brief History… Alfresco Surf used in Share 3.0, 3.1 & 3.2 Alfresco Surf becomes Spring Surf (first used in Share 3.3) Initial extensibility features added in 4.0 Dynamic configuration added for 4.1 WebScript refactor for Share 4.2

#SummitNow Share Customization Information

#SummitNow The Annual Spring Surf Question…

#SummitNow Why Change?

#SummitNow What’s Changed?

#SummitNow Introducing the new “Widget Library”

#SummitNow What is a Widget? JavaScript HTML CSS i18n

#SummitNow Old Widget Granularity

#SummitNow New Widget Granularity

#SummitNow Page Models

#SummitNow JSON Structure Example The widget to instantiate The instantiation arguments ID of the definition in the model ID of the root element in the resulting DOM Assigns to a variable of the enclosing widget Used by the enclosing widget Passed as an argument during instantiation

#SummitNow Single WebScript Pages

#SummitNow Page XML Template XML WEBSCRIPT Template Page model WebScript Updated Surf Object Hierarchy

#SummitNow URL Tokens

#SummitNow /{pageid}/ws/{webscript} /{pageid}/p/{pagename} Matches document name /Data Dictionary/ShareResources/Pages Matches URL in WebScript Descriptor

#SummitNow

#SummitNow How Does it Work?

#SummitNow What is AMD? “Asynchronous module definition (AMD) is a JavaScript API for defining modules such that the module and its dependencies can be asynchronously loaded. It is useful in improving the performance of websites by bypassing synchronous loading of modules along with the rest of the site content. In addition to loading multiple JavaScript files at runtime, AMD can be used during development to keep JavaScript files encapsulated in many different files. This is similar to other programming languages, for example java, which support keywords such as import, package, and class for this purpose. It is then possible to concatenate and minify all the source JavaScript into one small file used for production deployment.” - Wikipedia “It is then possible to concatenate and minify all the source JavaScript into one small file used for production deployment”

#SummitNow

#SummitNow Surf Page Model JavaScript Modules JavaScript Bootstrap CSS Resource (includes i18n object) (includes HTML fragments) (can includes Base64 encoded images)

#SummitNow Dynamic Dependency Analysis

#SummitNow Dependency Example A A B B C C E E D D Requesting A results in B, C, D & E being loaded C is only loaded once (despite being depended on twice)

#SummitNow JavaScript “bootstrap” resource JavaScript dependency layer CSS dependencies Image Sprite * Resource Goals

#SummitNow What About Performance?

#SummitNow Decoupling

#SummitNow

Why Dojo?

#SummitNow (but it’s not just Dojo)

#SummitNow (and it’s better than just AMD)

#SummitNow What Widgets are Available?

#SummitNow Menu Widgets

#SummitNow Form Widgets NOT JUST DOJO

#SummitNow Layout Widgets NOT JUST DOJO

#SummitNow Document Widgets

#SummitNow HTML5 Previewer NOT JUST DOJO

#SummitNow Where are the Widgets?

#SummitNow tomcat/webapps/share/js/alfresco (server) slingshot/source/web/js/alfresco (SVN)

#SummitNow Where is this in Share 4.2?

#SummitNow

What Does This Mean for Customization?

#SummitNow alfresco/menus/AlfMenuBar alfresco/menus/AlfMenuBarItem third/party/MenuBarItem

#SummitNow

#SummitNow CSS Theme Tokens

#SummitNow.alfresco-dialog-AlfDialog.dijitDialog { border: $theme-border-1; border-radius: 6px 6px 6px 6px; box-shadow: $theme-box-shadow; font-family: $theme-font-family-2; font-size: $theme-font-size-1; }.alfresco-dialog-AlfDialog.dijitDialog { border: $theme-border-1; border-radius: 6px 6px 6px 6px; box-shadow: $theme-box-shadow; font-family: $theme-font-family-2; font-size: $theme-font-size-1; }

#SummitNow Light Theme theme.lightTheme Open Sans Condensed,Arial,sans-serif Open Sans,Arial,sans-serif Open Sans Bold,Arial,sans-serif 13px #333 #ccc Light Theme theme.lightTheme Open Sans Condensed,Arial,sans-serif Open Sans,Arial,sans-serif Open Sans Bold,Arial,sans-serif 13px #333 #ccc share/WEB-INF/classes/alfresco/site-data/themes/lightTheme.xml

#SummitNow So, What’s Next?

#SummitNow What Does This Mean For You?

#SummitNow Any Questions?

#SummitNow