{"id":119,"date":"2009-09-06T16:37:39","date_gmt":"2009-09-06T14:37:39","guid":{"rendered":"http:\/\/kinsey.no\/blog\/?p=119"},"modified":"2019-04-22T01:19:33","modified_gmt":"2019-04-21T23:19:33","slug":"119","status":"publish","type":"post","link":"https:\/\/kinsey.no\/blog\/index.php\/2009\/09\/06\/119\/","title":{"rendered":"Widget support added to easyXDM!"},"content":{"rendered":"

The newest version of easyXDM (v1.5.3) now includes two new classes, the easyXDM.WidgetManager, and easyXDM.Widget.<\/p>\n

These make it extremely easy to make mashups based on the subscribe\/publish architecture.
\n
\nTo read more about easyXDM check out this blog post<\/a>.<\/p>\n

The widget demo can be found at http:\/\/consumer.easyxdm.net\/current\/example\/widgets.html<\/a>,\u00a0 and if you want to, just copy the code for the widget found here<\/a>, modify the src for the scripts and save it to your own domain – you should now be able to add it from the WidgetManager!<\/p>\n

The WidgetManager<\/h2>\n

To set up a page to contain widgets we need an instance of the WidgetManager:<\/p>\n

\r\nvar _widgetManager = new easyXDM.WidgetManager({\r\n    local: \"..\/hash.html\",\r\n    container: document.getElementById(\"widgets\")\r\n });\r\n<\/pre>\n
And with the widgetmanager set up we continue by adding widgets by their url<\/p>\n
\r\n_widgetManager.addWidget(\"http:\/\/provider.easyxdm.net\/example\/widget.html\",{});\r\n<\/pre>\n
And thats it \ud83d\ude42<\/p>\n
The widgets<\/h2>\n
Creating a widget isn’t much more work<\/p>\n
The following is a skeleton widget<\/p>\n
\r\nvar widget = new easyXDM.Widget({\r\n    subscriptions: [\"testtopic\"],\r\n    initialize: function(widget, widgetManager){\r\n        \/\/ Set up the widget\r\n\r\n        \/\/ Render the UI\r\n\r\n        \/\/ Register the handler for incoming messages\r\n        widget.registerMessageHandler(function(url, topic, data){\r\n            \/\/ Do something\r\n        });\r\n    },\r\n    initialized: function(widget, widgetManager){\r\n        \/\/This is called after the widget has been initialized by the widgetmanager\r\n    }\r\n});\r\n<\/pre>\n
To create a custom widget you only need to select the internet slots canada<\/a> topics to subscribe to, build the UI, and handle the incoming messages the way you see fit.<\/p>\n
To publish your own messages you simply use widget.publish\u00a0 like this<\/p>\n
\r\nwidget.publish(\"position\", {\r\n    latitude: \"60.378776\",\r\n    longitude: \"5.337811\"\r\n});\r\n<\/pre>\n
and all subscribers will get this.<\/p>\n
It’s that easy!<\/p>\n","protected":false},"excerpt":{"rendered":"
The newest version of easyXDM (v1.5.3) now includes two new classes, the easyXDM.WidgetManager, and easyXDM.Widget. These make it extremely easy to make mashups based on the subscribe\/publish architecture.<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[56,34],"tags":[33,8,36],"_links":{"self":[{"href":"https:\/\/kinsey.no\/blog\/index.php\/wp-json\/wp\/v2\/posts\/119"}],"collection":[{"href":"https:\/\/kinsey.no\/blog\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinsey.no\/blog\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinsey.no\/blog\/index.php\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsey.no\/blog\/index.php\/wp-json\/wp\/v2\/comments?post=119"}],"version-history":[{"count":12,"href":"https:\/\/kinsey.no\/blog\/index.php\/wp-json\/wp\/v2\/posts\/119\/revisions"}],"predecessor-version":[{"id":375,"href":"https:\/\/kinsey.no\/blog\/index.php\/wp-json\/wp\/v2\/posts\/119\/revisions\/375"}],"wp:attachment":[{"href":"https:\/\/kinsey.no\/blog\/index.php\/wp-json\/wp\/v2\/media?parent=119"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kinsey.no\/blog\/index.php\/wp-json\/wp\/v2\/categories?post=119"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsey.no\/blog\/index.php\/wp-json\/wp\/v2\/tags?post=119"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}