How to load controller dynamically

[ohdarling]

I searched issues and found #24 say there is an multiple_views example, but I can not find it.

Currently I load a controller and open it with the code below:

$.t.on('click',function(e) { 
    var a = require('alloy/components/history').create();
    $.tab.open(a.getRoot());
});

Another question, I use html code below to implement a TabGroup, and history is another controller, but in history controller, Titanium.UI.currentTab doesn't work, it just be undefined.

<TabGroup>
    <Tab id="tabHistory">
        <View require="history" id="history"></View>
    </Tab>
</TabGroup>

[tonylukasavage]

can you elaborate on what you are trying to do in your first question? To me it looks like you are manually requiring your history component, creating it, then adding it to the tab's window stack. Your snippet looks correct. What is failing? Are you getting any errors? I need more details on what is actually happening.

Your second issue with currentTab we'll have to look into. I don't think we've used that yet in our early testing. If you can give us more detail on the "history" controller that would help greatly.

[ohdarling]

The first question, the code I used is corrected and no errors, my question is that the correct way to load controller dynamically?

In source code the history controller path is "app/controllers/history.js", but in compiled source is "alloy/components/history.js", so I'm confused about that.

The second question, history view is this:

<Window id="window" class="container">
    <View>
        <Label id="t">Hello, World</Label>
    </View>
</Window>

And the history controller's code is this:

$.t.on('click',function(e) { 
    var a = require('alloy/components/history').create();
    $.tab.open(a.getRoot());
});

index controller's view:

<TabGroup>
    <Tab id="tabHistory">
        <View require="history" id="history"></View>
    </Tab>
</TabGroup>

index controller's code

$.index.open();
$.history.tab = $.tabHistory;

Currently I set history controller's tab in index controller.

[tonylukasavage]

First question: Here's probably the cleanest method

$.t.on('click',function(e) { 
    var a = Alloy.getComponent('history').create();
    $.tab.open(a.getRoot());
});

One caveat though. This format may change in the next few days. getComponent() may change to getView(). Once we iron this out and make any potential changes, I'll annotate this issue to let you know. Check out these additional shorthand functions to make your life easier: https://github.com/appcelerator/alloy/blob/master/Alloy/lib/alloy.js#L105-119

Sorry about the confusion, that's our fault due to a lack of documentation. We should be fixing that in the near future, but in the meantime, the super-brief version is that a "component" is the result of combining the generated code from a corresponding view, controller, and style. So your index.xml, index.js, and index.tss get compiled and then generated into a single runtime module "component" and placed in "alloy/components/index.js".

[ohdarling]

I got it.

Another question is I need use getRoot method to get the window then I can open it.

$.t.on('click',function(e) { 
    var component = Alloy.getComponent('history').create();
    $.tab.open(a.getRoot());
});

Is that the right way?

I think the examples should contains a example shows how to build a project with multiple controllers, and how to switch between controllers, like UINavigationController and UITabBarController in iOS.

Others are good, Titanium Mobile needs a easy to use MVC framework now.

Thanks for your works :)

[tonylukasavage]

Yep, to access the root Titanium UI component, you would use getRoot().

I am literally in the process of adding convenience processing during our compilation to make that even easier. Ideally, you'd be able to call methods like add(), remove(), open(), etc... on Titanium objects, giving them an Alloy component as a parameter, and it would just work. You wouldn't need to add the getRoot(). I'll keep this issue posted on when that occurs.

Check out the masterdetail sample for a very basic case of using multiple views: https://github.com/appcelerator/alloy/tree/master/test/apps/masterdetail

[ohdarling]

Ok, thanks. I'll check that example.

[tonylukasavage]

Ti.UI.currentTab and Ti.UI.currentWindow are always null in single context applications. There is an associated ticket that briefly mentions this:

https://jira.appcelerator.org/browse/TIMOB-2797

also, to see in exhaustive detail exactly how you can manage tabs in a single context application, check out this blog post, which not only covers the topic, but has a full screencast detailing the techniques:

http://developer.appcelerator.com/blog/2011/09/forging-titanium-episode-6-a-single-context-tabbed-application-template.html