Question

I’m currently working on an iPad App and ran into the following Issue.

When I’m trying to open a new window which contains a set of buttons, which are created in a loop, during the transition only the first button is visible, the rest will be rendered after the new window is visible. Looks awful, and I can’t figure out a way to “wait” with sliding until everything is in place (kinda like jquery’s ready, or a callback when DOM-Elements are loaded).

Here’s what I’m doing:

clicker.addEventListener('click', function(e){    
  var overview = Ti.UI.createWindow( {
    title : "Overview",
    barColor: '#000',
    layout : 'vertical',
    url: '/views/overview.js',
    _parent: Titanium.UI.currentWindow,
    navGroup : navGroup,
    rootWindow : win1
  });

  navGroup.open(overview, {animated:true});
});

and in overview.js I do the following:

var overviewdata = [/*some data*/];
for(var i = 0;i < overviewdata.length;i++){
//calculations for proper positioning
if(i == 0 || i%4 == 0){
    toppx = 30;
    leftpx = 40;
}
else
{
    leftpx += 245;
    toppx = -200;
}

overviewbttns[i] = Ti.UI.createButton({ 
    title: overviewdata[i].title,
    backgroundImage:"/images/views/button.png",
    width: 200,
    height: 200,
    left: leftpx,
    top: toppx,
    id: i
});

//add to window
win.add(overviewbttns[i]);

//attach event handler
overviewbttns[i].addEventListener('click',function(e){

    var w = Ti.UI.createWindow( {
        title : overviewdata[e.source.id].title,
        barColor: '#000',
        layout : 'vertical',
        url: "/views/"+overviewdata[e.source.id].jsfile,
        _parent: Titanium.UI.currentWindow,
        navGroup : win.navGroup,
        rootWindow : win.rootWindow        
    });

    win.navGroup.open(w);
});

}

So, is there a way to get a callback/event when the overview window is fully rendered?

Any hints are appreciated, I’m really stuck here.

Thanks in advance!

Answer 1

I have one idea create one function and put your overview.js code in and when you click on clicker button for opening overview.js fire custom event like Ti.App.fireEvent('loadData'); and then open your window Hope this may help you.

Ti.App.addEventListener('loadData',function(e){
    callFunction(); //== call function for fill data into window 
});