CODEWITHSUNDEEP
javascripttitaniumappceleratorcommonjs
ContentiousMaximus
ContentiousMaximus

Reputation: 1304

Titanium design advice

While learning Appcelerator Titanium, I'm building an app that starts with a Window that contains 2 labels. The two labels (onclick) should open 2 different Windows (each containing tabgroups).

So, in my app.js I have:

Window = require('ui/handheld/ApplicationWindow');

and in my ApplicationWindow function:

    var window1 = Ti.UI.createWindow({
        backgroundColor:'#ffffff'
    });

    var label = Ti.UI.createLabel({ text: "Open first Window", top:10 });
    window1.add(label);

    var label2 = Ti.UI.createLabel({ text: "Open second Window", top:50 });
    window1.add(label2);

    var window2 = Titanium.UI.createWindow({url:"A.js",backgroundColor:'#00ff00'});
    var window3 = Titanium.UI.createWindow({url:"B.js",backgroundColor:'#ff0000'});

    label.addEventListener("click", function(e) {
    var t = Ti.UI.iPhone.AnimationStyle.CURL_UP;
    window1.animate({view:window2,transition:t},function(){window2.open();});
    });

    label2.addEventListener("click", function(e) {
    var t = Ti.UI.iPhone.AnimationStyle.CURL_UP;
    window1.animate({view:window3,transition:t},function(){window3.open();});
    }); 

    return window1;

The first question is: is this a good design? Is it improvable? How?

The second question is: is there a way to show the page I'm opening before the end of the transition? At the moment it seems the JS contained in A.js and B.js is executed only when the animation stops.

Thanks, any help is welcome and sorry for the newbie question.

[EDIT] This is my current code after Ch4rAss's comment:

function ApplicationWindow() {

    var root = Ti.UI.createWindow({
        backgroundColor:'#ffffff'
    });

    var label = Ti.UI.createLabel({ text: "Open first Window", top:10 });
    root.add(label);

    var label2 = Ti.UI.createLabel({ text: "Open second Window", top:50 });
    root.add(label2);

    var win2 = require('ui/handheld/Win2');
    var win3 = require('ui/handheld/Win3');

    label.addEventListener("click", function(e) {
    var t = Ti.UI.iPhone.AnimationStyle.CURL_UP;
    win2.open({transition:t});
    });

   label2.addEventListener("click", function(e) {
   var t = Ti.UI.iPhone.AnimationStyle.CURL_UP;
    win3.open({transition:t});
   }); 

    return root;
}

module.exports = ApplicationWindow;

and:

function Win2(){
        /* You can (of course) do more than this */
        return Ti.UI.createWindow({backgroundColor:'#00ff00'});
    }
module.exports = Win2;

Upvotes: 0

Views: 648

Answers (1)

Ch4rAss
Ch4rAss

Reputation: 754

You should add animation to open() method in order to open window during an animation:

window1.open({transition:Titanium.UI.iPhone.AnimationStyle.CURL_UP});

I would recommend to use separate file for each window and use CommonJS to require() it. Same approach as you use for ApplicationWindow. In moment you creating two windows and loading them to memory without using them! Better would be:

var Win1 = require('ui/handheld/WhateverWindow');
label.addEventListener("click", function(e) {
   var win1 = new Win1();
   win1.open({transition:Titanium.UI.iPhone.AnimationStyle.CURL_UP});
});

And ui/handheld/WhateverWindow.js

(function() {
    var WhateverWindow = function() {
        /* You can (of course) do more than this */
        return Ti.UI.createWindow({backgroundColor:'#00ff00'});
    }
    module exports = WhateverWindow;
})();

You can read more here.

Upvotes: 2

Related Questions