ProgressiveDisplay.tml


<!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_3.xsd">
<head>
    <link rel="stylesheet" type="text/css" href="${context:css/examples/js.css}"/>
</head>
<body>
    <h1>ProgressiveDisplay</h1>

    <noscript class="js-required">
        ${message:javascript_required}
    </noscript>     

    The ProgressiveDisplay component lets you run an operation in the background, auto-updating the page when it has finished, like this...<br/>

    <div class="eg">
        <t:ProgressiveDisplay t:id="showThings">
            <div t:type="Loop" t:source="things" t:value="thing">
                ${thing}
            </div>
        </t:ProgressiveDisplay>
    </div>  

    To use ProgressiveDisplay like this, here is all you do:<br/>

    <ol>
        <li>In the template, wrap ProgressiveDisplay around the eventual output of your operation.</li>
        <li>In the class, put the operation in a method that handles the PROGRESSIVE_DISPLAY event.</li>
    </ol>

    Behind the scenes, this is what it does:<br/>

    <ul>
        <li>As the page renders, ProgressiveDisplay ignores its body, renders "Loading..." instead, and adds some javascript to the page.</li>
        <li>When the browser displays the page, we see "Loading..." and the javascript sends an AJAX request to our page's ProgressiveDisplay.</li>
        <li>ProgressiveDisplay bubbles up a PROGRESSIVE_DISPLAY event which is caught by our page's event handler <em>onProgressiveDisplay()</em>.</li>
        <li>ProgressiveDisplay renders its body - our list of "things" - and returns it in an AJAX response.</li>
        <li>The browser partially updates the page: it replaces "Loading..." with the list of "things".</li>
    </ul>

    References: 
    <a href="http://tapestry.apache.org/5.3.7/apidocs/org/apache/tapestry5/corelib/components/ProgressiveDisplay.html">ProgressiveDisplay</a>.<br/><br/> 
    
    <a t:type="pagelink" t:page="Index" href="#">Home</a><br/><br/>
    
    <t:sourcecodedisplay src="/web/src/main/java/jumpstart/web/pages/examples/ajax/ProgressiveDisplay.tml"/>
    <t:sourcecodedisplay src="/web/src/main/java/jumpstart/web/pages/examples/ajax/ProgressiveDisplay.java"/>
    <t:sourcecodedisplay src="/web/src/main/java/jumpstart/web/css/examples/js.css"/>
</body>
</html>

ProgressiveDisplay.java


package jumpstart.web.pages.examples.ajax;

import org.apache.tapestry5.annotations.Property;


public class ProgressiveDisplay {
    static final private String[] ALL_THINGS = { "Sugar", "Spice", "All Things Nice" } ;

    // Screen fields
    
    @Property
    private String[] things;
    
    @Property
    private String thing;

    // The code

    void onProgressiveDisplay() {
        
        // Set up the list of things to display
        things = ALL_THINGS;

        // Sleep 4 seconds to simulate a long-running operation
        sleep(4000);
        
    }

    private void sleep(long millis) {
        try {
            Thread.sleep(millis);
        }
        catch (InterruptedException e) {
            // Ignore
        }
    }

}

js.css


body            { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 13px; font-weight: normal; color: #333;
                    line-height: 17px; }
h1              { font-size: 26px; line-height: 20px; } /* For IE 7 */
form            { margin: 0; }

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

a               { text-decoration: none; color: #3D69B6; }
a:hover         { text-decoration: underline; }

/* For javascript examples. */
.js-required    { color: red; display: block; margin-bottom: 14px; }
.js-recommended { color: red; display: block; margin-bottom: 14px; }

.grid           { border-collapse: collapse; border-spacing: 0; border: 1px solid #dddddd; font-size: 13px; }
.grid tr.odd        { background-color: #f8f8f8; }
.grid tr:hover      { background-color: #eeeeee; }
.grid th        { padding: 3px 5px; text-align: left; width: 130px; border: 1px solid #dddddd; 
                    font-weight: normal; background-color: #eeeeee; 
                    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fbfbfb', endColorstr='#e4e4e4'); /* for IE */
                    background: -webkit-gradient(linear, left top, left bottom, from(#fbfbfb), to(#e4e4e4)); /* for webkit browsers */
                    background: -moz-linear-gradient(top, #fbfbfb, #e4e4e4); /* for firefox 3.6+ */ }
.grid td        { padding: 3px 5px; text-align:left; }