Easy as pie creating widgets for ibm connections
0 likes784 views
The document discusses the development of widgets for IBM Connections, detailing their functionality, modes, and configuration requirements. It highlights the use of iwidgets and various components such as icontext and ievents for building interactive applications within the platform. The author emphasizes the ease of widget development using JavaScript and CSS, and encourages developers to start small with their projects.
Easy as pie creating widgets for ibm connections
- 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