Evenements

Les évenements se produisent lorsque l'utilisateur intérargit avec un Item.

Selon l'Item, la liste des évenements peut varier.

Interface Event

interface BaseEvent {
    Activated?: BaseScript
    Deactivated?: BaseScript
    Tapped?: BaseScript
    KeyDown?: BaseScript
    KeyUp?: BaseScript
    ContextTapped?: BaseScript
}

BaseEvent contient la liste des évenements communs à tous les Widgets.
Lorsqu'un Item possède plus d'évenements, il herite des propriétés de cette interface.

Interface BaseScript

interface BaseScript {
    Async: boolean
    ScriptCode: string[]
}

BaseScript est l'interface de base de tous les évenements, y compris les dynamisations.

Async

Type: boolean

Indique si le script doit être exécuté de façon asynchrone ou non.
Ceci sous-entend que vous utilisez l'opérateur await dans le code du script.

ScriptCode

Type: Array<string>

Permet de définir le code contenu dans le script.
Chaque ligne d'instruction doit être un membre à part du tableau.

ScriptCode = [
    `const MyHmiTag1 = HMIRuntime.Tags('MyHmiTag1').Read()`,
    `const MyHmiTag2 = HMIRuntime.Tags('MyHmiTag2').Read()`,
    `if (MyHmItag1 === true && MyHmiTag2 === true)`
    `   HMIRuntime.Tags('MyHmiTag3').Write(false)`
]

Supposons que le code de l'exemple affiché précédemment concerne un évènement OnActivated, le code compilé sera sous cette forme:

export function Myitem_OnActivated(item, x, y, modifiers, trigger) { // Ajouté automatiquement
    const MyHmiTag1 = HMIRuntime.Tags('MyHmiTag1').Read()
    const MyHmiTag2 = HMIRuntime.Tags('MyHmiTag2').Read()
    if (MyHmItag1 === true && MyHmiTag2 === true)
            HMIRuntime.Tags('MyHmiTag3').Write(false)
} // Ajouté automatiquement

Utilisation

Dans la fonction Data de votre Item, la déclaration des évènements se fait via l'utilisation de this.EventHandlers.
EventHandler est un objet ou toutes les clés sont le nom d'un évenement de l'Item choisi.
Ainsi lorsque vous déclarez une propriété dans l'objet EventHandlers, Unified Builder tentera de créer l'évenement lié à cette clé.

this.EventHandlers.Activated = { // Lors de l'activation
    Async: false,
    ScriptCode: [``]
}

this.EventHandlers.Tapped = { // Lors d'un appui
    Async: false,
    ScriptCode: [``]
}

Exemple

En reprenant l'exemple vu dans Composants:

      
import {EntryComponent} from "@adclz/unifiedbuilder/builder"
import {Button} from "@adclz/unifiedbuilder/widgets"
import {Circle} from "@adclz/unifiedbuilder/shapes"
 
const Template =
    "<div>" +
        "<my-button></my-button>" +
        "<div class="absolute flex flex-row w-full place-items-center mt-1.5 top-0">" +
            "<my-circle></my-circle>" +
        "</div>" +
    "</div>"
 
export default EntryComponent(
    () => {
        return {
            Template: Template,
            Data: {
                'my-button': new Button()
                    .Data(function () {
                        
                        this.EventHandlers.Tapped = {
                            Async: false,
                            ScriptCode: "HMIRuntime.Tags('MyHmiTag').Write(0)"
                        }
                    }),
                'my-circle': new Circle()
            }
        }
    })
 

      

Dans cet exemple, <my-button> possède un évènement OnTapped qui s'actionnent lorsque l'utilisateur appuis sur ce bouton.
L'évenement s'éxécute de façon asynchrone, et le code demande à l'hmi de changer la valeur de MyHmiTag à 0.