Flex 기본 7강 - Flex Source 이해하기 (ActionScript3.0) -

 

2. ActionScript 3.0

 Flash를 공부해보신 적이 있는 학생들은 아마도 액션스크립트가 무엇인지 알고 있을 겁니다. 보통 대부분의 학생들이 버튼 심볼을 만들고 거기에 액션스크립트를 입력함으로써 마우스가 버튼 심볼 위로 올라오거나 클릭을 했을 때 다른 프레임으로 이동이 되도록 하거나 링크가 걸리게 하는 등 어떤 변화가 발생하도록 하는데 사용을 하곤 합니다. Flex에서도 마찬가지입니다. 어떤 컴포넌트에 대한 이벤트(마우스 클릭, 키보드 입력 등)가 발생했을 경우 TextInput 컴포넌트에 텍스트가 자동으로 입력되게 하거나 팝업창이 나오게 하는 등 어떤 변화를 나타내는데 사용이 됩니다.

 하지만 Flash에서 사용하는 ActionScript와 Flex3에서 사용하는 ActionScript에는 큰 차이점이 한 가지 존재합니다. 현재 Flash CS4는 ActionScript 2.0과 ActionScript 3.0을 모두 지원하지만  Flex3에서는 ActionScript 3.0만 사용할 수 있습니다. Flex 1.0과 1.5 에서는 ActionScript 2.0을 사용했었으나 Flex2.0부터는 ActionScript 3.0을 사용하게 되었습니다. 따라서 ActionScript의 버전이 다르기 때문에 사용방법도 약간 다릅니다. 예를 들어 ActionScript 2.0에서는 변수를 선언할 때에 public, private 등과 같은 접근 제한자를 명시적으로 작성하지 않아도 되었지만 ActionScript 3.0에서는 명시적으로 데이터 타입 및 접근 제한자를 작성해야 합니다. (지금은 이 말을 이해하지 못해도 상관없습니다. 뒤에서 다시 설명드릴 겁니다.) 그리고 ActionScript 2.0은 Flash 플레이어 7,8에서 실행이 되었으나 ActionScript 3.0은 Flash 플레이어 9 이상에서 실행됩니다.

 그렇다면 지금부터 ActionScript 3.0의 사용방법에 대해서 알아보도록 하겠습니다.

(1) 이벤트 핸들러와 ActionScript의 위치

 Flex 에서 ActionScript 3.0은 MXML컴포넌트가 사용할 수 있는 이벤트 다음에 스크립트를 기술하거나 호출될 함수명을 정의할 때 사용이 됩니다. 여기서 정의된 액션스크립트는 이벤트가 일어날 때 호출되어 처리할 내용을 기술하므로 ‘이벤트 핸들러’라고 부릅니다.

 ActionScript 코드는 주로 <mx:Script>와 </mx:Script> 태그 사이에 위치합니다. 이 태그 블록은 MXML의 어떤 위치에 둬도 상관이 없습니다. 그리고 ActionScript 코드의 연산자가 XML로 파싱되는 것을 막기 위해 <mx:Script></mx:Script> 태그 사이에 CDATA섹션으로 감싸줍니다. 아래 그림을 보시면 쉽게 이해하실 수 있습니다. 물론 <mx:Script>와 </mx:Script> 태그는 <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns="*">와 </mx:Application> 사이에 위치해야 합니다.

 앞의 코드를 해석하자면 이렇습니다.

 

(2) 이벤트 핸들러 작성법

이벤트 핸들러를 작성할 때는 기본적으로 4가지를 알고 있어야 합니다.

  다음 그림에서 fullNameTextInput은 버튼을 클릭했을 때 반응(변화)을 나타낼 컴포넌트의 ID입니다.(1) text는 fullNameTextInput의 속성으로 텍스트를 나타내는 것입니다.(2) 이벤트가 발생할 경우 fullNameTextInput의 text에 입력될 값은 ‘John Smith'입니다.(3)

 

 따라서 위의 그림을 종합해서 해석하면 'Click me'버튼을 클릭하면 fullNameTextInput 이라는 ID를 가진 컴포넌트의 text 속성에 John Smith 라는 값이 입력된다는 것입니다.

 그런데 여기에서 한 가지 의문이 생기실 겁니다. 바로 .(점) 때문이지요. 점은 쉽게 생각해서 아래 그림처럼 여러분이 컴포넌트의 하위 속성을 컨트롤 하고자 할 때 여러분을 컴포넌트의 하위 속성으로 연결시켜 주는 하나의 연결고리라고 보시면 되겠습니다. 

 이벤트가 발생할 경우 함수를 호출하는 방법은 더욱 간단합니다. 호출하고 싶은 함수명만 알고 있으면 쉽게 함수를 호출할 수 있습니다. 예를 들여 <mx:Button label="버튼“/>에 함수 호출을 입력하고 싶으면  

 

을 추가하면 됩니다. 따라서 <mx:Button label="버튼“ click = showMsg()/>라고 입력하면 되는 것입니다.

 

(3) Function(함수)

1) Function이란 무엇인가?

 Function이란 수학에서 함수를 뜻하는 영어 단어입니다. 하지만 우리들이 고등학교 때 수학시간에 배웠던  Y=f(x) 를 생각하실 필요가 전혀 없습니다.  그냥 우리들이 애플리케이션을 만들 때 사용할 몇 가지 간단한 공식이나 스크립트문을 포함하고 있는 하나의 그릇이라고 생각하시면 됩니다. 예를 들어서 앞의 설명에서 나온 showMsg 함수에는 “반갑습니다.” 라는 메시지가 팝업창으로 나타나게 하라는 스크립트가 들어가 있는 것이지요.

아래 그림에서 mx.controls.Alert.show('반갑습니다.‘); 부분이 “반갑습니다.” 라는 메시지를 팝업창으로 나타내라는 스크립트입니다. 그래서 showMsg함수를 호출하면 팝업창으로 “반갑습니다.“ 라는 메시지가 나오는 것입니다

 

2) 왜 Function을 사용해야 하는가?

 함수를 사용하면 언제라도 재사용이 가능하기 때문에 편리하게 작업을 할 수 있습니다. 예를 들어 앞에서 설명한 것처럼 버튼을 클릭할 경우 showMsg 함수를 호출한다고 가정했을 때 버튼이 100개 일 경우 각 버튼에 showMsg함수를 호출하는 클릭이벤트(click = showMsg()) 만 추가하면 됩니다. 하지만 함수를 사용하지 않은 경우 100개의 버튼에 전부 스크립트(mx.controls.Alert.show('반갑습니다.‘);)를 추가해야 합니다. 물론 지금 설명한 것은 스크립트문이 간단하기 때문에 큰 차이를 못 느끼실 겁니다. 하지만 아래 스크립트처럼 복잡하고 길어질 경우 굉장히 힘들어지겠죠?

 

그리고 더 중요한 것은 함수를 이용할 경우 수정이 편리하다는 것입니다. 만약 팝업창으로 나타나는 메시지를 수정하고 싶은 경우, 함수를 사용하지 않고 100개의 버튼에 팝업창으로 메시지를 나타내는 스크립트문을 입력한 경우 100개의 명령문을 전부 수정해야 하지만 함수를 이용했을 경우 함수만 수정하면 자동으로 100개의 버튼에 들어가는 스크립트문이 바뀌기 때문에 간단하게 수정작업을 마칠 수 있습니다.

 

3) Function 사용방법

(가) Function의 위치

 앞에서 ActionScript3.0를 설명하면서 언급했던 것처럼 함수도 <Script></Script> 사이에 입력됨은 물론 CDATA 섹션 안에 위치해야 합니다.

 

(나) 접근제한자 function 함수명( ) : 리턴타입{ 함수내용 }

  함수를 입력할 때는 다음과 같은 공식을 기억하시면 됩니다.

 

 그런데 접근제한자와 리턴타입이라는 것이 아마 생소하게 들리실 겁니다.

접근제한자는 함수를 현재 애플리케이션 내부에서만 쓸 것인지, 다른 애플리케이션에서도 쓸 수 있게 할 것인지의 제한 표시를 해줄 때 사용하는 것으로 internal, private, public이 있습니다.

 

 우리같이 ActionScript의 기초를 배우는 학생들은 접근제한자가 올 자리에 public 입력하시는게 편하실 겁니다. public은 어디에서든 함수에 접근을 할 수 있도록 해주기 때문이죠. 여기에서 제가 사용하는 대부분의 예제에도 public을 사용합니다.

 리턴타입이란 호출된 함수가 작업을 하게 되고 최종적으로 변수나 데이터를 리턴 하게 되는데

리턴되는 변수나 데이터의 형이 어떤지를 결정하는 것이 바로 리턴타입입니다. 잘 이해가 안 가시죠? 하지만 걱정하실 필요 없습니다. 굉장히 극단적인 표현이긴 하지만 void 라는 것을 사용하면 기본적인 것들은 해결이 됩니다. void란 프로그래밍에서 ‘없다’, ‘정해져있지 않다’라는 뜻을 가진 리턴타입으로 아무것도 리턴하지 않을 때 사용되기 때문이죠. 따라서 기본적인 프로그래밍을 배우는 우리들은 ‘void를 사용한다.’라고 정도만 알고 있으면 되겠습니다.

 따라서 종합해 보면 함수를 입력할 땐 아래의 공식을 기억하시면 됩니다.

 

다음 그림은 팝업창으로 ‘반갑습니다.’ 라는 메시지를 나타내는 함수입니다.(물론 이벤트 핸들러를 통해 함수가 호출되어야 실행됩니다.) 위의 공식과 비교해보시기 바랍니다.

 

(다) 문장이나 변수선언 끝에는 항상 ;(세미콜른)를 입력해야 한다.

 정보관리 수업(한림대학교 인터넷 미디어 전공)을 들어 본적이 있는 학생이나 PHP공부를 해본 적이 있는 학생들은 누구나 문장 마지막에 ;(세미콜론)을 입력하지 않아서 고생해본 적이 있을 겁니다.(PHP에서는 변수나 문장 마지막에 ;를 입력하지 않으면 오류가 납니다. 하지만 코드가 길 경우 ;를 입력하지 않았다는 것을 발견하기가 어렵습니다.) ActionScript도 마찬가지입니다. 함수 내용에 들어갈 문장 마지막에 ;을 입력하지 않으면 오류가 나기 때문에 항상 확인을 해야 합니다.

 

(4) 변수

1) 변수란 무엇인가?

 변수란 하나의 데이터저장소라고 보시면 되겠습니다. 여러분께서 애플리케이션을 제작할 때 사용할 데이터들을 저장하는 장소인 것이지요. 예를 들어 여러분들께서 internet media 라는 문자를 애플리케이션 내에서 어딘가에 저장하고 싶으시다면 변수를 만들어서 그 안에 저장을 하면 됩니다. 그런 다음 변수 안에 저장된 데이터를 필요할 때마다 꺼내 쓰는 것이지요. 우리들이 냉장고에 음식을 넣어놓고 먹고 싶을 때마다 꺼내 먹는 것처럼 말입니다.

 

   

2) 변수 선언 방법

변수를 선언할 때는 아래 공식대로 입력해야 합니다.

 

(가) 접근제한자

 접근제한자는 Function에서와 마찬가지로 변수를 현재 애플리케이션 내부에서만 쓸 것인지, 다른 애플리케이션에서도 쓸 수 있게 할 것인지의 제한 표시를 해줄 때 사용하는 것으로 internal, private, public이 있습니다.

(나) var

 정보관리 시간에 배우는 php에서는 변수를 선언할 때 $ 라는 기호를 사용합니다. 예를 들어

a라는 변수를 선언할 때 $a 라고 입력하는 것이지요. 만약에 $를 입력하지 않으면 컴퓨터는 a를 단순히 알파벳a로 인식해버립니다.

ActionScript도 마찬가지입니다. php와 다른 점이 있다면 $와 대신에 var를 사용한다는 것입니다. 따라서 아래 예처럼 ActionScript에서 변수a는 var a 라고 입력해야 합니다.

 

(다) 데이터 타입과 데이터 값

 데이터 타입은 여러분이 변수에 저장 할 데이터 값이 어떤 형식(숫자, 문자열 등)인지를 나타내주는 것입니다. 예를 들어 여러분이 저장할 데이터 값이 숫자라면 데이터 타입에는 Number라고 입력해야 합니다. 그리고 만약 internet media camp 와 같은 문자열이라면 String이라고 입력해야 합니다.

 

 그리고 함수선언을 할 때와 마찬가지로 변수에 저장 될 데이터 뒤에는 항상 ; 이 붙어야 합니다.