Trying to create an action widget... and failing.

[myst...@gmail.com]

I am trying to create a simple testing widget that listens for a message, and creates a new tiddler.

I've had no louck with this, and as best i can tell, my widgets event handler is never triggering.

Any assistance in pointing out what i am doing wrong would be greatly appreciated.

Thanks,
  -- Kenn

/*\

title: myTestWidget
type: application/javascript
module-type: widget

myTest widget

\*/
(function(){

/*jslint node: true, browser: true */
/*global $tw: false */
"use strict";

var Widget = require("$:/core/modules/widgets/widget.js").widget;

var myTestWidget = function(parseTreeNode,options) {
    this.initialise(parseTreeNode,options);
    this.addEventListeners([
        {type: "myTest-message", handler: "handlemyTestEvent"}
    ]);
};

/*
Inherit from the base widget class
*/
myTestWidget.prototype = new Widget();

/*
Render this widget into the DOM
*/
myTestWidget.prototype.render = function(parent,nextSibling) {
    this.parentDomNode = parent;
    this.computeAttributes();
    this.execute();
    this.renderChildren(parent,nextSibling);
};

/*
Compute the internal state of the widget
*/
myTestWidget.prototype.execute = function() {
    // Get attributes

    // Construct the child widgets
    this.makeChildWidgets();
};

/*
Selectively refreshes the widget if needed. Returns true if the widget or any of its children needed re-rendering
*/
myTestWidget.prototype.refresh = function(changedTiddlers) {
    var changedAttributes = this.computeAttributes();
    if(changedAttributes.story || changedAttributes.history) {
        this.refreshSelf();
        return true;
    } else {
        return this.refreshChildren(changedTiddlers);
    }
};


myTestWidget.prototype.handlemyTestEvent = function(event){
    var loginTiddler = this.wiki.getTiddler("$:/state/login");

    var newTiddler = new $tw.Tiddler(this.wiki.getCreationFields(),tiddler,{
          title: "DebugTiddler",
          "draft.title": undefined,
          "draft.of": undefined
    },this.wiki.getModificationFields());
    this.wiki.addTiddler(newTiddler);
};

exports.mytest = myTestWidget;

})();

[PMario]

Hi,
How do you activate your widget?
-m

[BJ]

Hi

I gave it a try like this

<$mytest>
<$button message="myTest-message">
x
</$button>
</$mytest>

you need to remove the  'tiddler' here - it is not needed and causes an error

var newTiddler = new $tw.Tiddler(this.wiki.getCreationFields(),tiddler,{

all the best
BJ

[myst...@gmail.com]

Thank you both.

I wasn't even getting the error.

It's because i was not enclosing my button in <$mytest>.

I think this is because i was copying from the Navigate Widget, but i was under the assumption that since my widget is 'loaded' on page load,
that the listener was already in the tree, and thus my message would be intercepted.

looking at the documentation, the implication is that there is 2 types of widgets, rendering widgets that are invoked via <$widget></$widget>
and action widgets, which are invoked via messages.  The examples given don't explicitly show that you have to enclose your message sender in the widget that will listen for the message.
(the usual example is the navigator widget, and so the examples don't show the enclosing toplevel widget.)

[Tobias Beer]

Hi Kenn,

 

(the usual example is the navigator widget, and so the examples don't show the enclosing toplevel widget.)

That would generally be a button widget.

As you noticed, you need to separate between widgets and ActionWidgets.

Your OP does not implement an ActionWidget as you find examples of on tiddlywiki.com / in the github repo:

up top: https://github.com/Jermolene/TiddlyWiki5/tree/master/core/modules/widgets

best -tb