Home Tutorials Forums Articles Blogs Movies Library Employment Press

Go Back   ActionScript.org Forums > Flex > Flex 2, 3 & 4

Reply
 
Thread Tools Rate Thread Display Modes
Old 03-05-2008, 12:42 AM   #1
shizny
Senior Member
 
Join Date: Jan 2003
Posts: 153
Default Aligning components in viewStack

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

Code:
<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.

Code:
<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?

Last edited by dr_zeus; 03-05-2008 at 05:33 PM. Reason: added [code][/code] formatting tags
shizny is offline   Reply With Quote
Old 04-30-2008, 03:58 PM   #2
iongion
Registered User
 
Join Date: Aug 2005
Posts: 19
Red face probably a helpful answer

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 like:

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

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

i think it will work, but this looks so ugly
iongion is offline   Reply With Quote
Old 04-30-2008, 04:07 PM   #3
iongion
Registered User
 
Join Date: Aug 2005
Posts: 19
Thumbs up The actual sollution

The mxml code with the view stack:

HTML Code:
	<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:

ActionScript Code:
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 is offline   Reply With Quote
Old 04-30-2008, 04:30 PM   #4
iongion
Registered User
 
Join Date: Aug 2005
Posts: 19
Angry update

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.
iongion is offline   Reply With Quote
Old 04-30-2008, 07:07 PM   #5
kahuja
Maverick
 
kahuja's Avatar
 
Join Date: Mar 2008
Location: India
Posts: 225
Send a message via AIM to kahuja Send a message via Yahoo to kahuja
Default

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...youts-in-flex/
__________________
Happy Flexing !!
k.

Scratch Pad

Last edited by kahuja; 04-30-2008 at 07:10 PM. Reason: added link
kahuja is offline   Reply With Quote
Old 04-30-2008, 07:09 PM   #6
kahuja
Maverick
 
kahuja's Avatar
 
Join Date: Mar 2008
Location: India
Posts: 225
Send a message via AIM to kahuja Send a message via Yahoo to kahuja
Default

Code:

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>
__________________
Happy Flexing !!
k.

Scratch Pad
kahuja is offline   Reply With Quote
Old 05-01-2008, 03:55 PM   #7
iongion
Registered User
 
Join Date: Aug 2005
Posts: 19
Thumbs down Wrong answer

Kaluja, thanks for the answer, but the centering was about the ViewStack component, please read it again if want to give a viable answer.
iongion is offline   Reply With Quote
Old 05-02-2008, 02:31 AM   #8
kahuja
Maverick
 
kahuja's Avatar
 
Join Date: Mar 2008
Location: India
Posts: 225
Send a message via AIM to kahuja Send a message via Yahoo to kahuja
Default

Quote:
Originally Posted by iongion View Post
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.
__________________
Happy Flexing !!
k.

Scratch Pad
kahuja is offline   Reply With Quote
Old 05-02-2008, 08:02 AM   #9
iongion
Registered User
 
Join Date: Aug 2005
Posts: 19
Arrow Doubts

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 :

HTML Code:
<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.

HTML Code:
<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.
iongion is offline   Reply With Quote
Old 05-02-2008, 09:09 AM   #10
creynders
flash veteran
 
creynders's Avatar
 
Join Date: May 2005
Location: Belgium
Posts: 914
Default

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.
creynders is offline   Reply With Quote
Reply


Thread Tools
Display Modes Rate This Thread
Rate This Thread:

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump

Similar Threads
Thread Thread Starter Forum Replies Last Post
pusing 2 complex components to one tileList ljonny18 Flex 2, 3 & 4 0 11-20-2007 01:45 PM
Refencing ViewStack sub components enigo_m Flex 2, 3 & 4 8 07-29-2007 03:10 AM
viewStack problem ljonny18 Flex 2, 3 & 4 0 11-08-2006 01:29 PM
Why do components take so long to appear on stage? xbrotherx Components 3 06-21-2006 04:00 PM
MX components can't be used with MX2004 components antoniomax Components 3 09-12-2003 02:29 PM


All times are GMT. The time now is 11:40 AM.

///
Follow actionscriptorg on Twitter

 


Powered by vBulletin® Version 3.8.5
Copyright ©2000 - 2014, Jelsoft Enterprises Ltd.
Ad Management plugin by RedTyger
Copyright 2000-2013 ActionScript.org. All Rights Reserved.
Your use of this site is subject to our Privacy Policy and Terms of Use.