
<!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 Variations</h3>

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

    More than one ProgressiveDisplay can be used on a page.

    <div class="eg">
        <t:progressivedisplay t:id="showOne">
            Operation One has ended.
        </t:progressivedisplay><br/>
    
        <t:progressivedisplay t:id="showTwo">
            Operation Two has ended.
        </t:progressivedisplay>
    </div>

    ProgressiveDisplay can have a context.

    <div class="eg">
        <t:progressivedisplay t:id="showThree" t:context="literal:3000">
            Operation Three slept ${sleepTimeMillis} milliseconds.
        </t:progressivedisplay>
     </div>

    ProgressiveDisplay can be modified by css.

    <div class="eg">
        <t:progressivedisplay t:id="showFour" class="with-spinner">
            Operation Five has ended.
        </t:progressivedisplay>
    </div>

    ProgressiveDisplay can display a block instead of "Loading...".

    <div class="eg">
        <t:progressivedisplay t:id="showFive" t:initial="block:loadingBlock">
            Operation Four has ended.
        </t:progressivedisplay>
    </div>

    ProgressiveDisplay does not have to wrap the eventual output - the event handler can return a renderable object instead.
    
    <div class="eg">
        <t:progressivedisplay t:id="showSix"/>
    </div>
    
    <t:block t:id="loadingBlock">
        <div style="font-weight: bold;">
            Please wait for operation four to end...
        </div>
    </t:block>

    <t:block t:id="resultSixBlock">
        Operation Six has ended.
    </t:block>

    References: 
    <a href="http://tapestry.apache.org/5.4/apidocs/org/apache/tapestry5/corelib/components/ProgressiveDisplay.html">ProgressiveDisplay</a>,
    <a href="http://tapestry.apache.org/injection.html">Injection with Components</a>, 
    <a href="http://tapestry.apache.org/5.4/apidocs/org/apache/tapestry5/Block.html">Block</a>, 
    <a href="http://tapestry.apache.org/5.4/apidocs/org/apache/tapestry5/ioc/annotations/Inject.html">@Inject</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/ProgressiveDisplayVariations.tml"/>
        <t:sourcecodetab src="/web/src/main/java/jumpstart/web/pages/examples/ajax/ProgressiveDisplayVariations.java"/>
        <t:sourcecodetab src="/web/src/main/resources/META-INF/assets/css/examples/progressivedisplayvariations.css"/>
    </t:tabgroup>
</body>
</html>


package jumpstart.web.pages.examples.ajax;

import org.apache.tapestry5.Block;
import org.apache.tapestry5.annotations.Import;
import org.apache.tapestry5.annotations.Property;
import org.apache.tapestry5.ioc.annotations.Inject;

@Import(stylesheet = "css/examples/progressivedisplayvariations.css")
public class ProgressiveDisplayVariations {

    // Screen fields

    @Property
    private int sleepTimeMillis;

    // Generally useful bits and pieces

    @Inject
    private Block resultSixBlock;

    // The code

    void onProgressiveDisplayFromShowOne() {
        // Sleep 1 seconds to simulate a long-running operation
        sleep(1000);
    }

    void onProgressiveDisplayFromShowTwo() {
        // Sleep 2 seconds to simulate a long-running operation
        sleep(2000);
    }

    void onProgressiveDisplayFromShowThree(int sleepTimeMillis) {
        this.sleepTimeMillis = sleepTimeMillis;
        // Sleep 3 seconds to simulate a long-running operation
        sleep(sleepTimeMillis);
    }

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

    void onProgressiveDisplayFromShowFive() {
        // Sleep 5 seconds to simulate a long-running operation
        sleep(5000);
    }

    Block onProgressiveDisplayFromShowSix() {
        // Sleep 6 seconds to simulate a long-running operation
        sleep(6000);
        return resultSixBlock;
    }

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

.with-spinner .t-loading {
    display: inline;
    width: auto;
    font-weight: bold;
    padding-right: 20px;
    background: url(../../tapestry5/ajax-loader.gif) no-repeat right top;
    z-index: 1000;
}