读书人

flex编程兑现State

发布时间: 2012-10-27 10:42:26 作者: rapoo

flex编程实现State
在Flash Builder 4 Beta 2版本中,使用mxml方式实现state的切换有了很大改进,使用起来更方便,具体可参见下文:

http://onflex.org/learn/fx4/index.php?page=States

看完这篇文章后,想到一个问题,如何用变成的方式实现切换呢,找了参考资料,实现了一个例子,代码如下:

开发环境:Flash Builder 4 Beta2

<?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"
creationComplete="creationCompleteHandler(event)">
<fx:Script>
<![CDATA[
import mx.core.UIComponent;
import mx.events.FlexEvent;
import mx.states.SetProperty;
import mx.states.State;

import spark.components.Label;
import spark.components.Panel;

private var stateArray : Array;
private var state1 : State;
private var state2 : State;

protected function creationCompleteHandler(event:FlexEvent):void
{
state1 = new State();
state1.name="state1";

state2 = new State();
state2.name="state2";

var stateArray1:Array = new Array();
var stateArray2:Array = new Array();

state1.overrides = stateArray1;
state2.overrides = stateArray2;

stateArray = new Array();
stateArray.push(state1);
stateArray.push(state2);
this.states = stateArray;

var panel:Panel = new Panel();
group.addElement(panel);
var label:Label = new Label();
panel.addElement(label);

buildStates(stateArray1, stateArray2, panel, label);
this.currentState = "state1";
}

private function buildStates(stateArray1:Array, stateArray2:Array,
compenent1:UIComponent, compenent2:UIComponent) : void{

stateArray1.push(makeSetProp(compenent1, "title", "Panel1"));
stateArray1.push(makeSetProp(compenent2, "text", "One"));

stateArray2.push(makeSetProp(compenent1, "title", "Panel2"));
stateArray2.push(makeSetProp(compenent2, "text", "Two"));
}

private function makeSetProp(target:UIComponent, name:String, value:*):SetProperty{
var sp:SetProperty = new SetProperty();
sp.target = target;
sp.name = name;
sp.value = value;
return sp;
}
]]>
</fx:Script>

<s:VGroup autoLayout="true" horizontalAlign="center">
<s:HGroup horizontalCenter="0">
<s:Button label="One"
click="this.currentState='state1'"/>
<s:Button label="Two"
click="this.currentState='state2'"/>
</s:HGroup>
<s:HGroup id="group" horizontalCenter="0">
</s:HGroup>
</s:VGroup>

</s:Application>

读书人网 >编程

热点推荐