Events and Data binding
You can add event handlers to elements in the scene or to the scene itself to handle various events. You can use them to enhance the functionality of your UI or to setup data binding between the game and the UI.
Adding event handlers
To add an event handler for a specific event of the scene click on the "Events" menu in the scene properties panel and choose the event from the dropdown list. Currently there is only one possible scene event - "On scene load" which will be triggered after the scene has finished loading.
Once you've selected the event, a window with code editor functionality will appear. The code that you add in it will be attached on 'window' object and it will be executed when the event occurs.
Adding event handlers to scene elements
You can add event handlers to elements from the Events menu of the Properties panel
Types of events handlers
Blueprint event handlers
(UE4 only feature!) You can enter the name of a Blueprint function in the game to be called when this event occurs in the game.
Note that you need to create custom event in a Blueprint that has a Coherent view as component. The Coherent view should show the HTML page created by the Editor. For more information about Coherent views please refer to the UE4 guide.
To create a custom event in UE4 open the Blueprint, right click and from the menu select custom events
Then enter the name of the custom event to match the name in the Editor.
Lastly you just need to connect the custom event to whatever action you want to occur in the game.
In the example above when the user clicks on the "button" element in the HTML page, its click event is triggered which calls the "sendHelloToGame" event in UE4 which prints a message on the screen.
Engine call event handlers
Another type of event handler that you can use is engine call. It allows you to send a call to a specific function in the game. The call can return a value from the game but can have only one handler by itself. You can also add or remove parameters that will be passed to the function in the game using the "+" and "x" icons below the call. For more information about the engine call and how you can register for it in the game please refer to relevant guide for your platform in our documentation.
Engine trigger event handlers
Another type of event handler that you can use is engine trigger. It allows you to send an event to a specific function in the game. The event cannot return a value from the game but it is possible to have multiple handlers for it in the game engine. You can also add or remove parameters that will be passed to the function in the game using the "+" and "x" icons below the call. For more information about engine trigger and how you can register for it in the game please refer to relevant guide for your platform in our documentation.
Data binding attributes
In the data binding section of the properties panel you can also specify data binding attributes that can be bound to a data model in the backend.
By combining the data binding attributes and the engine call/engine trigger/blueprint events you can setup two-way communication between the UI and the application. For more information please refer to the data-binding documentation of the relevant backend renderer.