Transcript hello-world.get.html.ftl

Developing Great Dashlets
Will Abson – @wabson
About Me
•
•
•
•
Project Lead, Share Extras
Alfresco Developer and previously Solutions Engineer
DevCon 2011 – Customizing Share Best Practices - with Jeff Potts
Dashlet Challenge Judge 2011 & 2012
In this presentation…
…we’ll take your dashlets
From This
…we’ll take your dashlets
From This
To This
What Makes a Great Dashlet?
•
•
•
•
Summarise information in meaningful ways
Configurable
Responsive user interface
Rich controls
Event Scheduling by Bertrand Forest
Social Tops Dashlet by Sébastien Le
Marchand
JMX Statistics Dashlet by Chris Paul
Now Let’s Get our Hands Dirty!
Agenda
The Basics
• Hello World
Utilising UI Components
•
•
•
•
•
•
•
Title Bar Actions
Dashlet Resizers
YUI Buttons
Dom Manipulation
Event Listeners
User Preferences
Popup Notifications
Additional Topics
Utilising UI Components (ctd.)
• Configuration dialogues
Fetching Data
• Dashlets that access the Alfresco Repository
• Dashlets that access third party services
Example Project
Source Code
• Each stage in the walk-through is available in
GitHub
• Corresponds to a different branch
• https://github.com/wabson/great-dashlets
• I will demonstrate using a local repository
Hello World Dashlet for 4.2
• Based on Share Extras ‘Sample Dashlet’
• Displays a configurable message to the user
• Demonstrates structure of a basic dashlet
• Web-tier web script
• Client-side assets
• Best practice
• Displays static / semi-dynamic text
• We will go further!
Hello World Example 1
https://github.com/wabson/greatdashlets/tree/helloworld1
Title Bar Actions
• New in Alfresco 4.0
• Replaces action links previously placed in dashlet
toolbars
• e.g. ‘Configure’ action
• Actions may point to a link in the same or a new
window/tab or trigger custom YUI or Bubbling
events
• To use, create an instance of
Alfresco.widget.DashletTitleBarActions
• More info
• http://sharextras.org/jsdoc/share/community4.2.b/symbols/Alfresco.widget.DashletTitleBarActions.ht
ml
Hello World Example 2
https://github.com/wabson/greatdashlets/tree/helloworld2
Hello World Example 2
great-dashlets / config / alfresco / site-webscripts
/ com / someco / components / dashlets / helloworld.get.js
Hello World Example 2
great-dashlets / config / alfresco / site-webscripts
/ com / someco / components / dashlets / helloworld.get.html.ftl
Dashlet Resizers
• Allows resizing of user dashlets or site dashlets by
Site Managers
• Resizing is persistent
• Height attribute stored in component configuration
• To use, create an instance of
Alfresco.widget.DashletResizer
• Must supply HTML ID and component ID
• More info
• http://sharextras.org/jsdoc/share/community4.2.b/symbols/Alfresco.widget.DashletResizer.html
Hello World Example 3
https://github.com/wabson/greatdashlets/tree/helloworld3
Hello World Example 3
great-dashlets / config / alfresco / site-webscripts
/ com / someco / components / dashlets / helloworld.get.js
Dashlet Client-side Components
• Up until now we have used standard re-usable
classes (or widgets)
• Most dashlets will require us to define our own
custom dashlet classes to implement the behaviour
required
• To do this, extend Alfresco.component.Base to
add your own implementation
• Implementation should be held in custom client-side JS
files, which we need to include in the page
• Once we have done this we can create an instance of
the client-side component on the page
Hello World Example 4
https://github.com/wabson/greatdashlets/tree/helloworld4
Hello World Example 4
great-dashlets / config / alfresco / site-webscripts
/ com / someco / components / dashlets / helloworld.get.js
Hello World Example 4
great-dashlets / config / alfresco / site-webscripts
/ com / someco / components / dashlets / helloworld.get.html.ftl
Hello World Example 4
great-dashlets / source / web / someco /
components / dashlets / hello-world.js
Hello World Example 4
Hello World Example 4
Push Button Controls
• YUI2 provides a range of different button types
• http://developer.yahoo.com/yui/button/
• Alfresco.util provides a handy function for
setting up push buttons
• {YAHOO.widget.Button}
Alfresco.util.createYUIButton(p_scope, p_name,
p_onclick, p_obj, p_oElement)
• Button element must be declared in HTML
• Easier to use this if the standard component markup is
used
• But we could use YAHOO.widget.Button() directly
• http://sharextras.org/jsdoc/share/community4.2.b/symbols/Alfresco.util.html#.createYUIButton
Dom Manipulation
• YAHOO.util.Dom provides a range of static
methods for locating and manipulating Dom
elements
• YAHOO.util.Dom.get()
• YAHOO.util.Dom.getAttribute()
• YAHOO.util.Dom.addClass()
• Once we have an HTML element in our hands we
can
• Set its content (innerHTML)
• Add sibling and child elements
• Alfresco.util builds on these functions
• http://sharextras.org/jsdoc/share/community4.2.b/symbols/Alfresco.util.html
Hello World Example 5
https://github.com/wabson/greatdashlets/tree/helloworld5
Hello World Example 5
great-dashlets / config / alfresco / site-webscripts
/ com / someco / components / dashlets / helloworld.get.html.ftl
Hello World Example 5
great-dashlets / source / web / someco /
components / dashlets / hello-world.js
Dashlet Toolbars
• Filters are usually implemented using YUI ‘menu’
buttons
Or could be ‘split’ buttons if clickable too
Like push buttons we create in HTML
Activate the button using
Alfresco.util.createYUIButton
• Need to provide a function to handle the click event
• Actions usually implemented as HTML links (with icons)
•
•
•
•
Could be a hyperlink to another page or wired to a function
using YAHOO.util.Event.addListener()
Hello World Example 6
https://github.com/wabson/greatdashlets/tree/helloworld6
Hello World Example 6
great-dashlets / config / alfresco / site-webscripts
/ com / someco / components / dashlets / helloworld.get.html.ftl
Hello World Example 6
great-dashlets / source / web / someco /
components / dashlets / hello-world.js
Hello World Example 6
User Preferences
• Allow us to store user-specific configuration
properties
• Properties are stored using JSON in a hierarchical
structure, e.g. {com: {someco: {someapp: {foo:
“bar”}}}}
• Implemented in Alfresco.service.Preferences
•
Dashlets should create a class instance in their
constructor
• Provide callback functions when loading and
saving data
• http://sharextras.org/jsdoc/share/community4.2.b/symbols/Alfresco.service.Preferences.html
Hello World Example 7
https://github.com/wabson/greatdashlets/tree/helloworld7
Hello World Example 7
great-dashlets / source / web / someco /
components / dashlets / hello-world.js
Hello World Example 7
User Notifications and Prompts
• Notifications appear briefly and then fade out
• Prompts require the user to confirm something
•
•
By default a single button is shown
We can provide multiple buttons, e.g. ‘Yes’, ‘No’
• Other functions – get user input, display web
scripts, display forms
• Implemented using static methods on
Alfresco.util.PopupManager
• http://sharextras.org/jsdoc/share/community4.2.b/symbols/Alfresco.service.Preferences.html
Hello World Example 8
https://github.com/wabson/greatdashlets/tree/helloworld8
Hello World Example 8
great-dashlets / source / web / someco /
components / dashlets / hello-world.js
Get Latest Document Dashlet
• Original implementation by Jeff Potts
• http://ecmarchitect.com/archives/2012/05/04/1592
• http://ecmarchitect.com/archives/2012/05/15/1599
• Improvements by Rik Taminaars
• Further improvements for these examples
• A more advanced dashlet
• Fetches data from the repository
• Configurable per-instance using a config dialogue
Loading Repository Data
Credit: Jeff Potts
Loading Repository Data
• Data is loaded using a custom repository web script
returning JSON data
• But you could re-use existing web scripts
• Data loading in web-tier – Alfresco.util.Ajax
• See http://sharextras.org/jsdoc/share/community4.2.b/symbols/Alfresco.util.Ajax.html
• Data loading in client-side component
• How do we reload data?
Get Latest Document Example 1
https://github.com/wabson/greatdashlets/tree/getlatestdoc2
Dashlet Configuration Dialogues
• Allows the dashlet to be tailored to different
situations
• Configurable by users (user dashlets) or Site
Managers (site dashlets)
• Same storage mechanism as Dashlet Resizer
• Implement using Alfresco.module.SimpleDialog
instance (docs)
• Must include client-side files for this class
• Must provide a web script to implement the UI
• Optionally, we can provide a custom form target
• Most dashlets will use the default
modules/dashlet/config/{id} target
Get Latest Document Example 2
https://github.com/wabson/greatdashlets/tree/getlatestdoc2
More Information
https://github.com/wabson/great-dashlets
http://sharextras.org/
http://sharextras.org/jsdoc/share/