0

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;
4

1 に答える 1

2

open()アニメーション中にウィンドウを開くには、メソッドにアニメーションを追加する必要があります。

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

ウィンドウごとに個別のファイルを使用し、CommonJS を使用することをお勧めしますrequire()。に使用するのと同じアプローチApplicationWindow。すぐに、2 つのウィンドウを作成し、それらを使用せずにメモリにロードします! より良いでしょう：

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

と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;
})();

詳しくはこちらをご覧ください。

于 2012-11-12T15:15:13.170 に答える