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 6 months 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 6 months 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 6 months 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 6 months 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 6 months ago by Tony Lukasavage
answer permalink
2 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 5 months 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 months ago by fak ada

Your Answer

Think you can help? Login to answer this question!