Re: T5: Progress indicator and AJAX example?

[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;
      }

      CaptureResultCallback<Double> callback = new
CaptureResultCallback<Double>();
      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
>
>