UserEvent Class - Fuse Documentation

Defines a custom event that can be raised by a component and responded to by a user of that component.

Note: See this article for a more complete explanation of user events.

User events are attached to the node they are declared in, and only that node and its children can raise and handle the event.

Usage

We put a UserEvent at the root of our component class to indicate that it can raise a particular event. Where we place our UserEvent is important, since a node has to be in its subtree to raise or handle it.

<Panel ux:Class="MyComponent">
    <UserEvent ux:Name="myEvent" />
</Panel>

This creates an event named myEvent.

Note: To make a UserEvent that can be raised or handled from anywhere in the app, declare it on the root App node, like this:
<App>
    <UserEvent ux:Name="myGlobalEvent" />
    
</App>

We can now use RaiseUserEvent to raise the event from UX.

<Panel ux:Class="MyComponent">
    <UserEvent ux:Name="myEvent" />

    <Clicked>
        <RaiseUserEvent EventName="myEvent" />
    </Clicked>
</Panel>

Or we can raise it from JavaScript.

<Panel ux:Class="MyComponent">
    <UserEvent ux:Name="myEvent" />

    <JavaScript>
        setTimeout(function() {
            myEvent.raise();
        }, 5000);
    </JavaScript>
</Panel>

When we instantiate our component, we can respond to its events using the OnUserEvent trigger.

<MyComponent>
    <OnUserEvent EventName="myEvent">
        <!-- Actions/animators go here -->
    </OnUserEvent>
</MyComponent>

Note that we are referencing our UserEvent by name even though it is declared outside of our current scope. We can do this because EventName refers to the Name of the event. Setting ux:Name also sets Name, which means that in this example, the Name will be myEvent. The actual instance of UserEvent will be resolved at runtime.

We can also handle events in JavaScript.

<JavaScript>
    function eventHandler() {
        //do something
    }

    module.exports = { eventHandler: eventHandler };
</JavaScript>

<MyComponent>
    <OnUserEvent EventName="myEvent" Handler="{eventHandler}"/>
</MyComponent>

We can pass arguments when raising an event.

myEvent.raise({
    userName: "james",
    isAdmin: false
});

This is also possible when raising the event from UX.

<RaiseUserEvent EventName="myEvent">
    <UserEventArg Name="userName" StringValue="james" />
    <UserEventArg Name="isAdmin" BoolValue="false" />
</RaiseUserEvent>

The arguments are then passed to the event handler.

<JavaScript>
    function eventHandler(args) {
        console.log("Username: " + args.userName + ", Is admin: " + args.isAdmin);
    }

    module.exports = { eventHandler: eventHandler };
</JavaScript>

<OnUserEvent EventName="myEvent" Handler="{eventHandler}" />

Location

Namespace: Fuse
Package: Fuse.UserEvents 2.9.1

Show Uno properties and methods

Interface of UserEvent

Raise(Dictionary<string, object>) uno

raise(args) js

Raises a UserEvent with an optional set of arguments.

RaiseEvent(Visual, Selector, Dictionary<string, object>) uno

UserEvent Constructor uno

Creates a new UserEvent

Inherited from Node

Add(Binding) uno

Bindings : IList of Binding ux

The list of bindings belonging to this node.

ContextParent : Node uno

The context parent is the semantic parent of this node. It is where non-UI structure should be resolved, like looking for the DataContext, a Navigation, or other semantic item.

FindByType<T> : T uno

FindNodeByName(Selector, Predicate<Node> (Node)) : Node uno

Finds the first node with a given name that satisfies the given acceptor. The serach algorithm works as follows: Nodes in the subtree are matched first, then it matches the nodes in the subtrees ofthe ancestor nodes by turn all the way to the root. If no matching node is found, the function returns null.

GetNearestAncestorOfType<T> : T uno

Insert(int, Binding) uno

IsRootingCompleted : bool uno

Whether rooting for this node is completed. Returns false if unrooting has started.

IsRootingStarted : bool uno

Whether rooting of this node has started. Note that even if this property returns true, rooting may not yet be completed for the node. See also IsRootingCompleted.

Name : Selector ux

Run-time name of the node. This property is automatically set using the ux:Name attribute.

NextSibling<T> : T uno

Returns the next sibling node of the given type.

OnDataChanged(string, object) uno

OnRooted uno

If you override OnRooted you must call base.OnRooted() first in your derived class. No other processing should happen first, otherwise you might end up in an undefined state.