How to create UI controls in for loop?

Question

How to create UI controls in for loop?

You must Login before you can answer or comment on any questions.

Hi Guys, I am developing an android application in titanium studio 2.0.2 with Android 2.2. Currently I am stucked in a situation where I have to add UI controls (button and lables) in a loop because the no. of controls is dynamic and it depends on a variable which is returned from remote server.

    To do this I have created a function createGUI(data) which creates a complete set of the required controls and calling that function in a for loop. After creation of first UI controls set I increment the top property of all controls for the next set. Now the problem I am having is that all controls are created with the same name so I can't refer them or get their values later because they are of the same name....I've tried to introduce variables in the control names but it gives syntax error. Following is my code to do this:-

for(var pos=0; pos < json.length; pos++)
        {
            createGUI(data[pos]);
            //Here the top variables will be incremented.
        }
 
Titanium.UI.backgroundColor='#ffffff';
 
    var win = Titanium.UI.createWindow({
        width: 320,
        height: 480,
        top: 0,
        left: 0,
        backgroundColor:'#ffffff'   
    });
 
    var lbl_Auctions=Titanium.UI.createLabel({
        text: 'Live Auctions',
        backgroundColor: '#306327',
        color: '#ffffff',
        clickable: false,
        width: Titanium.UI.SIZE,
        height:Titanium.UI.SIZE,
        top: '3%' ,
        left: '2%',
        font: {fontSize:'25px',fontWeight: 'bold'}
    });
 
function createGUI(data)
{
    var btn_auc1=Titanium.UI.createButton({     //button for auction image
        //title: 'Login',
        width:'50%',
        height: '30%',
        top: '15%',
        left:'2%',
        font: {fontSize:'20px' ,fontWeight: 'bold'} 
    });
 
    //alert(data[2].id);
    var lbl_auc1Name=Titanium.UI.createLabel({
        text: data.name,
        clickable: true,
        width: Titanium.UI.SIZE,
        height:Titanium.UI.SIZE,
        top: '47%' ,
        left: '7%',
        font: {fontSize:'18px'} 
    });
 
    var lbl_auc1Price=Titanium.UI.createLabel({
        text: data.current_auction_price,
        width: Titanium.UI.SIZE,
        height:Titanium.UI.SIZE,
        top: '16%' ,
        left: '58%',
        font: {fontSize:'17px'} 
    });
 
    var lbl_auc1LB=Titanium.UI.createLabel({
        text: data.last_bidder,
        width: Titanium.UI.SIZE,
        height:Titanium.UI.SIZE,
        top: '27%' ,
        left: '58%',
        font: {fontSize:'17px'} 
    });
 
    var btn_Bid=Titanium.UI.createButton({
        title: 'Bid',
        backgroundColor: '#00ff00',
        width:Titanium.UI.SIZE,
        height: Titanium.UI.SIZE,
        top: '36%',
        left:'68%',
        font: {fontSize:'20px' ,fontWeight: 'bold'} 
    });
 
    win.add(lbl_Auctions);
    win.add(btn_auc1);
    win.add(lbl_auc1Name);
    win.add(lbl_auc1Price);
    win.add(lbl_auc1LB);
    win.add(btn_Bid);
}
win.open();

I know this is very pathetic way to do this but I am very new to Titanium and javascript so I've no other idea (use of views or other methods) to solve this problem, so pardon me if I make you laugh. Any help,suggestion or idea in this regard will be greatly appreciated and please reply ASAP as I am stucked here and can't do anything further. Many thanks in advance.

2 Answers

Your Answer

Think you can help? Login to answer this question!

Accepted Answer

Accepted Answer

var controls = [];
var countControls = 5; // remote
for(var i = 0; i < countControls; i++) {
var control ={};
control.labelName = createNameLabel(i);
control.buttonLogin = createLoginButton(i);
...
addControl(control);
controls.push(control);
}

this should give you an idea how you could solve it and Keep your Code clean, you dont have to pay for functions :)

Answer 2

Hello , try in this way :

llbl_Auctions = [];
topprop = 55; // this is space between two labels one below the other
 
        for ( i = 0; i < 10; i++) { // number of time you want label to create set value accordingly
            llbl_Auctions[i] = Titanium.UI.createLabel({
                text : data[i],
                font: {
                    fontSize: 14,
                },
                top: 15+ i * topprop,
                width:110,
                left:10,
                height:40,
                textAlign:"left",
                color: 'White',
            });
 
            Window.add(llbl_Auctions[i]);
 
        }