You are viewing a plain text version of this content. The canonical link for it is here.
Posted to users@tapestry.apache.org by Alfonso Quiroga <al...@gmail.com> on 2009/08/26 18:40:23 UTC

sharing my loading-page function

Hi! I'm new in T5 and I've succeed with showing "loading..." in the
page, just creating a mixin, and I wanted to share it.
First, I use lightbox.js, a very small js lib, (6kb, 1kb compressed
when tapestry uses gzip). This lib puts the background dark and a box
appears, just what I wanted.
OK, as I wanted this en ALL pages, i have created an alias for
ClientInfrastructure, setting "my own" tapestry.js, and lightbox.js
(and my styles of course).

I asume here you created ClientInfrastructureCustom class (it's very
easy, check the defaut ClientInfrastructureImpl)
Creating the alias to ClientInfrastructure is easy, in bind() method
you can put this
       binder.bind(ClientInfrastructure.class,
ClientInfrastructureCustom.class).withId("ClientInfrastructureCUSTOM");
then, in the same module, put..
    public static void
contributeAlias(@InjectService("ClientInfrastructureCUSTOM")
ClientInfrastructure cInfraService, Configuration<AliasContribution>
configuration)
    	  {
    	     configuration.add(AliasContribution.create(ClientInfrastructure.class,
cInfraService));
    	  }

That's all, now your client will use the infrastructure you declared
in ClientInfrastructureCustom, with your own js files and css.

The ShowLoadingmixin is very small, just observes the "click" of the
element, and it attaches a js function that wait 5 seconds and shows
"loading...."

THE problem was validation, i.e. if you use the mixin with a SUBMIT
button, and you had errors in validations, the "loading..." was
showing too. The hack for this was very easy:
I use a js variable to know if there are validations errors. As I have
MY own tapestry.js, I changed showValidationMessage method, and aded
this line:
     formErrorInThisPage = true;
So, if any validation error occurs, that flag will be true. In the
other side, the prepareForLoading() js-function is very easy too:

   function prepareLoadingBox() {
	formErrorInThisPage = false;
	setTimeout(function() {
                 if (!formErrorInThisPage)
                        loadingBox.activate(); $("loadingBox").focus();
             }, 5000);
   }

First it puts the flag to off. Then, in 4 seconds... it checks the
flag (validation error could have happend, changing the flag).
Remember the focus() to the "loading" DIV, If you don't... user can
still type in backgounds inputs (and submit pressing enter)

Hope this is util for someone, it is for me!

---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@tapestry.apache.org
For additional commands, e-mail: users-help@tapestry.apache.org