예제: 기본 응용 프로그램 만들기
ActionScript 3.0은 Flash Professional 및 Flash Builder 도구 또는 모든 텍스트 편집기를 비롯한 여러 응용 프로그램 개발 환경에 사용할 수 있습니다.
이 예제에서는 Flash Professional 또는 Flash Builder를 사용하여 간단한 ActionScript 3.0 응용 프로그램을 만들고 향상시킬 수 있는 단계에 대해 설명합니다. 작성할 응용 프로그램에서는 Flash Professional 및 Flex에서 외부 ActionScript 3.0 클래스 파일을 사용하는 간단한 패턴을 제공합니다.
ActionScript 응용 프로그램 설계이 ActionScript 응용 프로그램 예제는 표준 "Hello World" 응용 프로그램이며 이에 대한 설계는 간단합니다.
이 응용 프로그램의 이름은 HelloWorld이고,
"Hello World!"가 포함된 단일 텍스트 필드를 표시합니다.
이 응용 프로그램에서는 Greeter라는 객체 지향 클래스 하나만 사용합니다. 이 설계에 의하면 Flash Professional 또는 Flex 프로젝트에서 Greeter 클래스를 사용할 수 있습니다.
이 예제에서는 먼저 응용 프로그램의 기본 버전을 만듭니다. 그런 다음 사용자가 사용자 이름을 입력하면 응용 프로그램이 이 이름을 알려진 사용자 목록에서 확인하도록 기능을 추가합니다.
간결한 정의가 완료되었으므로 응용 프로그램 작성을 시작할 수 있습니다.
HelloWorld 프로젝트 및 Greeter 클래스 만들기Hello World 응용 프로그램의 설계 문장에 따르면 코드는 쉽게 재사용할 수 있어야 합니다. 이 목적에 부합하도록 이 응용 프로그램에서는 Greeter라는 객체 지향 클래스 하나만 사용합니다. 이 클래스는 Flash Builder 또는 Flash Professional에서 만들 응용 프로그램에서 사용합니다.
Flex에서 HelloWorld 프로젝트 및 Greeter 클래스를 만들려면Flash Builder에서 [File] > [New] > [Flex Project]를 선택합니다.
프로젝트 이름으로 HelloWorld를 입력합니다. 응용 프로그램 유형이 "Web (runs in Adobe Flash Player)"으로 설정되어 있는지 확인하고 [Finish]를 클릭합니다.
Flash Builder에서는 사용자가 지정한 프로젝트를 만들고 Package Explorer에 해당 프로젝트를 표시합니다. 기본적으로 HelloWorld.mxml 파일이 프로젝트에 이미 포함되어 있으며, 편집기에서 해당 파일이 열립니다.
이제 Flash Builder에서 사용자 정의 ActionScript 클래스 파일을 만들기 위해 [File] > [New] > [ActionScript Class]를 선택합니다.
[New ActionScript Class] 대화 상자의 [Name] 필드에 클래스 이름으로 Greeter를 입력한 다음 [Finish]를 클릭합니다.
새 ActionScript 편집 윈도우가 나타납니다.
계속해서 Greeter 클래스에 코드 추가를 진행합니다.
Flash Professional에서 Greeter 클래스를 만들려면Flash Professional에서 [파일] > [새로 만들기]를 선택합니다.
[새 문서] 대화 상자에서 [ActionScript 파일]을 선택하고 [확인]을 클릭합니다.
새 ActionScript 편집 윈도우가 나타납니다.
[파일] > [저장]을 선택합니다. 응용 프로그램을 넣을 폴더를 선택하고 ActionScript 파일의 이름을 Greeter.as로 변경한 다음 [확인]을 클릭합니다.
계속해서 Greeter 클래스에 코드 추가를 진행합니다.
Greeter 클래스에 코드 추가Greeter 클래스는 HelloWorld 응용 프로그램에서 사용할 객체인 Greeter를 정의합니다.
Greeter 클래스에 코드를 추가하려면새 파일에 다음 코드를 입력합니다(코드 중 일부가 추가되었을 수 있음).
package
{
public class Greeter
{
public function sayHello():String
{
var greeting:String;
greeting = "Hello World!";
return greeting;
}
}
}
Greeter 클래스에는 "Hello World!"라고 인사하는 문자열을 반환하는 단일 sayHello() 메서드가 포함되어 있습니다.
[파일] > [저장]을 선택하여 이 ActionScript 파일을 저장합니다.
이제 응용 프로그램에서 Greeter 클래스를 사용할 수 있습니다.
ActionScript 코드를 사용하는 응용 프로그램 만들기앞에서 만든 Greeter 클래스는 소프트웨어 기능의 독립된 집합을 정의하지만 완전한 응용 프로그램을 나타내는 것은 아닙니다. 이 클래스를 사용하려면 Flash Professional 문서 또는 Flex 프로젝트를 만들어야 합니다.
코드에서는 Greeter 클래스의 인스턴스가 필요합니다. 이 설명서에 Greeter 클래스를 응용 프로그램에서 사용하는 방법이 설명되어 있습니다.
Flash Professional을 사용하여 ActionScript 응용 프로그램을 만들려면[파일] > [새로 만들기]를 선택합니다.
[새 문서] 대화 상자에서 [Flash 파일(ActionScript 3.0)]을 선택하고 [확인]을 클릭합니다.
새 문서 윈도우가 나타납니다.
[파일] > [저장]을 선택합니다. Greeter.as 클래스 파일이 들어 있는 동일한 폴더를 선택하여 Flash 문서를 HelloWorld.fla로 지정한 다음 [확인]을 클릭합니다.
Flash Professional 도구 팔레트에서 [텍스트 도구]를 선택합니다. 스테이지에서 드래그하여 300 픽셀(폭) x 100 픽셀(높이) 정도 크기의 새 텍스트 필드를 정의합니다.
스테이지의 텍스트 필드를 선택한 상태로, [속성] 패널에서 텍스트 유형을 "동적 텍스트"로 설정하고 텍스트 필드의 인스턴스 이름으로 mainText를 입력합니다.
기본 타임라인의 첫 번째 프레임을 클릭합니다. [윈도우] > [액션]을 선택하여 [액션] 패널을 엽니다.
[액션] 패널에 다음 스크립트를 입력합니다.
var myGreeter:Greeter = new Greeter();
mainText.text = myGreeter.sayHello();
파일을 저장합니다.
계속해서 ActionScript 응용 프로그램 제작 및 테스트를 진행합니다.
Flash Builder를 사용하여 ActionScript 응용 프로그램을 만들려면HelloWorld.mxml 파일을 열고 다음 목록과 일치하도록 코드를 추가합니다.
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/halo"
minWidth="1024"
minHeight="768""
creationComplete="initApp()">
<fx:Script>
<![CDATA[
private var myGreeter:Greeter = new Greeter();
public function initApp():void
{
// says hello at the start, and asks for the user's name
mainTxt.text = myGreeter.sayHello();
}
]]>
</fx:Script>
<s:layout>
<s:VerticalLayout/>
</s:layout>
<s:TextArea id="mainTxt" width="400"/>
</s:Application>
이 Flex 프로젝트에는 다음과 같은 네 가지 MXML 태그가 포함되어 있습니다.
응용 프로그램 컨테이너를 정의하는 <s:Application> 태그
Application 태그의 레이아웃 스타일(세로 레이아웃)을 정의하는 <s:layout> 태그
일부 ActionScript 코드가 포함되는 <fx:Script> 태그
사용자에게 텍스트 메시지를 표시할 필드를 정의하는 <s:TextArea> 태그
<fx:Script> 태그의 코드는 응용 프로그램 로드 시 호출되는 initApp() 메서드를 정의합니다. initApp() 메서드는 mainTxt TextArea의 텍스트 값을 "Hello World!"로 설정합니다. 이 문자열은 방금 작성한 사용자 정의 클래스 Greeter의 sayHello() 메서드에서 반환된 문자열입니다.
[File] > [Save]를 선택하여 응용 프로그램을 저장합니다.
계속해서 ActionScript 응용 프로그램 제작 및 테스트를 진행합니다.
ActionScript 응용 프로그램 제작 및 테스트Software 개발은 반복되는 과정입니다. 코드를 작성하고 컴파일한 다음 해당 코드가 오류 없이 컴파일될 때까지 코드를 편집합니다. 컴파일된 응용 프로그램을 실행하고 테스트하여 의도했던 설계가 실현되었는지 확인합니다. 원하는 설계가 실현되지 않은 경우 실현될 때까지 코드를 다시 편집합니다. Flash Professional 및 Flash Builder 개발 환경에서는 응용 프로그램을 제작, 테스트 및 디버깅하는 여러 가지 방법을 제공합니다.
이 설명서에는 각 환경에서 HelloWorld 응용 프로그램을 테스트하기 위한 기본 단계가 설명되어 있습니다.
Flash Professional을 사용하여 ActionScript 응용 프로그램을 제작 및 테스트하려면응용 프로그램을 제작한 후 컴파일 오류가 있는지 확인합니다. Flash Professional에서 [컨트롤] > [동영상 테스트]를 선택하여 ActionScript 코드를 컴파일하고 HelloWorld 응용 프로그램을 실행합니다.
응용 프로그램 테스트 시 [출력] 윈도우에 오류나 경고가 나타나면 HelloWorld.fla 파일이나 HelloWorld.as 파일에서 오류를 수정합니다. 그런 다음 응용 프로그램을 다시 테스트해 봅니다.
컴파일 오류가 없는 경우에는 Hello World 응용 프로그램이 표시된 Flash Player 윈도우가 나타납니다.
단순하지만 완전한 ActionScript 3.0 사용 객체 지향 응용 프로그램을 만들었습니다. 계속해서 HelloWorld 응용 프로그램 개선을 진행합니다.
Flash Builder를 사용하여 ActionScript 응용 프로그램을 제작 및 테스트하려면[Run] > [Run HelloWorld]를 선택합니다.
HelloWorld 응용 프로그램이 시작됩니다.
단순하지만 완전한 ActionScript 3.0 사용 객체 지향 응용 프로그램을 만들었습니다. 계속해서 HelloWorld 응용 프로그램 개선을 진행합니다.
HelloWorld 응용 프로그램 개선보다 재미있는 응용 프로그램을 만들기 위해 응용 프로그램에서 사용자에게 이름을 입력할 것을 요청하고 사용자가 입력한 이름이 유효한지 미리 정의된 이름 목록을 통해 확인하도록 합니다.
먼저 Greeter 클래스를 업데이트하고 새 기능을 추가합니다. 그런 다음 응용 프로그램을 업데이트하여 새 기능을 사용합니다.
Greeter.as 파일을 업데이트하려면Greeter.as 파일을 엽니다.
파일 내용을 다음과 같이 변경합니다. 새로 추가된 행과 변경된 행은 굵은체로 표시됩니다.
package
{
public class Greeter
{
/**
* Defines the names that receive a proper greeting.
*/
public static var validNames:Array = ["Sammy", "Frank", "Dean"];
/**
* Builds a greeting string using the given name.
*/
public function sayHello(userName:String = ""):String
{
var greeting:String;
if (userName == "")
{
greeting = "Hello. Please type your user name, and then press "
+ "the Enter key.";
}
else if (validName(userName))
{
greeting = "Hello, " + userName + ".";
}
else
{
greeting = "Sorry " + userName + ", you are not on the list.";
}
return greeting;
}
/**
* Checks whether a name is in the validNames list.
*/
public static function validName(inputName:String = ""):Boolean
{
if (validNames.indexOf(inputName) > -1)
{
return true;
}
else
{
return false;
}
}
}
}
Greeter 클래스에 여러 가지 새로운 기능이 포함되었습니다.
validNames 배열에 유효한 사용자 이름이 나열됩니다. 이 배열은 Greeter 클래스가 로드되면 세 개의 이름이 있는 목록으로 초기화됩니다.
이제 sayHello() 메서드에서 사용자 이름을 받아들이며 일부 조건에 따라 인사말을 변경합니다. userName이 비어 있는 문자열("")인 경우 사용자에게 이름을 묻는 메시지가 나타나도록 greeting 속성이 설정됩니다. 사용자 이름이 유효한 경우 인사말은 "Hello, userName"입니다. 마지막으로 위의 두 조건이 모두 충족되지 않은 경우 greeting 변수가 "Sorry userName, you are not on the list"로 설정됩니다.
validNames 배열에 inputName이 있으면 validName() 메서드가 true를 반환하고 그렇지 않으면 false를 반환합니다. validNames.indexOf(inputName) 명령문은 inputName 문자열에 대해 validNames 배열에 있는 각 문자열을 검사합니다. Array.indexOf() 메서드는 배열에 있는 객체의 첫 번째 인스턴스에 대한 인덱스 위치를 반환합니다. 배열에 객체가 없는 경우에는 값 -1을 반환합니다.
다음으로 이 ActionScript 클래스를 참조하는 응용 프로그램 파일을 편집합니다.
Flash Professional을 사용하여 응용 프로그램을 수정하려면HelloWorld.fla 파일을 엽니다.
비어 있는 문자열("")이 Greeter 클래스의 sayHello() 메서드에 전달되도록 프레임 1의 스크립트를 다음과 같이 수정합니다.
var myGreeter:Greeter = new Greeter();
mainText.text = myGreeter.sayHello("");
도구 팔레트에서 [텍스트 도구]를 선택한 다음 스테이지에 새 텍스트 필드를 두 개 만듭니다. 두 텍스트 필드를 기존의 mainText 텍스트 필드 바로 아래에 나란히 배치합니다.
레이블인 첫 번째 새 텍스트 필드에 텍스트 User Name:을 입력합니다.
나머지 새 텍스트 필드를 선택한 다음 속성 관리자에서 텍스트 필드 유형으로 [입력 텍스트]를 선택합니다. [행 유형]으로 [한 행]을 선택합니다. 인스턴스 이름으로 textIn을 입력합니다.
기본 타임라인의 첫 번째 프레임을 클릭합니다.
[액션] 패널에서 기존 스크립트의 맨 끝에 다음 행을 추가합니다.
mainText.border = true;
textIn.border = true;
textIn.addEventListener(KeyboardEvent.KEY_DOWN, keyPressed);
function keyPressed(event:KeyboardEvent):void
{
if (event.keyCode == Keyboard.ENTER)
{
mainText.text = myGreeter.sayHello(textIn.text);
}
}
이 새 코드는 다음 기능을 추가합니다.
처음 두 행은 두 텍스트 필드의 경계를 정의하는 역할만 합니다.
textIn 필드와 같은 입력 텍스트 필드에는 전달 가능한 이벤트 집합이 포함되어 있습니다. addEventListener() 메서드를 사용하여 특정 유형의 이벤트 발생 시 실행되는 함수를 정의할 수 있습니다. 이 경우의 이벤트는 키보드의 키를 누르는 동작입니다.
keyPressed() 사용자 정의 함수는 누른 키가 Enter 키인지 여부를 확인합니다. Enter 키인 경우 myGreeter 객체의 sayHello() 메서드를 호출하고 textIn 텍스트 필드의 텍스트를 매개 변수로 전달합니다. 이 메서드는 전달된 값을 기반으로 하여 인사말 문자열을 반환합니다. 그러면 반환된 문자열은 mainText 텍스트 필드의 text 속성에 할당됩니다.
프레임 1에 대한 전체 스크립트는 다음과 같습니다.
var myGreeter:Greeter = new Greeter();
mainText.text = myGreeter.sayHello("");
mainText.border = true;
textIn.border = true;
textIn.addEventListener(KeyboardEvent.KEY_DOWN, keyPressed);
function keyPressed(event:KeyboardEvent):void
{
if (event.keyCode == Keyboard.ENTER)
{
mainText.text = myGreeter.sayHello(textIn.text);
}
}
파일을 저장합니다.
[컨트롤] > [동영상 테스트]를 선택하여 응용 프로그램을 실행합니다.
응용 프로그램을 실행하면 사용자 이름을 입력하라는 메시지가 나타납니다. 사용자 이름이 유효하면(예: Sammy, Frank, Dean 등) 응용 프로그램에서는 "hello"라는 확인 메시지를 표시합니다.
Flash Builder를 사용하여 응용 프로그램을 수정하려면HelloWorld.mxml 파일을 엽니다.
그런 다음 <mx:TextArea> 태그를 수정하여 TextArea 구성 요소가 표시 전용임을 사용자에게 나타냅니다. 배경색을 밝은 회색으로 변경하고 editable 특성을 false로 설정합니다.
<s:TextArea id="mainTxt" width="400" backgroundColor="#DDDDDD" editable="false" />
이제 <s:TextArea> 닫는 태그 바로 뒤에 다음 행을 추가합니다. 이 행에서는 사용자가 사용자 이름 값을 입력할 수 있는 TextInput 구성 요소를 만듭니다.
<s:HGroup width="400">
<mx:Label text="User Name:"/>
<s:TextInput id="userNameTxt" width="100%" enter="mainTxt.text = myGreeter.sayHello(userNameTxt.text);" />
</s:HGroup>
enter 특성은 사용자가 userNameTxt 필드에서 Enter 키를 누를 경우 발생하는 내용을 정의합니다. 이 예제에서 코드는 해당 필드의 텍스트를 Greeter.sayHello() 메서드로 전달합니다. 이에 따라 mainTxt 필드의 인사말이 변경됩니다.
HelloWorld.mxml 파일의 내용은 이제 다음과 같습니다.
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/halo"
minWidth="1024"
minHeight="768""
creationComplete="initApp()">
<fx:Script>
<![CDATA[
private var myGreeter:Greeter = new Greeter();
public function initApp():void
{
// says hello at the start, and asks for the user's name
mainTxt.text = myGreeter.sayHello();
}
]]>
</fx:Script>
<s:layout>
<s:VerticalLayout/>
</s:layout>
<s:TextArea id="mainTxt" width="400" backgroundColor="#DDDDDD" editable="false"/>
<s:HGroup width="400">
<mx:Label text="User Name:"/>
<s:TextInput id="userNameTxt" width="100%" enter="mainTxt.text = myGreeter.sayHello(userNameTxt.text);" />
</s:HGroup>
</s:Application>
편집한 HelloWorld.mxml 파일을 저장합니다. [Run] > [Run HelloWorld]를 선택하여 응용 프로그램을 실행합니다.
응용 프로그램을 실행하면 사용자 이름을 입력하라는 메시지가 나타납니다. 사용자 이름이 유효하면(예: Sammy, Frank, Dean 등) 응용 프로그램에서는 "Hello, userName"이라는 확인 메시지를 표시합니다.
|
|
