Visibility/order of multiple views in Alloy app

You must Login before you can answer or comment on any questions.

Hi,

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 1 year ago by Joe Caff
3 Comments
  • 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 1 year 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');
        b.getView().setZIndex(3);
        $.a.setZIndex(1);
    }
    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 1 year 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 1 year 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.

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

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

a.xml & b.xml
<Alloy>
    <View class="container">
        <Button onClick="moveToBack">press me</Button>
    </View>
</Alloy>

a.js & b.js
function moveToBack() {
    $.trigger('buttonClick');   
}

a.tss
".container": {
    backgroundColor: '#f00'
}

b.tss
".container": {
    backgroundColor: '#00f'
}

— answered 1 year ago by Tony Lukasavage
answer permalink
3 Comments
  • 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 1 year 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 1 year 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
    $.trigger('onButtonClick');

    — commented 10 months ago by Chris McNulty

Your Answer

Think you can help? Login to answer this question!