A simple progress indicator
I was looking for a way to do a progress indicator, and did find this helpful tutorial, http://wiki.sproutcore.com/Tutorials+-+Loading+Indicator but its based off records returning their state, which isn’t very helpful if you aren’t interacting with records yet.
There is also an easy way to do it in jQuery, found here which uses .ajaxStart & .ajaxStop to add/remove a DIV.
Lastly, before I get started, there is a http://docs.sproutcore.com/symbols/SC.ProgressView.html#constructor which is a bar that just animates until you ask it to stop. (for indeterminate).
Anyway, I wanted basically what I found in jQuery, but to do it in sproutcore instead.
First things first, we make a new view to extend
MyApp.ProgressIndicatorView = SC.View.extend(SC.ContentDisplay, {
Then we override render context
classNames: [‘progressIndicator’],
render: function(context, firstTime) {
context = context.begin().addClass(‘indicatorBusy’); //< div class=”indicatorBusy”>
context = context.begin(‘img’).attr(‘src’,’/images/my-loader.gif’).attr(‘width’,”16”).attr(‘height’,”16”).end(); //<img src = “/images/my-loader.gif”></img>
context = context.begin(‘p’).addClass(‘loadingLabel’);// <p class=”loadingLabel”>
context = context.push(’ Fetching Records…’);
context = context.end(); //</p>
context = context.end(); // </div>
sc_super();
}
});
Ha already almost done! I like to write the html I want to create first, in comments, then add the context data in front of it, so I know exactly what I want to create before I deal with doing it in the render context.
Next we need to add our view, place it, and determine how to show it. I’m doing this in main_page.js
progressIndicator: MyApp.ProgressIndicatorView.design({
layout: { bottom: 10, right: 5, height: 20, width: 140 },
activeRequestsBinding: ‘MyApp.activeRequests’,
isVisible: function () {
return this.get(‘activeRequests’) > 0 ;
}.property(‘activeRequests’)
}),
What we are doing here is binding to a property in core.js called “activeRequests” that starts at 0. Whenever the value is greater than 0, the view will toggle its visibility on, and you’ll see the spinner & text appear.
Its a pretty basic example, you’ll need to remember to increment your activeRequests when you make an XHR, and decrement it when you are notified of the requests return. Ideally you’d handle that in a controller, and all of this assumes you aren’t just simply using the datastore to begin with (in which case you’d look at the record status)
Also there is a handy site for generating loader images, http://ajaxload.info/ .
Thanks to Alex Iskander for the tips & help.
