Creating widgets

[TonyM]

Folks,

As my expertise develops, I would be interested in moving a couple of my macros into widgets. I understand widgets could be anything, but many can also be similar.

I am particularly interested in widgets that have an open and close like the <$list and </$list where the content is in the middle,

Are their any primers or guides in addition to https://tiddlywiki.com/dev/#WidgetModules ? 

I am interested in a template widget that encode the critical items and indicates where some changes can be applied, kind of for the "script kiddies".

thanks Tony 

[PMario]

On Tuesday, July 10, 2018 at 2:14:16 AM UTC+2, TonyM wrote:

...

I am interested in a template widget that encode the critical items and indicates where some changes can be applied, kind of for the "script kiddies".

I have no idea, what you want to achieve. Can you be a bit more specific?

-m

[BJ]

Hi Tony,

There are two aspects (at least) to widgets - creating the widget tree and creating the dom tree.

I think the vars widget (vars.js) shows the main features of constructing the widget tree:

the main construction part of a widget is the render() function (which calls execute):

VarsWidget.prototype.execute = function() {
    // Parse variables
    var self = this;
    $tw.utils.each(this.attributes,function(val,key) {
        if(key.charAt(0) !== "$") {
            self.setVariable(key,val); //-----> create variables in this widget
        }
    });
    // Construct the child widgets
    this.makeChildWidgets(); //----> create the immediate child widgets -- this will use this.parseTreeNode as the source for the child widgets
};

then render the created child widgets (this calls their render() functions):

this.renderChildren(parent,nextSibling);

this.parseTreeNode is the nodes  between the <$vars> and </$vars>



If you look in the transclusion, or macrocall widget,  you will see

this.makeChildWidgets(parseTreeNodes);

- here instead of using the nodes between <$transclude> and </$transclude> the transclude widget creates a new parse tree from the transcluded tiddler and inserts its nodes.

On Tuesday, July 10, 2018 at 2:14:16 AM UTC+2, TonyM wrote: