Upload
lykhuong
View
221
Download
0
Embed Size (px)
Citation preview
1
Developing Widgets for IBM Connections
Mikkel Flindt HeisterbergOnTime by IntraVision
2
About me From Denmark – where there's snow by
the way... With IntraVision – makers of OnTime® An all together nice guy! :-)
Twitter: @lekkim Blog: http://lekkimworld.com
3
4
Widget Placement and
Widget Modes
5
Widgets in IBM Connections Most functionality in IBM Connections is actually widgets You may add widgets in Profiles, Communities and
Homepage Widgets are made up of two parts
─ Widget configuration on the IBM Connections server─ The actual widget written to the iWidget specification
(JavaScript / XML / HTML / CSS)
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
7
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
8
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
9
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
10
Widget Descriptors
11
Widget descriptor – more in depth
12
Widget descriptor – more in depth
13
Widget descriptor – more in depth
14
Widget descriptor – more in depth
15
Widget descriptor – more in depth
16
Widget descriptor – more in depth
17
Coding the Widget
18
iScope class
● Access to dojo version 1.4.1 (highly customized for IBM Connections)● You do not have to use dojo to declare the class...
19
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)
20
Using iContext
21
Using iEvents
22
Keeping context JavaScript is single threaded - all requests for web resources are done after the
current method completes The a callback (or an event is generated which eventually points back to your
iScope) beware!! Callback is usually done from another context i.e. “this” will refer to something
else than your iScope class – most probably the HTML element you clicked (i.e. <A /> tag) or the “thing” that generated the event
This can make it difficult to make further calls into your iScope call that is call utility functions from
Solution is to─ use closures i.e. save a reference to “this” before the call─ use the “hitch” method from dojo and have dojo apply the correct context
23
Keeping context – example with closure
24
Keeping context – using dojo.hitch
25
Same Origin Poicy and the AJAX Proxy
26
What's your origin? In browsers JavaScript is governed by what's called the “Same Origin
Policy” When JavaScript runs in the browser it may only do requests (XHR's)
against the same server as it 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
27
Using the AJAX proxy Using the AJAX proxy consists of 3 steps:
─ Decide and/or compose the URL you wish to call─ Rewrite the URL so it will go through the proxy─ Load the ressource pointed to by the URL
IBM Connections supplies us with a proxy which is easy to use from your widget code
─ 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
28
Using the AJAX proxy
If running in Profiles the proxy will be http://<host>/profiles/ajaxProxyAbove request will be http://<host>/profiles/ajaxProxy/http/www.google.com/search?q=Lotusphere
29
IBM Connections AJAX proxy is used for all requests
Easy to see if using Firebug to trace AJAX proxy used for all requests even though widget descriptor and required
JavaScript files are fully qualified and from same hostname / port combination
30
Proxy security For 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 LtpaToken cookies if authentication should be propagated
Proxy configuration done in proxy-config.tpl on the IBM Connections server
(unless using extreme care)
31
Widget configuration on the server
32
Widget configuration in widgets-config.xml
(unless using extreme care)
33
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”)
34
Widget attributes makes the widget configurable (2)
35
Say hello to iWidgets In IBM Connections widgets are iWidgets which means that they are written to
the iWidget specification ─ …and then there are gadgets but that's another story
Widgets are described by a widget descriptor (referenced in widgets-config.xml) and optionally JavaScript to provide dynamic behavior and, also optionally, CSS to style the contents
The widget descriptor describes supported modes, startup mode, “iScope class” (more in a bit) and, optionally, which resources to load
Static widget content for each mode may also be supplied
36
Things I would have hoped someone had told me... Dojo is nasty to troubleshoot due to async loading – all errors seem to come
from dojo.js which is almost never the culprit─ Use the “one-page-load-workaround”
Logging is really your friend but do add something that indicates which piece of code is logging
─ console.log, console.trace, console.debug, console.info, console.warn, console.error How to use dojo.hitch
─ Already covered that but do look into dojo.hitch or Function.bind(Object) How to show a lightbox
─ Next slide...
37
Showing a lightbox
38
Showing a lightbox
39
Showing a lightbox
40
Showing a lightbox
41
Showing a lightbox
42
Caveats Editing configuration files by hand is prone to error
─ IBM would tell you always use checkin/checkout via wsadmin as it does a schema check :-)
Widgets are running in a shared environment─ Make sure your CSS classes do not clash─ Make sure ID's are unique by prefixing something unique to
them as there may be multiple instances of the same widget on the page (it follows from this that you cannot use ID's for CSS selectors)
Because you have access to the entire page doesn't mean that you should...
Never, never, never, never ever add something like the following to your stylesheet – you may need it but the page as a whole will start to look funny...* {font-size: 7pt; color: red; overflow: hidden}
Start small...
43
Things I would have hoped someone had told me... Network latency kills web application performance – cache as such as possible
and combine multiple files into one minified version 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.....
44
Summary Most functionality in IBM Connections is actually 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 Dojo makes it easy to keep context and it's already loaded iWidgets, iScope, iContext, iEvents... Use asynchronous calls to keep UI snappy and use dojo.hitch to keep context Start small and build from there
Happy coding!!
45
Resources iWidget specification: http://www-10.lotus.com/ldd/mashupswiki.nsf/dx/iwidget-
spec-v1.0.pdf/$file/iwidget-spec-v1.0.pdf IBM Connections iWidget Development Guide: www-
10.lotus.com/ldd/lcwiki.nsf/dx/development-guide iWidget support in Homepage: http://www-
10.lotus.com/ldd/lcwiki.nsf/dx/07072009105437%D8%B5WEBKH7.htm iWidget support in profiles and Communities: http://www-
10.lotus.com/ldd/lcwiki.nsf/dx/10082009050455WEBCNM.htm Common iWidget support in Connections: http://www-
10.lotus.com/ldd/lcwiki.nsf/dx/common-iwidget-support-in-the-lotus-connections-features
In all modesty my blog – http://lekkimworld.com
46
Q&A But?, How?, Doesn't that mean... Give it to me! (or come talk to me
after the session or find me in the hallways...)
Twitter: @lekkimEmail: [email protected]: http://lekkimworld.com