Use slider as progress bar


Introduction : Progress bar generally used to display amount of work done on background, like displaying it while uplodaing or downloading any content. Titanium has Slider API which can be used to do the same for crossplatform application.

Description : Let me create a scenario where we will have a slider and a button on window. On click of that button, slider will progress, which will appear as progress bar on the screen.

//Define current window

var currentWin = Ti.UI.currentWindow;

//Define a button to strat the progress

var stratBtn = Ti.UI.createButton({

width : 200,

height : 50,

title : ‘Strat Progress’,

top : 300

});

 

//Button added to window

currentWin.add(stratBtn);

 

On above code block a window gets defined with a button added on it.

//Define a slider

var sliderAsProgressbar = Titanium.UI.createSlider({

width : 300,

min : 0, // Minimum value dispayed on the bar

max : 100 // Maximum value dispayed on the bar

});

 

//Set the thumb image with any transparent image

sliderAsProgressbar.thumbImage = ‘transparentImage.png’;

 

//Asign initial value to the bar

sliderAsProgressbar.value = 0;

//Disable slider for touch effect

sliderAsProgressbar.touchEnabled = false;

//Bar added to window

currentWin.add(sliderAsProgressbar);

Here on above a slider is added with the current window, which have a range from 0 to 100 to display.

Initially the slider value was set with 0. ( sliderAsProgressbar.value = 0; ). As we can touch the slider and change it value, we need to block this functionality to give a look and feel of progress bar. so ‘sliderAsProgressbar.touchEnabled = false;’ disable the touch over the slider.

Now lets define click event associated with the button, where onclick of this button slider will strat to increase its value and will look as progress bar.

//Event to start progress

stratBtn.addEventListener(‘click’, function(){

//Asign initial value to the bar

sliderAsProgressbar.value = 0;

var cahangedVal = 0, progressInterval;

//Check the progress interval

if (progressInterval) {

clearInterval(progressInterval);

}

//Do the progress stuff

progressInterval= setInterval(function() {

//Condition to check max value

if (val >= 101) {

//Stop the progressing

clearInterval(progressInterval);

 

//Asign initial value to the bar

sliderAsProgressbar.value = 0;

return;

}

//Change the bar value to show progress

sliderAsProgressbar.value = cahangedVal ;

cahangedVal++;

}, 1000);

});

Summarry : Here using above code block, I have described the way to use slider as progress bar. Now depending on the codition we can use it various place as progressbar implementation.

THAT’S IT

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s