Raise UserEvent from JS inside Class

How-to Discussions
1

Hi guys, I’m having problems trying to raise a UserEvent from JS. i made a simple example of what i’m trying to do:

<App>
    <CustomButton Text="Custom Button" />

    <UserEvent ux:Name="MyEvent"/>
    <OnUserEvent EventName="MyEvent" Handler="{eventHandler}" />

    <Button ux:Class="CustomButton">
        <JavaScript>
            function CustomButtonClick(){
                MyEvent.raise();
            }

            module.exports = {
                CustomButtonClick: CustomButtonClick
            }
        </JavaScript>

        <Clicked>
            <!--Callback Handler="{CustomButtonClick}" /-->
            <RaiseUserEvent Name="MyEvent" />
        </Clicked>
    </Button>

    <JavaScript>
        function eventHandler(args){
            console.log("The event was triggered!");
        }

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

In this case, when i click on the CustomButton, it raises the event and everything works perfectly, even when the event it’s created outside my custom element, but if i try to raise it from the JS that is inside the same custom button class (the commented code), the app throws me an error:

Source Line: MyEvent.raise(); JS stack trace: ReferenceError:MyEvent is not defined at CustomButtonClick (MainView.ux:10:17)

Can you please explain me why i can raise the event from the UX part of the class but no from the js part?, Do i have a way to raise it from the JS indide that class?

Thanks for your help and keep the nice work!

2

The ux:class on your button introduces a new scope: MyEvent is not visible inside it since it’s related to the parent scope. RaiseUserEvent works because it’s doing a lookup by name, through it’s node ancestors, on demand.

An ux:InnerClass should retain the scope. Or use an ux:Include on the shared code block. We’re not entirely clear on exactly how you should achieve what you’re doing since it wasn’t an intended use-case. A custom component (ux:Class) should be exposing it’s own events and the user of that class should be catching those events.

If you really want the runtime lookup then you have to use RaiseUserEvent for now. You can trigger such a dispatch from JS by putting it inside a Timeline and calling pulse on that timeline. Again, probably not a best practice, but it should work.

Perhaps if you could explain your high-level use-case I could come up with a clearer recommendation.

You should use EventName on RaiseUserEvent in any case.

3

Hi edA-qa mort-ora-y

Well, maybe what im trying to do, can be done with something else and not using events… i’ll try to explain what i need:

  • I have a class named PopUp, wich emulates the “modal” view on iOS(i don’t know the name in android for that type of view), i use it like a class because i have at least 2 views who needs to be displayed like this.

  • An instance of this class is used to retrieve data from de phone, contacts in this case, show the list to the user, and let him save 1 or more records into the app.

Once the user press the “save” button, i need to know from outside the instance that the user really pressed OK (Cancel is the other option) and get the list of records “to save”, so i can update the list of contacts of the app with those records (“main” list).

I need the “save record list” because i can’t just simply refresh the main list for asynchronous reasons…

Like i said, maybe using events is not the best way to accomplish what i need.

Thanks a lot for your help