You are viewing a plain text version of this content. The canonical link for it is here.
Posted to users@tapestry.apache.org by Muhammad Mohsen <m....@gmail.com> on 2010/10/28 21:03:44 UTC

[TapestryHotelBooking Demo]AjaxLoader component questions

Hi All,

Yet another great contribution and also a great component to facniate me.
Thank you all for the effort done and for the tapestry team to create such a
dynamic framework :)

Now to the component. Here it is for fast reference:
(I removed the package declaration and the imports)

/**

 * Append a loader icon to wait for zone update completion.

 */

public class AjaxLoader {

/**

 * The class of the element that shows the ajax loader image

 */

@Parameter(value = "loading", defaultPrefix = BindingConstants.LITERAL)

private String loaderClass;


> /**

 * The element to render. The default is derived from the
> component template.

 */

@Parameter(defaultPrefix = BindingConstants.LITERAL)

private String element;


> /**

 * The zone to observe.

 */

@Parameter(required = true, allowNull = false, defaultPrefix =
> BindingConstants.LITERAL)

private String zone;


> /**

 * The id of the element that triggers the zone update.

 */

@Parameter(required = true, allowNull = false, defaultPrefix =
> BindingConstants.LITERAL)

private String trigger;


> @Inject

private JavaScriptSupport javascriptSupport;


> @Inject

private ComponentResources resources;


> private String loader;


> String defaultElement() {

return resources.getElementName("div");

}


> @BeginRender

void initAjaxLoader(MarkupWriter writer) {

loader = javascriptSupport.allocateClientId("loader");


> JSONObject data = new JSONObject();

data.put("zone", zone);

data.put("trigger", trigger);

data.put("loader", loader);

System.out.println(data);

javascriptSupport.addInitializerCall(InitializationPriority.LATE,
> "initAjaxLoader", data);

}


> @AfterRender

void writeAjaxLoader(MarkupWriter writer) {

writer.element(element, "id", loader, "class", this.loaderClass, "style",
> "display:none;");

writer.end();

}

}


* After porting this component to my application, I applied it to a link.
The image is shown and hidden well. But I found out that the method the link
calls, is being called many times. The JS console says what's supposed to
mean that the call stack exploded due to numerous method calls.
* I'm not sure If I fully understand the @Environmental annotation but
shouldn't JavaScriptSupport here be annotated as environmental ?
* About the "defaultElement()" method. After reading the documentation I
understood it's supposed to return the tag name of the component. In our
case it's "span", "div" is simply ignored.

a.who calls this method, when and why ?
b.why did we provide div ? In case the component exists solely without a
container ? Although I can't currently imagine if that's possible, may be it
is.


Thank you for your time :)
-- 
*Regards,*
*Muhammad Gelbana
Java Software Programmer*

Re: [TapestryHotelBooking Demo]AjaxLoader component questions

Posted by Christophe Cordenier <ch...@gmail.com>.
Thanks for feedback ! You can fill an issue on github, i'll have a closer
look before releasing 1.1

2010/10/29 Muhammad Mohsen <m....@gmail.com>

> I just solved id :)
>
> I debugged through tapestry javascript and found that the link loading the
> zone has an onclick JS code saying something like:
>
> javascript:return Tapestry.waitForPage(*someting*)
>
> It's built in code so we don't actually need it.
> Now this method returns "true" whenever the variable "Tapestry.pageLoaded"
> is true.
>
> Now here comes the part where I can only assume what happened, so I'll
> leave
> the explanation to the gurus :)
>
> I think that the function kept returning true, which invokes the onclick
> handler for that link, which goes back into tapestry.waitForPage method and
> into an endless loop which made numerous backend calls...and that's just
> guessing :D
>
> So i changed the even from trigger_zone_update_event to zone_updated_event
> which I suppose makes more sense.
>
> The highlighted part here should be replaced by "*ZONE_UPDATED_EVENT*".
>
> } else if (trigger.tagName == "A") { //I added this condition, it's a
> personal flavor, I like strict conditions
> trigger.observeAction(Tapestry.*TRIGGER_ZONE_UPDATE_EVENT*, function() {
> $(params.loader).show();
> });
> }
>
>
> May be it's just my project that needs such modification, I'm not sure. But
> if it's a general case then I think it should be committed for everyone's
> benefit.
>
> Thanks for everyone who tried to help :)
>
>
>
>
> On Thu, Oct 28, 2010 at 9:03 PM, Muhammad Mohsen <m.gelbana@gmail.com
> >wrote:
>
> > Hi All,
> >
> > Yet another great contribution and also a great component to facniate me.
> > Thank you all for the effort done and for the tapestry team to create
> such a
> > dynamic framework :)
> >
> > Now to the component. Here it is for fast reference:
> > (I removed the package declaration and the imports)
> >
> > /**
> >
> >  * Append a loader icon to wait for zone update completion.
> >
> >  */
> >
> > public class AjaxLoader {
> >
> >  /**
> >
> >  * The class of the element that shows the ajax loader image
> >
> >  */
> >
> >  @Parameter(value = "loading", defaultPrefix = BindingConstants.LITERAL)
> >
> >  private String loaderClass;
> >
> >
> >>  /**
> >
> >  * The element to render. The default is derived from the
> >> component template.
> >
> >  */
> >
> >  @Parameter(defaultPrefix = BindingConstants.LITERAL)
> >
> >  private String element;
> >
> >
> >>  /**
> >
> >  * The zone to observe.
> >
> >  */
> >
> >  @Parameter(required = true, allowNull = false, defaultPrefix =
> >> BindingConstants.LITERAL)
> >
> >  private String zone;
> >
> >
> >>  /**
> >
> >  * The id of the element that triggers the zone update.
> >
> >  */
> >
> >  @Parameter(required = true, allowNull = false, defaultPrefix =
> >> BindingConstants.LITERAL)
> >
> >  private String trigger;
> >
> >
> >>  @Inject
> >
> >  private JavaScriptSupport javascriptSupport;
> >
> >
> >>  @Inject
> >
> >  private ComponentResources resources;
> >
> >
> >>  private String loader;
> >
> >
> >>  String defaultElement() {
> >
> >  return resources.getElementName("div");
> >
> >  }
> >
> >
> >>  @BeginRender
> >
> >  void initAjaxLoader(MarkupWriter writer) {
> >
> >  loader = javascriptSupport.allocateClientId("loader");
> >
> >
> >>  JSONObject data = new JSONObject();
> >
> >  data.put("zone", zone);
> >
> >  data.put("trigger", trigger);
> >
> >  data.put("loader", loader);
> >
> >  System.out.println(data);
> >
> >  javascriptSupport.addInitializerCall(InitializationPriority.LATE,
> >> "initAjaxLoader", data);
> >
> >  }
> >
> >
> >>  @AfterRender
> >
> >  void writeAjaxLoader(MarkupWriter writer) {
> >
> >  writer.element(element, "id", loader, "class", this.loaderClass,
> "style",
> >> "display:none;");
> >
> >  writer.end();
> >
> >  }
> >
> > }
> >
> >
> > * After porting this component to my application, I applied it to a link.
> > The image is shown and hidden well. But I found out that the method the
> link
> > calls, is being called many times. The JS console says what's supposed to
> > mean that the call stack exploded due to numerous method calls.
> > * I'm not sure If I fully understand the @Environmental annotation but
> > shouldn't JavaScriptSupport here be annotated as environmental ?
> > * About the "defaultElement()" method. After reading the documentation I
> > understood it's supposed to return the tag name of the component. In our
> > case it's "span", "div" is simply ignored.
> >
> > a.who calls this method, when and why ?
> > b.why did we provide div ? In case the component exists solely without a
> > container ? Although I can't currently imagine if that's possible, may be
> it
> > is.
> >
> >
> > Thank you for your time :)
> > --
> > *Regards,*
> > *Muhammad Gelbana
> > Java Software Programmer*
> >
>
>
>
> --
> *Regards,*
> *Muhammad Gelbana
> Java Software Programmer*
>



-- 
Regards,
Christophe Cordenier.

Committer on Apache Tapestry 5
Co-creator of wooki @wookicentral.com

Re: [TapestryHotelBooking Demo]AjaxLoader component questions

Posted by Muhammad Mohsen <m....@gmail.com>.
I just solved id :)

I debugged through tapestry javascript and found that the link loading the
zone has an onclick JS code saying something like:

javascript:return Tapestry.waitForPage(*someting*)

It's built in code so we don't actually need it.
Now this method returns "true" whenever the variable "Tapestry.pageLoaded"
is true.

Now here comes the part where I can only assume what happened, so I'll leave
the explanation to the gurus :)

I think that the function kept returning true, which invokes the onclick
handler for that link, which goes back into tapestry.waitForPage method and
into an endless loop which made numerous backend calls...and that's just
guessing :D

So i changed the even from trigger_zone_update_event to zone_updated_event
which I suppose makes more sense.

The highlighted part here should be replaced by "*ZONE_UPDATED_EVENT*".

} else if (trigger.tagName == "A") { //I added this condition, it's a
personal flavor, I like strict conditions
trigger.observeAction(Tapestry.*TRIGGER_ZONE_UPDATE_EVENT*, function() {
$(params.loader).show();
});
}


May be it's just my project that needs such modification, I'm not sure. But
if it's a general case then I think it should be committed for everyone's
benefit.

Thanks for everyone who tried to help :)




On Thu, Oct 28, 2010 at 9:03 PM, Muhammad Mohsen <m....@gmail.com>wrote:

> Hi All,
>
> Yet another great contribution and also a great component to facniate me.
> Thank you all for the effort done and for the tapestry team to create such a
> dynamic framework :)
>
> Now to the component. Here it is for fast reference:
> (I removed the package declaration and the imports)
>
> /**
>
>  * Append a loader icon to wait for zone update completion.
>
>  */
>
> public class AjaxLoader {
>
>  /**
>
>  * The class of the element that shows the ajax loader image
>
>  */
>
>  @Parameter(value = "loading", defaultPrefix = BindingConstants.LITERAL)
>
>  private String loaderClass;
>
>
>>  /**
>
>  * The element to render. The default is derived from the
>> component template.
>
>  */
>
>  @Parameter(defaultPrefix = BindingConstants.LITERAL)
>
>  private String element;
>
>
>>  /**
>
>  * The zone to observe.
>
>  */
>
>  @Parameter(required = true, allowNull = false, defaultPrefix =
>> BindingConstants.LITERAL)
>
>  private String zone;
>
>
>>  /**
>
>  * The id of the element that triggers the zone update.
>
>  */
>
>  @Parameter(required = true, allowNull = false, defaultPrefix =
>> BindingConstants.LITERAL)
>
>  private String trigger;
>
>
>>  @Inject
>
>  private JavaScriptSupport javascriptSupport;
>
>
>>  @Inject
>
>  private ComponentResources resources;
>
>
>>  private String loader;
>
>
>>  String defaultElement() {
>
>  return resources.getElementName("div");
>
>  }
>
>
>>  @BeginRender
>
>  void initAjaxLoader(MarkupWriter writer) {
>
>  loader = javascriptSupport.allocateClientId("loader");
>
>
>>  JSONObject data = new JSONObject();
>
>  data.put("zone", zone);
>
>  data.put("trigger", trigger);
>
>  data.put("loader", loader);
>
>  System.out.println(data);
>
>  javascriptSupport.addInitializerCall(InitializationPriority.LATE,
>> "initAjaxLoader", data);
>
>  }
>
>
>>  @AfterRender
>
>  void writeAjaxLoader(MarkupWriter writer) {
>
>  writer.element(element, "id", loader, "class", this.loaderClass, "style",
>> "display:none;");
>
>  writer.end();
>
>  }
>
> }
>
>
> * After porting this component to my application, I applied it to a link.
> The image is shown and hidden well. But I found out that the method the link
> calls, is being called many times. The JS console says what's supposed to
> mean that the call stack exploded due to numerous method calls.
> * I'm not sure If I fully understand the @Environmental annotation but
> shouldn't JavaScriptSupport here be annotated as environmental ?
> * About the "defaultElement()" method. After reading the documentation I
> understood it's supposed to return the tag name of the component. In our
> case it's "span", "div" is simply ignored.
>
> a.who calls this method, when and why ?
> b.why did we provide div ? In case the component exists solely without a
> container ? Although I can't currently imagine if that's possible, may be it
> is.
>
>
> Thank you for your time :)
> --
> *Regards,*
> *Muhammad Gelbana
> Java Software Programmer*
>



-- 
*Regards,*
*Muhammad Gelbana
Java Software Programmer*