Event Bubbling With Context

When an event has context parameter(s), the event handlers must match the quantity and type of parameter(s) or use an EventContext.
EventA
EventB MyComponent handles EventB then aborts its handling. Context = 'X'.
EventC
EventD
References: Event Bubbling, EventContext, ComponentResources.

Home


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!-- We need a doctype to allow us to use special characters like &nbsp; 
     We use a "strict" DTD to make IE follow the alignment rules. -->
     
<html xmlns:t="http://tapestry.apache.org/schema/tapestry_5_4.xsd">
<body class="container">
    <h3>Event Bubbling With Context</h3>
    When an event has context parameter(s), the event handlers must match the quantity and type of parameter(s) or use an EventContext.<br/>

    <div class="eg">
        <t:if t:test="pageMessage">
            <span style="color:red;">${pageMessage}<br/><br/></span>
        </t:if>

        <t:examples.component.mycomponent2 eventname="EventA" context="'W'">EventA</t:examples.component.mycomponent2><br/>
        <t:examples.component.mycomponent2 eventname="EventB" context="'X'">EventB</t:examples.component.mycomponent2><br/>
        <t:examples.component.mycomponent2 eventname="EventC" context="'Y'">EventC</t:examples.component.mycomponent2><br/>
        <t:examples.component.mycomponent2 eventname="EventD" context="'Z'">EventD</t:examples.component.mycomponent2><br/>
    </div>
    
    References: 
    <a href="http://tapestry.apache.org/component-events.html#ComponentEvents-EventBubbling">Event Bubbling</a>, 
    <a href="http://tapestry.apache.org/5.4/apidocs/org/apache/tapestry5/EventContext.html">EventContext</a>, 
    <a href="http://tapestry.apache.org/5.4/apidocs/org/apache/tapestry5/ComponentResources.html">ComponentResources</a>.<br/><br/>
    
    <t:pagelink page="Index">Home</t:pagelink><br/><br/>

    <t:tabgroup>
        <t:sourcecodetab src="/web/src/main/java/jumpstart/web/pages/examples/component/EventBubblingWithContext.tml"/>
        <t:sourcecodetab src="/web/src/main/java/jumpstart/web/pages/examples/component/EventBubblingWithContext.java"/>
        <t:sourcecodetab src="/web/src/main/resources/META-INF/assets/css/examples/plain.css"/>
        <t:sourcecodetab src="/web/src/main/java/jumpstart/web/components/examples/component/MyComponent2.tml"/>
        <t:sourcecodetab src="/web/src/main/java/jumpstart/web/components/examples/component/MyComponent2.java"/>
    </t:tabgroup>
</body>
</html>


package jumpstart.web.pages.examples.component;

import org.apache.tapestry5.EventContext;
import org.apache.tapestry5.PersistenceConstants;
import org.apache.tapestry5.annotations.Import;
import org.apache.tapestry5.annotations.Persist;
import org.apache.tapestry5.annotations.Property;

@Import(stylesheet = "css/examples/plain.css")
public class EventBubblingWithContext {

    // Screen fields

    @Property
    @Persist(PersistenceConstants.FLASH)
    private String pageMessage;

    // The code

    void onEventA(String s) {
        pageMessage = "EventA bubbled up to the page. Context = \"" + s + "\".";
    }

    void onEventB(EventContext eventContext) {
        throw new IllegalStateException("Cannot happen because MyComponent aborts handling of EventB.");
    }

    void onEventC(EventContext eventContext) {
        throw new IllegalStateException("Cannot happen because MyComponent aborts handling of EventC.");
    }

    void onEventD(EventContext eventContext) {
        pageMessage = "EventD bubbled up to the page. Context = '" + eventContext.get(String.class, 0) + "'.";
    }

    void onEventE(EventContext eventContext) {
        throw new IllegalStateException("Cannot happen because there is no EventE.");
    }

    void onEventX(EventContext eventContext) {
        pageMessage = "EventX bubbled up to the page. Context = '" + eventContext.get(String.class, 0) + "'.";
    }
}


.eg {
                margin: 20px 0;
                padding: 14px;
                border: 1px solid #ddd;
                border-radius: 6px;
                -webkit-border-radius: 6px;
                -mox-border-radius: 6px;
}


<html xmlns:t="http://tapestry.apache.org/schema/tapestry_5_4.xsd">
<t:content>
    <t:eventlink event="prop:eventname" context="prop:context"><t:body/></t:eventlink>
    <span style="color:red">${message}</span>
</t:content>
</html>


package jumpstart.web.components.examples.component;

import org.apache.tapestry5.BindingConstants;
import org.apache.tapestry5.ComponentResources;
import org.apache.tapestry5.PersistenceConstants;
import org.apache.tapestry5.annotations.Parameter;
import org.apache.tapestry5.annotations.Persist;
import org.apache.tapestry5.annotations.Property;
import org.apache.tapestry5.ioc.annotations.Inject;

/**
 * MyComponent contains an EventLink and a message that is set up by whichever event handler method is triggered.
 */
public class MyComponent2 {

    // Parameters

    @Parameter(defaultPrefix = BindingConstants.LITERAL)
    @Property
    private String eventName;

    @Parameter(defaultPrefix = BindingConstants.PROP)
    @Property
    private Object context;

    // Screen fields

    @Property
    @Persist(PersistenceConstants.FLASH)
    private String message;

    // Generally useful bits and pieces

    @Inject
    private ComponentResources componentResources;

    // The code

    boolean onEventA(String s) {
        message = "MyComponent handles EventA then bubbles it up. Context = '" + s + "'.";

        // Let EventA bubble up.
        return false;
    }

    boolean onEventB(String s) {
        message = "MyComponent handles EventB then aborts its handling. Context = '" + s + "'.";

        // Abort handling of EventB.
        return true;
    }

    boolean onEventC(String s) {
        message = "MyComponent handles EventC and triggers EventX in its place. Context = '" + s + "'.";

        // Trigger the event "eventX" on myself which will then bubble up.
        componentResources.triggerEvent("eventX", new Object[] { s }, null);

        // Abort handling of EventC.
        return true;
    }

    // We deliberately don't handle EventD, so it will bubble straight up.

}