PDA

View Full Version : Unable to Center a Module


Dartz
12-02-2010, 04:59 PM
I am writing an AIR Application that requires the user to login at the beginning. The login page is basically a Module that I am loading when a Button is clicked.
When the module loads. the Login Panel must be centered in the screen which is not happening :(


<!--LoginModule.mxml-->
<?xml version="1.0" encoding="utf-8"?>
<mx:Module verticalAlign="middle" horizontalAlign="center" layout="absolute" verticalCenter="0" horizontalCenter="0" width="325" height="200">
<fx:Script>
<![CDATA[
import mx.events.ValidationResultEvent;

protected function unameTISV_invalidHandler(event:ValidationResultEve nt):void
{
// TODO Auto-generated method stub
this.width=400;
this.height=225;
}


protected function pwdTISV_invalidHandler(event:ValidationResultEvent ):void
{
// TODO Auto-generated method stub
this.width=400;
this.height=225;
}


protected function unameTISV_validHandler(event:ValidationResultEvent ):void
{
// TODO Auto-generated method stub
this.width=325;
this.height=200;
}


protected function pwdTISV_validHandler(event:ValidationResultEvent): void
{
// TODO Auto-generated method stub
this.width=325;
this.height=200;
}

]]>
</fx:Script>
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
<mx:StringValidator valid="unameTISV_validHandler(event)" invalid="unameTISV_invalidHandler(event)" id="unameTISV" property="text" minLength="3" required="true" requiredFieldError="This field is required." maxLength="16" enabled="true" source="{unameTI}" trigger="{loginBtn}" triggerEvent="click" tooShortError="Username must contain atleast 3 characters."/>
<mx:StringValidator valid="pwdTISV_validHandler(event)" invalid="pwdTISV_invalidHandler(event)" id="pwdTISV" property="text" minLength="6" required="true" requiredFieldError="This field is required." maxLength="16" enabled="true" source="{pwdTI}" trigger="{loginBtn}" triggerEvent="click" tooShortError="Password must contain atleast 6 characters."/>
</fx:Declarations>
<s:Panel skinClass="skins.LoginPanelSkin" width="100%" height="100%" verticalCenter="0" horizontalCenter="0" title="Please Login">
<s:Form fontSize="12" fontWeight="bold" defaultButton="{loginBtn}" textAlign="center" horizontalCenter="0" verticalCenter="0" width="100%" height="100%">
<s:FormItem required="true" label="Username: " horizontalCenter="0">
<s:TextInput restrict="A-Z a-z0-9$#._*" id="unameTI" maxChars="16" horizontalCenter="0" toolTip="Enter your Username."/>
</s:FormItem>
<s:FormItem required="true" label="Password: " horizontalCenter="0">
<s:TextInput id="pwdTI" displayAsPassword="true" maxChars="16" horizontalCenter="0" toolTip="Enter the Password."/>
</s:FormItem>
<s:HGroup width="100%" height="100%" horizontalCenter="0">
<mx:Spacer width="100%"/>
<s:Button width="75" id="loginBtn" label="Login" toolTip="Click here to Login" cornerRadius="5"/>
<mx:Spacer width="100%" horizontalCenter="0"/>
<s:Button width="75" id="cancelBtn" label="Cancel" toolTip="Click here to Cancel and Return to Home Screen." cornerRadius="5"/>
<mx:Spacer width="100%"/>
</s:HGroup>
<s:HGroup horizontalCenter="0" horizontalAlign="center" verticalAlign="middle">
<mx:LinkButton label="Haven't registered yet?" id="regBtn" toolTip="Click here to Register."/>
<mx:LinkButton label="Forgot your Password?" id="fgtpwdBtn" toolTip="Click here to retrieve your Password"/>
</s:HGroup>
</s:Form>
</s:Panel>
</mx:Module>




<!-- testAIRKCVDS.mxml which is my main application loading the modules-->
<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication creationComplete="windowedapplication1_creationCompleteHandler(event )"
verticalCenter="0" horizontalCenter="0" title="KCVDS in AIR" >
<fx:Script>
<![CDATA[
import mx.events.FlexEvent;

import spark.primitives.Rect;



protected function ModLoaderBtn_clickHandler(event:MouseEvent):void
{
// TODO Auto-generated method stub
ModLoaderBtn.visible=false;

myModLoader.verticalCenter=0;
myModLoader.horizontalCenter=0;
myModLoader.url="modules/LoginModule.swf";
myModLoader.loadModule();
}


protected function windowedapplication1_creationCompleteHandler(event :FlexEvent):void
{
// TODO Auto-generated method stub
nativeWindow.maximize();
}

]]>
</fx:Script>
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<s:Group width="100%" height="100%">
<mx:ModuleLoader id="myModLoader" width="100%" height="100%" verticalCenter="0"/>
<s:Button verticalCenter="0" horizontalCenter="0" label="Load Module" id="ModLoaderBtn" click="ModLoaderBtn_clickHandler(event)"/>
</s:Group>
</s:WindowedApplication>




The Same code produces the Login Panel at the center of the screen if I am using a Flash Based(Browser) Application. But the same thing is not happening in AIR. See the Screenshot in the attachment

Had to remove the namespaces from the code as it would not let me submit coz I have less than 50 posts.




I request for help regarding centering the Login Panel. :)


~ Yusei Fudo

drkstr
12-05-2010, 11:12 AM
What happens if you remove the width and height of 100% from the ModuleLoader?