How to save screenshots with its exif data edited by user (in Flex 4.6 application)? - actionscript-3

I need to develop a web application which captures snapshot of live stream video in Spark VideoPlayer and then ask for user input regarding EXIF tags then save the image along with its EXIF data to the local drive. An early response will be highly appreciated. Thanks
I have used the following code, but so far have not been succeed in editing the exif data into image header
<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="400" height="410" title="Snapshot"
close="titlewindow1_closeHandler(event)"
windowMoveStart="basewidget1_widgetConfigLoadedHandler(event)"
>
<fx:Script>
<![CDATA[
import mx.controls.Alert;
import mx.events.CloseEvent;
import mx.graphics.ImageSnapshot;
import mx.graphics.codec.*;
import mx.managers.PopUpManager;
[Bindable]
public var saveName:String ="";
protected function basewidget1_widgetConfigLoadedHandler(event:Event):void
{
}
protected function titlewindow1_closeHandler(event:CloseEvent):void
{
PopUpManager.removePopUp(this);
}
protected function SaveImg_clickHandler(event:MouseEvent):void
{
var d:Date = new Date();
var image:ImageSnapshot = ImageSnapshot.captureImage(pic1, 300, new PNGEncoder());
var file:FileReference = new FileReference();
file.save(image.data, saveName+" "+d.date+ "-"+d.month +"-"+d.fullYear + d.hours+ d.minutes + d.seconds);
}
]]>
</fx:Script>
<fx:Declarations>
</fx:Declarations>
<s:VGroup width="100%" horizontalAlign="center" verticalAlign="middle">
<s:Image id="pic1" x="41" y="34" width="100%" height="300"/>
<s:HGroup width="100%" height="30" horizontalAlign="center" verticalAlign="middle">
<s:TextInput id="Title" x="35" width="60" prompt="Title"/>
<mx:DateField id="DateTaken" x="78" width="137"/>
<s:TextInput id="info" width="80" prompt="Info"/>
<s:TextInput id="User Comments" width="80" prompt="User Comments" restrict="0-9,."/>
</s:HGroup>
</s:VGroup>
<s:HGroup x="3" y="348" width="100%" height="30" horizontalAlign="center" verticalAlign="middle">
<s:Button id="SaveImg0" label="Save" click="SaveImg_clickHandler(event)"/>
</s:HGroup>

Related

Adobe AIR, External swf file when loaded from swf does not render properly

I was trying to create an Adobe AIR application that loads an external swf file. However when the swf file is loaded from it does not render properly.
My Main.mxml file:
<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx"
width="100%" height="100%" paddingLeft="0" paddingBottom="0" paddingRight="0" paddingTop="0"
creationComplete="Created()">
<fx:Script><![CDATA[
private var moduleLoader:Loader;
private function Created():void {
moduleLoader = new Loader();
var urlre: URLRequest = new URLRequest("Shell1.swf"); //http://localhost:8080/aps/
moduleLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, loaded);
moduleLoader.load(urlre);
}
private function loaded(event:Event):void {
uic.addChild(moduleLoader);
}
]]></fx:Script>
<mx:UIComponent id="uic" width="100%" height="100%" ></mx:UIComponent>
</mx:Application>
My Shell1.mxml file:
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:s="library://ns.adobe.com/flex/spark"
width="100%" height="100%" creationComplete="Created(event)"
backgroundColor="0xf5deb3">
<fx:Script>
<![CDATA[
import mx.controls.Alert;
private function Created(event:Event):void {
}
]]>
</fx:Script>
<fx:Declarations>
<mx:RemoteObject id="RO" destination="AdministrationHandler"
fault="Alert.show(event.fault.faultString), 'Error'">
</mx:RemoteObject>
</fx:Declarations>
<s:Group id="Group" width="100%" height="100%">
<s:Label id="Introduction"
text="This is a demo application to show that the flex based application works. Click on the button below get generate a random number"
styleName="FilterLabel"/>
<s:VGroup id="VertGroup" paddingLeft="10" paddingRight="10" paddingTop="10" width="100%" height="100%">
<s:Label backgroundColor="green" width="1000" id="firstNumberLabel" text="Enter First Number"
styleName="FilterLabel"/>
<s:TextInput id="firstNumber" width="20%"/>
</s:VGroup>
</s:Group>
</s:Application>
When Shell1.swf is loaded directly in adobe air (by mentioning it application-descriptor.xml), it looks like:
But when I load it by using Main.mxml it looks like this:
So why is that the Components are not properly rendered when Shell1.swf is loaded from Main.swf ?

Flex 4.6 : Make action for button in list

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>

Flex update XML

im new to flex development and in need of assistance.
I have a xml file that contains data that i would like to update if the user changes anything, the file is saved on his local program files where the application is.
Here is my code that reads the XML file:
<fx:Declarations>
<s:HTTPService id="systemData" url="data/system.xml" method="POST"/>
</fx:Declarations>
<fx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
import mx.rpc.events.ResultEvent;
[Bindable]
private var systemInfo:Object = new Object();
private var interval:uint;
[Bindable]
private var xmlData:ArrayCollection = new ArrayCollection();
private function viewMain(event:Event):void
{
mainWindow.visible = true;
systemWindow.visible = false;
}
private function viewSystem(event:Event):void
{
mainWindow.visible = false;
systemWindow.visible = true;
}
public function init():void
{
systemData.addEventListener(ResultEvent.RESULT, getXML);
systemData.send();
interval = setInterval(reloadXML, 1800000);
}
private function getXML(e:ResultEvent):void
{
systemInfo = systemData.lastResult.system;
systemIP.text = systemInfo.systemip;
systemPort.text = systemInfo.systemport;
systemUsername.text = systemInfo.systemusername;
systemPassword.text = systemInfo.systempassword;
}
private function reloadXML():void
{
systemData.send();
}
]]>
</fx:Script>
<s:BorderContainer id="mainWindow" width="100%" height="100%" visible="false">
<s:Button x="434" y="102" label="System Settings" click="viewSystem(event)"/>
<s:Button x="468" y="147" label="Button" />
</s:BorderContainer>
<s:BorderContainer id="systemWindow" width="100%" height="100%" visible="true">
<s:Panel width="800" height="600" horizontalCenter="0" title="System Settings"
verticalCenter="0">
<s:Label x="33" y="41" text="Server IP:"/>
<s:Label x="33" y="66" text="Port:"/>
<s:Label x="33" y="90" text="Username:"/>
<s:Label x="33" y="115" text="Password:"/>
<s:TextInput x="182" y="31" width="250" id="systemIP"/>
<s:TextInput x="182" y="56" width="250" id="systemPort"/>
<s:TextInput x="182" y="80" width="250" id="systemUsername"/>
<s:TextInput x="182" y="105" width="250" id="systemPassword"/>
<s:Button x="345" y="135" label="Save to XML" />
<s:Button x="718" y="-26" label="Main" click="viewMain(event)"/>
</s:Panel>
</s:BorderContainer>
The XML File:
<?xml version="1.0" encoding="utf-8" standalone="no"?>
<system>
<systemip>127.0.0.0</systemip>
<systemport>80</systemport>
<systemusername>rootu</systemusername>
<systempassword>passu</systempassword>
</system>
Thanks in advance
To write the updated content back in your xml file, you need to write the file back. I assume your application is an Adobe AIR application. You can make use of "File" class to read and write the content.
Link: http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/filesystem/File.html

AS3 ViewStack content clipping

I have the next code (Flash Builder 4.5)
This main appliction file, for testing me viewstack component.
TabPanelTest
</fx:Declarations>
<fx:Script>
<![CDATA[
import mx.events.FlexEvent;
protected function creationCompleteHandler(event:FlexEvent):void
{
tp.AddPanel("111", new Button());
tp.AddPanel("444", new TestPanel());
tp.AddPanel("2222222", new Button());
tp.AddPanel("3333333333", new Button());
}
protected function button1_clickHandler(event:MouseEvent):void
{
// TODO Auto-generated method stub
tp.RemoveAllPanels();
}
]]>
</fx:Script>
<ns1:TabPanel id="tp" x="25" y="27" width="321" height="199">
</ns1:TabPanel>
<s:Button x="439" y="25" label="Кнопка1" click="button1_clickHandler(event)"/>
</s:Application>
This is TabPanel, that have public methods AddPanel and RemoveAllPanels.
TabPanel
protected function creationCompleteHandler(event:FlexEvent):void
{
//buttons1.dataProvider=new ArrayCollection();
}
public function AddPanel(name:String, element:IVisualElement):void{
var panel:NavigatorContent=new NavigatorContent();
panel.label=name;
panel.addElement(element);
panels.addElement(panel);
}
public function RemoveAllPanels():void{
//panels.swapElements(swapElementsAt(0,2);
panels.removeAllElements();
/*var but:Button;
but=new Button();
but.label=name;
buttons.addElement(but); */
}
]]>
</fx:Script>
<mx:ViewStack id="panels" x="0" y="31" width="100%" height="100%" borderColor="#000000"
borderStyle="solid" borderVisible="true" clipContent="true" includeInLayout="true">
</mx:ViewStack>
<s:ButtonBar id="buttons1" x="0" y="0" width="100%" dataProvider="{panels}"
justificationStyle="pushOutOnly"/>
</s:Group>
This is testing panel, that have size more than viewstack, and it must clipping.
TestPanel
<?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%">
<fx:Script>
<![CDATA[
import spark.components.NavigatorContent;
protected function button1_clickHandler(event:MouseEvent):void
{
// TODO Auto-generated method stub
NavigatorContent(this.parent.parent.parent).label="bebe";
}
]]>
</fx:Script>
<fx:Declarations>
</fx:Declarations>
<s:Button x="163" y="35" width="315" height="209" label="Кнопка"
click="button1_clickHandler(event)"/>
</s:Group>
When i click to "444" in buuton bar my content don't clipping. What's problem?
Problem is in this line with TestPanel custom component: -
<s:Button x="163" y="35" width="315" height="209" label="Кнопка"
click="button1_clickHandler(event)"/>
If you are adding any component to parent container: -
child component will consider x and y position with respect to parent.
If you want to fit your child component you should use x=0 and y=0
as well as width = 100% and height = 100%
Try this and see out put: -
<s:Button x="163" y="35" width="100%" height="100%" label="Кнопка"
click="button1_clickHandler(event)"/>
Again Try this and see out put: -
<s:Button x="0" y="0" width="100%" height="100%" label="Кнопка"
click="button1_clickHandler(event)"/>
You will come to know how component behavior.
Hope this may solve your problem.....

How to come back in main application on click of logout button which is in application's component in flex4?

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)