ProgressiveDisplay

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

To use ProgressiveDisplay like this, here is all you do:

  1. In the template, wrap ProgressiveDisplay around the eventual output of your operation.
  2. In the class, put the operation in a method that handles the PROGRESSIVE_DISPLAY event.

Behind the scenes, this is what it does:

References: ProgressiveDisplay.

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>ProgressiveDisplay</h3>

    <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">
            <t:loop source="things" value="thing" element="div">
                ${thing}
            </t:loop>
        </t:progressivedisplay>
    </div>  

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

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

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

    <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.4/apidocs/org/apache/tapestry5/corelib/components/ProgressiveDisplay.html">ProgressiveDisplay</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/ajax/ProgressiveDisplay.tml"/>
        <t:sourcecodetab src="/web/src/main/java/jumpstart/web/pages/examples/ajax/ProgressiveDisplay.java"/>
        <t:sourcecodetab src="/web/src/main/resources/META-INF/assets/css/examples/js.css"/>
    </t:tabgroup>
</body>
</html>



package jumpstart.web.pages.examples.ajax;

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

@Import(stylesheet = "css/examples/js.css")
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
        }
    }

}



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

.js-required {
                color: red;
                display: block;
                margin-bottom: 14px;
}

.js-recommended {
                color: red;
                display: block;
                margin-bottom: 14px;
}