Event Links Explained

Here is a blow-by-blow explanation of the previous example.
Count = 13.
Add 1
Add 2
Clear

The links above send URLs like these:

Clicking a link sends the URL. This is how the server reacts:

Q: Why would Tapestry redirect the browser to this page instead of just rendering and returning this page?
A: Tapestry uses the Post/Redirect/Get pattern. The benefit of Post/Redirect/Get is that when the next page shows, its URL will NOT be the URL that triggered the event. Instead, it will be a URL that is safe to reload, or bookmark, or return to with the Back button. The cost is 2 trips to the server, but it's worth it.

Actually, clicking on an EventLink link sends a GET, not a POST, so for EventLink it's actually Get/Redirect/Get!

Q: Why does this page have an onPassivate() method?
A: Well, to generate the page render request Tapestry needed this page's activation context, which it got by triggering the passivate event on the page. It is the duty of a passivate event handler to return the page's activation context.

References: EventLink, Page Navigation, Component Events.

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 Links Explained</h3>

    Here is a blow-by-blow explanation of the previous example.
        
    <div class="eg"> 
        <div class="alert alert-info">
            Count = ${count}.
        </div>
        
        <t:eventlink t:event="add" t:context="literal:1">Add 1</t:eventlink><br/>
        <t:eventlink t:event="add" t:context="literal:2">Add 2</t:eventlink><br/>  
        <t:eventlink t:event="clear">Clear</t:eventlink>
    </div>    

    <p>The links above send URLs like these:</p>
    <ul>
        <li><code>http://thehost/jumpstart/examples/input/eventlinks:add/1?t:ac=n</code></li>
        <li><code>http://thehost/jumpstart/examples/input/eventlinks:add/2?t:ac=n</code></li>
        <li><code>http://thehost/jumpstart/examples/input/eventlinks:clear?t:ac=n</code></li>
    </ul>

    <p>Clicking a link sends the URL. This is how the server reacts:</p>
    <ul>
        <li>Tapestry activates the page <em>examples/input/eventlinks</em>, and notifies the component, an EventLink.</li>
        <li>EventLink "bubbles up" the given event, <em>add</em> or <em>clear</em>, and its parameter(s).</li>
        <li>The page has a handler for each event: <code>onAdd(int count)</code> and <code>onClear()</code>.</li>
        <li>Both handlers return <code>void</code>, which means stay on the same page. 
            We will see other return types later, in the Return Types example.</li> 
        <li>Tapestry generates a <strong>page render request</strong> to this page, and redirects the browser to it.</li>
    </ul>

    Q: Why would Tapestry <strong>redirect</strong> the browser to this page instead of just rendering and returning this page?<br/>
    A: Tapestry uses the <a href="http://en.wikipedia.org/wiki/Post/Redirect/Get">Post/Redirect/Get</a> pattern. 
    The benefit of Post/Redirect/Get is that when the next page shows, its URL will NOT be the URL that triggered the event.  
    Instead, it will be a URL that is safe to reload, or bookmark, or return to with the Back button. 
    The cost is 2 trips to the server, but it's worth it.<br/><br/>
    
    Actually, clicking on an EventLink link sends a GET, not a POST, so for EventLink it's actually Get/Redirect/Get!<br/><br/> 
    
    Q: Why does this page have an <code>onPassivate()</code> method?<br/>
    A: Well, to generate the <em>page render request</em> Tapestry needed this page's activation context, 
    which it got by triggering the <em>passivate</em> event on the page. It is the duty of a <em>passivate</em> 
    event handler to return the page's activation context.<br/><br/>

    References: 
    <a href="http://tapestry.apache.org/5.4/apidocs/org/apache/tapestry5/corelib/components/EventLink.html">EventLink</a>,
    <a href="http://tapestry.apache.org/page-navigation.html">Page Navigation</a>, 
    <a href="http://tapestry.apache.org/component-events.html">Component Events</a>.<br/><br/>
    
    <t:pagelink t:page="Index">Home</t:pagelink><br/><br/>

    <t:tabgroup>
        <t:sourcecodetab src="/web/src/main/java/jumpstart/web/pages/examples/input/EventLinksExplained.tml"/>
        <t:sourcecodetab src="/web/src/main/java/jumpstart/web/pages/examples/input/EventLinksExplained.java"/>
        <t:sourcecodetab src="/web/src/main/resources/META-INF/assets/css/examples/olive.css"/>
    </t:tabgroup>
</body>
</html>



package jumpstart.web.pages.examples.input;

import org.apache.tapestry5.annotations.Import;
import org.apache.tapestry5.annotations.Property;

@Import(stylesheet="css/examples/olive.css")
public class EventLinksExplained {

    // Screen fields
    
    @Property
    private int count;
    
    // The code

    // onActivate() is called by Tapestry to pass in the activation context from the URL.

    void onActivate(int count) {
        this.count = count;
    }

    // onPassivate() is called by Tapestry to get the activation context to put in the URL.

    int onPassivate() {
        return count;
    }

    void onAdd(int amount) {
        count += amount;
    }
    
    void onClear() {
        count = 0;
    }

}



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