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

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:

xmlns:MenuStates="com.MenuStates.*"

Then within the application I call to load the component.

<MenuStates:Home includeIn="HomePage" />

The code attached is the custom component "Home"

Help?!?

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


 
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:

<?xml version="1.0" encoding="utf-8"?>
<s:Group xmlns:fx="http://ns.adobe.com/mxml/2009" 
		 xmlns:s="library://ns.adobe.com/flex/spark" 
		 xmlns:mx="library://ns.adobe.com/flex/mx" width="100%" height="100%" currentState="HomePageMain">
	<s:states>
		<s:State name="HomePageMain"/>
	</s:states>
	<fx:Declarations>
		<!-- Place non-visual elements (e.g., services, value objects) here -->
	</fx:Declarations>
	
	<fx:Script>
		
		<![CDATA[
			import com.MenuStates.*;			
			
		]]>
	</fx:Script>
	
	<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"/>	
	
	
	
	

	
	
		
	</s:SkinnableContainer>
	
</s:Group>

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

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.
Random Solutions  
 
programming4us programming4us