{"id":137,"date":"2008-08-22T16:28:34","date_gmt":"2008-08-22T22:28:34","guid":{"rendered":"http:\/\/bililite.nfshost.com\/blog\/?p=137"},"modified":"2009-01-28T20:07:46","modified_gmt":"2009-01-29T02:07:46","slug":"extending-jquery-ui-widgets-the-final-chapter","status":"publish","type":"post","link":"https:\/\/bililite.com\/blog\/2008\/08\/22\/extending-jquery-ui-widgets-the-final-chapter\/","title":{"rendered":"Extending jQuery UI Widgets, The Final Chapter"},"content":{"rendered":"

This page is obsolete (it uses jQuery UI 1.5). Please see the updated page<\/a>.<\/strong><\/p>\r\n

OK, this is the final update to the widget subclassing. Rather than creating a new method, $.widget.subclass<\/code>, I created a single base widget\r\n$.ui.widget<\/code> that does nothing but includes the Aspect-Oriented-Programming code and a subclassing method. I put everything in the $.ui<\/code>\r\nnamespace (since namespacing plugins doesn't work anyway, all plugin names need to be globally unique). I removed the\r\ncallSuper<\/code> method, since this.callSuper('ui.widget', 'method', args)<\/code> is no better than just doing it straight, \r\n$.ui.widget.prototype.method.apply(this, args)<\/code>.<\/p>\r\n

Without further ado, here's the code (download<\/a>):<\/p>\r\n\r\n

\r\n\/\/ create the master widget\r\n$.widget(\"ui.widget\",{\r\n\t\/\/ Aspect Oriented Programming tools from Justin Palmer's article\r\n  yield: null,\r\n  returnValues: { },\r\n  before: function(method, f) {\r\n    var original = this[method];\r\n    this[method] = function() {\r\n      f.apply(this, arguments);\r\n      return original.apply(this, arguments);\r\n    };\r\n  },\r\n  after: function(method, f) {\r\n    var original = this[method];\r\n    this[method] = function() {\r\n      this.returnValues[method] = original.apply(this, arguments);\r\n      return f.apply(this, arguments);\r\n    }\r\n  },\r\n  around: function(method, f) {\r\n    var original = this[method];\r\n    this[method] = function() {\r\n      this.yield = original;\r\n      return f.apply(this, arguments);\r\n    }\r\n  }\r\n});\r\n\r\nfunction object(o){\r\n\tfunction F(){};\r\n\tF.prototype = o;\r\n\treturn new F;\r\n}\r\n\r\n\/\/ create a widget subclass (always in the $.ui namespace)\r\n$.ui.widget.subclass = function subclass(name) {\r\n\t$.widget('ui.'+name); \/\/ Slightly inefficient to create a widget only to discard its prototype, but it's not too bad\r\n\tvar widget = $.ui[name]; \/\/ $.widget should return the object itself!\r\n\twidget.subclass = subclass;\r\n\tvar superclass = this;\r\n\t\r\n\twidget.prototype = object(this.prototype);\r\n\targuments[0] = widget.prototype; \/\/ add the the new methods to the prototype\r\n\t$.extend.apply(null, arguments); \r\n\twidget.defaults = object(this.defaults);\r\n\twidget.getter = this.getter;\r\n\t\r\n\t\/\/ Subtle point: we want to call superclass init and destroy if they exist\r\n\t\/\/ (otherwise the user of this function would have to keep track of all that)\r\n\tif (widget.prototype.hasOwnProperty('init')){;\r\n\t  var init = widget.prototype.init;\r\n\t\twidget.prototype.init = function(){\r\n\t\t\tsuperclass.prototype.init.apply(this);\r\n\t\t\tinit.apply(this);\r\n\t\t}\r\n\t};\r\n\tif (widget.prototype.hasOwnProperty('destroy')){\r\n\t\tvar destroy = widget.prototype.destroy;\r\n\t\twidget.prototype.destroy = function(){\r\n\t\t\tdestroy.apply(this);\r\n\t\t\tsuperclass.prototype.destroy.apply(this);\r\n\t\t}\r\n\t}\r\n\treturn widget; \/\/ address my complaint above\r\n};\r\n<\/code><\/pre>\r\n