Presentation by Mikkel Flindt Heisterberg as given on November 30th in Amsterdam for Social Connections IV, the IBM Connections user group event

1. Easy as Pie – Developing Widgets
for IBM Connections
 About me
─With IntraVision – makers of OnTime®
Group Calendar for Lotus Domino
─We've got stuff for IBM Connections
too...
─An all together nice guy! :-)
 Agenda
1)What are those widgets?
2)Widget placement and modes
3)Building the widget
4)Server configuration 1
5)Breathe...

2. What are those widgets?
Widgets in IBM Connections
 You may add widgets in Profiles, Communities and Homepage
 Most functionality in these features is actually widgets
 Widgets are made up of two parts
─ Widget configuration on the IBM Connections server
─ The actual widget written to the iWidget specification (JavaScript / XML / CSS)
2

3. Widget Placement
and
Widget Modes
3

4. Widget modes
 There are a number of modes defined (view, edit, fullpage, search) but not all
modes are supported in all features (fullpage and search only in Communities)
 Widgets may contribute multiple modes
 Administrator may choose to use some and not all modes contributed
4

5. Widget modes
 There are a number of modes defined (view, edit, fullpage, search) but not all
modes are supported in all features (fullpage and search only in Communities)
 Widgets may contribute multiple modes
 Administrator may choose to use some and not all modes contributed
5

6. Widget modes
 There are a number of modes defined (view, edit, fullpage, search) but not all
modes are supported in all features (fullpage and search only in Communities)
 Widgets may contribute multiple modes
 Administrator may choose to use some and not all modes contributed
6

7. Configuration on the server
7

8. Widget configuration in widgets-config.xml
(unless using
extreme care)
8

9. Widget attributes makes the widget configurable
 It doesn't make sense to hard code or at least not supply sensible defaults and
widget attributes can be used for configuration
 String key/value pairs may be supplied – interpretation of the value is up to the
widget though
 Some values cannot be specified in widgets-config.xml as they may change
based on IBM Connections configuration (such as context root i.e. “/dogear” /
“/bookmarks”) or the ID of the active profile / community
 Special values are enclosed in curly braces – i.e.
─ {resourceId} profileKey of current Profiles user or communityUnid if in Communities
─ {contextRoot} Context root of the current feature (i.e. “/profiles”)
9

10. Widget attributes makes the widget configurable
10

11. Say hello to iWidgets
 In IBM Connections widgets are iWidgets i.e. written to the iWidget
specification
─ …and then there are OpenSocial gadgets but that's another session
 Widgets are made up of a widget descriptor (referenced in widgets-config.xml)
and the code the make the widget do stuff (HTML, CSS, JavaScript)
 The widget descriptor describes supported modes, startup mode, “iScope
class” (more in a bit) and required resources (optional)
 Static widget content for each mode may also be supplied
11

12. Widget Descriptors
12

13. Widget descriptor – more in depth
13

14. Widget descriptor – more in depth
14

15. Widget descriptor – more in depth
15

16. Widget descriptor – more in depth
16

17. Widget descriptor – more in depth
17

18. Widget descriptor – more in depth
18

19. Coding the Widget
19

20. iScope
● Access to dojo version 1.4.1 (highly customized for IBM Connections) 20
● You do not have to use dojo to declare the class...

21. iContext
 An iContext instance is automatically set into the iScope class
 The iContext provides access to the widget markup (e.g. root element), I/O
related functions (i.e. URL rewriting), widget attributes etc.
 The iContext is easily accessed from the iScope class using this.iContext
 Important functions include:
─ iContext.getRootElement() : DOM Element
─ iContext.getElementById(id:string) : DOM Element
─ iContext.getiWidgetAttributes() : ItemSet
─ iContext.getUserProfile() : ItemSet
─ iContext.io.rewriteURI(uri:string) : string
─ iContext.iEvents.fireEvent(name:string, type:string, payload:object)
 You retrieve information from an ItemSet using getItemValue(name:string)
21

22. Using iContext
22

23. Using iEvents
23

24. Same Origin Policy and the
AJAX Proxy
24

25. What's your origin?
 In browsers JavaScript is governed by the Same Origin Policy
 When JavaScript runs in the browser it may only load resources (XHR's)
from the server the script itself was loaded from
 Same server means:
─ Same hostname / IP
─ Same port number
 To work around this we use an
AJAX proxy to proxy the request
through the same server we
loaded the JavaScript from
25

26. Using the AJAX proxy
 Using the AJAX proxy consists of 3 steps
1)Decide and/or compose the URL to the resource to load
2)Rewrite the URL so it will go through the proxy
3)Load the resource using the rewritten URL
 IBM Connections supplies us with a proxy
─ But again – beware! The way you use the proxy in code isn't really –
hmmmm lets say - fully implemented or implemented very well
─ You use the iContext.io to rewrite the URL but dojo or plain ol' XHR to
load the ressource as the iContext.io.request method isn't implemented
in the IBM Connections iWidget container
26

27. AJAX proxy Example
If running in Profiles the proxy will be http://<host>/profiles/ajaxProxy
27
Above request will be http://<host>/profiles/ajaxProxy/http/www.google.com/search?q=Lotusphere

28. Proxy security
 Access through the proxy is disallowed by default
 You have to allow access on a per hostname and method
type (GET, POST, DELETE etc.) basis (or open for all
hostnames / methods although not recommended)
 Do remember to allow access for specific headers / cookies
(i.e. to reuse LtpaToken) (unless using
extreme care)
 Proxy configuration done in proxy-config.tpl on
the IBM Connections server
28

29. Network latency kills web application performance...
 Cache as such as possible, combine multiple files into one minified version and
utilize gzip...
 Repeat after me: “Latency, latency, latency, latency, latency, latency, latency,
latency, latency, latency, latency, latency, latency, latency, latency, latency,
latency, latency, latency, latency, latency, latency, latency, latency, latency,
latency, latency, latency, latency, latency, latency, latency, latency, latency,
latency, latency, latency, latency, latency, latency, latency, latency, latency,
latency, latency, latency, latency, latency, latency, latency, latency, latency,
latency, latency, latency, latency, latency, latency, latency, latency, latency,
latency, latency, latency, latency, latency, latency, latency, latency, latency,
latency, latency, latency, latency, latency, latency, latency, latency, latency,
latency, latency, latency, latency, latency, latency, latency, latency, latency,
latency, latency, latency, latency, latency, latency, latency, latency, latency,
latency, latency, latency, latency, latency, latency, latency, latency, latency,
latency, latency, latency, latency, latency, latency, latency, latency, latency,
latency, latency, latency, latency, latency, latency, latency, latency, latency,
latency, latency, latency, latency, latency, latency, latency, latency.....
29

30. Summary
 Most functionality in IBM Connections is widgets and you can add your own
 Bringing your applications into IBM Connections and thus providing in-context
access is very valuable
 Widgets are quite easy to develop using JavaScript and CSS although you must
know about asynchronous JavaScript
 iWidgets, iScope, iContext, iEvents...
 Start small and build from there
 End-to-end video example on widget development
on my blog by Monday
 Happy coding!!
End-to-end video example on widget development 30
on my blog by Monday

31. Q&A
 But?, How?, Doesn't that mean...
 Give it to me! (or come talk to me
after the session...)
 T: @lekkim
E: mh@intravision.dk
B: http://lekkimworld.com
 http://www.ontimesuite.com
31