머드초보의 블로그

ViewStack에 대해서 알아봅시다.
화면 전환을 위해 이게 가장 많이 쓰인다더군요. 써보니 뭐 좋은 거 같습니다.

탭네이게이터나 아코디언?인가?뭔가 하는 것은 펼치고 접고 하는 식인 반면에 이건 메뉴바를 하나 두고 보이고 싶은 View를 클릭해서 열 수 있다는 차이점이 있습니다.



메인부분에 사용된 ViewStack을 보도록 합시다.






[code]
<mx:ViewStack id="viewstack" width="75%" height="100%" creationPolicy="all">
 
   <mx:Panel id="ViewHome" width="100%" height="100%"
     showEffect="WipeDown" hideEffect="WipeUp">
       <mx:TextArea width="100%" height="100%" borderColor="#ffffff"
         wordWrap="true" editable="false" enabled="true" fontSize="12"
          color="#666666" cornerRadius="5" x="10" y="10">
         <mx:text>예매시스템에 오신 것을 환영합니다.</mx:text>
       </mx:TextArea>
      </mx:Panel>
     
      <comp:BookSeat id="ViewBookSeat"
         showEffect="WipeDown" hideEffect="WipeUp" />
 
      <comp:BookCancel id="ViewBookCancel"
         showEffect="WipeDown" hideEffect="WipeUp" />
 
      <comp:BookList id="ViewBookList"
         showEffect="WipeDown" hideEffect="WipeUp" />
     
      <comp:SeatList id="ViewSeatList"
         showEffect="WipeDown" hideEffect="WipeUp" />
     
      <comp:AgeStatus id="ViewAgeStatus"
         showEffect="WipeDown" hideEffect="WipeUp" />
     
      <comp:SexStatus id="ViewSexStatus"
         showEffect="WipeDown" hideEffect="WipeUp" />
     
    </mx:ViewStack>
[/code]

아....comp:BookSeat 이거는 커스텀 컴포넌트라고 해서 사용자가 직접 만든 컴포넌트를 말하는 겁니다.
즉 이미 있는 컨트롤들을 상속받아서 새로운 기능을 추가하는 그런것이죠.

앞에 comp는 무조건 저게 아니고 처음에 mx:application 선언시에 보시면 xmlns:comp="*" 라고 적어 놓으면 그 해당 폴더에 있는 모든 컴포넌트를 사용할 수 있다 라는 것이죠. 그리고 이름은 comp!

그다음 BookSeat, BookCancel 등은 이 컴포넌트 이름입니다. 처음 플렉스빌더에서
File -> New -> New MXML Component 라고 해서 이름을 쓰는데 즉 파일 이름이 컴포넌트 이름입니다 ^^

저기 6개들은 다 제가 만든 컴포넌트이며 다 Panel을 상속받았습니다.
Panel이라고 치고 해봅시다.

저렇게 ViewStack을 정해 놓으면 ViewStack에는 총 7개의 Panel이 들어가 있습니다. 우선적으로 처음에 쓴 놈부터 보여져서 ViewHome이 먼저 보여집니다.

그리고 viewstack.selectedChild 라는 변수에 ViewBookSeat이라고 넣어주면 ViewBookSeat에 해당하는 컴포넌트가 보여지게 됩니다.

즉 Button에 <mx:button .... click="viewstack.selectedChild = ViewBookSeat"> 요렇게 해주면 화면 전환이 된다는 것이죠 ^^

이 예매시스템은 성격상 마우스를 클릭했을 때 데이터를 먼저 업데이트 해야하기 때문에 업데이트를 하고나서 ViewStack을 바꾸는 식으로 했습니다 ^^

메인부분은 화면 전환하는 거 밖에 없군요-_-;