How to handle dynamic creation of view in alloy xml

Question

I have very simple view index.xml

<Alloy>
    <Window id="byFav">
        <TableView id="tableByFav" />
    </Window>
<Alloy>

in this program I want to open webView and use this instead of tableByFav View when you click tableByFav.

I am not sure how to describe this process in xml.

So I write code in index.js like this.

$.tableByFav.addEventlistener('click',function(e){
    entryWindow = Titanium.UI.createWindow({
        title: "window"
    });
    entryView = Titanium.UI.createWebView({
        url: "google.com"
    }); 
    entryWindow.add( entryView );
    $.byFav.open( entryWindow );
}

However I am not sure it is obeying the concept of alloy.

I am trying to understand the concept of alloy.

Answer 1

You are opening the wrong window, try this instead:

$.tableByFav.addEventlistener('click',function(e){
    var entryWindow = Titanium.UI.createWindow({
        title: "window"
    });
    var entryView = Titanium.UI.createWebView({
        url: "http://www.google.com"
    }); 
    entryWindow.add( entryView );
    // Call open on the entry window itself
    entryWindow.open({
        modal : true // Set to true if you want an opening animation
    });
}

To do this with Alloy, you can create a controller for the webview named (entryWindow.xml) like this:

<Alloy>
    <Window id="entryWindow">
        <WebView id="entryView" />
    </Window>
<Alloy>

And the in controller (entryWindow.js) you can set the url from the supplied arguments:

$.entryView.url = arguments[0].url;

Now in your index controller, you would open the webview like this:

$.tableByFav.addEventlistener('click',function(e){
    // Create a controller, pass url argument
    var controller = Alloy.createController('entryWindow', {url: "http://www.google.com"});
    // Get the controller's view (a window) and open it
    controller.getView().open({
        modal : true // Set to true if you want an opening animation
    });
}