FLEX-WEB - ViewStack 을 이용한 화면전환

 

ViewStack 을 이용한 화면전환

{

FLEX의 UIComponents 중 ViewStack 이라는 것이 있으며, 이를 사용하여 손쉽게 패널간 혹은 클래스간의 화면전화을 용이하게 할 수 있습니다.

<mx:ViewStack id="vs" width="100%" height="100%" resizeToContent="true" styleName="bxContents">

<mx:Panel id="pnl_A" width="100%" height="100%" visible="true" title="A">

<mx:Text text="아무것도 없넹?"/>

</mx:Panel>

<mx:Panel id="pnl_B" width="100%" height="100%" visible="true" title="B">

<mx:VBox width="100%" height="50" horizontalAlign="center" verticalAlign="middle">

<mx:HBox width="100%" height="20" horizontalAlign="center" verticalAlign="middle">

<mx:Label text="ABC"/>

<mx:Label text="DEF"/>

</mx:HBox>

</mx:VBox>

<mx:Spacer height="20"/>

<mx:VBox width="100%" height="100%" horizontalAlign="center" verticalAlign="top">

<mx:TextArea id="resTxtArea " width="100%" height="100%" editable="false"/>

</mx:VBox>

</mx:Panel>

</mx:ViewStack>

<mx:Button id="btn_vsChanger " click="{fn_vsChanger()}" label="바꾸기" enabled="false" buttonMode="true" useHandCursor="true" visible="true" />

l 위와 같이 하나의 ViewStack 안에 2개의 패널이 존재합니다. 버튼을 하나 만들고, 클릭이벤트를 이용하여 아래와 같이 메소드를 작성하고 쉽게 화면을 전환할 수 있습니다.

private function fn_vsChanger():void{

switch(vs.selectedIndex){

case 0:

vs.selectedChild = pnl_A;

break;

case 1:

vs.selectedChild = pnl_B;

break;

default:

break;

}

}

▒ ViewStack Language Reference : http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/mx/containers/ViewStack.html

}