이벤트 핸들링 이해하기
사용자의 마우스 클릭/텍스트 입력-----> 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 |