No matter what I do, I cannot have any effect on Flex MXML elements during initialization.
I want to display a different logo depending on whether a flashVar is true or not.
For some reason the flashvar has no effect on how the elements appear.
Am I missing anything ?
<?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:components="ru.kutu.grindplayer.views.components.*"
mouseEnabled="false"
implements="ru.kutu.grind.views.api.IMainView"
preinitialize="preinitialize(event)"
>
<s:states>
<s:State name="initializing" />
<s:State name="ready" />
<s:State name="error" />
</s:states>
<s:BorderContainer
id="logoContainer"
left="0" right="0"
top="0" bottom="0"
mouseEnabled="false"
includeIn="initializing"
backgroundColor="0x070707"
borderVisible = "false"
>
<s:Image
id="logoPaid"
verticalCenter="0"
horizontalCenter="0"
source="#Embed('/../assets/skin/dark.png')"
visible="{is_paid}"
/>
<s:Image
id="logoFree"
verticalCenter="0"
horizontalCenter="0"
source="#Embed('/../assets/skin/dark_free.png')"
visible="{!is_paid}"
/>
</s:BorderContainer>
<components:PlayerView
id="playerView"
left="0" right="0"
top="0" bottom="0"
visible="false"
visible.ready="true"
/>
<s:Label
id="errorDisplay"
width="80%"
mouseEnabled="false"
verticalCenter="0"
horizontalCenter="0"
includeIn="error"
itemCreationPolicy="immediate"
/>
<s:transitions>
<s:Transition
fromState="*" toState="*"
autoReverse="true"
interruptionBehavior="stop"
>
<s:Fade
target="{this}"
duration="300"
/>
</s:Transition>
</s:transitions>
<fx:Script>
<![CDATA[
import mx.core.FlexGlobals;
import mx.events.FlexEvent;
[Bindable]
private var is_paid:Boolean;
public function set errorText(value:String):void {
errorDisplay.text = value;
}
public function initializing(is_paid:Boolean):void {
currentState = "initializing";
}
public function ready():void {
currentState = "ready";
}
public function error():void {
currentState = "error";
}
private function preinitialize(event:FlexEvent):void {
is_paid = FlexGlobals.topLevelApplication.parameters.is_paid;
}
]]>
</fx:Script>
I think you parse String into Boolean. Cause params names and values are String, try this instead:
is_paid = FlexGlobals.topLevelApplication.parameters.is_paid == 'true';
Related
The borders of AdvancedDataGrid are disappearing. I am using the same instance of popup object to show at different times.
For the first time the popup and ADG borders are fine but when i launch the popup next time, the borders get disappeared. Though borders reappear if i try to adjust column size. I am not able to get the cause of this issue and therefore not able to rectify it either.
I tried to readjust visibility of ADG and also tried to call invalidateDisplayList(), but no success.
*ADG = AdvancedDataGrid
I am attaching code snippets.
<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" creationComplete="onCC()" width="1500" height="1000">
<s:layout>
<s:VerticalLayout />
</s:layout>
<fx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
import mx.controls.advancedDataGridClasses.AdvancedDataGridSortItemRenderer;
import mx.managers.PopUpManager;
[Bindable]private var dp:ArrayCollection = new ArrayCollection();
private function onCC():void
{
var obj1:Object = new Object();
obj1.col1 = "col11";
obj1.col2 = "col12";
obj1.col3 = "col13";
dp.addItem(obj1);
obj1 = new Object()
obj1.col1 = "col21";
obj1.col2 = "col22";
obj1.col3 = "col23";
dp.addItem(obj1);
}
var popup:PopupPanel = new PopupPanel();
private function launchPopup():void
{
PopUpManager.addPopUp(popup, this as DisplayObject);
PopUpManager.centerPopUp(popup);
}
]]>
</fx:Script>
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<mx:AdvancedDataGrid sortableColumns="false" sortItemRenderer="{null}" dataProvider="{dp}" draggableColumns="false" >
<mx:groupedColumns>
<mx:AdvancedDataGridColumn headerText="PM1" dataField="col1" />
<mx:AdvancedDataGridColumnGroup headerText="PM2" >
<mx:AdvancedDataGridColumn headerText="NE" dataField="col2" />
<mx:AdvancedDataGridColumn headerText="FE" dataField="col3"/>
</mx:AdvancedDataGridColumnGroup>
</mx:groupedColumns>
</mx:AdvancedDataGrid>
<mx:Button label="launch popup" click="launchPopup()" />
</s:WindowedApplication>
<?xml version="1.0" encoding="utf-8"?>
<s:TitleWindow 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="1000" height="750"
close="titlewindow1_closeHandler(event)">
<s:layout>
<s:HorizontalLayout paddingLeft="20" paddingRight="20" paddingTop="20" paddingBottom="20"/>
</s:layout>
<fx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
import mx.events.CloseEvent;
import mx.managers.PopUpManager;
[Bindable] private var dp:ArrayCollection = new ArrayCollection();
protected function titlewindow1_closeHandler(event:CloseEvent):void
{
// TODO Auto-generated method stub
PopUpManager.removePopUp(this);
}
]]>
</fx:Script>
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<mx:AdvancedDataGrid id="dg1" sortableColumns="false" sortItemRenderer="{null}" dataProvider="{dp}" draggableColumns="false" width="100%" height="100%">
<mx:groupedColumns>
<mx:AdvancedDataGridColumn headerText="PM1" dataField="col1" />
<mx:AdvancedDataGridColumnGroup headerText="PM2" >
<mx:AdvancedDataGridColumn headerText="NE" dataField="col2" />
<mx:AdvancedDataGridColumn headerText="FE" dataField="col3"/>
</mx:AdvancedDataGridColumnGroup>
</mx:groupedColumns>
</mx:AdvancedDataGrid>
<mx:AdvancedDataGrid id="dg2" sortableColumns="false" sortItemRenderer="{null}" dataProvider="{dp}" draggableColumns="false" width="100%" height="100%">
<mx:groupedColumns>
<mx:AdvancedDataGridColumn headerText="PM1" dataField="col1" />
<mx:AdvancedDataGridColumnGroup headerText="PM2" >
<mx:AdvancedDataGridColumn headerText="NE" dataField="col2" />
<mx:AdvancedDataGridColumn headerText="FE" dataField="col3"/>
</mx:AdvancedDataGridColumnGroup>
</mx:groupedColumns>
</mx:AdvancedDataGrid>
</s:TitleWindow>
I created a public method that the instance is non-null calls invalidateList() of the grid. Example:
// Update grids when the display is already instantiated
public function updates():void{
its grid.invalidateList();
}
i am working on a flash video player, it is having a default skin for control bar. now what i need to do is, to change the skin of the player mainly control bar with the background image/color .
any suggestions
<mx:Button id="btnBuy" height="29" label="Watch Full Video" chromeColor="#B92420"
click="btnBuy_clickHandler(event)" color="#FFFFFF" fontFamily="Verdana"
fontSize="9" fontWeight="bold" paddingLeft="0" paddingRight="0"
skin="{BuyButtonSkin}"/>
Skin file
<!-- host component -->
<fx:Metadata>
<![CDATA[
[HostComponent("spark.components.Button")]
]]>
</fx:Metadata>
<fx:Script>
<![CDATA[
import controllers.DataController;
import mx.events.FlexEvent;
[Bindable]
[Embed(source='resources/images/ico-button.png')]
private var img:Class;
[Bindable]
[Embed(source='resources/images/ico-buy-hover.png')]
private var img2:Class;
[Bindable]
[Embed(source='resources/images/ico-button-wl.png')]
private var imgWL:Class;
[Bindable]
[Embed(source='resources/images/ico-buy-hover-wl.png')]
private var img2WL:Class;
]]>
</fx:Script>
<!-- states -->
<s:states>
<s:State name="up" />
<s:State name="over" />
<s:State name="down" />
<s:State name="disabled" />
</s:states>
<s:Rect left="0" right="0" top="0" bottom="0" >
<s:fill>
<s:SolidColor color="0x000000" alpha="1" />
</s:fill>
</s:Rect>
<fx:Style>
.backgroundImage {
fontSize: 18;
fontStyle: italic;
contentBackgroundColor: #FFFFFF ;
backgroundImage: Embed("resources/images/ico-button.png");
backgroundImageFillMode: repeat;
}
</fx:Style>
<s:BorderContainer width="100%" height="100%" styleName="backgroundImage" borderAlpha="0">
</s:BorderContainer>
<!--<components:ImageRepeatCanvas includeIn="up, disabled, down" width="100%" height="100%"
repeatDirection="horizantal" id="BuyNowBtn" repeatImage="{DataController.white_label? imgWL : img}"
dropShadowVisible.up="false">
</components:ImageRepeatCanvas>
<components:ImageRepeatCanvas repeatDirection="horizantal" id="BuyNowBtnHover" repeatImage="{DataController.white_label? img2WL : img2 }" width="100%" height="100%" includeIn="over">
</components:ImageRepeatCanvas>-->
There's an example in the Flex documentation that deals with this.
In your skin class:
<fx:Script>
override protected function updateDisplayList(unscaleWidth:Number, unscaledHeight:Number):void {
// Push style values into the graphics properties before calling super.updateDisplayList
backgroundFill.color = getStyle("backgroundColor");
// Call super.updateDisplayList to do the rest of the work
super.updateDisplayList(unscaledWidth, unscaledHeight);
}
</fx:Script>
...
<s:Rect left="0" right="0" top="0" bottom="0" >
<s:fill>
<s:SolidColor id="backgroundFill" color="0x000000" alpha="1" />
</s:fill>
</s:Rect>
And in your display class, assuming you dispatch a DataEvent from the network service handler with the color value:
private function responseListener(e:DataEvent):void {
btnBuy.setStyle("color", e.data);
}
I'm beginner in Flex . my issue when to add button to list , i put the button in the itemrender but the action of navigator.pushView(views.Listde,ProblemsList.selectedItem);
make an error "Acess of undefined property navigator .
Code :
<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark">
<fx:Script>
<![CDATA[
import views.ButList;
protected function button1_clickHandler(event:MouseEvent):void
{
// TODO Auto-generated method stub
navigator.pushView(views.Listde,ProblemsList.selectedItem);
}
]]>
</fx:Script>
<s:Group width="100%" height="100%" styleName="PCS.css">
<s:HGroup width="100%" height="100%" gap="2" verticalAlign="middle" horizontalAlign="center" paddingBottom="5" paddingLeft="5"
paddingRight="5" paddingTop="5">
<s:HGroup width="30%" height="100%" verticalAlign="middle" horizontalAlign="center">
<s:Label text="{data._AddedDate}" textAlign="left" verticalAlign="bottom" width="100%" height="100%"/>
</s:HGroup>
<s:VGroup width="50%" height="100%" verticalAlign="middle" horizontalAlign="right">
<s:BitmapImage source="images/{data.image}"/>
<s:TextArea editable="false" text="{data.description}"/>
<s:Label text="{data.price}"/>
<s:Button label="s" click="button1_clickHandler(event)"/>
</s:VGroup>
</s:HGroup>
</s:Group>
if any solution to resolve it by list or any component instead of list then i want button to navigate to view with the selected item and the change of the list to navigate to another view with the selected item also , then the change of list work success but the button action cannot defined with the navigator.
Thanks in advance for any help .
Create a custom event with data property and dispatch the event from item renderer or dispatch the list change event from the item renderer when clicking the button.
package myEvents
{
import flash.events.Event;
public class CustomEvent extends Event
{
public function CustomEvent(type:String,
data:Object=null) {
// Call the constructor of the superclass.
super(type);
// Set the new property.
this.data = data;
}
// Define static constant.
public static const MY_BUTTON_CLICKED:String = "myButtonClicked";
// Define a public variable to hold the state of the enable property.
public var data:Object;
// Override the inherited clone() method.
override public function clone():Event {
return new CustomEvent(type, data);
}
}
}
MyItemRenderer.mxml
<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark">
<fx:Script>
<![CDATA[
import views.ButList;
protected function button1_clickHandler(event:MouseEvent):void
{
// dispatch a custom
(this.owner as List).dispatchEvent(new CustomEvent(CustomEvent.MY_BUTTON_CLICKED, data));
//navigator.pushView(views.Listde,ProblemsList.selectedItem);
}
]]>
</fx:Script>
<s:Group width="100%" height="100%" styleName="PCS.css">
<s:HGroup width="100%" height="100%" gap="2" verticalAlign="middle" horizontalAlign="center" paddingBottom="5" paddingLeft="5"
paddingRight="5" paddingTop="5">
<s:HGroup width="30%" height="100%" verticalAlign="middle" horizontalAlign="center">
<s:Label text="{data._AddedDate}" textAlign="left" verticalAlign="bottom" width="100%" height="100%"/>
</s:HGroup>
<s:VGroup width="50%" height="100%" verticalAlign="middle" horizontalAlign="right">
<s:BitmapImage source="images/{data.image}"/>
<s:TextArea editable="false" text="{data.description}"/>
<s:Label text="{data.price}"/>
<s:Button label="s" click="button1_clickHandler(event)"/>
</s:VGroup>
</s:HGroup>
</s:Group>
Your view class
<?xml version="1.0" encoding="utf-8"?>
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
title="MY View">
<s:layout>
<s:VerticalLayout paddingTop="10"/>
</s:layout>
<fx:Script>
<![CDATA[
import spark.events.IndexChangeEvent;
private function onListCreationComplete_Handler():void
{
myList.addEventListener(CustomEvent.MY_BUTTON_CLICKED, onItemRendererButtonClicked);
}
protected function onItemRendererButtonClicked(event:CustomEvent):void {
var data:Object = event.data;
navigator.pushView(views.Listde,data);//myList.selectedItem
}
]]>
</fx:Script>
<s:Label text="Select an view"/>
<s:List id="myList"
width="100%" height="100%"
labelField="firstName" itemRenderer="MyItemRenderer"
change="myList_changeHandler(event)" creationComplete="onListCreationComplete_Handler()">
<s:ArrayCollection>
<fx:Object description="Fruits" image="assets/icons/1.png" _AddedDate="15/05/14" price="154"/>
<fx:Object description="New Item" image="assets/icons/2.png" _AddedDate="15/05/14" price="154"/>
<fx:Object description="Doll" image="assets/icons/3.png" _AddedDate="15/05/14" price="154"/>
</s:ArrayCollection>
</s:List>
</s:View>
I hope this might help u. There are tons of examples out there for list and item renderer for mobile.
Based on your ItemRenderer, you can simply listen to the IndexChangeEvent in your View. In this case, you don't need a separate button at all - the whole ItemRenderer can act as the button.
<?xml version="1.0" encoding="utf-8"?>
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
title="MY View">
<s:layout>
<s:VerticalLayout paddingTop="10"/>
</s:layout>
<fx:Script>
<![CDATA[
import spark.events.IndexChangeEvent;
import views.ButList;
protected function myList_changeHandler(event:IndexChangeEvent):void {
navigator.pushView(views.Listde,myList.selectedItem);
}
]]>
</fx:Script>
<s:Label text="Select an view"/>
<s:List id="myList"
width="100%" height="100%"
labelField="firstName" itemRenderer="MyItemRenderer"
change="myList_changeHandler(event)">
<s:ArrayCollection>
<fx:Object description="Fruits" image="assets/icons/1.png" _AddedDate="15/05/14" price="154"/>
<fx:Object description="New Item" image="assets/icons/2.png" _AddedDate="15/05/14" price="154"/>
<fx:Object description="Doll" image="assets/icons/3.png" _AddedDate="15/05/14" price="154"/>
</s:ArrayCollection>
</s:List>
</s:View>
When I use resize component on image, it just disappears. Even if I give widthTo and heightTo values more than image size.
Code
<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:net="flash.net.*">
<fx:Script>
<![CDATA[
import mx.effects.Resize;
import mx.utils.ObjectUtil;
private function btn_click(evt:MouseEvent):void {
var arr:Array = [];
arr.push(new FileFilter("Images", ".gif;*.jpeg;*.jpg;*.png"));
fileReference.browse(arr);
}
private function fileReference_select(evt:Event):void {
fileReference.load();
}
private function fileReference_complete(evt:Event):void {
img.source = fileReference.data;
}
]]>
</fx:Script>
<fx:Declarations>
<net:FileReference id="fileReference"
select="fileReference_select(event);"
complete="fileReference_complete(event);" />
<s:Resize id="resizeBig"
target="{img}"
widthFrom="{img.width}" widthTo="{newWidth.text as Number}"
heightFrom="{img.height}" heightTo="{newHeight.text as Number}"/>
<s:Resize id="myResizeEffect"
target="{img}"
widthBy="10" heightBy="10"/>
</fx:Declarations>
<s:Image id="img"
verticalCenter="0"
horizontalCenter="0"
maxWidth="200"
maxHeight="200"
/>
<mx:ControlBar>
<mx:Button id="btn"
label="Upload"
click="btn_click(event);" />
<s:HGroup verticalAlign="middle">
<s:Label>Width:</s:Label>
<!-- <s:NumericStepper id="newWidth" minimum="1" maximum="100" value="10" /> -->
<s:TextInput id="newWidth" restrict="0-9.\\-" />
</s:HGroup>
<s:HGroup verticalAlign="middle">
<s:Label>Height:</s:Label>
<s:TextInput id="newHeight" restrict="0-9.\\-"/>
</s:HGroup>
<s:HGroup verticalAlign="middle">
<s:Button id="resize"
label="Resize"
click="resizeBig.end();resizeBig.play();"
/>
<s:Button label="Resize Me"
click="myResizeEffect.end();myResizeEffect.play();"/>
</s:HGroup>
</mx:ControlBar>
</s:WindowedApplication>
I think the binding expression doesn't like the "as Number" thing. I would try with a function that does the conversion:
widthTo="{getNumber(newWidth.text)}"
Please check the code and tell me How I will be back in Login Page after click of logout which is in application's component.
Project.mxml
<s:Application 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%" creationComplete="init()">
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
<mx:StringValidator source="{uname}" id="unameValid" property="text"/>
<mx:StringValidator source="{password}" id="passwordValid" property="text"/>
</fx:Declarations>
<fx:Script>
<![CDATA[
import mx.controls.Alert;
import mx.events.ValidationResultEvent;
import mx.validators.Validator;
private var myValidators:Array = new Array;
private var nav:Navigation;
private function init():void{
btnLogin.addEventListener(MouseEvent.CLICK,validateForm);
myValidators = [unameValid,passwordValid];
}
private function validateForm(event:Event):void{
//Alert.show("in validate form");
var errors:Array = Validator.validateAll(myValidators);
if(errors.length == 0){
loginUser();
}else{
Alert.show("in else");
}
}
private function loginUser():void{
//Alert.show("In login Form");
nav = new Navigation();
this.addElement(nav);
}
]]>
</fx:Script>
<s:Label text="Login Form" fontWeight="bold" fontSize="16" horizontalCenter="-110"
verticalAlign="middle" verticalCenter="-280"/>
<mx:Form horizontalCenter="-120" verticalCenter="-200" fontWeight="bold" verticalGap="20">
<mx:FormItem label="UserName">
<s:TextInput id="uname" restrict="A-Z a-z" focusIn="uname.errorString = null" text="Priyanka"/>
</mx:FormItem>
<mx:FormItem label="Password">
<s:TextInput id="password" displayAsPassword="true" focusIn="password.errorString = null" text="aamir#23"/>
</mx:FormItem>
<mx:FormItem>
<mx:HBox horizontalGap="20">
<s:Button label="Login" id="btnLogin" />
<mx:LinkButton label="Register" id="register"/>
</mx:HBox>
</mx:FormItem>
</mx:Form>
</s:Application>
Navigation.mxml
<mx:Panel xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" layout="absolute" width="100%" height="100%" xmlns:local="*">
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<fx:Script>
<![CDATA[
import spark.components.Application;
private function logout(event:MouseEvent):void{
}
]]>
</fx:Script>
<s:TabBar id="tabs" left="10" y="5" dataProvider="{vs}"/>
<mx:ViewStack id="vs" width="90%" height="90%" left="10" y="30">
<s:NavigatorContent label="DashBoard" width="100%" height="100%">
<s:BorderContainer width="100%" height="100%" borderWeight="2" cornerRadius="3" dropShadowVisible="true">
<s:Label text="in DashBoard"/>
</s:BorderContainer>
</s:NavigatorContent>
<s:NavigatorContent label="User Information" width="100%" height="100%">
<s:BorderContainer width="100%" height="100%" borderWeight="2" cornerRadius="3" dropShadowVisible="true">
<s:Label text="in UserInfo"/>
</s:BorderContainer>
</s:NavigatorContent>
</mx:ViewStack>
<s:Button x="494" y="1" label="Logout" id="btnLogout" click="logout(event);"/>
</mx:Panel>
You should create a custom event:
package
{
import flash.events.Event;
public class LogoutEvent extends Event
{
public static const LOG_OUT:String = "logOut";
public function LogoutEvent(type:String)
{
super(type,false,false);
}
public override function clone():Event
{
return new LogoutEvent(type);
}
public override function toString():String
{
return formatToString("LogoutEvent");
}
}
}
Now you should dispatch this event:
<mx:Panel xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" layout="absolute" width="100%" height="100%" xmlns:local="*">
<fx:Metadata>
[Event(name="logOut", type="LogoutEvent")]
</fx:Metadata>
<fx:Script>
<![CDATA[
import spark.components.Application;
private function logout(event:MouseEvent):void{
dispatchEvent(new LogoutEvent(LogoutEvent.LOG_OUT));
}
]]>
</fx:Script>
<s:TabBar id="tabs" left="10" y="5" dataProvider="{vs}"/>
<mx:ViewStack id="vs" width="90%" height="90%" left="10" y="30">
<s:NavigatorContent label="DashBoard" width="100%" height="100%">
<s:BorderContainer width="100%" height="100%" borderWeight="2" cornerRadius="3" dropShadowVisible="true">
<s:Label text="in DashBoard"/>
</s:BorderContainer>
</s:NavigatorContent>
<s:NavigatorContent label="User Information" width="100%" height="100%">
<s:BorderContainer width="100%" height="100%" borderWeight="2" cornerRadius="3" dropShadowVisible="true">
<s:Label text="in UserInfo"/>
</s:BorderContainer>
</s:NavigatorContent>
</mx:ViewStack>
<s:Button x="494" y="1" label="Logout" id="btnLogout" click="logout(event);"/>
</mx:Panel>
Finally, you should handle it and close your window:
<s:Application 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%" creationComplete="init()">
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
<mx:StringValidator source="{uname}" id="unameValid" property="text"/>
<mx:StringValidator source="{password}" id="passwordValid" property="text"/>
</fx:Declarations>
<fx:Script>
<![CDATA[
import mx.controls.Alert;
import mx.events.ValidationResultEvent;
import mx.validators.Validator;
private var myValidators:Array = new Array;
private var nav:Navigation;
private function init():void{
btnLogin.addEventListener(MouseEvent.CLICK,validateForm);
myValidators = [unameValid,passwordValid];
}
private function validateForm(event:Event):void{
//Alert.show("in validate form");
var errors:Array = Validator.validateAll(myValidators);
if(errors.length == 0){
loginUser();
}else{
Alert.show("in else");
}
}
private function loginUser():void{
//Alert.show("In login Form");
nav = new Navigation();
this.addElement(nav);
nav.addEventListener(LogoutEvent.LOG_OUT, nav_logOutHandler);
}
private function nav_logOutHandler(event:LogoutEvent):void
{
removeElement(nav);
nav.removeEventListener(LogoutEvent.LOG_OUT, nav_logOutHandler);
nav = null;
}
]]>
</fx:Script>
<s:Label text="Login Form" fontWeight="bold" fontSize="16" horizontalCenter="-110"
verticalAlign="middle" verticalCenter="-280"/>
<mx:Form horizontalCenter="-120" verticalCenter="-200" fontWeight="bold" verticalGap="20">
<mx:FormItem label="UserName">
<s:TextInput id="uname" restrict="A-Z a-z" focusIn="uname.errorString = null" text="Priyanka"/>
</mx:FormItem>
<mx:FormItem label="Password">
<s:TextInput id="password" displayAsPassword="true" focusIn="password.errorString = null" text="aamir#23"/>
</mx:FormItem>
<mx:FormItem>
<mx:HBox horizontalGap="20">
<s:Button label="Login" id="btnLogin" />
<mx:LinkButton label="Register" id="register"/>
</mx:HBox>
</mx:FormItem>
</mx:Form>
</s:Application>
The quickest way would be:
private function logout(event:MouseEvent):void{
parent.removeElement(this);
}
However, Constantiner's method is the proper way.
Also, if you are using flex 4, why not use the spark Form,FormItem,Panel and HGroup (Instead of HBox)