Aligning a Login Page at the center

Hi,

I have a very basic question on flex. I'm facing problem in aligning a login page at the center of the page.

I want the component at the center of the screen.

Thanks

this will be a hard question unless you give more information about you layout, are you displaying this login as a popup, or just embed it to your application page. what's your layout options(absolute, vertical, horizontal, constrained layout...etc)

Hi,

Thanks for your reply.

Sorry for incomplete details. Yes its embed in the mxml page. The whole login.mxml page is embed in main index.mxml something like this....

login.mxml is a HBox (Code which I have posted in the first post is login.mxml code).

Also, layout which I have used is absolute. Which layout will help me in doing this?

Thanks in advance

Cheers

try change verticalAlign=center and horizontalAlign = center to verticalCenter="0" horizontalCenter="0"

Hi Hongli,

Login screen is at the top left corner now not at the center of the page.

This is what I have done..

<mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:components="com.common.*" verticalCenter="0" horizontalCenter="0">
	
	
	<mx:RemoteObject id="loginService" 
			 destination="controller" 
			 result="loginServiceResultHandler(event);" 
			 fault="loginServiceFaultHandler(event);" 
			 showBusyCursor="true" />

<mx:Script>
  
		<![CDATA[
			import mx.collections.ArrayCollection;
			import mx.rpc.AsyncToken;
			import mx.rpc.events.ResultEvent;
			import mx.rpc.events.FaultEvent;
			import mx.events.ListEvent;
			import com.fidelity.fps.common.*;
			import mx.core.Application;
			import mx.controls.Alert;
			import mx.rpc.remoting.mxml.RemoteObject;
			import mx.containers.TabNavigator;
			import mx.containers.ViewStack;
			import flash.net.URLRequestMethod;
			import mx.rpc.http.*;
			import mx.utils.URLUtil;

public function loginServiceResultHandler(event:ResultEvent):void{		
			//processing here
		}
						
		public function loginServiceFaultHandler(event:FaultEvent):void{
			Alert.show(event.fault.toString());
		}

public function authenticate():void{
						
			var loginIDStr:String = loginid.text;
			var passwordStr:String = password.text;
			
			if(loginIDStr!="" && passwordStr!=""){
				// authenticate the user
				loginService.authenticate(loginIDStr, passwordStr);
			}
		}
		
		
        		
		]]>
	</mx:Script>
	
	<mx:Panel resizeEffect="Resize" width="270" height="240"  title="LOGIN PAGE" id="panel1">

<mx:Text  x="10" y="5" width="100%" color="blue"
            text="Please Use Your Aid and LAN Password To Login"/>

<mx:Label x="10" y="30" text="Username:" id="label1"/>
  <mx:TextInput x="10" y="56" id="loginid"/>
  <mx:Label x="10" y="86" text="Password:" id="label2"/>
  <mx:TextInput x="10" y="112" id="password" displayAsPassword="true"/>
  <mx:Button x="10" y="142" label="Login" id="Login" click="authenticate();"/
  
 </mx:Panel>

<mx:StringValidator source="{loginid}" property="text" 
    	tooShortError="Login Id is a required field"     	
    	minLength="0"
    	trigger="{Login}" triggerEvent="click"/>
    	
	<mx:StringValidator source="{password}" property="text" 
    	tooShortError="Password is a required"     	
    	minLength="0"
    	trigger="{Login}" triggerEvent="click"/> 
	
	
</mx:HBox>

you should specify verticalCenter="0" horizontalCenter="0" at parent page the application page

No luck

my parent page (index.mxml) now looks like this (still login box comes at left topmost corner)

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" horizontalCenter="0" verticalCenter="0" layout="absolute" 
	xmlns:modules="com.modules.*" viewSourceURL="srcview/index.html">
          	   	
  <mx:HBox height="100%" width="100%" horizontalGap="0" horizontalCenter="0" verticalCenter="0">

<mx:Panel width="100%" height="100%" horizontalCenter="0" verticalCenter="0">
      <mx:HBox width="100%" y="47" x="10" paddingRight="5">
		  <mx:Spacer width="100%"/>
		  <mx:Label text="Welcome" fontSize="10"  fontWeight="bold"/>
		  <mx:Image source="assets/welcome.gif"/>	  
      </mx:HBox>
      
      <mx:HBox id="logoutHBox" name="logoutHBox" width="100%" includeInLayout="false" visible="false">
		  <mx:Spacer width="100%"/>
		  <mx:Label selectable="true">
	        <mx:htmlText>
	            <![CDATA[<a href='/index.mxml'>Logout</a>]]>
	        </mx:htmlText>
		  </mx:Label>		  	  
      </mx:HBox>
      
      <mx:ViewStack id="loginStack" name="loginStack" horizontalCenter="0" verticalCenter="0" includeInLayout="true" visible="true" width="100%" height="100%" >
      
      	
      		<modules:login/>
      	
      </mx:ViewStack>
      
      <mx:TabNavigator id="tn" name="tn" includeInLayout="false" visible="false" width="100%" height="100%" >

<modules:app/>
		
	
      </mx:TabNavigator>
      
    </mx:Panel>

</mx:HBox>
</mx:Application>

Please see the screenshot..How its currently displaying.

Pink box is where I want the login box to appear

Hope this makes more sense

what about removing horizontalCenter="0" verticalCenter="0" in your Application tag, you don't need them there. and further more you can modularize you component, make a login component then import it in your main page, so that you can reuse the loing component everywhere you want to use it.

sorry its not coming in the center (at pink rectangular box)

yes thats right. No need of that attibute in mx:Application tag

<mx:HBox horizontalAlign="center"> will centerize your login page.

<mx:HBox horizontalAlign="center"> is just moving the login control from topmost left to topmost middle. Still its NOT at the pink box.

I have got it now

horizontalAlign center move the login control from topmost left to topmost middle and verticalAlign will move it from topmost middle to center of the page (i.e., at the pink box)

Happy ending

nice you got it, but if use flex builder or plugin for eclipse, you should be able to modify the container properties via Property panel, it's a WYSIWYG editor.

Yeah thats right. Editplus little frustrating