Visibility/order of multiple views in Alloy app


i'm stuck with something i thought would be easy to achieve.

I created a little app based on Alloy with four windows/views which are all using full screen size. Let's call them a, b, c and d. On startup 'a' is the visible view.

What i want is when i slide 'a' to the left i want 'b' to appear under it.
Now 'b' is visible and when i slide it to the left i want 'a' to reappear again.

But when i slide 'a' or 'b' to the right i want it to reveal 'c' and when 'c' is slided to the right i want 'd' to be revealed.
(Hope this is not too confusing)

I thought i could achieve this with four views/windows and manipulating the zIndex.
But it seems that the zIndex does nothing to the view/windows.

Next i tried to use setVisible, but that also doesn't change anything.

I am using createController and getView to access the views, is this the problem?
Because when i check the manipulated attributes (zIndex or visible) of the view, they are returned as i am expecting them, but in the app the effect is not visible.

Any hints how this could be realized?

Thanks in advance, regards Joe.

PS: I'm testing this with the iOS Simulator and SDK 2.1.4

— asked 3 years ago by Joe Caff
  • Yes, this is kinda confusing. What you are describing sounds very doable, so we'll probably need to see a simple, reproducible test case of what you are doing and how it is failing for you.

    — commented 3 years ago by Tony Lukasavage
  • Ok, sorry.
    Here is a much simpler case.

    I have three controller/view pairs. (index, a and b)
    index.xml consists of one window and requires view a and view b.

    View a and b both consist of one view (Titanium.UI.View) with one button in it. Both views are fullscreen, so when starting the app 'b' is on top, because it's required later, i assume.
    The function triggered by the button should toggle the zIndex of a and b.

    So in a.js this looks like this:

    function onClickBtn(e) {  
        var b = Alloy.createController('b');

    In b.js it's the other way round.

    Now what i see is, that i can manipulate the zIndex of the view which belongs to the controller in which i am. But the zIndex of the view which is accessed through createController and getView seems not to change.

    I hope this makes my problem more clear…

    — commented 3 years ago by Florian Walter
  • And sorry for the account confusion. I posted the question in the office and oversaw that a colleague was logged in. Didn't recognize this until now.

    — commented 3 years ago by Florian Walter

1 Answer

  • Accepted Answer

    OK, there's one major thing wrong here. Don't call createController in your event handler. That is creating a new instance of the controller each time, which I'm certain is not what you are meaning to do. Instead, use the index controller to delegate messages between your a and b controllers.I took the liberty of implementing your example (FYI, this is what I mean by a test case). I've tested it and it works as you would expect.


        <Window backgroundColor="#fff">
            <Require src="a" id="a" onButtonClick="moveAToBack"/>
            <Require src="b" id="b" onButtonClick="moveBToBack"/>


    var a = $.a.getView();
    var b = $.b.getView();
    function moveAToBack() {
        a.zIndex = 1;
        b.zIndex = 10;
    function moveBToBack() {
        a.zIndex = 10;
        b.zIndex = 1;

    a.xml & b.xml

        <View class="container">
            <Button onClick="moveToBack">press me</Button>

    a.js & b.js

    function moveToBack() {


    ".container": {
        backgroundColor: '#f00'


    ".container": {
        backgroundColor: '#00f'
    — answered 3 years ago by Tony Lukasavage
    • Thank you for your very detailed answer, that brought me on the right track!

      What i didn't understand from the docs is, that everytime a new controller is instantiated also a new instance of the view is created.

      So thanks again and happy new year!

      — commented 3 years ago by Florian Walter
    • Great explanation! Now I have a doubt too… a post about createController..getView and navgroups… When using navgroups and go back… the instance of the controller+view is droped?

      — commented 3 years ago by fak ada
    • Hey, I found your answer quite helpful but I am having trouble getting my head around doing a view swap when I have multiple buttons. The first view I has is a basic login form with a sign in and register button. I created this function to manage the zIndexes

      function setViewOrder( loginIndex, registerIndex, testIndex){
          loginView.zIndex = loginIndex;
          registerView.zIndex = registerIndex;
          testView.zIndex = testIndex;

      The problem I am having is, how would I pass in parameters to this method in the other controllers where I trigger the event like below


      — commented 2 years ago by Chris McNulty