Charts (ColumnChart, BarChart, LineChart, AreaChart etc.) - Save as Image without ScrollBar - apache-flex

I have one problem related to charts.
I have Column chart with 1000+ columns on it with the scroll bar on it. Now I want to save it as Image to my Disktop or any location without scroll.
ScrollableAxisRenderer Class I have Downloaded from one of the link please find it below: -
http://www.connectedpixel.com/blog/scrollingcharts
Sample Column Chart 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"
creationComplete="init();" xmlns:charts="com.connectedpixel.charts.*">
<fx:Declarations>
<fx:XML xmlns="" id="myData">
<items>
<item year="1960" rain="92" />
<item year="1961" rain="192" />
<item year="1962" rain="32" />
<item year="1963" rain="52" />
<item year="1964" rain="112" />
<item year="1965" rain="52" />
<item year="1966" rain="88" />
<item year="1967" rain="52" />
<item year="1968" rain="66" />
<item year="1969" rain="39" />
<item year="1970" rain="192" />
<item year="1971" rain="182" />
<item year="1972" rain="177" />
<item year="1973" rain="179" />
<item year="1974" rain="198" />
<item year="1975" rain="207" />
<item year="1976" rain="388" />
<item year="1977" rain="372" />
<item year="1978" rain="352" />
</items>
</fx:XML>
<s:XMLListCollection id="rainData" source="{myData.children()}" />
</fx:Declarations>
<fx:Script>
<![CDATA[
import mx.graphics.ImageSnapshot;
import mx.graphics.codec.PNGEncoder;
protected function initCreationComp():void
{
var image:ImageSnapshot = ImageSnapshot.captureImage(myChart,300,new PNGEncoder(),true);
var file:FileReference = new FileReference();
var chartName:String = "myChart"+count+".png";
file.save(image.data, chartName);
}
]]>
</fx:Script>
<mx:VBox width="100%" height="100%" x="50" y="50">
<s:Button label="Download Image" click="initCreationComp()"/>
<mx:ColumnChart id="myChart" name="myChart"
width="80%" height="80%"
dataProvider="{myData.children()}"
showDataTips="true" maxColumnWidth="35">
<mx:horizontalAxis>
<mx:CategoryAxis id="yearAxis" categoryField="#year" />
</mx:horizontalAxis>
<mx:series>
<mx:ColumnSeries xField="#year" yField="#rain" displayName="Rain" />
</mx:series>
<mx:horizontalAxisRenderers>
<charts:ScrollableAxisRenderer id="scrollAxisRenderer" axis="{yearAxis}" tickPlacement="none"
placement="bottom" labelGap="3" maxVisibleColumns="4"/>
</mx:horizontalAxisRenderers>
</mx:ColumnChart>
</mx:VBox>
</s:Application>
Thanks in advance....

Put the chart inside container which will show scrollbars instead of your chart:
<mx:VBox width="100%" height="100%" x="50" y="50">
<s:Button label="Download Image" click="initCreationComp()"/>
<mx:VBox width="80%" height="80%"
minWidth="100" minHeight="100">
<mx:ColumnChart id="myChart" name="myChart"
dataProvider="{myData.children()}"
showDataTips="true" maxColumnWidth="35">
<!-- etc -->
</mx:ColumnChart>
</mx:VBox>
</mx:VBox>

Related

Flex easing - show / hide window?

Im working on a display that starts with a centered logo and menu. When one of the menu items is clicked I move the logo and menu to the left side and show a datagrid on the right. Is there a way to use an easing function to make this change look better?
The short answer is: Yes! To illustrate it I've created the following sample:
<?xml version="1.0" encoding="utf-8"?>
<s:Application minHeight="600" minWidth="955" xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:mx="library://ns.adobe.com/flex/mx" xmlns:s="library://ns.adobe.com/flex/spark">
<fx:Declarations>
<s:Bounce id="easer1" />
<s:Elastic id="easer2" />
</fx:Declarations>
<s:states>
<s:State name="intro" />
<s:State name="main" />
</s:states>
<s:transitions>
<s:Transition fromState="intro" toState="main">
<s:Sequence>
<s:Move disableLayout="true" easer="{easer2}" target="{menuGroup}" />
<s:SetAction property="verticalCenter" target="{menuGroup}" value="{NaN}" />
<s:SetAction property="horizontalCenter" target="{menuGroup}" value="{NaN}" />
<s:AddAction target="{dg}" />
<s:Fade easer="{easer1}" target="{dg}" />
</s:Sequence>
</s:Transition>
</s:transitions>
<s:VGroup horizontalCenter.intro="0" id="menuGroup" left.main="10" top.main="10" verticalCenter.intro="0">
<s:Label text="Logo is here" />
<s:Button click="currentState = 'main'" label="Click Me!" />
<s:Button click="currentState = 'main'" label="Click Me!" />
</s:VGroup>
<mx:DataGrid bottom="10" id="dg" includeIn="main" left="{menuGroup.width + 20}" right="10" top="10">
<mx:columns>
<mx:DataGridColumn headerText="First" />
<mx:DataGridColumn headerText="Second" />
</mx:columns>
</mx:DataGrid>
</s:Application>

How do you show the data in corresponding textbox fields when a row is clicked in datagrid?

In my flex 3 application I have 5 fields with textboxes. I'm using datagrid for those fields for edit and update process. I want the data to show in their corresponding textboxes when a row is selected in the datagrid.
Here a sample code
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Script>
<![CDATA[
import mx.events.ListEvent;
private function onChange(event:ListEvent):void
{
txt1.text = grd.selectedItem.label1.toString();
txt2.text = grd.selectedItem.label2.toString();
txt3.text = grd.selectedItem.label3.toString();
txt4.text = grd.selectedItem.label4.toString();
txt5.text = grd.selectedItem.label5.toString();
}
]]>
</mx:Script>
<mx:XML id="gridXML" xmlns="">
<root>
<item>
<label1>A1</label1>
<label2>A2</label2>
<label3>A3</label3>
<label4>A4</label4>
<label5>A5</label5>
</item>
<item>
<label1>B1</label1>
<label2>B2</label2>
<label3>B3</label3>
<label4>B4</label4>
<label5>B5</label5>
</item>
<item>
<label1>C1</label1>
<label2>C2</label2>
<label3>C3</label3>
<label4>C4</label4>
<label5>C5</label5>
</item>
<item>
<label1>D1</label1>
<label2>D2</label2>
<label3>D3</label3>
<label4>D4</label4>
<label5>D5</label5>
</item>
<item>
<label1>E1</label1>
<label2>E2</label2>
<label3>E3</label3>
<label4>E4</label4>
<label5>E5</label5>
</item>
<item>
<label1>F1</label1>
<label2>F2</label2>
<label3>F3</label3>
<label4>F4</label4>
<label5>F5</label5>
</item>
</root>
</mx:XML>
<mx:VBox>
<mx:HBox id="hbox">
<mx:TextInput id="txt1"/>
<mx:TextInput id="txt2"/>
<mx:TextInput id="txt3"/>
<mx:TextInput id="txt4"/>
<mx:TextInput id="txt5"/>
</mx:HBox>
<mx:DataGrid id="grd" dataProvider="{gridXML.item}" change="{onChange(event)}">
<mx:columns>
<mx:DataGridColumn id="label1" dataField="label1" />
<mx:DataGridColumn id="label2" dataField="label2" />
<mx:DataGridColumn id="label3" dataField="label3" />
<mx:DataGridColumn id="label4" dataField="label4" />
<mx:DataGridColumn id="label5" dataField="label5" />
</mx:columns>
</mx:DataGrid>
</mx:VBox>
</mx:Application>
Using Datagrid Change Event and selectedItem to Populate TextBox's
Hopes that helps

flex 4 tabbar - disable tab

is there a common way to disable a tab of a spark tabbar component in flex 4? with the mx tabnavigator component you can just disable the content corresponding to the tab and the tab is also disabled then. but doing this with the spark tab bar component disables just the content not the tab.
here is my simple example:
<mx:TabNavigator x="122" y="155" width="200" height="200">
<s:NavigatorContent label="Tab 1" width="100%" height="100%">
<s:Label text="Label1"/>
</s:NavigatorContent>
<s:NavigatorContent label="Tab 2" width="100%" height="100%" enabled="false">
<s:Label text="Label2"/>
</s:NavigatorContent>
<s:NavigatorContent label="Tab 3" width="100%" height="100%">
</s:NavigatorContent>
</mx:TabNavigator>
<s:TabBar x="368.7" y="100.35" dataProvider="{viewstack1}" />
<mx:ViewStack x="364" y="133" id="viewstack1" width="200" height="200">
<s:NavigatorContent label="Tab 1" width="100%" height="100%">
<s:Label text="Label1"/>
</s:NavigatorContent>
<s:NavigatorContent label="Tab 2" width="100%" height="100%" enabled="false">
<s:Label text="Label2"/>
</s:NavigatorContent>
<s:NavigatorContent label="Tab 3" width="100%" height="100%">
<s:Label text="Label3" x="1" y="0"/>
</s:NavigatorContent>
</mx:ViewStack>
many thx,
florian
Addendum:
Literally two minutes after I got back to actually working, I found an "elegant" solution using a skin.
If you apply a custom skinClass to your tab bar you can bind the tab.enabled property just like you'd expect/want.
<fx:Script>
<![CDATA[
[Bindable] private var tab2IsReady:Boolean = false;
private function checkCriteria():void{
tab2IsReady = someOtherThing.isFinished;//Boolean
}
]]>
</fx:Script>
<s:TabBar id="theTabBar"
dataProvider="{viewStack}"
skinClass="skins.CustomTabBarSkin"/>
<mx:ViewStack id="viewStack">
<s:NavigatorContent label="Tab index 0">
<!-- Your first tab's content -->
</s:NavigatorContent>
<s:NavigatorContent label="Tab index 1" enabled="{tab2IsReady}">
<!-- Your second tab's content -->
</s:NavigatorContent>
</mx:ViewStack>
When you type "skinClass" use the auto complete to generate (in FlashBuilder ~4.5+???) the custom skin (named whatever you want).
The code will appear like below (I left out the Script tag).
<?xml version="1.0" encoding="utf-8"?>
<!-- skins/CustomTabBarSkin.mxml
...
Adobe's copyright & doc comments
...
-->
<s:Skin
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:fb="http://ns.adobe.com/flashbuilder/2009"
alpha.disabled="0.5">
<fx:Metadata>
<![CDATA[
/**
* #copy spark.skins.spark.ApplicationSkin#hostComponent
*/
[HostComponent("spark.components.TabBar")]
]]>
</fx:Metadata>
<!-- optional Script tag here -->
<s:states>
<s:State name="normal" />
<s:State name="disabled" />
</s:states>
<!--- #copy spark.components.SkinnableDataContainer#dataGroup -->
<s:DataGroup id="dataGroup" width="100%" height="100%">
<s:layout>
<s:ButtonBarHorizontalLayout gap="-1"/>
</s:layout>
<s:itemRenderer>
<fx:Component>
<s:ButtonBarButton skinClass="spark.skins.spark.TabBarButtonSkin" />
</fx:Component>
</s:itemRenderer>
</s:DataGroup>
</s:Skin>
<!-- End skins/CustomTabBarSkin.mxml -->
Change:
<fx:Component>
<s:ButtonBarButton skinClass="spark.skins.spark.TabBarButtonSkin" />
</fx:Component>
To:
<fx:Component>
<s:ButtonBarButton skinClass="spark.skins.spark.TabBarButtonSkin"
enabled="{data.enabled}" />
</fx:Component>
Then any <s:NavigatorContent/> in the ViewStack with its enabled property set or bound will do exactly what you expect
(be enabled when true, & disabled when false).
One solution to try would be to use mx:VBox components instead of s:NavigatorContent.
From http://blog.flexexamples.com/2007/08/25/enabling-and-disabling-specific-tabs-in-a-tabbar-control/ :
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/08/25/enabling-and-disabling-specific-tabs-in-a-tabbar-control/ -->
<mx:Application name="TabBar_enabled_test"
xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="middle"
backgroundColor="white">
<mx:ApplicationControlBar dock="true">
<mx:CheckBox id="tabBarEnabled"
label="TabBar.enabled"
selected="true"
width="25%" />
<mx:CheckBox id="tab1Enabled"
label="Tab1.enabled"
selected="true"
width="25%" />
<mx:CheckBox id="tab2Enabled"
label="Tab2.enabled"
selected="true"
width="25%" />
<mx:CheckBox id="tab3Enabled"
label="Tab3.enabled"
selected="true"
width="25%" />
</mx:ApplicationControlBar>
<mx:VBox verticalGap="0">
<mx:TabBar id="tabBar"
width="400"
dataProvider="{viewStack}"
enabled="{tabBarEnabled.selected}" />
<mx:ViewStack id="viewStack" width="400" height="100">
<mx:VBox id="tab1"
label="Tab1"
backgroundColor="haloGreen"
enabled="{tab1Enabled.selected}">
<mx:Label text="Label 1" />
</mx:VBox>
<mx:VBox id="tab2"
label="Tab2"
backgroundColor="haloBlue"
enabled="{tab2Enabled.selected}">
<mx:Label text="Label 2" />
</mx:VBox>
<mx:VBox id="tab3"
label="Tab3"
backgroundColor="haloOrange"
enabled="{tab3Enabled.selected}">
<mx:Label text="Label 3" />
</mx:VBox>
</mx:ViewStack>
</mx:VBox>
</mx:Application>
For those who want an working answer for Flex 4.5 (probably Flex 4 also). I finally figured out a solution. It feels like a hack to me, but Adobe's not answering the call and it's working for me. Here's a simplified example.
<!-- component that has the the TabBar in it... -->
<fx:Script>
<![CDATA[
//imports here
import mx.core.UIComponent;
//imports
private function setTabEnabled(index:int,enabled:Boolean):void{
var theTab:UIComponent = theTabBar.dataGroup.getElementAt(index) as UIComponent;
if(theTab){theTab.enabled = enabled;}
}
]]>
</fx:Script>
<s:TabBar id="theTabBar"
dataProvider="{viewStack}"/>
<mx:ViewStack id="viewStack">
<s:NavigatorContent label="0th Tab">
<!-- ...Content -->
</s:NavigatorContent>
<s:NavigatorContent label="1st Tab">
<!-- ...Content -->
</s:NavigatorContent>
<s:NavigatorContent label="2nd Tab">
<!-- ...Content -->
</s:NavigatorContent>
</mx:ViewStack>
<!-- rest of the component that has the the TabBar in it... -->
Then you just call setTabEnabled(theTabIndex,trueFalse) in an event handler related to whatever decides why the tab is, or isn't, enabled.
I should extend the TabBar to support this, but I've already spent enough time trying to figure it out.
Happy Coding =D

Flex viewstack children includeIn works funny

I have a viewstack with childrens which I want to show/hide depending on the state the application is
<?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:eworx="com.eworx.*"
xmlns:view="com.eworx.view.*"
xmlns:components="com.eworx.view.components.*"
skinClass="com.eworx.view.skins.MainAppSkin"
xmlns:layouts="com.eworx.view.layouts.*"
currentState="login"
initialize="init(event)"
creationComplete="complete(event)"
width="100%"
height="100%">
<fx:Style source="assets/css/screen.css" />
<fx:Script>
<![CDATA[
import mx.controls.Alert;
import mx.core.FlexGlobals;
import mx.events.FlexEvent;
import nl.demonsters.debugger.MonsterDebugger;
private var debugger:MonsterDebugger;
[Bindable]
public var apiUrl:String;
[Bindable]
public var customerType:String;
protected function init(event:FlexEvent):void
{
debugger = new MonsterDebugger(this);
}
protected function complete(event:FlexEvent):void
{
var activated:Boolean = FlexGlobals.topLevelApplication.parameters.activated;
var passwordReset:Boolean = FlexGlobals.topLevelApplication.parameters.passwordReset;
var message:String = FlexGlobals.topLevelApplication.parameters.message;
apiUrl = FlexGlobals.topLevelApplication.parameters.apiUrl;
if(activated)
{
Alert.show(message,"Notice");
}
if(passwordReset)
{
Alert.show(message,"Notice");
}
systemManager.addEventListener(MouseEvent.MOUSE_WHEEL,onMouseWheel,true);
}
private function onMouseWheel(e:MouseEvent):void
{
e.delta *= 5;
}
]]>
</fx:Script>
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
<eworx:Seven7Context contextView="{this}" />
<s:Fade id="fadeIn" alphaFrom="0" alphaTo="1" duration="300" />
<s:Fade id="fadeOut" alphaFrom="1" alphaTo="0" duration="300" />
<s:Rotate3D id="r3d" angleYFrom="0" angleYTo="360" duration="300" />
</fx:Declarations>
<s:states>
<s:State name="login" />
<s:State name="wholesale" />
<s:State name="retail" />
</s:states>
<view:LoginForm id="loginForm" includeIn="login" horizontalCenter="0" verticalCenter="0" />
<s:Group excludeFrom="login" width="960" horizontalCenter="0">
<s:BitmapImage width="100%" height="42" x="13" y="80" source="#Embed('assets/garnish/bar.png')" />
<mx:Image source="assets/garnish/logo.png" top="23" />
<s:HGroup verticalAlign="middle" x="198" y="47">
<s:TabBar skinClass="MainMenuTabBarSkin" dataProvider="{vs}" buttonMode="true"/>
<mx:LinkButton id="logout" label="Logout" click="{currentState='login'}" />
</s:HGroup>
<s:HGroup top="0" right="0" gap="1" verticalAlign="top">
<components:OfferList />
<components:MarginBuildersTrack />
<components:CartTrack top="0" />
</s:HGroup>
<mx:ViewStack
id="vs"
top="120"
horizontalCenter="0"
width="960"
height="100%"
resizeToContent="true" >
<view:HomePage showEffect="{fadeIn}" hideEffect="{fadeOut}" label="Home" />
<view:ShowroomPage showEffect="{fadeIn}" hideEffect="{fadeOut}" label="Showroom" />
<view:CataloguePage showEffect="{fadeIn}" hideEffect="{fadeOut}" label="Catalogue" />
<!--<view:IncentivesPage showEffect="{fadeIn}" hideEffect="{fadeOut}" label="Incentives" />-->
<view:RetailCustomerProfilePage includeIn="retail" showEffect="{fadeIn}" hideEffect="{fadeOut}" label="My Profile" />
<view:WholesaleCustomerProfilePage includeIn="wholesale" showEffect="{fadeIn}" hideEffect="{fadeOut}" label="My Profile" />
<view:ClientsPage excludeFrom="retail,login" showEffect="{fadeIn}" hideEffect="{fadeOut}" label="My Clients" />
<view:CartPage showEffect="{fadeIn}" hideEffect="{fadeOut}" label="My Cart" />
<view:OrdersPage showEffect="{fadeIn}" hideEffect="{fadeOut}" label="My Orders" />
</mx:ViewStack>
</s:Group>
</s:Application>
AS you can see I inlude the retail customer view in the retail state and the wholesale customer view in the wholesale state. The problem is that when I run my app they don't appear on neither state.
Any ideas?
This is an odd approach to me. The whole purpose of the ViewStack is to only show one item at once. This is a very odd approach.
I see you have a tabbar whose dataProvider is the ViewStack. However, your ViewStack is not created as a bindable property on the component, and you never seem to set up an initial state. So, I theorize that this is happening:
App Loads in default state, which is the empty string
ViewSTack and/or TabBar are initialized without those children
App state changes for some reason
TabBar does not update
CreationPolicy may come into play too, but I'm not sure. You'll have to step through the code to figure out what's going on. I would strongly recommend you consider an alternate approach to this. Possibly creating the tabbar navigator dataProvider manually based on user security settings or the current state.

Flex State transition

I am trying to create the transition between states. The first state transition works fine(state1=>state2), but the second one is acting weird(state2=>state3). After clicks the button to change
state2=>state3, some text areas which are belong to state2 show up and stay on the screen. I am not sure why. I would appreciate it if someone here can help me out.
My 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="955" minHeight="600">
<fx:Script>
<![CDATA[
protected function btn1_clickHandler(event:MouseEvent):void
{
currentState="state2";
}
protected function btn2_clickHandler(event:MouseEvent):void
{
currentState="state3";
}
]]>
</fx:Script>
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<s:states>
<s:State name="state1"/>
<s:State name="state2"/>
<s:State name="state3"/>
</s:states>
<s:transitions>
<s:Transition toState="state2" >
<s:Parallel>
<s:Move targets="{[btn1,btn2]}" />
<s:AddAction targets="{[label1,label2,label3,textInput1,textInput2,textInput3]}" />
<s:Fade targets="{[label1,label2,label3,textInput1,textInput2,textInput3]}"/>
</s:Parallel>
</s:Transition>
<s:Transition toState="state3" >
<s:Fade targets="{[label1,label2,label3,textInput1,textInput2,textInput3]}"/>
</s:Transition>
</s:transitions>
<s:Label y="10" text="label1" id="label1" includeIn="state2" />
<s:TextInput y="30" id="textInput1" includeIn="state2" />
<s:Label y="50" text="label1" id="label2" includeIn="state2" />
<s:TextInput y="70" id="textInput2" includeIn="state2" />
<s:Label y="90" text="label1" id="label3" includeIn="state2" />
<s:TextInput y="120" id="textInput3" includeIn="state2" />
<s:Button y="180" y.state2="350" label="btn1" id="btn1" click="btn1_clickHandler(event)"/>
<s:Button y="250" y.state2="550" label="btn2" id="btn2" click="btn2_clickHandler(event)"/>
</s:Application>
Your code sample looks incomplete. I think we'll need to see more than just the state and transitions. IF you can provide a full running sample that would be helpful.
I assume this is a sample issue, but in your current code, the transitions toStates are not created in the document. Since you have three states, you may want to add a 'fromState' and explicitly design the transition from / to each state.
If I had to guess, you probably need to specify the 'includeIn' property on the relevant components. You can use a comma delimited list of states, something like this:
<s:Component includeIn="a" />
<s:Component includeIn="b,c" />
<s:Component includeIn="a,c" />
Where the first component would appear in state a, the second would appear in state b and c, and the third component would appear in state a and c.
Updated Posters 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="955" minHeight="600">
<fx:Script>
<![CDATA[
protected function btn1_clickHandler(event:MouseEvent):void
{
currentState="state2";
}
protected function btn2_clickHandler(event:MouseEvent):void
{
currentState="state3";
}
]]>
</fx:Script>
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<s:states>
<s:State name="state1"/>
<s:State name="state2"/>
<s:State name="state3"/>
</s:states>
<s:transitions>
<s:Transition toState="state2" >
<s:Parallel>
<s:Move targets="{[btn1,btn2]}" />
<!--<s:AddAction targets="{[label1,label2,label3,textInput1,textInput2,textInput3]}" /> -->
<s:Fade targets="{[label1,label2,label3,textInput1,textInput2,textInput3]}" alphaFrom="0" alphaTo="1"/>
</s:Parallel>
</s:Transition>
<s:Transition toState="state3" >
<s:Parallel>
<!-- <s:Move targets="{[btn1,btn2]}" />-->
<!--<s:RemoveAction targets="{[label1,label2,label3,textInput1,textInput2,textInput3]}" /> -->
<s:Fade targets="{[label1,label2,label3,textInput1,textInput2,textInput3]}" alphaFrom="1" alphaTo="0"/>
</s:Parallel>
</s:Transition>
</s:transitions>
<s:Label y="10" text="label1" id="label1" includeIn="state2" />
<s:TextInput y="30" id="textInput1" includeIn="state2" />
<s:Label y="50" text="label2" id="label2" includeIn="state2" />
<s:TextInput y="70" id="textInput2" includeIn="state2" />
<s:Label y="90" text="label3" id="label3" includeIn="state2" />
<s:TextInput y="120" id="textInput3" includeIn="state2" />
<s:Button y="180" y.state2="350" includeIn="state1,state2,state3" label="To State 2" id="btn1" click="btn1_clickHandler(event)"/>
<s:Button y="250" y.state2="550" includeIn="state1,state2,state3" label="To State 3" id="btn2" click="btn2_clickHandler(event)"/>
</s:Application>

Resources