Your SlideShare is downloading. ×
0
Easy as pie   creating widgets for ibm connections
Easy as pie   creating widgets for ibm connections
Easy as pie   creating widgets for ibm connections
Easy as pie   creating widgets for ibm connections
Easy as pie   creating widgets for ibm connections
Easy as pie   creating widgets for ibm connections
Easy as pie   creating widgets for ibm connections
Easy as pie   creating widgets for ibm connections
Easy as pie   creating widgets for ibm connections
Easy as pie   creating widgets for ibm connections
Easy as pie   creating widgets for ibm connections
Easy as pie   creating widgets for ibm connections
Easy as pie   creating widgets for ibm connections
Easy as pie   creating widgets for ibm connections
Easy as pie   creating widgets for ibm connections
Easy as pie   creating widgets for ibm connections
Easy as pie   creating widgets for ibm connections
Easy as pie   creating widgets for ibm connections
Easy as pie   creating widgets for ibm connections
Easy as pie   creating widgets for ibm connections
Easy as pie   creating widgets for ibm connections
Easy as pie   creating widgets for ibm connections
Easy as pie   creating widgets for ibm connections
Easy as pie   creating widgets for ibm connections
Easy as pie   creating widgets for ibm connections
Easy as pie   creating widgets for ibm connections
Easy as pie   creating widgets for ibm connections
Easy as pie   creating widgets for ibm connections
Easy as pie   creating widgets for ibm connections
Easy as pie   creating widgets for ibm connections
Easy as pie   creating widgets for ibm connections
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Easy as pie creating widgets for ibm connections

533

Published on

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

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

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
533
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Easy as Pie – Developing Widgetsfor IBM Connections About me ─With IntraVision – makers of OnTime® Group Calendar for Lotus Domino ─Weve 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 doesnt 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 thats 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. Whats your origin? In browsers JavaScript is governed by the Same Origin Policy When JavaScript runs in the browser it may only load resources (XHRs) 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 isnt 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 isnt implemented in the IBM Connections iWidget container 26
  • 27. AJAX proxy ExampleIf running in Profiles the proxy will be http://<host>/profiles/ajaxProxy 27Above 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?, Doesnt 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

×