[Flex] 플렉스로 HelloWorld!를 찍어봅시다!(액션스크립트3.0)

아직 저도 잘 모릅니다. 그래도 오늘 많이 삽질했으니 포스팅하겠습니다-_-;

플렉스를 이용한 환경을 다 만들었으면 플렉스를 해봐야겠죠!

FlexBuilder를 실행해봅시다.

익숙한 이클립스가 뜹니다! 덕분에 더 자신감을 가지게 해줍니다-_-; 자바개발자라면 누구나 써본 이클립스로 플렉스를 할 수 있다니!

File -> New -> Flex Project를 선택합니다.
3가지 종류가 나오는데 뭐 잘 모르니까 Basic를 선택합시다-_-;

넥스트를 눌러서 프로젝트 이름은 HelloWorld라고 찍읍시다. 정말 좋아하는 단어입니다.
Finish를 눌러서 프로젝트를 생성합니다.

HelloWorld.mxml 이라는 파일이 처음에 열려있네요.
mxml은 무슨 확장자냐! Machine-oriented extensible markup language 이라고 하더군요. 저도 잘모르겠습니다. 그런데 xml인거 같습니다 ^^ 태그 열고 닫고 하는게 xml과 같습니다.

이 프로젝트에서 ActionScript를 추가해봅시다.
File -> New -> ActionScript를 선택하고, HelloWorld폴더를 선택하고, 이름은 Greeter.as로 씁시다.

여기다가 코딩을 합시다.

package {
    public class Greeter {
        public static function sayHello():String {
            var greeting:String = "Hello World!";
            return greeting;
        }
    }
}

내용을 보시면 package는 잘모르니 생깝시다. class를 정의 했는데 Greeter라는 클래스입니다. 이거의 멤버함수로 sayHello라는 것이 있습니다. 이건 리턴타입을 맨뒤에 써줍니다. 변수는 무조건 var로 선언하고, 타입은 그 뒤에 써줍니다. 안써주면 Object형이 됩니다.

클래스를 작성했으니 이 클래스를 mxml에서 사용해보도록 합시다.

<?xml version="1.0" encoding="utf-8"?>  
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns="*"    
 layout="vertical" creationComplete="initApp()">  
 <mx:Script>  
 <![CDATA[  
  public function initApp():void {  
       mainTxt.text = Greeter.sayHello();  
     }  
 ]]>  
 </mx:Script>  
 <mx:TextArea id="mainTxt" width="400" />  
</mx:Application> 

script부분의 initApp()함수를 보면 mainTxt.text라는 곳에다가 Greeter클래스의 static함수인 sayHello를 호출해서 넣겠다는 표현으로 보이구요.
아래에는 TextArea를 만드는데 이것의 이름이 mainTxt입니다. 거기의 text를 적겠다는 것 같습니다.

대충 보면 html처럼 위에 script는 자바스크립트라고 생각되고, 아래는 html처럼 input태그가 들어가는 것처럼 생각해도 되려나-_-; 어쨌든 그런 구조인거 같습니다 ^^

위에 플레이버튼 같이 생긴거 run을 클릭하면(Ctrl + F11) 아래와 같은 화면이 뜰껍니다.

-출처 : http://mudchobo.tomeii.com