Claus Witt dot com

webdeveloper

For a simple walk through of how you can write widgets I decided to write a Twitter Widget, which shows a list of tweets for one or more people. The widget is simple to insert into a page.

This widget of course needs Dojo on the page, and parseOnLoad (or a manual call to parse the widgets) as well as the source of the widget of course. On top of that a lot of css is needed for it to look ok.

The javascript file for the widget has three parts. Some required (boilerplate) code for it to be a Dojo Widget, some public methods needed for it to interact with the page, and last but not least the actual implementation of the widget.

The first part is covered many times. The second consists of using the method preamble() in which you can manipulate the parameters of the widget, before the widget is actually instantiated. In the example this is used to ensure that the class twitterTickerWidget is prefixed to any custom class the user adds to the widget, as well as ensuring that a header is set, if it is empty when before instantiating.

There are also some default values set - the widget will e.g. only show tweets from my twitter account, if no twitterusernames is included when inserting into a page.

The main part of the widget is a jsonp call to twitters public api. The result of this api call is a json string representing an array of objects. One object per tweet. This array is then parsed and converted into a dom representation which is placed into the root dom node of the widget.

There is used some regex magic to auto link urls in tweets.

You can see a quick demo (with some css styling) of the Dojo Twitter Widget. Note: it seams the demo does not work in Safari at the moment. The error is that it cannot find the js file. It works in Firefox and Chrome though.

UPDATE: the error that made it fail in Safari (and IE - though this last claim is untested, since I'm on a Mac without a virtual machine for testing in ie atm) was of course an error in my code. Since class is a reserved word in javascript, you cannot reference object.class instead you should use object["class"].

blog comments powered by Disqus