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