CODEWITHSUNDEEP
javascriptandroidiphoneiostitanium
Frederik Witte
Frederik Witte

Reputation: 955

Titanium Javascript - code works on iPhone, but not on Android?

I am currently making a module, which does the hard work for you with scrollviews. When I run this code on the iPhone simulator, it's perfect - no bugs. On the android emulator, I just see a blank screen?

Why do I only see a blank screen, and how do I fix it? Here is my code:

window = Ti.UI.createWindow({
    backgroundColor : 'white'
});

function SuperScrollView(window) {
    this.scrollview = Ti.UI.createScrollView({
        showVerticalScrollIndicator : true,
        height : window.height,
        width : window.width,
        contentHeight : 'auto'
    });
    this.view = Ti.UI.createView({
        height : 0,
        width : window.width
    });
    this.addElement = function(element) {
        var height = this.view.height;
        var elementHeight = element.height;
        element.top = height;
        this.view.add(element);
        this.view.height += elementHeight;
        height = this.view.height;
        this.scrollview.contentHeight = height;
        alert(height);
    }
    this.scrollview.add(this.view);
    window.add(this.scrollview);
}

var scrollview = new SuperScrollView(window);
scrollview.addElement(Ti.UI.createView({
    width : 200,
    height : 500,
    backgroundColor : 'blue'
}));

window.open();

Upvotes: 0

Views: 1424

Answers (3)

Craig
Craig

Reputation: 2193

The problem is that you're relying on window.width and window.height, and these evaluate to 0 on Android (whereas they work fine on iOS). This results in your view not having any size. It's better to use Ti.Platform.displayCaps.platformWidth and Ti.Platform.displayCaps.platformHeight to get the dimensions of the screen. You'll need to be aware that this will be different on each platform, and size your views accordingly, but then you'd always have that problem.

I've altered your code slightly so you can see it in action on both platforms.

window = Ti.UI.createWindow({
    backgroundColor : 'white'
});

function SuperScrollView(window) {
    this.scrollview = Ti.UI.createScrollView({
        showVerticalScrollIndicator : true,
        height : Ti.Platform.displayCaps.platformHeight,
        width : Ti.Platform.displayCaps.platformWidth,
        contentHeight : 'auto'
    });
    this.view = Ti.UI.createView({
        height : 0,
        width : Ti.Platform.displayCaps.platformWidth
    });
    this.addElement = function(element) {
        var height = this.view.height;
        var elementHeight = element.height;
        element.top = height;
        this.view.add(element);
        this.view.height += elementHeight;
        height = this.view.height;
        this.scrollview.contentHeight = height;
        alert(height);
    }
    this.scrollview.add(this.view);
    window.add(this.scrollview);
}

var scrollview = new SuperScrollView(window);
scrollview.addElement(Ti.UI.createView({
    width : 200,
    height : Ti.Platform.displayCaps.platformHeight + 500,
    backgroundColor : 'blue'
}));

window.open();

EDIT: The other thing you can do is wait until the window had opened, and then add the scrollview to it once the width and height have been evaluated:

window = Ti.UI.createWindow({
    backgroundColor : 'white'
});

function SuperScrollView(window) {
    this.scrollview = Ti.UI.createScrollView({
        showVerticalScrollIndicator : true,
        height : window.height,
        width : window.width,
        contentHeight : 'auto'
    });
    this.view = Ti.UI.createView({
        height : 0,
        width : window.width
    });
    this.addElement = function(element) {
        var height = this.view.height;
        var elementHeight = element.height;
        element.top = height;
        this.view.add(element);
        this.view.height += elementHeight;
        height = this.view.height;
        this.scrollview.contentHeight = height;
        alert(height);
    }
    this.scrollview.add(this.view);
    window.add(this.scrollview);
}


window.open();

window.addEventListener('open', function(){
    var scrollview = new SuperScrollView(window);
    scrollview.addElement(Ti.UI.createView({
        width : 200,
        height : window.height + 500,
        backgroundColor : 'blue'
    }));

});

Upvotes: 4

NoBugs
NoBugs

Reputation: 9496

In the location bar, type "about:debug". Then you'll see many extra settings in the settings menu, one should say "Show JavaScript Console". Check this, and it may show the error you're having. (If you have the sdk installed, you could also check the logcat.)

Upvotes: 0

Haes
Haes

Reputation: 13116

I don't know anything about titanium or mobile phone development, but you're missing a semicolon ; at the end of the this.addElement assignment:

this.addElement = function(element) {
    var height = this.view.height;
    var elementHeight = element.height;
    element.top = height;
    this.view.add(element);
    this.view.height += elementHeight;
    height = this.view.height;
    this.scrollview.contentHeight = height;
    alert(height);
}; /* <-- missing semicolon */

Upvotes: 0

Related Questions