Aligning components in viewStack

[shizny]

I'm trying like a donkey to do the simplest thing. I just want to center (vertically, and horizontally) a login box that is a view in a view stack. I have two files, the main application and the component. The component ui looks like this

<mx:Panel width="100%" height="200" layout="absolute" id="loginBoxScreen" title="Game Time Tech . Login" horizontalAlign="center">
<mx:Form defaultButton="{mySubmitButton}" width="260" x="10" y="10" height="131">
<mx:FormItem label="Username :">
<mx:TextInput id="username"
width="121"/>
</mx:FormItem>
<mx:FormItem label="Password : ">
<mx:TextInput id="password"
width="122"
displayAsPassword="true"/>
</mx:FormItem>
<mx:FormItem width="207" horizontalAlign="right">
<mx:Button id="mySubmitButton"
label="Login"
click="//submitLogin(event);" width="62" labelPlacement="right"/>
</mx:FormItem>
</mx:Form>
</mx:Panel>

The mainApp ui looks like this.

<mx:VBox paddingBottom="10" paddingLeft="10" paddingRight="10" paddingTop="10" backgroundColor="#ffffff" width="1000" height="750">
<mx:ViewStack id="vwStackTwo" width="100%" paddingBottom="10" paddingTop="10" resizeToContent="true" creationPolicy="all" height="50">
<view:allMenu id="allMenu" height="50"/>
</mx:ViewStack>
<mx:HBox width="100%" horizontalAlign="center" verticalAlign="middle">
<mx:ViewStack id="vwStack" width="980" paddingBottom="10" paddingTop="10" resizeToContent="true" creationPolicy="all" height="585">
<view:loginBox id="loginBox"/>
<view:enterPlayData id="enterPlayData"/>
<view:importNewGameData id="importNewGameData" />
<view:singleGameSelect id="singleGameSelect" />
</mx:ViewStack>
</mx:HBox>
</mx:VBox>

Anybody got any ideas?

[iongion]

It seems that no one builds applications with things centered in a view stack.

This is an urgent issue for me also, a solution is this:

bind x and y of the component to functions in local object
like :

x = {getXPos(this)}
y = {getYPos(this)}

then define the functions the old flash way :D like:

private function getXPos(obj:DisplayObject):Number {
return (myViewStackId.width - obj.width) / 2;
}

private function getYPos(obj:DisplayObject):Number {
return (myViewStackId.height - obj.height) / 2;
}

i think it will work, but this looks so ugly :(

[iongion]

The mxml code with the view stack:



<mx:VBox
width="680"
height="460"
horizontalAlign="center"
verticalAlign="middle">

<mx:ViewStack
id="navigationViews"
width="100%"
height="100%"
creationComplete="positionViewStackElements()">

<com:LoginPanel id="loginPanel" width="320" height="240"/>

</mx:ViewStack>
</mx:VBox>



The positioning:



private function positionViewStackElements():void {
loginPanel.x = getXPos(loginPanel);
loginPanel.y = getYPos(loginPanel);
}

private function getXPos(obj:DisplayObject):Number {
return (navigationViews.width - obj.width) / 2;
}

private function getYPos(obj:DisplayObject):Number {
return (navigationViews.height - obj.height) / 2;
}



for me it works without flaw.

[iongion]

It seems that alignment is really buggy, i've tried and found that if you use a combination of creationComplete="positionViewStackElements()" and render="positionElements()", then you will achieve the desired positioning.

[kahuja]

Why do you not use "horizontolCenter=0" and "verticalCenter=0" and you will get what you want.

You do not have to write any custom logic. You should read this: http://kapilvirenahuja.in/2008/04/14/creating-layouts-in-flex/

[kahuja]

Code:


<mx:Canvas borderThickness="4" borderColor="#CCCCCC" styleName="body" borderStyle="solid" horizontalCenter="0" verticalCenter="0">
<mx:VBox>
<!-- Put some image at this location -->
<mx:Image source="@Embed(source='../assets/images/banner.jpg')" />

<mx:Text id="loginMessages" styleName="errmsgs" textAlign="center" minHeight="35" paddingBottom="10" paddingTop="5" width="100%"/>

<mx:HBox paddingLeft="5" paddingRight="5" paddingBottom="20">
<mx:Label text="Username:" styleName="labelWhite"/>
<mx:Label color="#F11111" text="*" width="8" paddingLeft="-5" />
<mx:TextInput id="txtUsername" tabIndex="1" width="100" enter="doLogin();"/>

<mx:Label text="Password:" styleName="labelWhite" paddingLeft="10"/>
<mx:Label color="#F11111" text="*" width="8" paddingLeft="-5" />
<mx:TextInput id="txtPassword" tabIndex="2" width="100" displayAsPassword="true" enter="doLogin();"/>

<mx:Spacer width="20"/>
<mx:Button label="Login" tabIndex="3" click="doLogin();" useHandCursor="true" buttonMode="true" mouseChildren="false"/>
</mx:HBox>
</mx:VBox>
</mx:Canvas>

[iongion]

Kaluja, thanks for the answer, but the centering was about the ViewStack component, please read it again if want to give a viable answer.

[kahuja]

centering was about the ViewStack component

does not makes sense to me. What you need is to center some component and thats what the code I sent does. Also, ViewStack should be used as a container, which means that you place stuff in the ViewStack. Essentially your placements on the screen can not simply reply on the ViewStack alone, but have to be on the children as well.

Note, the code i sent you has been placed in a view stack only.

Again use the vertialCenter and Horizontol center.

[iongion]

Firstly:


1) What are you talking about ? please read the first post and understand what this guy problem is.

2) If you want to do something, please center some stuf in a ViewStack without placing first magic containers <- this is the problem


Like this :


<mx:ViewStack id="mama">

<mx:Panel id="bb1">
</mx:Panel>

<mx:Panel id="bb2">
</mx:Panel>

</mx:ViewStack>


try to center bb1 and bb2 in the ViewStack, not using any other voodoo stuf like in this way.


<mx:ViewStack id="mama">

<mx:VBox verticalAlign="middle" horizontalAlign="center">
<mx:Panel id="bb1">
</mx:Panel>
</mx:VBox>

<mx:VBox verticalAlign="middle" horizontalAlign="center">
<mx:Panel id="bb2">
</mx:Panel>
</mx:VBox>

</mx:ViewStack>


And if you cant give a pertinent answer, stop answering cause this debate is going too much over what it should be.

[creynders]

Instead of moaning, you should try what Kahuja suggested, because that IS the proper way to center something in a component (also a viewstack).
It was a pertinent answer.

[kahuja]

And if you cant give a pertinent answer, stop answering cause this debate is going too much over what it should be.


I guess you missed the whole point. Let me make myself clear for the last time, because I will not give you answer which is incorrect.

The Containers exist for a reason.

[iongion]

"does not makes sense to me." - What does not make sense to you ?

"What you need is to center some component and thats what the code I sent does." - not just some component somewhere, but a component inside a viewstack container.

"Also, ViewStack should be used as a container, which means that you place stuff in the ViewStack." - isn't this what the viewstack stands for ?

"Essentially your placements on the screen can not simply reply on the ViewStack alone, but have to be on the children as well." - what do you mean ?

"Note, the code i sent you has been placed in a view stack only." - those elements are not placed directly in the stack, but in something that feels like a magic, weird tree structure:


ViewStack
- Canvas
- VBox
- component1
- component2
- component3


and why does it feel like this ?
because as you said, viewstack is a container so why should use another container inside a container and on top of this, to use another container, when one would think that a cleaner structure would be to just have:


ViewStack
- component1
- component2
- component3


where components are centered.

"Again use the vertialCenter and Horizontol center." - well, thanks.


to creynders: its not about moaning, but someone should read the problem fully to grasp what its all about, i hope he tries himself the code to see the problem, before giving the answer.

[kahuja]

I am sorry to say that your understanding of containers seems to way off. I say this because of the code you sent



ViewStack
- Canvas
- VBox
- component1
- component2
- component3


Why even have a VBox in a Canvas? - use it directly


Next reason:


ViewStack
- component1
- component2
- component3


Your first component should be sitting inside in some of the containers only like Canvas / Panel/ Box exist for a reason. To begin with you can not place non-container based components directly in the View stack. And you need to make a choice.


Lastly "i hope he tries himself the code to see the problem" - when I see code, i know what it does - is an Art that you learn by experience. I may have not been clear enough to share my view point in the first instance which was that this seems to be longer route and there is an alternate.

This scenario narrates a story - when you spend too much time to try to solve a problem, you should ask yourself a question: Am I headed in the right direction?. In this case, you have made up your mind and did not even try to understand a point of view for an alternate approach.

[kahuja]

Sorry but I missed one thing:

You are trying to put a panel and then centrally align it. Now ViewStack is supposed to a navigational container and it is not its job to provide alignment against a window. So, if you try and provide a solution around it - that is a bad idea.

For that you should be using others. Now why panel is not a good choice directly is because Panel is going to layout vertically and then when you try to retrofit it to do some of constraint-based layouts like what Canvas does - another bad idea.

In my humble opinion - at least see what I recommended and it will save you some time and does not have any performance hits because of the nature of the ViewStack.

[iongion]

I am sorry to say that your understanding of containers seems to way off. I say this because of the code you sent - why ? because i disagree with some flex internal designs it makes me an unknowing ? :)

I am sorry i sounded too rough with you, but i am sick of people answering just for the sake of answering and instead of giving help they put people deeper into the unknown.

"You are trying to put a panel and then centrally align it. Now ViewStack is supposed to a navigational container and it is not its job to provide alignment against a window. So, if you try and provide a solution around it - that is a bad idea." - Now this is an answer.

a workaround is debatable indeed but the ViewStack being a navigational container still makes it a container and it should provide it for cleanness of code.

You gave your solution, with no workarounds (some will see it as bloated), i did mine with a small one (which is cleaner).


Then one can choose by its own will.

[dr_zeus]

If you think that something in the Flex framework could be made better, please file a bug report (http://bugs.adobe.com/flex/).