Titanium, waiting for files to be fetched and downloaded remotely before displaying window

Question

Scienario:

I have a window, and I am fetching data remotely over a http protocol. What is the best way in titanium to prevent the window displaying the data prematurely.

In many mobile apps, they get around this problem by having a load indicator , everytime you open a window, how can you do this in titanium?

$.window.addEventListener('load',function(){
..
//some text
..
});

I have tried this, but I am not sure what to do next, as my async methods are fired outside of it. So not sure if this will have any affect.

thanks

Translating this from jquery:

   $.ajaxSetup({
        beforeSend: function() {
            // show loading overlay gif
            $("#Loading").show();

        },
        complete: function() {
            // hide loading overlay gif
               $("#Loading").hide();
        }
    });

    $.ajax({
        type: "GET",
        url: url,
        data: param = "",
        contentType: "application/json; charset=utf-8",
        success: doSomething,
        error: errorFunction
    });
};

Ajax setup means every time I fire an Ajax request, an loading overlay will appear on the screen until the response is received. How can I achieve the same thing in titanium?

Update:

Is this a good way to do it?

Albums.JS

function getAlbumCovers() {
    //first check to see if profile pics already exist in user model

    //create a collection
    var usersCollection = Alloy.Collections.user;

    facebookModule.requestWithGraphPath('me/albums', {
        fields : 'id,name,cover_photo,count,created_time'
    }, 'GET', function(graphResp) {
        //show view indicator before data is fetched
        $.view_indicator.visible = true;
        if (graphResp.success) {
            if (graphResp.result) {

                var rows = [];
                var data = JSON.parse(graphResp.result).data;

                for (x in data) {
                    Ti.API.debug(JSON.stringify(data[x]));

                    if (data[x].name == "Profile Pictures") {

                        var row = Titanium.UI.createTableViewRow({
                            width : '100%',
                            height : 'auto'
                        });
                        var image = Titanium.UI.createImageView({
                            image : "https://graph.facebook.com/" + (data[x].cover_photo || 0) + "/picture?access_token=" + Ti.Facebook.accessToken,
                            top : 0,
                            left : 0,
                            width : 100,
                            height : 100
                        });
                        var title = Titanium.UI.createLabel({
                            text : String.format("%s (%d)", data[x].name, data[x].count),
                            top : 0,
                            left : 110,
                            width : 'auto',
                            height : 'auto'
                        });
                        row.add(image);
                        row.add(title);
                        rows.push(row);

                    } else {

                        break;

                    }

                }

                //set table rows
                $.tableview.setData(rows);

                //end
            }

            $.view_indicator.visible = false;

        } else {
            if (e.error) {
                alert(e.error);
            } else {
                alert("Unkown result");
            }
        }
    });

}

Albums.XML

<Alloy>
    <Window id="win" backgroundColor="white">
        <LeftNavButton>
            <Button id="lbtn" onClick="rightButtonClicked" />
        </LeftNavButton>
        <RightNavButton>
            <Button id="btnRight" onClick="rightButtonClicked" />
        </RightNavButton>
        <View id = "view_indicator">
            <ActivityIndicator id="ind" />
        </View>
        <TableView id="tableview"></TableView>
    </Window>
</Alloy>

App.tss

//overlay

//loading overlay to cover full screen
"#view_indicator": {
    backgroundColor : '#000',
    opacity : 0.6,
    width : '100%',
    height : '100%',
    borderRadius : 5,
    zIndex: 20,
    visible : false
},
"#ind": {
    style : Ti.UI.iPhone.ActivityIndicatorStyle.BIG,
    visible : true
},

In this instance I have made a call to Facebook api, and placed $.view_indicator.visible = true; just before if (graphResp.success) { function. The loading overlay is removed once if (graphResp.success) { is hit.

The idea is, the end user has to wait for the table to be populated before seeing the tableview.

I am not sure if this is the correct way of doing this. Could someone confirm, cheers.

Answer 1

You can achieve this effect by calling window.open() at the end of onload callback in `HTTPClient.

var window = Ti.UI.createWindow();

var http = Ti.Network.createHTTPClient({
    onload: function(e) {
        var response = this.responseText;
        /* Add views to window based on response */
        window.open();
    }
});

http.open('GET', url);
httpCallbackDecorator(http);
http.send();


function httpCallbackDecorator(http) {
    var onloadCallback = http.onload;
    var onerrorCallback = http.onerror;

    http.onload = function(event) {
        onloadCallback.call(this, event);
        hideLoadingIndicator();
    }

    http.onerror = function(event) {
        onerrorCallback.call(this.event);
        hideLoadingIndicator();
    }
}