display activity indicator in titanium

Question

i use progress bar in android but in titanium its activity indicator for showing a progress that some is happening on back ground in android i did it by making the asynchronous task but in titanium where should i write the code for handling back ground task ,means untill my background task not finish daisply indicator and hide automatically when done...my code for activty indiator and the task which i want to show it in background is below..

     var ind = Titanium.UI.createActivityIndicator({
            location:Titanium.UI.ActivityIndicator.DIALOG,
            //type:Titanium.UI.ActivityIndicator.DETERMINANT,

           width:50,
height:50,
message: 'loading...',
color: 'FF0000'
    });
         curWin.add(ind);
         ind.show();



 and want to put below code which will be run on back ground.....





     var image = imgvwPlus.image; 
    var filename = new Date().getTime() + "-ea.jpg";
    bgImage =      Titanium.Filesystem.getFile(Titanium.Filesystem.externalStorageDirectory,filename);
    // Write the image to the new file (image created from camera)
    bgImage.write(image);
    imageArray.length = imageArray.length + 1;
            //alert(bgImage);
     custom[j]={"hanger":btntext[0].title,
        "color": btntext[1].title,
        "size":  btntext[2].title,
        "text": btntext[3].title,

        "textStyle": btntext[3].font.fontFamily,
        "textSize": btntext[3].font.fontSize,
        "textColor": btntext[3].color,

        "textTop":textTop,
        "textLeft":textLeft,
        "quantity":quantity, 
        "price":price
    };
    imageArray[i]={"img_path":bgImage,
        "imgPrice":imgPrice,
        "customization":custom
    };
      index = i;
      i++;
      imgvwPlus.image = 'images/Plus.jpg';
      btntext[0].title = 'Select';
      btntext[1].title = 'Select';
      btntext[2].title= 'Select';
      btntext[3].title = 'Select';
      btntext[3].font.fontFamily="Helvetica Neue";
      btntext[3].font.fontSize="15";
      btntext[3].color="#000";
      var win = Ti.UI.createWindow({
      title:'Popmount',
      //url:'popmount.js',
      param:imageArray,
      index:index,

    });
    //alert("image path"+win.param[0].img_path);
    Ti.UI.currentTab.open(win);

Answer 1

Here is the updated code which will works with the Alloy Frame work and supported in both iOS and Android.

indicator.xml

<Alloy>
    <Window class="container" >
        <View id='indicatorBack'/>
        <ActivityIndicator id='activityInd'/>
    </Window>
</Alloy>

indicator.tss

".container" : {
backgroundColor : 'transparent',
zIndex : 5000

},
"#indicatorBack[formFactor=handheld]" :{
opacity : 0.8,
height :  '50dp',
width :  '150dp',
borderRadius : 10,
backgroundColor : 'black'

},
"#indicatorBack[formFactor=tablet]" :{
opacity :0.8,
height : '70dp',
width : '170dp',
borderRadius : 10,
backgroundColor : 'black'
},
"#activityInd":{

    color : 'white',
    font : Alloy.Globals.fontLargeBold,
    message : ' Loading...',
    zIndex : 10,
    opacity : 1 
}

indicator.js

if (Ti.Platform.osname === 'ipad')
    $.activityInd.style = Titanium.UI.iPhone.ActivityIndicatorStyle.BIG;


$.indicator.showIndicator = function() {
    try {
        $.indicator.open();
        $.activityInd.show();

    } catch(e) {
        Ti.API.info("Exception in opening indicator");
    }

};
// Function to hide Indicator

$.indicator.hideIndicator = function() {
    try {
        $.activityInd.hide();
        $.indicator.close();
    } catch(e) {
        Ti.API.info("Exception in hiding indicator");
    }
};

$.activityInd.show();

Alloy.js

//Activity Indicator.
var indWin = null;

    Alloy.Globals.showIndicator = function() {
        try {
            if (indWin == null)
                indWin = Alloy.createController('indicator').getView();
            indWin.showIndicator();
        } catch(e) {
            Ti.API.info("Exception in opening indicator");
        }

    };
    // Function to hide Indicator

    Alloy.Globals.hideIndicator = function() {
        try {

            if (indWin != null) {
                indWin.hideIndicator();
                indWin = null;
            }
        } catch(e) {
            Ti.API.info("Exception in hiding indicator");
        }

    };

So you can show and hide it from any controller using following functions :

Alloy.Globals.showIndicator();

Alloy.Globals.hideIndicator();

Also for the custom messages you can pass argument in the indicator controller.