How to add a custom event to a NativeScript UI plugin

Question

What is required to define a custom event for a UI plugin in NativeScript?

What I'm trying to achieve is to trigger a foo event that works similar to the tap event on a Button and can be hooked into as follows:

<Page xmlns="http://schemas.nativescript.org/tns.xsd"
      xmlns:fooplugin="nativescript-foo-plugin">
  <StackLayout>
    <Button text="Tap Me!" tap="{{ onTap }}" />
    <fooplugin:FooPlugin foo="{{ onFoo }}" />
  </StackLayout>
</Page>

What I've done essentially boils down to calling the notify function with the eventName value of foo from within the plugin code (ignoring memory leak considerations):

import * as view from 'ui/core/view';

export class FooPlugin extends view.View {
  constructor() {
    super();

    setTimeout(() => {
      this.notify({
        eventName: 'foo',
        object: this,
      });

      // also tried this._emit('foo');
    }, 1000);
  }
}

Is there something else that I'm missing and that I need to do to make this work?

you could make new variable as a reference refer to `this` outside the setTimeout method. For example: ``` var that = this; setTimeout(() => { that.notify({ eventName: 'foo', object: that, });```. http://stackoverflow.com/questions/111102/how-do-javascript-closures-work — Nikolay Tsonev, Sep 01 '16 at 05:54
I could do that, but since I'm using the ES6 arrow syntax, there is no need for that as the context is taken care of automatically. — Merott, Sep 01 '16 at 07:06

score 8 · Accepted Answer · answered Sep 01 '16 at 07:28

8

create a property public static fooEvent="foo" the name of the property is important it should be eventname+ Event now it should work.

answered Sep 01 '16 at 07:28

Habib Kazemi

2,172
1
24
30

Well, thank you! I wonder why that isn't documented, or if I somehow missed it in the docs? Sometimes I wish I'd come to StackOverflow sooner. – Merott Sep 01 '16 at 16:49
yes,it's not documented yet and I struggled with this problem 3 days,finally I found all plugins did this and I tried it and worked :) – Habib Kazemi Sep 01 '16 at 19:36
damet garm agha ;) – Merott Sep 01 '16 at 19:50
@HabibKazemi Thanks! was looking for this high and low, this should be documented ! – basum Apr 26 '17 at 11:00

score 0 · Answer 2 · answered Dec 07 '17 at 19:20

create a property of your Event public static fooEvent="foo". The name is important! It has to be eventname + "Event"
overload the on-function in your declaration file index.d.ts or FooPlugin.d.ts

// Needed when on method is overriden. on(eventNames: string, callback: (data: EventData) => void, thisArg?: any);

How to add a custom event to a NativeScript UI plugin

2 Answers2