We help IT Professionals succeed at work.

Flex custom component  to layout in center of page...

Joel_Sisko asked
Dear Experts,

I am having the hardest time getting my head wrapped around the layout of a custom component inside my application. For now all I want to do is have my custom component that I am loading to be in the absolute center of the page.

So the code following loads the custom component in the main application:

In the root tag I have this:


Then within the application I call to load the component.

<MenuStates:Home includeIn="HomePage" />

The code attached is the custom component "Home"


Thanks for any insight, I have tried several settings with nothing working.

<?xml version="1.0" encoding="utf-8"?>
<s:Group xmlns:fx="http://ns.adobe.com/mxml/2009" 
		 xmlns:mx="library://ns.adobe.com/flex/mx" width="100%" height="100%" currentState="HomePageMain">
		<s:State name="HomePageMain"/>
		<!-- Place non-visual elements (e.g., services, value objects) here -->
			import com.MenuStates.*;			
	<s:SkinnableContainer includeIn="HomePageMain" width="100%" height="100%" >

		<mx:Button label="System Maintenance" width="225" height="64" icon="@Embed(source='assets/png/48x48/SystemMaintenance.png')" includeIn="HomePageMain" x="433" y="149"/>
		<mx:Button x="433" y="241" label="System Wide Features" width="225" height="64" icon="@Embed(source='assets/png/48x48/SystemWide.png')" includeIn="HomePageMain"/>
		<mx:Button x="433" y="61" label="DID's and Phone Numbers" height="64" width="225" icon="@Embed(source='assets/png/48x48/DID.png')" includeIn="HomePageMain"/>
		<mx:Button x="108" y="149" label="Users and Extensions" width="225" height="64" icon="@Embed(source='assets/png/48x48/Users.png')" includeIn="HomePageMain"/>
    	<mx:Button x="108" y="241" label="Phones and Devices" width="225" height="64" icon="@Embed(source='assets/png/48x48/Phones.png')" includeIn="HomePageMain"/>
    	<mx:Button click="currentState'CenterClients'" x="108" y="61" label="Business Center Clients" width="225" height="64" icon="@Embed(source='assets/png/48x48/Clients.png')"  includeIn="HomePageMain" />

		<mx:Image x="10" y="10" source="@Embed(source='/assets/png/32x32/help.png')" right="10" top="2" useHandCursor="true" buttonMode="true" click="OpenHelpWindow(HelpPageId);" includeIn="HomePageMain" horizontalAlign="center"/>
		<mx:Image right="10" includeIn="HomePageMain" x="10" y="42" source="@Embed(source='/assets/png/32x32/window_add.png')" useHandCursor="true" horizontalAlign="center"/>
		<mx:Image right="10" includeIn="HomePageMain" x="10" y="93" source="@Embed(source='/assets/png/32x32/previous.png')" horizontalAlign="center"/>
		<mx:Image right="10" includeIn="HomePageMain" x="10" y="138" source="@Embed(source='/assets/png/32x32/home.png')" horizontalAlign="center"/>
		<mx:Image right="10" includeIn="HomePageMain" x="10" y="181" source="@Embed(source='/assets/png/32x32/logout.png')" click="GoToState('Logout')" horizontalAlign="center"/>	


Open in new window

Watch Question

Well I think for this you have to do the following ... assuming the swf is embedded to maximize 100% in width and height.
In order to center a component exactly in the middle you have to set the x-property to x=(this.parent.width/2)-(this.width/2); and y to y=(this.parent.height/2)-(this.height/2);

Hope it helps ... I'd cecommend listening to "resize" events of the parent in order to update the position.