[TRINIDAD] How to display "Page loading..." while page is loading?

[Paul Spencer-3]

I have an action that takes a few seconds to complete.  I would like the
user to see something link "Page loading..." while the action is
processing.  The action loads a List from a series of database queries
and the page simply displays the list in a table.  Looking at the
examples, it appears that <tr:statusIndicator"> is part of the answer.

My question is how should I do this?

Paul Spencer

[Markus Döring]

Hi Paul,
if the action uses trindad PPR, <tr:statusIndicator> is what you're looking for.
You just need to include it somewhere on the page, and always when PPR is doing something, a loading icon is displayed. You can change the icon via trinidad skinning.

If no PPR is involved, it gets a bit tricky. You could use a JavaScript to display some hidden image when the button is clicked. When page loading is done, it should always be invisible.

Regards
Markus Döring


-----Ursprüngliche Nachricht-----
Von: Paul Spencer [mailto:paulsp@...]
Gesendet: Mittwoch, 14. Mai 2008 14:54
An: MyFaces Discussion
Betreff: [TRINIDAD] How to display "Page loading..." while page is loading?

I have an action that takes a few seconds to complete.  I would like the
user to see something link "Page loading..." while the action is
processing.  The action loads a List from a series of database queries
and the page simply displays the list in a table.  Looking at the
examples, it appears that <tr:statusIndicator"> is part of the answer.

My question is how should I do this?

Paul Spencer

[Pedro Calcao]

Hi,

If all you want is to show the text while the page is processing PPR, you just need to define the "busy" facet of the tr:statusIndicator component. If any of the facets is defined, none of the default icons will be displayed.

You can use a tr:outputText or something more complex inside the facet, depends on what you want to show.


Best regards,
Pedro

On Wed, May 14, 2008 at 2:26 PM, Döring Markus <Markus.Doering@...> wrote:

Hi Paul,
if the action uses trindad PPR, <tr:statusIndicator> is what you're looking for.
You just need to include it somewhere on the page, and always when PPR is doing something, a loading icon is displayed. You can change the icon via trinidad skinning.

If no PPR is involved, it gets a bit tricky. You could use a JavaScript to display some hidden image when the button is clicked. When page loading is done, it should always be invisible.

Regards
Markus Döring


-----Ursprüngliche Nachricht-----
Von: Paul Spencer [mailto:paulsp@...]
Gesendet: Mittwoch, 14. Mai 2008 14:54
An: MyFaces Discussion
Betreff: [TRINIDAD] How to display "Page loading..." while page is loading?

I have an action that takes a few seconds to complete.  I would like the
user to see something link "Page loading..." while the action is
processing.  The action loads a List from a series of database queries
and the page simply displays the list in a table.  Looking at the
examples, it appears that <tr:statusIndicator"> is part of the answer.

My question is how should I do this?

Paul Spencer

--
Os melhores cumprimentos,

Pedro Calção

[Matthias Wessendorf-2]

Hi Paul!

In my facesgoodies I show a similar "loading..." DIV when a user gets  
deleted. (http://code.google.com/p/facesgoodies/)

On http://slideshare.net/mwessendorf you can find my ajax world  
slides. There is the same example using Trinidad's Javascript api.

-M

Sent from my iPod.

Am 14.05.2008 um 14:54 schrieb Paul Spencer <paulsp@...>:

> I have an action that takes a few seconds to complete.  I would like  
> the user to see something link "Page loading..." while the action is  
> processing.  The action loads a List from a series of database  
> queries and the page simply displays the list in a table.  Looking  
> at the examples, it appears that <tr:statusIndicator"> is part of  
> the answer.
>
> My question is how should I do this?
>
> Paul Spencer
>

[Paul Spencer-4]

Markus,

 > If no PPR is involved, it gets a bit tricky. You could use a
 > JavaScript to display some hidden image when the button is clicked.
 > When page loading is done, it should always be invisible.

Can you expand on this?

Paul Spencer

[Paul Spencer-3]

Markus,

> If no PPR is involved, it gets a bit tricky. You could use a
> JavaScript to display some hidden image when the button is clicked.
> When page loading is done, it should always be invisible.

Can you expand on this?

Paul Spencer

[Markus Döring]

I was thinking of something like this:


<tr:document>
        <tr:image id="busyIconIndicator" source="/busy/image/url.gif" inlineStyle="display:none" />
        <tr:commandButton text="push" onclick="document.getElementById('busyIconIndicator').style.display='inline'" >
                <f:actionListener ... />
        </tr:commandButton>
</tr:document>
       
Not tested it so don't know if this will work just like this, but it's a starting point.

Regards
Markus Döring



-----Ursprüngliche Nachricht-----
Von: Paul Spencer [mailto:paulsp@...]
Gesendet: Mittwoch, 14. Mai 2008 16:27
An: MyFaces Discussion
Betreff: Re: AW: [TRINIDAD] How to display "Page loading..." while page is loading?

Markus,

> If no PPR is involved, it gets a bit tricky. You could use a
> JavaScript to display some hidden image when the button is clicked.
> When page loading is done, it should always be invisible.

Can you expand on this?

Paul Spencer

[Daniel Niklas]

Hi,

we have the same requirements: we need a statusIndicator, that works for non-PPR-requests, too.

Markus Döring wrote:

I was thinking of something like this:

<tr:document>
        <tr:image id="busyIconIndicator" source="/busy/image/url.gif" inlineStyle="display:none" />
        <tr:commandButton text="push" onclick="document.getElementById('busyIconIndicator').style.display='inline'" >
                <f:actionListener ... />
        </tr:commandButton>
</tr:document>

This might be an idea for a solution, but we can't put the necessary onclick-code to every command component.

How can i be notified (in javascript) before the request is send to the server?

Best regards
Daniel

[Markus Döring]

Maybe
<tr:form onsubmit="document.getElementById('busyIconIndicator').style.display='inline'">
        ...
</tr:form>

works?

-----Ursprüngliche Nachricht-----
Von: Daniel Niklas [mailto:conti@...]
Gesendet: Donnerstag, 15. Mai 2008 12:33
An: users@...
Betreff: Re: AW: AW: [TRINIDAD] How to display "Page loading..." while page is loading?


Hi,

we have the same requirements: we need a statusIndicator, that works for
non-PPR-requests, too.


Markus Döring wrote:

>
> I was thinking of something like this:
>
> <tr:document>
> <tr:image id="busyIconIndicator" source="/busy/image/url.gif"
> inlineStyle="display:none" />
> <tr:commandButton text="push"
> onclick="document.getElementById('busyIconIndicator').style.display='inline'"
> >
> <f:actionListener ... />
> </tr:commandButton>
> </tr:document>
>

This might be an idea for a solution, but we can't put the necessary
onclick-code to every command component.

How can i be notified (in javascript) before the request is send to the
server?

Best regards
Daniel

--
View this message in context: http://www.nabble.com/-TRINIDAD--How-to-display-%22Page-loading...%22-while-page-is-loading--tp17230394p17250284.html
Sent from the MyFaces - Users mailing list archive at Nabble.com.

[Daniel Niklas]

Hi,

Markus Döring wrote:

Maybe
<tr:form onsubmit="document.getElementById('busyIconIndicator').style.display='inline'">
        ...
</tr:form>

works?

Ok, this seems to work:

...

function showStatusBusy() {
    document.getElementById("statusIndicator::busy").style.display="inline";
    document.getElementById("statusIndicator::ready").style.display="none";
}

...

<tr:form onsubmit="showStatusBusy();">

...

  <tr:statusIndicator id="statusIndicator">
      <f:facet name="busy">
          <tr:outputLabel value="loading ..." />
      </f:facet>
      <f:facet name="ready">
        <tr:outputLabel value="ready" />
      </f:facet>
  </tr:statusIndicator>

...


But isn't there a solution whith (trinidad) javascript, where i can get the information, that a request will be send? I could avoid the onload within the form component then.

best regards
Daniel