RE: T5: Progress indicator and AJAX example?

2010-12-14 Thread Newham, Cameron 
Thanks Taha for going to the trouble of providing source.

 It is very simple.

LOL. When people say this it usually isn't! And I'm afraid my knowledge of AJAX 
and Javascript make your code fairly impenetrable to me. When I use your code I 
just get a dialogue box tell me that the page says {} was returned and the 
value on the page is printed as undefined.

I've read your follow-up below and looked at the code and understand the gist 
of how it works but I'm afraid I don't understand what is wrong.

Thanks,
c.


-Original Message-
From: Taha Hafeez [mailto:tawus.tapes...@gmail.com] 
Sent: 12 December 2010 01:35
To: Tapestry users
Subject: Re: T5: Progress indicator and AJAX example?

Hi

It is very simple. In ProgressBar#afterRender an event timer is created
which is passed on to javascript. Javascript is a periodicExecuter
with period passed as a parameter. For each period it calls the event url
with the previous value of percentage as a parameter.

When the event is called onTimer() method is invoked in ProgressBar which
triggers an update event and expects a percentage value.
It then returns this percentage as a JSON object to the javascript ajax
call.

Finally javascript calls the method passed as clientFunc parameter of the
ProgressBar. In case the percentage has reached 100, it stops the
PeriodicExecuter

regards
Taha

2010/12/11 françois facon fra.fa...@gmail.com

 Hi Taha,

 Thanks for sharing your code.

 It make me discover the CaptureResultCallback (new in 5.2).

 If I understand well your sample, to get progress value
 the progressBar component raise a server side event called 'update' and
 get the value from this callback.

 is it right?




 2010/12/11 Taha Hafeez tawus.tapes...@gmail.com

  Hi,
 
  Here is a simple example
 
  Java Code :-
 
  import org.apache.tapestry5.BindingConstants;
  import org.apache.tapestry5.ComponentResources;
  import org.apache.tapestry5.Link;
  import org.apache.tapestry5.MarkupWriter;
  import org.apache.tapestry5.annotations.AfterRender;
  import org.apache.tapestry5.annotations.Environmental;
  import org.apache.tapestry5.annotations.Import;
  import org.apache.tapestry5.annotations.Parameter;
  import org.apache.tapestry5.internal.util.CaptureResultCallback;
  import org.apache.tapestry5.ioc.annotations.Inject;
  import org.apache.tapestry5.json.JSONObject;
  import org.apache.tapestry5.services.Request;
  import org.apache.tapestry5.services.javascript.JavaScriptSupport;
 
  @Import(library = progressbar.js)
  public class ProgressBar {
@Parameter(value = 1, defaultPrefix=BindingConstants.LITERAL)
private int period;
 
@Parameter(defaultPrefix = BindingConstants.LITERAL)
private String clientFunc;
 
@Inject
private ComponentResources resources;
 
@Environmental
private JavaScriptSupport javaScriptSupport;
 
@Inject
private Request request;
 
@AfterRender
void afterRender(MarkupWriter writer){
   Link link = resources.createEventLink(timer);
   JSONObject spec = new JSONObject();
   spec.put(url, link.toAbsoluteURI());
   spec.put(period, period);
   spec.put(clientFunc, clientFunc);
   javaScriptSupport.addScript(new ProgressBar(%s);, spec);
}
 
Object onTimer(){
   JSONObject spec = new JSONObject();
   double value = 0.0;
   try {
  value = Double.parseDouble(request.getParameter(value));
   }catch(NumberFormatException nfe){
  return spec;
   }
 
   CaptureResultCallbackDouble callback = new
  CaptureResultCallbackDouble();
   resources.triggerEvent(update, new Object[]{value}, callback);
   value = callback.getResult();
   System.out.println(Value =  + value);
   spec.put(value, value);
   return  spec;
}
  }
 
  JavaScript Code :-
 
  ProgressBar = Class.create({
initialize:function(spec){
   this.value = 0;
   this.url = spec.url;
   this.clientFunc = spec.clientFunc;
   this.executer = new PeriodicalExecuter(this.execute.bind(this),
  spec.period);
},
 
execute:function(transport){
   new Ajax.Request(this.url + ?value= + this.value, {
  method:get,
  onSuccess:function(transport){
  this.onSuccess(transport);
  }.bind(this)
   }, this.period);
},
 
onSuccess:function(transport){
   var json = transport.responseText.evalJSON();
   if(typeof(json.value) == undefined){
   alert(transport.responseText + : returned)
   this.stopExecuter();
   }
   this.value = json.value;
   if(this.clientFunc){
   var func = this.clientFunc +( + json.value+);
   eval(func);
   }
 
   if(json.value = 100){
  this.stopExecuter();
   }
},
 
stopExecuter:function(){
this.executer.stop();
}
  });
 
 
  Usage :-
 
   t:progressbar clientFunc=updateFunc/
   div id='progressBar'
   /div
   script
  updateFunc = function(percentage){
 $(progressBar).update

RE: T5: Progress indicator and AJAX example?

2010-12-14 Thread Newham, Cameron 
Further to this.

The part I think I am not understanding that is critical to the operation of 
this is:

resources.triggerEvent(update, new Object[]{value}, callback);
value = callback.getResult();

getResult() is always null. So I'm failing to understand how you are getting 
value set (it triggers an event - but...?)  Sorry if this seems obvious, but it 
unfortunately isn't to me.

c.


-Original Message-
From: Newham, Cameron [mailto:cameron.new...@bl.uk] 
Sent: 14 December 2010 09:35
To: Tapestry users
Subject: RE: T5: Progress indicator and AJAX example?

Thanks Taha for going to the trouble of providing source.

 It is very simple.

LOL. When people say this it usually isn't! And I'm afraid my knowledge of AJAX 
and Javascript make your code fairly impenetrable to me. When I use your code I 
just get a dialogue box tell me that the page says {} was returned and the 
value on the page is printed as undefined.

I've read your follow-up below and looked at the code and understand the gist 
of how it works but I'm afraid I don't understand what is wrong.

Thanks,
c.


-Original Message-
From: Taha Hafeez [mailto:tawus.tapes...@gmail.com] 
Sent: 12 December 2010 01:35
To: Tapestry users
Subject: Re: T5: Progress indicator and AJAX example?

Hi

It is very simple. In ProgressBar#afterRender an event timer is created
which is passed on to javascript. Javascript is a periodicExecuter
with period passed as a parameter. For each period it calls the event url
with the previous value of percentage as a parameter.

When the event is called onTimer() method is invoked in ProgressBar which
triggers an update event and expects a percentage value.
It then returns this percentage as a JSON object to the javascript ajax
call.

Finally javascript calls the method passed as clientFunc parameter of the
ProgressBar. In case the percentage has reached 100, it stops the
PeriodicExecuter

regards
Taha

2010/12/11 françois facon fra.fa...@gmail.com

 Hi Taha,

 Thanks for sharing your code.

 It make me discover the CaptureResultCallback (new in 5.2).

 If I understand well your sample, to get progress value
 the progressBar component raise a server side event called 'update' and
 get the value from this callback.

 is it right?




 2010/12/11 Taha Hafeez tawus.tapes...@gmail.com

  Hi,
 
  Here is a simple example
 
  Java Code :-
 
  import org.apache.tapestry5.BindingConstants;
  import org.apache.tapestry5.ComponentResources;
  import org.apache.tapestry5.Link;
  import org.apache.tapestry5.MarkupWriter;
  import org.apache.tapestry5.annotations.AfterRender;
  import org.apache.tapestry5.annotations.Environmental;
  import org.apache.tapestry5.annotations.Import;
  import org.apache.tapestry5.annotations.Parameter;
  import org.apache.tapestry5.internal.util.CaptureResultCallback;
  import org.apache.tapestry5.ioc.annotations.Inject;
  import org.apache.tapestry5.json.JSONObject;
  import org.apache.tapestry5.services.Request;
  import org.apache.tapestry5.services.javascript.JavaScriptSupport;
 
  @Import(library = progressbar.js)
  public class ProgressBar {
@Parameter(value = 1, defaultPrefix=BindingConstants.LITERAL)
private int period;
 
@Parameter(defaultPrefix = BindingConstants.LITERAL)
private String clientFunc;
 
@Inject
private ComponentResources resources;
 
@Environmental
private JavaScriptSupport javaScriptSupport;
 
@Inject
private Request request;
 
@AfterRender
void afterRender(MarkupWriter writer){
   Link link = resources.createEventLink(timer);
   JSONObject spec = new JSONObject();
   spec.put(url, link.toAbsoluteURI());
   spec.put(period, period);
   spec.put(clientFunc, clientFunc);
   javaScriptSupport.addScript(new ProgressBar(%s);, spec);
}
 
Object onTimer(){
   JSONObject spec = new JSONObject();
   double value = 0.0;
   try {
  value = Double.parseDouble(request.getParameter(value));
   }catch(NumberFormatException nfe){
  return spec;
   }
 
   CaptureResultCallbackDouble callback = new
  CaptureResultCallbackDouble();
   resources.triggerEvent(update, new Object[]{value}, callback);
   value = callback.getResult();
   System.out.println(Value =  + value);
   spec.put(value, value);
   return  spec;
}
  }
 
  JavaScript Code :-
 
  ProgressBar = Class.create({
initialize:function(spec){
   this.value = 0;
   this.url = spec.url;
   this.clientFunc = spec.clientFunc;
   this.executer = new PeriodicalExecuter(this.execute.bind(this),
  spec.period);
},
 
execute:function(transport){
   new Ajax.Request(this.url + ?value= + this.value, {
  method:get,
  onSuccess:function(transport){
  this.onSuccess(transport);
  }.bind(this)
   }, this.period);
},
 
onSuccess:function(transport){
   var json = transport.responseText.evalJSON();
   if(typeof(json.value

Re: T5: Progress indicator and AJAX example?

2010-12-14 Thread Thiago H. de Paula Figueiredo 
On Tue, 14 Dec 2010 07:35:22 -0200, Newham, Cameron cameron.new...@bl.uk  
wrote:



Thanks Taha for going to the trouble of providing source.


It is very simple.


LOL. When people say this it usually isn't! And I'm afraid my knowledge  
of AJAX and Javascript make your code fairly impenetrable to me.


Let's rephrase that. It is very simple as long as you know JavaScript  
well. :) The JavaScript-Tapestry interfacing is easy. ;)


--
Thiago H. de Paula Figueiredo
Independent Java, Apache Tapestry 5 and Hibernate consultant, developer,  
and instructor

Owner, Ars Machina Tecnologia da Informação Ltda.
http://www.arsmachina.com.br

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

Re: T5: Progress indicator and AJAX example?

2010-12-14 Thread Taha Hafeez 
Hi,

The reason that it did not work is because you have to handle the event
onUpdate in your page otherwise it throws a NPE. I have modified that and
indicated that in bold.

The alert that you saw was a debug alert...(Oops!!).

Java

import org.apache.tapestry5.BindingConstants;
import org.apache.tapestry5.ComponentResources;
import org.apache.tapestry5.Link;
import org.apache.tapestry5.MarkupWriter;
import org.apache.tapestry5.annotations.AfterRender;
import org.apache.tapestry5.annotations.Environmental;
import org.apache.tapestry5.annotations.Import;
import org.apache.tapestry5.annotations.Parameter;
import org.apache.tapestry5.internal.util.CaptureResultCallback;
import org.apache.tapestry5.ioc.annotations.Inject;
import org.apache.tapestry5.json.JSONObject;
import org.apache.tapestry5.services.Request;
import org.apache.tapestry5.services.javascript.JavaScriptSupport;

@Import(library = progressbar.js)
public class ProgressBar {
   @Parameter(value = 1, defaultPrefix=BindingConstants.LITERAL)
   private int period;

   @Parameter(defaultPrefix = BindingConstants.LITERAL)
   private String clientFunc;

   @Inject
   private ComponentResources resources;

   @Environmental
   private JavaScriptSupport javaScriptSupport;

   @Inject
   private Request request;

   @AfterRender
   void afterRender(MarkupWriter writer){
  Link link = resources.createEventLink(timer);
  JSONObject spec = new JSONObject();
  spec.put(url, link.toAbsoluteURI());
  spec.put(period, period);
  spec.put(clientFunc, clientFunc);
  javaScriptSupport.addScript(new ProgressBar(%s);, spec);
   }

   Object onTimer(){
  JSONObject spec = new JSONObject();
  double value = 0.0;
  try {
 value = Double.parseDouble(request.getParameter(value));
  }catch(NumberFormatException nfe){
 return spec;
  }

  CaptureResultCallbackDouble callback = new
CaptureResultCallbackDouble();
  resources.triggerEvent(update, new Object[]{value}, callback);
*  if(callback.getResult() == null){*
* return spec;*
*  }*

  value = callback.getResult();
  spec.put(value, value);
  return  spec;
   }
}


Javascript

ProgressBar = Class.create({
   initialize:function(spec){
  this.value = 0;
  this.url = spec.url;
  this.clientFunc = spec.clientFunc;
  this.executer = new PeriodicalExecuter(this.execute.bind(this),
spec.period);
   },

   execute:function(transport){
  new Ajax.Request(this.url + ?value= + this.value, {
 method:get,
 onSuccess:function(transport){
   this.onSuccess(transport);
 }.bind(this)
  }, this.period);
   },

   onSuccess:function(transport){
  var json = transport.responseText.evalJSON();
  if(typeof(json.value) == undefined){
*this.stopExecuter();*
*return;*
*  }*
  this.value = json.value;
  if(this.clientFunc){
var func = this.clientFunc +( + json.value+);
eval(func);
  }

  if(json.value = 100){
this.stopExecuter();
 }
   },

   stopExecuter:function(){
  this.executer.stop();
   }
});


Usage :-
Template File

  t:progressbar t:id='progressBar' clientFunc='updateFunc'/
  div id='updateDiv'/div
  script
 var updateFunc = function(percentage){
$(updateDiv).update(percentage + %);
 }
  /script


   double onUpdateFromProgressBar(double percentage){
  return percentage + 10.0;
   }


I tested it on Firefox and Chrome and it works fine...


On Tue, Dec 14, 2010 at 4:24 PM, Newham, Cameron cameron.new...@bl.ukwrote:

 Further to this.

 The part I think I am not understanding that is critical to the operation
 of this is:

 resources.triggerEvent(update, new Object[]{value}, callback);
 value = callback.getResult();


It returns null because you did not create an event handler in your page for
update event triggered from ProgressBar component.
What is happening here is that the component is triggering an event and
tries to handle the result value from the handler but if
no handler is called the result will be null.(This case is now handled)



 getResult() is always null. So I'm failing to understand how you are
 getting value set (it triggers an event - but...?)  Sorry if this seems
 obvious, but it unfortunately isn't to me.


triggerEvent triggers an event which has to be handled by the container
event handler. This event handler's return value is
callback.getResult(). If there is not handler, it returns null.


 c.

 Hope it helps
regards
Taha




 -Original Message-
 From: Newham, Cameron [mailto:cameron.new...@bl.uk]
 Sent: 14 December 2010 09:35
 To: Tapestry users
 Subject: RE: T5: Progress indicator and AJAX example?

 Thanks Taha for going to the trouble of providing source.

  It is very simple.

 LOL. When people say this it usually isn't! And I'm afraid my knowledge of
 AJAX and Javascript make your code fairly impenetrable to me. When I use

Re: T5: Progress indicator and AJAX example?

2010-12-14 Thread Taha Hafeez 
That is exactly what i meant..!

regards
Taha


On Tue, Dec 14, 2010 at 5:55 PM, Thiago H. de Paula Figueiredo 
thiag...@gmail.com wrote:

 On Tue, 14 Dec 2010 07:35:22 -0200, Newham, Cameron cameron.new...@bl.uk
 wrote:

  Thanks Taha for going to the trouble of providing source.

  It is very simple.


 LOL. When people say this it usually isn't! And I'm afraid my knowledge of
 AJAX and Javascript make your code fairly impenetrable to me.


 Let's rephrase that. It is very simple as long as you know JavaScript well.
 :) The JavaScript-Tapestry interfacing is easy. ;)

 --
 Thiago H. de Paula Figueiredo
 Independent Java, Apache Tapestry 5 and Hibernate consultant, developer,
 and instructor
 Owner, Ars Machina Tecnologia da Informação Ltda.
 http://www.arsmachina.com.br

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

RE: T5: Progress indicator and AJAX example?

2010-12-14 Thread Newham, Cameron 

Thanks Taha.

Now it all makes sense. I don't know why I didn't see the alert() - duh!

c.


-Original Message-
From: Taha Hafeez [mailto:tawus.tapes...@gmail.com] 
Sent: 14 December 2010 17:31
To: Tapestry users
Subject: Re: T5: Progress indicator and AJAX example?

Hi,

The reason that it did not work is because you have to handle the event
onUpdate in your page otherwise it throws a NPE. I have modified that
and
indicated that in bold.

The alert that you saw was a debug alert...(Oops!!).



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

RE: T5: Progress indicator and AJAX example?

2010-12-13 Thread Newham, Cameron 
Thank you Thiago and Richard.



-Original Message-
From: Thiago H. de Paula Figueiredo [mailto:thiag...@gmail.com] 
Sent: 10 December 2010 11:14
To: Tapestry users
Subject: Re: T5: Progress indicator and AJAX example?

On Fri, 10 Dec 2010 09:04:49 -0200, Newham, Cameron cameron.new...@bl.uk  
wrote:

 Hi,

Hi!

 I imagine that if I wanted just a simple field on a page that updated
 with a % then I would have Javascript make an AJAX get and obtain a
 value from the server. However, as I'm a complete newbie to AJAX, an
 example of how to do this would be extremely helpful.

The AJAX part itself is completely Tapestry-unrelated and there are many  
examples in the Internet, maybe even in this mailing list archives. I  
answered something similar yesterday. The AJAX Prototype documentation is  
here: http://api.prototypejs.org/ajax/Ajax/Request/.

 Example silly
 questions: does my field have to be in a Zone?

No, as long as you write your own JavaScript code to do and handle an AJAX  
request and then update the page DOM.

 Also, would the % value updated by my process just be held in a @Persist
 field?

Absolutely no. Just get the % value when handling the request. You don't  
even need a field for that.

-- 
Thiago H. de Paula Figueiredo
Independent Java, Apache Tapestry 5 and Hibernate consultant, developer,  
and instructor
Owner, Ars Machina Tecnologia da Informação Ltda.
http://www.arsmachina.com.br

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


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

Re: T5: Progress indicator and AJAX example?

2010-12-12 Thread Thiago H. de Paula Figueiredo 

High quality explanation, Taha! :) Thanks for it and the example!

On Sat, 11 Dec 2010 23:34:47 -0200, Taha Hafeez tawus.tapes...@gmail.com  
wrote:



Hi

It is very simple. In ProgressBar#afterRender an event timer is created
which is passed on to javascript. Javascript is a periodicExecuter
with period passed as a parameter. For each period it calls the event url
with the previous value of percentage as a parameter.

When the event is called onTimer() method is invoked in ProgressBar which
triggers an update event and expects a percentage value.
It then returns this percentage as a JSON object to the javascript ajax
call.

Finally javascript calls the method passed as clientFunc parameter of the
ProgressBar. In case the percentage has reached 100, it stops the
PeriodicExecuter

regards
Taha

2010/12/11 françois facon fra.fa...@gmail.com


Hi Taha,

Thanks for sharing your code.

It make me discover the CaptureResultCallback (new in 5.2).

If I understand well your sample, to get progress value
the progressBar component raise a server side event called 'update' and
get the value from this callback.

is it right?




2010/12/11 Taha Hafeez tawus.tapes...@gmail.com

 Hi,

 Here is a simple example

 Java Code :-

 import org.apache.tapestry5.BindingConstants;
 import org.apache.tapestry5.ComponentResources;
 import org.apache.tapestry5.Link;
 import org.apache.tapestry5.MarkupWriter;
 import org.apache.tapestry5.annotations.AfterRender;
 import org.apache.tapestry5.annotations.Environmental;
 import org.apache.tapestry5.annotations.Import;
 import org.apache.tapestry5.annotations.Parameter;
 import org.apache.tapestry5.internal.util.CaptureResultCallback;
 import org.apache.tapestry5.ioc.annotations.Inject;
 import org.apache.tapestry5.json.JSONObject;
 import org.apache.tapestry5.services.Request;
 import org.apache.tapestry5.services.javascript.JavaScriptSupport;

 @Import(library = progressbar.js)
 public class ProgressBar {
   @Parameter(value = 1, defaultPrefix=BindingConstants.LITERAL)
   private int period;

   @Parameter(defaultPrefix = BindingConstants.LITERAL)
   private String clientFunc;

   @Inject
   private ComponentResources resources;

   @Environmental
   private JavaScriptSupport javaScriptSupport;

   @Inject
   private Request request;

   @AfterRender
   void afterRender(MarkupWriter writer){
  Link link = resources.createEventLink(timer);
  JSONObject spec = new JSONObject();
  spec.put(url, link.toAbsoluteURI());
  spec.put(period, period);
  spec.put(clientFunc, clientFunc);
  javaScriptSupport.addScript(new ProgressBar(%s);, spec);
   }

   Object onTimer(){
  JSONObject spec = new JSONObject();
  double value = 0.0;
  try {
 value = Double.parseDouble(request.getParameter(value));
  }catch(NumberFormatException nfe){
 return spec;
  }

  CaptureResultCallbackDouble callback = new
 CaptureResultCallbackDouble();
  resources.triggerEvent(update, new Object[]{value}, callback);
  value = callback.getResult();
  System.out.println(Value =  + value);
  spec.put(value, value);
  return  spec;
   }
 }

 JavaScript Code :-

 ProgressBar = Class.create({
   initialize:function(spec){
  this.value = 0;
  this.url = spec.url;
  this.clientFunc = spec.clientFunc;
  this.executer = new PeriodicalExecuter(this.execute.bind(this),
 spec.period);
   },

   execute:function(transport){
  new Ajax.Request(this.url + ?value= + this.value, {
 method:get,
 onSuccess:function(transport){
 this.onSuccess(transport);
 }.bind(this)
  }, this.period);
   },

   onSuccess:function(transport){
  var json = transport.responseText.evalJSON();
  if(typeof(json.value) == undefined){
  alert(transport.responseText + : returned)
  this.stopExecuter();
  }
  this.value = json.value;
  if(this.clientFunc){
  var func = this.clientFunc +( + json.value+);
  eval(func);
  }

  if(json.value = 100){
 this.stopExecuter();
  }
   },

   stopExecuter:function(){
   this.executer.stop();
   }
 });


 Usage :-

  t:progressbar clientFunc=updateFunc/
  div id='progressBar'
  /div
  script
 updateFunc = function(percentage){
$(progressBar).update(percentage + %);
 };
  /script


 Hope it helps
 regards
 Taha

 On Fri, Dec 10, 2010 at 6:55 PM, Richard Hill r...@su3analytics.com
 wrote:

  Hi Cameron,
 
  For an example of how to make an ajax call from your own js see the
mail
  I sent yesterday.
 
  Richard.
 
 
 
  On Fri, 2010-12-10 at 09:14 -0200, Thiago H. de Paula Figueiredo  
wrote:

   On Fri, 10 Dec 2010 09:04:49 -0200, Newham, Cameron 
  cameron.new...@bl.uk
   wrote:
  
Hi,
  
   Hi!
  
I imagine that if I wanted just a simple field on a page that
updated
with a % then I would have Javascript make an AJAX get and  
obtain a
value from the server. However, as I'm a complete

Re: T5: Progress indicator and AJAX example?

2010-12-11 Thread françois facon 
Hi Taha,

Thanks for sharing your code.

It make me discover the CaptureResultCallback (new in 5.2).

If I understand well your sample, to get progress value
the progressBar component raise a server side event called 'update' and
get the value from this callback.

is it right?




2010/12/11 Taha Hafeez tawus.tapes...@gmail.com

 Hi,

 Here is a simple example

 Java Code :-

 import org.apache.tapestry5.BindingConstants;
 import org.apache.tapestry5.ComponentResources;
 import org.apache.tapestry5.Link;
 import org.apache.tapestry5.MarkupWriter;
 import org.apache.tapestry5.annotations.AfterRender;
 import org.apache.tapestry5.annotations.Environmental;
 import org.apache.tapestry5.annotations.Import;
 import org.apache.tapestry5.annotations.Parameter;
 import org.apache.tapestry5.internal.util.CaptureResultCallback;
 import org.apache.tapestry5.ioc.annotations.Inject;
 import org.apache.tapestry5.json.JSONObject;
 import org.apache.tapestry5.services.Request;
 import org.apache.tapestry5.services.javascript.JavaScriptSupport;

 @Import(library = progressbar.js)
 public class ProgressBar {
   @Parameter(value = 1, defaultPrefix=BindingConstants.LITERAL)
   private int period;

   @Parameter(defaultPrefix = BindingConstants.LITERAL)
   private String clientFunc;

   @Inject
   private ComponentResources resources;

   @Environmental
   private JavaScriptSupport javaScriptSupport;

   @Inject
   private Request request;

   @AfterRender
   void afterRender(MarkupWriter writer){
  Link link = resources.createEventLink(timer);
  JSONObject spec = new JSONObject();
  spec.put(url, link.toAbsoluteURI());
  spec.put(period, period);
  spec.put(clientFunc, clientFunc);
  javaScriptSupport.addScript(new ProgressBar(%s);, spec);
   }

   Object onTimer(){
  JSONObject spec = new JSONObject();
  double value = 0.0;
  try {
 value = Double.parseDouble(request.getParameter(value));
  }catch(NumberFormatException nfe){
 return spec;
  }

  CaptureResultCallbackDouble callback = new
 CaptureResultCallbackDouble();
  resources.triggerEvent(update, new Object[]{value}, callback);
  value = callback.getResult();
  System.out.println(Value =  + value);
  spec.put(value, value);
  return  spec;
   }
 }

 JavaScript Code :-

 ProgressBar = Class.create({
   initialize:function(spec){
  this.value = 0;
  this.url = spec.url;
  this.clientFunc = spec.clientFunc;
  this.executer = new PeriodicalExecuter(this.execute.bind(this),
 spec.period);
   },

   execute:function(transport){
  new Ajax.Request(this.url + ?value= + this.value, {
 method:get,
 onSuccess:function(transport){
 this.onSuccess(transport);
 }.bind(this)
  }, this.period);
   },

   onSuccess:function(transport){
  var json = transport.responseText.evalJSON();
  if(typeof(json.value) == undefined){
  alert(transport.responseText + : returned)
  this.stopExecuter();
  }
  this.value = json.value;
  if(this.clientFunc){
  var func = this.clientFunc +( + json.value+);
  eval(func);
  }

  if(json.value = 100){
 this.stopExecuter();
  }
   },

   stopExecuter:function(){
   this.executer.stop();
   }
 });


 Usage :-

  t:progressbar clientFunc=updateFunc/
  div id='progressBar'
  /div
  script
 updateFunc = function(percentage){
$(progressBar).update(percentage + %);
 };
  /script


 Hope it helps
 regards
 Taha

 On Fri, Dec 10, 2010 at 6:55 PM, Richard Hill r...@su3analytics.com
 wrote:

  Hi Cameron,
 
  For an example of how to make an ajax call from your own js see the mail
  I sent yesterday.
 
  Richard.
 
 
 
  On Fri, 2010-12-10 at 09:14 -0200, Thiago H. de Paula Figueiredo wrote:
   On Fri, 10 Dec 2010 09:04:49 -0200, Newham, Cameron 
  cameron.new...@bl.uk
   wrote:
  
Hi,
  
   Hi!
  
I imagine that if I wanted just a simple field on a page that updated
with a % then I would have Javascript make an AJAX get and obtain a
value from the server. However, as I'm a complete newbie to AJAX, an
example of how to do this would be extremely helpful.
  
   The AJAX part itself is completely Tapestry-unrelated and there are
 many
   examples in the Internet, maybe even in this mailing list archives. I
   answered something similar yesterday. The AJAX Prototype documentation
 is
   here: http://api.prototypejs.org/ajax/Ajax/Request/.
  
Example silly
questions: does my field have to be in a Zone?
  
   No, as long as you write your own JavaScript code to do and handle an
  AJAX
   request and then update the page DOM.
  
Also, would the % value updated by my process just be held in a
  @Persist
field?
  
   Absolutely no. Just get the % value when handling the request. You
 don't
   even need a field for that.
  
 
 
 
  -
  To unsubscribe,

T5: Progress indicator and AJAX example?

2010-12-10 Thread Newham, Cameron 
Hi,

 

Can anyone point me to an example of a progress indicator or, more
simply, how one would go about having a page with a % complete field? I
have a process that ingests a file and takes quite a long time and I
would like to indicate to the user how much of it has been done.

 

I recall from research I did a few months ago that there is a progress
bar in one of the T5 component archives but there are no examples as to
how to use it and I'm not even sure if it works.

 

I imagine that if I wanted just a simple field on a page that updated
with a % then I would have Javascript make an AJAX get and obtain a
value from the server. However, as I'm a complete newbie to AJAX, an
example of how to do this would be extremely helpful. Example silly
questions: does my field have to be in a Zone? Or aren't Zones relevant
seeing as I would be making the AJAX get in my own Javascript. Also,
would the % value updated by my process just be held in a @Persist
field?

 

Anyway - some pointers or hints would be greatly appreciated.

 

Regards,

c.

Re: T5: Progress indicator and AJAX example?

2010-12-10 Thread Thiago H. de Paula Figueiredo 
On Fri, 10 Dec 2010 09:04:49 -0200, Newham, Cameron cameron.new...@bl.uk  
wrote:



Hi,


Hi!


I imagine that if I wanted just a simple field on a page that updated
with a % then I would have Javascript make an AJAX get and obtain a
value from the server. However, as I'm a complete newbie to AJAX, an
example of how to do this would be extremely helpful.


The AJAX part itself is completely Tapestry-unrelated and there are many  
examples in the Internet, maybe even in this mailing list archives. I  
answered something similar yesterday. The AJAX Prototype documentation is  
here: http://api.prototypejs.org/ajax/Ajax/Request/.



Example silly
questions: does my field have to be in a Zone?


No, as long as you write your own JavaScript code to do and handle an AJAX  
request and then update the page DOM.



Also, would the % value updated by my process just be held in a @Persist
field?


Absolutely no. Just get the % value when handling the request. You don't  
even need a field for that.


--
Thiago H. de Paula Figueiredo
Independent Java, Apache Tapestry 5 and Hibernate consultant, developer,  
and instructor

Owner, Ars Machina Tecnologia da Informação Ltda.
http://www.arsmachina.com.br

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

Re: T5: Progress indicator and AJAX example?

2010-12-10 Thread Richard Hill 
Hi Cameron,

For an example of how to make an ajax call from your own js see the mail
I sent yesterday.

Richard.



On Fri, 2010-12-10 at 09:14 -0200, Thiago H. de Paula Figueiredo wrote:
 On Fri, 10 Dec 2010 09:04:49 -0200, Newham, Cameron cameron.new...@bl.uk  
 wrote:
 
  Hi,
 
 Hi!
 
  I imagine that if I wanted just a simple field on a page that updated
  with a % then I would have Javascript make an AJAX get and obtain a
  value from the server. However, as I'm a complete newbie to AJAX, an
  example of how to do this would be extremely helpful.
 
 The AJAX part itself is completely Tapestry-unrelated and there are many  
 examples in the Internet, maybe even in this mailing list archives. I  
 answered something similar yesterday. The AJAX Prototype documentation is  
 here: http://api.prototypejs.org/ajax/Ajax/Request/.
 
  Example silly
  questions: does my field have to be in a Zone?
 
 No, as long as you write your own JavaScript code to do and handle an AJAX  
 request and then update the page DOM.
 
  Also, would the % value updated by my process just be held in a @Persist
  field?
 
 Absolutely no. Just get the % value when handling the request. You don't  
 even need a field for that.
 



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

Re: T5: Progress indicator and AJAX example?

2010-12-10 Thread Taha Hafeez 
Hi,

Here is a simple example

Java Code :-

import org.apache.tapestry5.BindingConstants;
import org.apache.tapestry5.ComponentResources;
import org.apache.tapestry5.Link;
import org.apache.tapestry5.MarkupWriter;
import org.apache.tapestry5.annotations.AfterRender;
import org.apache.tapestry5.annotations.Environmental;
import org.apache.tapestry5.annotations.Import;
import org.apache.tapestry5.annotations.Parameter;
import org.apache.tapestry5.internal.util.CaptureResultCallback;
import org.apache.tapestry5.ioc.annotations.Inject;
import org.apache.tapestry5.json.JSONObject;
import org.apache.tapestry5.services.Request;
import org.apache.tapestry5.services.javascript.JavaScriptSupport;

@Import(library = progressbar.js)
public class ProgressBar {
   @Parameter(value = 1, defaultPrefix=BindingConstants.LITERAL)
   private int period;

   @Parameter(defaultPrefix = BindingConstants.LITERAL)
   private String clientFunc;

   @Inject
   private ComponentResources resources;

   @Environmental
   private JavaScriptSupport javaScriptSupport;

   @Inject
   private Request request;

   @AfterRender
   void afterRender(MarkupWriter writer){
  Link link = resources.createEventLink(timer);
  JSONObject spec = new JSONObject();
  spec.put(url, link.toAbsoluteURI());
  spec.put(period, period);
  spec.put(clientFunc, clientFunc);
  javaScriptSupport.addScript(new ProgressBar(%s);, spec);
   }

   Object onTimer(){
  JSONObject spec = new JSONObject();
  double value = 0.0;
  try {
 value = Double.parseDouble(request.getParameter(value));
  }catch(NumberFormatException nfe){
 return spec;
  }

  CaptureResultCallbackDouble callback = new
CaptureResultCallbackDouble();
  resources.triggerEvent(update, new Object[]{value}, callback);
  value = callback.getResult();
  System.out.println(Value =  + value);
  spec.put(value, value);
  return  spec;
   }
}

JavaScript Code :-

ProgressBar = Class.create({
   initialize:function(spec){
  this.value = 0;
  this.url = spec.url;
  this.clientFunc = spec.clientFunc;
  this.executer = new PeriodicalExecuter(this.execute.bind(this),
spec.period);
   },

   execute:function(transport){
  new Ajax.Request(this.url + ?value= + this.value, {
 method:get,
 onSuccess:function(transport){
 this.onSuccess(transport);
 }.bind(this)
  }, this.period);
   },

   onSuccess:function(transport){
  var json = transport.responseText.evalJSON();
  if(typeof(json.value) == undefined){
  alert(transport.responseText + : returned)
  this.stopExecuter();
  }
  this.value = json.value;
  if(this.clientFunc){
  var func = this.clientFunc +( + json.value+);
  eval(func);
  }

  if(json.value = 100){
 this.stopExecuter();
  }
   },

   stopExecuter:function(){
   this.executer.stop();
   }
});


Usage :-

  t:progressbar clientFunc=updateFunc/
  div id='progressBar'
  /div
  script
 updateFunc = function(percentage){
$(progressBar).update(percentage + %);
 };
  /script


Hope it helps
regards
Taha

On Fri, Dec 10, 2010 at 6:55 PM, Richard Hill r...@su3analytics.com wrote:

 Hi Cameron,

 For an example of how to make an ajax call from your own js see the mail
 I sent yesterday.

 Richard.



 On Fri, 2010-12-10 at 09:14 -0200, Thiago H. de Paula Figueiredo wrote:
  On Fri, 10 Dec 2010 09:04:49 -0200, Newham, Cameron 
 cameron.new...@bl.uk
  wrote:
 
   Hi,
 
  Hi!
 
   I imagine that if I wanted just a simple field on a page that updated
   with a % then I would have Javascript make an AJAX get and obtain a
   value from the server. However, as I'm a complete newbie to AJAX, an
   example of how to do this would be extremely helpful.
 
  The AJAX part itself is completely Tapestry-unrelated and there are many
  examples in the Internet, maybe even in this mailing list archives. I
  answered something similar yesterday. The AJAX Prototype documentation is
  here: http://api.prototypejs.org/ajax/Ajax/Request/.
 
   Example silly
   questions: does my field have to be in a Zone?
 
  No, as long as you write your own JavaScript code to do and handle an
 AJAX
  request and then update the page DOM.
 
   Also, would the % value updated by my process just be held in a
 @Persist
   field?
 
  Absolutely no. Just get the % value when handling the request. You don't
  even need a field for that.
 



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