Understanding Event Processing

Understanding how events are propogated throughout the box model can enable you to pull off a lot of neat tricks when implementing more complicated widgets and user interfaces. This basic template is an interactive demonstration. Add extra traps (blocking and non-blocking) to understand exactly how traps and events work together.

<vexi xmlns:ui="vexi://ui">
    <ui:box tag="outer">
        vexi.ui.frame = thisbox;
        <ui:box id="innerbox" tag="inner" />
        
        var showTag = function(v) {
            vexi.log.info(trapee.tag+": "+trapname);
            cascade = v;
        };
        
        $innerbox.Press1 ++= showTag;
        $innerbox.KeyPressed ++= showTag;
        thisbox.Press1 ++= showTag;
        thisbox.KeyPressed ++= showTag;
        $innerbox._Press1 ++= showTag;
        $innerbox._KeyPressed ++= showTag;
        thisbox._Press1 ++= showTag;
        thisbox._KeyPressed ++= showTag;
        
    </ui:box>
</vexi>