Flex 4: State Change Event - actionscript-3

Is there any event in Flex 4 that I can use to detect a state change?

I know this question is old but by googling for state change events I still get here so for people that want to know:
There is a StateChangeEvent.CURRENT_STATE_CHANGE event that is dispatched by the component, so your application can also listen for that.
In your listener function you can then acces the StateChangeEvent.oldState and StateChangeEvent.newState properties.

If you are talking about view states the answer is yes, you can listen for the enterState event like this (sorry for the simplicity of the example, it's part of a project I'm working on and I removed any relevant parts of the code):
<?xml version="1.0" encoding="utf-8"?>
<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"
minWidth="800" minHeight="600"
currentState="loading">
<fx:Script>
<![CDATA[
import mx.controls.Alert;
private function onEnterLoadingState():void{
Alert.show("Enter the loading state.", "Application");
}
private function onEnterLoginState():void{
Alert.show("Enter the login state.", "Application");
}
private function onEnterAddState():void{
Alert.show("Enter the addUser state.", "Application");
}
private function changeState(state:String):void{
currentState = state;
}
]]>
</fx:Script>
<s:states>
<s:State name="loading" enterState="onEnterLoadingState()"/>
<s:State name="login" enterState="onEnterLoginState()"/>
<s:State name="addUser" enterState="onEnterAddState()"/>
</s:states>
<s:Panel id="loadView" includeIn="loading" title="Loading">
<s:Button label="Go to login" click="changeState('login')"/>
</s:Panel>
<s:Panel id="loginView" includeIn="login" title="Login">
<s:Button label="Go to addUser" click="changeState('addUser')"/>
</s:Panel>
<s:Panel id="addView" includeIn="addUser" title="AddUser">
<s:Button label="Return to loading" click="changeState('loading')"/>
</s:Panel>
</s:Application>
And there is an exitState event in case you need it. I hope this helps you.

There are multiple state events you can listen for on any UIComponent class:
FlexEvent.STATE_CHANGE_COMPLETE
FlexEvent.STATE_CHANGE_INTERRUPTED
StateChangeEvent.CURRENT_STATE_CHANGING
StateChangeEvent.CURRENT_STATE_CHANGE
FlexEvent.ENTER_STATE
FlexEvent.EXIT_STATE
MXML:
<?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"
enterState="windowedapplication1_enterStateHandler(event)"
exitState="windowedapplication1_exitStateHandler(event)"
currentStateChange="windowedapplication1_currentStateChangeHandler(event)"
currentStateChanging="windowedapplication1_currentStateChangingHandler(event)"
stateChangeInterrupted="windowedapplication1_stateChangeInterruptedHandler(event)"
stateChangeComplete="windowedapplication1_stateChangeCompleteHandler(event)">
<fx:Script>
<![CDATA[
import mx.events.FlexEvent;
protected function windowedapplication1_stateChangeCompleteHandler(event:FlexEvent):void
{
}
protected function windowedapplication1_stateChangeInterruptedHandler(event:FlexEvent):void
{
}
protected function windowedapplication1_currentStateChangeHandler(event:StateChangeEvent):void
{
var oldState:String = event.oldState;
var newState:String = event.newState;
}
protected function windowedapplication1_currentStateChangingHandler(event:StateChangeEvent):void
{
var oldState:String = event.oldState;
var newState:String = event.newState;
}
protected function windowedapplication1_enterStateHandler(event:FlexEvent):void
{
}
protected function windowedapplication1_exitStateHandler(event:FlexEvent):void
{
}
]]>
</fx:Script>
</s:WindowedApplication>

Related

Flex: setFocus does not work after ENTER on input

I want to set the focus on TextInput: This works fine after I press the button, but doers not work when I press the ENTER button on the TextInput: ANY IDEA ?
<?xml version="1.0" encoding="utf-8"?>
<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" minWidth="955" minHeight="600">
<fx:Script>
<![CDATA[
public function sendText():void {
txt_input.enabled = false;
trace(txt_input.text);
txt_input.text = "";
setTimeout(function ():void {
txt_input.enabled = true;
focusManager.setFocus(txt_input );
}
,3000);
}
]]>
</fx:Script>
<s:TextInput id="txt_input" x="173" y="330" enter="sendText()"/>
<s:Button x="345" y="331" label="Button" click="sendText()"/>
</s:Application>
instead of shifting focus to other component in Ashish's code, replace
focusManager.setFocus(btn); with
stage.focus = null;
I faced the same problem before. I don't exactly know what goes inside the framework but i got my job done by just setting focus to some another component. I know its not the correct way.
In your case:
<?xml version="1.0" encoding="utf-8"?>
<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" minWidth="955" minHeight="600">
<fx:Script>
<![CDATA[
public function sendText():void {
txt_input.enabled = false;
focusManager.setFocus(btn);
trace(txt_input.text);
txt_input.text = "";
setTimeout(function ():void {
txt_input.enabled = true;
focusManager.setFocus(txt_input );
}
,3000);
}
]]>
</fx:Script>
<s:TextInput id="txt_input" x="173" y="330" enter="sendText()"/>
<s:Button id="btn" x="345" y="331" label="Button" click="sendText()"/>
</s:Application>
I think it din't work before is because it has something to do with the "enabled" property.
Hope it helps.

Need 2 way binding between 2 components flex 4

Can anyone tell me how to do 2-way Binding between 2 components?
I have a TabGroup, in which I created 2 tabs.. Each tab has each component...
First tab: Some form is there and submit button
Second Tab: Datagrid
So, when I enter some details and click Submit button, 1 row should be added in Datagrid.. This functionality is working, BUT when i double click the row in Datagrid, the row details from Datagrid should be filled up in Form which iam not getting this..
PLease check below code , run it, and provide me solution:
Main.mxml
<?xml version="1.0" encoding="utf-8"?>
<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"
xmlns:components="components.*"
creationComplete="init()">
<fx:Script>
<![CDATA[
import components.EmployeeSingleton;
[Bindable]
public var empSingleton: EmployeeSingleton;
public function init(): void
{
empSingleton = EmployeeSingleton.getInstance();
}
]]>
</fx:Script>
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<s:VGroup>
<s:TabBar dataProvider="{contact}" />
<mx:ViewStack id="contact"
resizeToContent="true">
<components:ContactInfo id="contactInfo"
label="Employee Info"
empSingleton="{empSingleton}"/>
<components:ContactList label="Employee List"
empSingleton="{empSingleton}"/>
</mx:ViewStack>
</s:VGroup>
</s:Application>
EmployeeSingleton.as
package components
{
import mx.collections.ArrayCollection;
[Bindable]
public final class EmployeeSingleton
{
private static var instance: EmployeeSingleton;
public var empData: ArrayCollection;
public function EmployeeSingleton()
{
}
public static function getInstance(): EmployeeSingleton
{
if(instance == null)
instance = new EmployeeSingleton();
return instance;
}
}
}
EmployeeVO.as
package vo
{
[Bindable]
public class EmployeeVO
{
public function EmployeeVO()
{
}
public var empName: String;
public var address: String;
public var state: String;
public var city: String;
public var zip: String;
}
}
ContactInfo.mxml
<?xml version="1.0" encoding="utf-8"?>
<s:NavigatorContent 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="300">
<fx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
import vo.EmployeeVO;
public var empSingleton: EmployeeSingleton;
private var empVO : EmployeeVO;
private var empCollection : ArrayCollection = new ArrayCollection();
protected function submit_clickHandler(event:MouseEvent):void
{
empVO = new EmployeeVO();
empVO.empName = empName.text;
empVO.address = address.text;
empVO.city = city.text;
empVO.state = state.text;
empVO.zip = zip.text;
empCollection.addItem(empVO);
empSingleton.empData = empCollection;
}
]]>
</fx:Script>
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<s:Form>
<s:FormItem label="Name">
<s:TextInput id="empName" />
</s:FormItem>
<s:FormItem label="Address">
<s:TextInput id="address" />
</s:FormItem>
<s:FormItem label="City">
<s:TextInput id="city" />
</s:FormItem>
<s:FormItem label="State">
<s:TextInput id="state" />
</s:FormItem>
<s:FormItem label="Zip">
<s:TextInput id="zip" />
</s:FormItem>
<s:FormItem>
<s:Button id="submit"
label="Submit"
click="submit_clickHandler(event)"/>
</s:FormItem>
</s:Form>
</s:NavigatorContent>
ContactList.mxml
<?xml version="1.0" encoding="utf-8"?>
<s:NavigatorContent 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="300"
>
<fx:Script>
<![CDATA[
[Bindable]
public var empSingleton: EmployeeSingleton;
]]>
</fx:Script>
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<s:DataGrid id="empData"
dataProvider="{empSingleton.empData}"/>
</s:NavigatorContent>
Awaiting for solution, please run above code and provide me solution for 2-way binding
You don't need to bind for 'update for on double click on an item in list'. Bindings are very tightly coupled. What you should do instead is listen for double-click events on list and update form with a item information that was double-clicked on.

Simple flex popup with dispatch event in child and listener in parent not working

Parent.mxml
This file is calling the popup class below when the button is clicked.
<?xml version="1.0" encoding="utf-8"?>
<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" minWidth="955" minHeight="600">
<fx:Script>
<![CDATA[
import mx.controls.Alert;
import mx.managers.PopUpManager;
var popup:pop = null ;
protected function clickHandler(event:MouseEvent):void
{
popup = PopUpManager.createPopUp(this,pop,true) as pop;
popup.ok.addEventListener(MouseEvent.CLICK, captureComments);
popup.close();
}
var str:String="";
private function captureComments():void{
Alert.show("Invoked Event Listener", "Alert");
str=popup.comments;
}
]]>
</fx:Script>
<mx:Button id="id1" label="Click" click="clickHandler(event)"/>
<s:Label id="lbl" height="18" width="282" text={str} />
</s:Application>
Child.mxml
This file is the popup reference, creating popup.
I have configured the close action and cancel buttons to work as needed, but unable to propagate the text entered in comment are back to the parent.
<?xml version="1.0" encoding="utf-8"?>
<mx: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"
layout="vertical" width="524" height="322"
showCloseButton="true"
close="close()" chromeColor="#CCCCCC"
horizontalAlign="center" verticalAlign="middle" color="#000000">
<fx:Script>
<![CDATA[
import mx.controls.Alert;
import mx.managers.PopUpManager;
import mx.rpc.events.ResultEvent;
[Bindable]public var comments:String;
public function close(): void{
PopUpManager.removePopUp(this);
}
private function save(): void{
if(comments == null){
comments = "";
}
dispatchEvent(new ResultEvent(comments));
}
]]>
</fx:Script>
<mx:HBox width="100%" height="70%">
<mx:VBox width="100%" height="100%">
<mx:TextArea id="comment" text="{comments}" width="100%" height="80%" change="comments = event.target.text">
</mx:TextArea>
<mx:HBox horizontalAlign="center" width="100%" height="20%">
<s:Button id="ok" label="OK" chromeColor="#CCCCCC" click="save()" fontWeight="bold"/>
<s:Button id="cancel" label="Cancel" chromeColor="#CCCCCC" click="close()" fontWeight="bold"/>
</mx:HBox>
</mx:VBox>
</mx:HBox>
</mx:TitleWindow>
You are dispatching a ResultEvent, like this:
dispatchEvent(new ResultEvent(comments));
However, the event type is the user entered input. Check out the ResultEvent constructor. The first argument is the event type. I have no idea how you'll be able to consistently listen for an event type that is unknown at compile time.
I think you are trying to pass your custom data back to your parent class. My preference would be to use a custom event for this; but if you wanted to use a ResultEvent you could pass your comments in the result property:
dispatchEvent(new ResultEvent(ResultEvent.RESULT,false,true,comments));
In your parent file, add an event listener like this:
popup.addEventListener(ResultEvent.RESULT, processResult);
You should be able to get at your comments value as a property on the event:
protected function processResult(event:ResultEvent):void{
str=event.result
}
Another thing I've done as well is in the Child Container Create a public variable to pass the function from the parent ie:
in parent:
protected function captureComments(comments:String):void{
str=comments;
}
in child :
declare a public var and add the function to the save() function
public var parentFunction:Function;
private function save(): void{
if(comments == null){
comments = "";
}
parentFunction(comments);
Then when Creating your popup container in the parent:
protected function clickHandler(event:MouseEvent):void
{
popup = PopUpManager.createPopUp(this,pop,true) as pop;
popup.parentFunction = captureComments;
popup.close();
}

changing the state of the variable from the child component using custom event

this is the main application
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
verticalAlign="middle"
backgroundColor="white" layout="absolute" initialize="init();" xmlns:MyComp="screens.*" >
<mx:Script>
<![CDATA[
import screens.MyEvent;
private function init():void
{
systemManager.addEventListener("data_transfer",handleDataTransfer);
}
private function handleDataTransfer(evt:MyEvent):void{
this.myViewStack.selectedIndex=1;
}
]]>
</mx:Script>
<mx:ViewStack id="myViewStack" selectedIndex="0" width="1110" height="636">
<MyComp:Welcome />
<MyComp:Screen id="fillPage" />
</mx:ViewStack>
</mx:Application>
this is my Welcome component
<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="930" height="300" >
<mx:Script>
<![CDATA[
private function changeHandler():void{
var myEVT:MyEvent = new MyEvent("data_transfer",false, true);
this.dispatchEvent(myEVT);
}
]]>
</mx:Script>
<mx:Button label="Fill The Form" id="fillForm" click="changeHandler()"/>
</mx:Canvas>
this is my screen.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="400" height="300">
<mx:Label text="hai">
</mx:Label>
</mx:Canvas>
this is MYEvent.as
package screens
{
import flash.events.Event;
public class MyEvent extends Event
{
public static const DATA_TRANSFER:String = "data_transfer";
public function MyEvent(type:String, bubbles:Boolean=false, cancelable:Boolean=false)
{
super(type, bubbles, cancelable);
}
}
}
I want to get the Screen mxml by clicking the button at welcome mxml...i am initial learner..
but it is not working..Please help me..
As your custom event has bubbling=false, it wont bubble upto the systemManager. try:
var myEVT:MyEvent = new MyEvent("data_transfer", true, true);
Alternatively, add the listener to the object that is dispatching the event:
welcomePage.addEventListener("data_transfer",handleDataTransfer);
....
<MyComp:Welcome id="welcomePage" />
Second solution is generally better/preferred - less event bubbling is a good thing

DataGrid.selectedIndex memory leak

I have noticed a memory leak in a DataGrid, in case I do not select an item, I am able to GC my dataGrid, if there was anything selected then dataGrid cause memory leak...
here is the simpliest example:
<?xml version="1.0" encoding="utf-8"?>
<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"
minWidth="955" minHeight="600">
<fx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
import mx.collections.ArrayList;
import spark.components.gridClasses.GridColumn;
[Bindable]
private var columns:ArrayList = new ArrayList;
[Bindable]
private var dataProvider:ArrayCollection = new ArrayCollection;
private function onCreationComplete():void
{
dataProvider.addItem({id:1});
var column:GridColumn = new GridColumn;
column.dataField = id;
columns.addItem(column);
container.selectedIndex = 0;
}
private function gotoOne():void
{
currentState = one;
}
private function gotoTwo():void
{
columns = null;
currentState = two;
}
]]>
</fx:Script>
<s:states>
<s:State name="one"/>
<s:State name="two"/>
</s:states>
<s:Button click="gotoOne()" label="one"/>
<s:Button click="gotoTwo()" label="two" left="150"/>
<s:DataGrid id="container" top="30" includeIn="one" itemDestructionPolicy="auto"
creationComplete="onCreationComplete()" columns="{columns}"
dataProvider="{dataProvider}"/>
</s:Application>
if you comment out line "container.selectedIndex = 0;" DataGrid gets GCed nicely.
Any ideas how to GC DataGrid with selected item?
I am using flex 4.6.0
It isn't a memory leak, it is cycle of a live item.
onCreationComplete is called when you finish render and display datagrid on the scene, you must add the item on click of the grid( selectedItem event).