Tech/Flex

5 이벤트 핸들링과 데이터 구조

onesixx 2009. 3. 12. 23:44
반응형

이벤트 핸들링 이해하기

 

사용자의 마우스 클릭/텍스트 입력-----> OS ---> Flash player ---> 객체 ---> 이벤트처리를위한 Methods호출

 

방법1. 직접 Click에 ActionScript으로 넣기

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">
    <mx:Label  text="mL" id="myLabel"/>
    <mx:Button label="Button" id="myButton" click="myLabel.text='okok'"/>
</mx:Application>

--->>

방법2. Funtion에 ActionSctip을 담고, 그 Function을 호출

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical"
    initialize="init();">
    <mx:Script>
        <![CDATA[
            private function clickHandler():void{
                myLabel.text="okok";
            }
        ]]>
    </mx:Script>
    <mx:Label  text="mL" id="myLabel"/>
    <mx:Button label="Button" id="myButton" click="clickHandler();"/>
</mx:Application>

-->>

방법3. 이벤트를 인수로 받고 작업을 정의하고 , 객체에 이벤트와 이벤트처리함수를 등록 (개발자와 디자인 분리)

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical"
    initialize="init();">
    <mx:Script>
        <![CDATA[
            public function init():void{
                myButton.addEventListener(MouseEvent.CLICK,clickHandler);
            }
            private function clickHandler(event:MouseEvent):void{
                myLabel.text="okok";
            }
        ]]>
    </mx:Script>
    <mx:Label  text="mL" id="myLabel"/>
    <mx:Button label="Button" id="myButton"/>
</mx:Application>

 

creationComplete 이벤트에서 데이터 구조 만들기

 

* initialize이벤트 –—(위치 확정)----(컴포넌트가 화면에 출력)---> CreationComplete이벤트

Initialize 이벤트는 자식컴포넌트가 생성완료되고 자신의 속성이 초기화 된 후 발생.

Appilcation의 creationComplete이벤트는

             컴포넌트가 위치가 확정되고 화면에 모든 컴포넌트들이 출력된 후 발생.
            = 자식윈도우 (제일 안쪽)부터 creationComplete 이벤트가 발생됨.

                                   ex) Label  --> Button –> HBox --> Application

                                    

 <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="horizontal"
    creationComplete="catRPC.send();">


* 데이터를 xml파일로 분리

<mx:Model id="groceryInventory">
    <groceries>
        <catName>Dairy</catName>
        <prodName>Milk</prodName>
        <imageName>assets/dairy_milk.jpg</imageName>
        <cost>1.20</cost>
        <listPrice>1.99</listPrice>
        <isOrganic>true</isOrganic>
        <isLowFat>true</isLowFat>
        <description>Direct from California where cows are happiest!</description>
    </groceries>
</mx:Model>

 

-->

<mx:Model id="groceryInventory"  source="assets/inventory.xml" />

 

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
    creationComplete="prodHandler(groceryInventory)">


    <mx:Model id="groceryInventory"  source="assets/inventory.xml" />


    <mx:Script>
        <![CDATA[
            private function prodHandler(theItems:Object):void{
                trace(theItems.prodName);
                trace(theItems.cost);
            }
        ]]>
    </mx:Script>

 

Application에서 각 컴포넌트들이 위치를 잡고 화면에 나타난 후 발생되는 creationComplete 이벤트는

Argument인 groceryInventory를  prodHandler라는 메서드에 전달.

Parameter인 prodHander의 theItems

 

----------------------------------------------------------------------------------

value object (값객체)

시스템이 실행되는 동안, (시스템 내에서 다뤄지는) 데이터를 보관할 그릇

= DTO (Data Transfer Object)

 

Model에 저장된 xml값을 ActionScript의 객체에 저장시키기 위해 DTO를 만듦

 

사용자 정의 ActionScript 클래스 만들기

 

 

 

Class란? 역할을 정의하는 ActionScript문법

시스템 < 명령어(역할)들의 집합

             - 화면처 리/ 사용자 입력

             - 업무처리

             - 데이터 저장

             - I/O

 

객체를 생성하는 메소드 만들기

xml의 데이터를 Product라는 그릇에 옮겨 담고 Application은 Method를 호출하여 사용한다.

Design Pattern중 빌드디자인 응용

 

쇼핑 카트 클래스들 만들기

 

 

이벤트 객체에서 데이터 사용하기

d
반응형

'Tech > Flex' 카테고리의 다른 글

7 MXML로 컴포넌트 만들기  (0) 2009.04.06
6 컨트롤에서 리모트 XML 데이터 사용하기  (0) 2009.03.13
FLEX Yahoo API 사용방법  (3) 2009.03.12
4. 컨트롤 사용하기  (0) 2009.03.11
3. Flex - Interface Layout  (0) 2009.03.03
2. Flex 시작하기  (0) 2009.03.03