1
0
mirror of https://github.com/Jermolene/TiddlyWiki5 synced 2024-12-11 18:50:28 +00:00
TiddlyWiki5/editions/dev/tiddlers/new/WidgetSubclassingMechanism.tid

55 lines
1.7 KiB
Plaintext
Raw Normal View History

created: 20190317121937335
modified: 20190317121937335
title: WidgetSubclassingMechanism
!! Introduction
2019-03-18 12:40:15 +00:00
The widget subclassing mechanism allows widgets to be subclassed with additional methods and properties. The subclassed widgets can either overwrite the existing definition of the baseclass widget, or it can be made available as a new widget
Widget subclasses are defined in modules of module-type `widget-subclass`. They should export the following properties:
* ''baseClass'': the name of the widget class being subclassed
* ''name'': (optional) the name to be used for the subclassed widget (defaults to overwriting the baseclass widget)
* ''constructor'': constructor function for creating the widget object
* ''prototype'': object whose properties are added to the subclass
!! Example
Here is an example of a subclass of the checkbox widget that adds logging to the event handler:
```
/*\
title: $:/my-customised-checkbox-widget.js
type: application/javascript
module-type: widget-subclass
Widget base class
\*/
(function(){
/*jslint node: true, browser: true */
/*global $tw: false */
"use strict";
exports.baseClass = "checkbox"; // Extend the <$checkbox> widget
// Specify a different name to make the subclass available as a new widget instead of overwriting the baseclass:
// exports.name = "my-enhanced-checkbox";
exports.constructor = function(parseTreeNode,options) {
this.initialise(parseTreeNode,options);
};
exports.prototype = {};
exports.prototype.handleChangeEvent = function(event) {
// Call the base class handleChangeEvent function
Object.getPrototypeOf(Object.getPrototypeOf(this)).handleChangeEvent.call(this,event);
// Print our message
console.log("Checkbox status:",this.inputDomNode.checked);
};
})();
```