Re: Progress bar?

[Matthias Wessendorf]

cool stuff dude!

On 11/24/06, Werner Punz <[EMAIL PROTECTED]> wrote:

Gerald Müllan schrieb:
> Hi,
>
> i would suggest the way, Werner mentioned; It`s really very easy.
>
> In a very simple example, it can be something like this:
>
> <s:pprPanelGroup id="progressBar" periodicalUpdate="500">
>    <t:div style="#{bean.style}">
>    </t:div>
> </s:pprPanelGroup>
>
> The getStyle method returns a broader width (same height, color..) on
> every poll.
>
actually this works really well, I just tried it, almost perfect.
The only problem is that you cannot trigger a direct forward once
you are done with the job, this is not a big issue...
you can render a control dynamically via ppr and then have a timing
javascript checking if the control is accessible,

here is a small example utilizing ppr to render a progress bar:

<h:form>
        <t:saveState value="#{progressor.percentage}"></t:saveState>
        <h:commandLink></h:commandLink>
        <s:pprPanelGroup id="pprmain" periodicalUpdate="500">
                <t:div id="process_done" rendered="#{progressor.percentage == 
100}"
forceId="true"/>
                <t:div id="progressbar"  binding="#{progressor.bar}"
style="#{progressor.style}">
                        <h:outputFormat binding="#{progressor.outputformat}" 
value="Login in
progress, please wait"/>
                </t:div>
        </s:pprPanelGroup>
</h:form>

<script type="text/javascript">
<!--
function forwardPage() {
        if(dojo.byId("process_done") != null)
                window.location = "../main/MainPage.jsf";
        else
                setTimeout("forwardPage();", 1000);
}
setTimeout("forwardPage();", 1000);
-->
</script>


The trick is that once it is done, the process_done div is rendered and
the javascript can trigger and can issue a forward.

Going the response way is not possible in this case because the ppr is
in an ajax context.

the backend code can look like this:

@Bean(name = "progressor", scope = Scope.REQUEST)
public class Progressor implements Serializable {
        private static final long serialVersionUID = 1L;

        int percentage = 0;

        String style = "";

        transient Div bar = null;

        transient HtmlOutputFormat outputformat = null;

        public int getPercentage() {
                return percentage;
        }

        public void setPercentage(int percentage) {
                this.percentage = percentage;
        }


        public Div getBar() {
                return bar;
        }

        public void setBar(Div bar) {

                this.bar = bar;

        }

        public String getStyle() {

                percentage += 10;
                style = "background-color: red;height: 20px; width: "
                                + (percentage * 3) + "px;";

                if (percentage > 100) {
                        percentage = 100;
                }
                outputformat.setValue(percentage+"% Login in progress, please 
wait");
                return style;
        }

        public void setStyle(String style) {
                this.style = style;
        }

        public HtmlOutputFormat getOutputformat() {
                return outputformat;
        }

        public void setOutputformat(HtmlOutputFormat outputformat) {
                this.outputformat = outputformat;
        }


}


note, this bean uses the shale tiger extensions, hence the annotations
on top of the bean class,

also in the jsp code the savestate is mandatory since we have
a request scoped bean, and we do not want to lose the percentage.

--
Matthias Wessendorf
http://tinyurl.com/fmywh

further stuff:
blog: http://jroller.com/page/mwessendorf
mail: mwessendorf-at-gmail-dot-com