
<!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.

}