1
0
mirror of https://github.com/Jermolene/TiddlyWiki5 synced 2024-12-15 20:50:27 +00:00
TiddlyWiki5/editions/dev/tiddlers/javascript-widget-tutorial/Hello World widget tutorial.tid
btheado 6af3eb539b
Adds a javascript widget tutorial to the dev tiddlywiki edition (#7016)
* Initial widget tutorials extracted from https://btheado.github.io/tw-widget-tutorial/

* Fixes for refresh behavior change
2022-10-30 16:10:12 +00:00

19 lines
1.2 KiB
Plaintext

created: 20190201232200698
modified: 20190216175629825
tags:
title: Hello World widget tutorial
type: text/vnd.tiddlywiki
Now let's create a widget which actually has output.
When tiddlywiki encounters a widget definition like `<$hello>` it will create an object which is an instance of the class which is exported by the widget code.
In addition to creating an instance of the class, tiddlywiki will call the render method of the resulting object. The render method is expected to create a dom node which will be display in place of the widget.
In the `donothing` example the core widget was exported. The core widget class doesn't have a render method which creates a dom node and that's why there is no output. Getting output requires writing a widget class which inherits from the core `Widget` class. Code in the render method of this class will display the hello world message.
The [[hello.js]] tiddler has code which accomplishes that:
{{hello.js}}
The code for importing the core widget class remains, but now we also have code to create our own class which inherits from it. In addition an implementation of the `render` method is included. Here is the result:
{{Hello World demo}}