How can we communicate from bundled JS file to UX?

How-to Discussions
1

Hi,

If I’m not mistaken the following way of raising events is deprecated:

Event.raise("Error", {message: err.message || err});

Output: Deprecated: The FuseJS/UserEvents `Raise` function is deprecated. Use the `object.raise` on a named event instead. in Fuse.Scripting.V8.Context</usr/local/share/uno/Packages/FuseJS/0.32.8/$.uno:661>

We have to be defining them in this new way:

UX:

<UserEvent ux:Name="NumberBack"/>

JavaScript:

NumberBack.raise();

Isn’t this limiting us? In my case I have bundled backend.js file which contains my app utility functions. For example my makeHttpRequest function is in this .js file and whenever an error returns or occurs in this function I want to show the error in a dialog. Since bundled .js file doesn’t know anything about the UX, the only thing that came to my mind was to raise an event that will be handled by the listening UX code. But since I can’t use events by “name” with Event.raise, I don’t know how to notify UX without knowing anything about UX.

Should I be using another mechanism to communicate from bundled JS to UX? How can this be achieved?

Thanks in advance,

Ipek

2

Hi,

UX events are local to a scope in the UX tree. Hence, to create an app-global event, it must be declared in your <App> tag:

<App>
    <UserEvent ux:Name="somethingHappened" />

If you want a global JS module to know about that event, you have to pass it in as you bootstrap it, for example:

    <JavaScript>
        var someModule = require("someModule");

        someModule.init(somethingHappened);
    </JavaScript>

Then your module knows what event to fire, and you can call .raise() on that.

3

An alternative approach might be to publish a pure JS event/callback and hook that into the UX event instead. Something like this possibly:

someModule.onSomeEvent( function() {
    somethingHappened.raise()
})

This would avoid having the module know anything about the UserEvent itself and stick to pure JS.

4

Hi,

Thanks both for the reply.

Anders, I understand your solution and I might use it but to be honest, I wouldn’t think of passing UX elements to a bundled JS module :slight_smile:

edA-qa, I understand what you mean but I can’t figure out how to create and raise a pure JS event in my JS module. All the events I’ve used in JS were related to DOM elements and I tried to look up a little bit more and couldn’t find a solution. Can you give me a small example?

Ipek

5

By pure JS event I mean a a plain callback. For example, the onSomeEvent function might be implemented like this in the module:

var someEventCallback = null
exports.onSomeEvent( callback ) {
    someEventCallback = callback
}

Plus a helper function to raise the event from JS (you might wish to provide arguments as well).

function raiseSomeEvent() {
    if (someEventCallback) {
        someEventCallback()
    }
}

This supports only a single listener, which is probably all that you need if you’re just attaching them to a UX event.

6

Thanks edA-qa,

Now I understand :slight_smile: and single listener will be enough in this situation.