Flex 2.0 설치

●Flex 2.0 설치

○ 설치 환경

OS (운영체제)    : Windows XP　Professional

Java            : J2SE SDK 5.0 update 7

Servlet Container : Tomcat 5.5.17

FLEX            : Flex 2.0

MySQL           : MySQL 5.0.23

Tools            : Eclipse 3.2, MySQL GUI Tools

○ Java 설치

 먼저 Java(J2SE SDK 5.0)를 설치한다. (Flex는 Middle-Tier로 Java나 .NET 환경위에서 돌아간다.)

폴더관리의 편의를 위해 아래와 같이 C:\Java\jdk1.5, C:\Java\jre1.5 로 지정한다.

(이 문서에서는 Java와 관련된 프로그램은 C:\Java 폴더로 Flex와 관련된 프로그램은 C:\Flex 폴더로 MySQL과 관련된 프로그램은 C:\MySQL 폴더로 관리하였다.)

 

자바 모든 설치가 끝난 후 내컴퓨터를 오른쪽 마우스 버튼 클릭 -> 속성을 클릭해 다음과 같이 고급탭의 환경변수를 찾아간다.

 

아래와 같이 시스템 변수의 Path를 C:\Java\jdk1.5\bin 설정한다. 변수가 없으면 새로 만든다.

※ path를 설정하는 이유는 C:\Java\jdk1.5\bin안에 있는 java.exe나 javac.exe 등의 파일을 어느 곳에서나 쓸 수 있도록 하기 위해서다.

 

cmd창에서 아래와 같이 java -version 명령어를 C:\Java\jdk1.5\bin이 아닌 다른 폴더에서 실행해

아래와 같이 나오면 Path가 잘 설정 된 것이다.

set path 명령어로도 한번 확인해 본다.

 

다음으로 JAVA_HOME을 설정해준다. Path와 마찬가지로 변수가 없다면 시스템 변수에 새로 만든다.

아래와 같이 변수에 JAVA_HOME을 변수 값에 C:\Java\jdk1.5 설정한다.

※ JAVA_HOME은 자바가 설치된 경로를 말하며 Java를 여러 버전으로 사용한다면 디폴트로 사용할 자바로 지정된다.

 

set JAVA_HOME 명령어로 한번 확인해 본다. 아래와 같이 나왔다면 잘 설정 된 것이다.

여기까지 무사히 다 됐다면 JAVA의 설치는 끝났다. 간단한 프로그램을 만들어 각자 테스트 해본다.

○ Tomcat 설치

자바를 웹에서 사용하기 위해 Servlet Container (java코드를 웹에서 사용가능하게 하기 위해 번역해주는 역할)인 Tomcat을 설치한다.

Tomcat은 Servlet Container로 웹 서버로 돌리기에는 기능이 미약하기 때문에 궁합이 잘 맞는 Apache와 연동해서 쓴다. 하지만 개발 단계는 Tomcat만으로도 가능하기 때문에 여기선 Tomcat만 설치한다.

Tomcat은 http://www.apache.org/ 사이트에서 받을 수 있다. 여기선 Tomcat 5.5.17를 설치한다.

아래와 같이 Examples, Webapps를 클릭 추가로 설치한다. 예제파일로서 참고하면 좋은 것들이 많다.

JAVA를 설치할 때와 마찬 가지로 편의를 위해 C:\Java\ 폴더 밑에 설치한다.

이 문서에서는 아래와 같이 C:\Java\Tomcat 5.5 에 설치 하였다.

 

다음으로 아래와 같은 화면이 나온다. JRE를 참조하는 경로를 나타낸 것이다.

자바를 설치할 때의 경로(C:\Java\jre1.5)가 맞는지 확인한 후 넘어간다.

 

다음으로 CATALINA_HOME을 설정해준다. 변수가 없다면 시스템 변수에 새로 만든다.

아래와 같이 변수에 CATALINA_HOME을 변수 값에 C:\Java\Tomcat 5.5로 설정한다.

 

set CATALINA_HOME 명령어로 한번 확인해 본다. 아래와 같이 나왔다면 잘 설정 된 것이다.

 

톰캣을 실행한다. 시작 > 모든 프로그램 > Apache Tomcat 5.5 의 Monitor Tomcat을 실행시킨다.

그러면 오른쪽 아래에 작은 보기와 같은 아이콘이 나타난다.

   

아이콘을 더블클릭하면 아래와 같이 나오는데 Start를 눌러 실행시키면 아이콘이 서비스 실행중임을 나타낸다.

   < - 톰캣 실행중

톰캣이 실행중인 상태에서 웹 브라우저를 키고 http://localhost:8080으로 접속하여 아래와 같은 화면이 나타났다면 톰캣의 설치가 잘 된 것이다. (localhost 대신 127.0.0.1 혹은 자신의 아이피 주소로 하여도 무방) 초기 페이지의 문서파일은 C:\Java\Tomcat 5.5\webapps\ROOT\index.jsp 이다.

○ Flex 설치

플렉스는 http://www.adobe.com/cfusion/tdrc/index.cfm?product=flex 에서 다운 받을 수 있다.

Flex 2 SDK - Flex Software Development Kit2 를 말하며 기본적으로 Flex 프레임워크(class library)   와 Flex 컴파일러, 디버그, MXML과 ActionScript 3.0 프로그래밍 언어와 여러 유틸리티등으로 이루어   져있어 Flex로 프로그램을 개발하기 위한 기본적인 것들을 제공한다. 또한 Flash Player 9 디버그 버전   도 포함되어있다.

Flex Data Services 2 - FDS는 기존의 Flex 프리젠테이션 서버의 런타임 서비스 기능에 메시지 기반의 서비스(JMS)를 추가해 서버와 클라이언트 간에 데이터를 실시간으로 주고 받을수 있도록 해주는 서버 기술이다. (Flex 2 SDK 포함)

Flex Charting 2 - 기존 챠트 컴포넌트의 확장판이면서 이전보다 섬세하고 여러개의 축을 가진 컴포넌트를 제공하며 데이터 서비스와 연동해 동적인 데이터를 보여준다.

 Flex Builder 2 - Flex 애플리케이션을 위지윅 방식으로 보면서 개발 할 수 있도록 해준다.

코드 어시스트. 컴파일링. 디버깅 및 소스버전 관리 시스템 연동 등의 부가적인 기능을 제공해 준다.

이클립스 기반으로 만들어져 있어 CVS, 테스트 프레임워크 등과 쉽게 연동이 가능하다.

(Flex 2 SDK과 Flex Charting 2 포함)

※ 여기서 Flex Builder2에는 Charting과 SDK가 포함되어 있으므로 FDS2와 Builder2만 깔기로 한다.

   FDS2와 빌더를 동시에 사용할 경우에는 FDS를 먼저 깔아야 Builder2에서 프로젝트를 생성할 때

   서버 옵션을 택할 수 있다.(Flex Documentation 참조) 

○ Flex Data Services 2 설치

환영메시지와 약관에 동의하면 시리얼 번호를 적으라는 아래와 같은 화면이 뜰 것이다.

만약 시리얼 번호를 넣지 않으면 Flex Data Services Express 모드로 깔리게 된다.

 

아래와 같이 FDS2를 C:\Flex\fds2에 설치한다. (Flex 와 관련된 프로그램은 c:\Flex 폴더에 설치)

 

폴더를 설정하면 다음과 같이 JRun과 함께 설치 할 것 인지 J2EE Web Application에서 사용할 것인지를 묻는 화면이 나온다. 여기서는 Tomcat을 사용 하기 때문에 J2EE방식을 택한다.

프로그램이 설치가 잘 되었다면 Flex SDK2 와 FDS2가 설치 된 것이고 이제 Flex를 사용 할 수 있다.

C:\Flex\fds2 폴더에 가서 아래와 같은 파일이 있는지 확인한다.

samples.war - 각종 샘플파일.

flex.war - Flex2를 웹에서 개발하기 위한 기본적인 파일.

flex-adin.war - Flex2를 관리할 수 있게 하는 파일.

위의 파일들을 C:\Java\Tomcat 5.5\webapps 폴더에 복사하고 톰캣을 재시작 하면 자동적으로 압축이 풀린다. 앞으로 개발한 파일들을 C:\Java\Tomcat 5.5\webapps\flex 폴더에 넣고 실행하면 된다.

예를 들어 아래와 같이 hello.mxml파일을 만들어서 C:\Java\Tomcat 5.5\webapps\flex 폴더에 넣고

http://localhost:8080/flex/hello.mxml로 접근하면 컴파일되면서 같은 폴더 안에 hello.swf 파일이 생기게 되고 아래와 같이 실행된다. (※ 톰캣 서비스가 실행중인 상태여야 한다.)

- 예제 파일 hello.mxml -

<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns="*" fontSize="12">

        <mx:Panel>

                <mx:Label text="Hello Flex!!"/>    

        </mx:Panel>

</mx:Application>

 

○ Flex Builder 2 설치

Flex Builder 2를 설치 하지 않아도 사실 Flex의 모든 기능은 사용이 가능하다.

하지만 위지웍 방식의 Flex Builder 2를 사용하면 개발 하는데 훨씬 편리 하기 때문에 Flex Builder 2를 깔아보도록 한다. (시리얼 번호가 있어야 사용 가능하다.)

 

위와 같이 Flex Builder나 이클립스의 플러그인으로 사용하는 방식을 선택하는 화면이 나온다.

(※Flex Bulider를 사용하면 Java를 개발 할 수 없기 때문에 Java를 함께 개발 한다면 이클립스에 플러그인 형식으로 사용하는 것을 권장한다.)

필자는 두 번째 방식 이클립스에 플러그인으로 사용하는 방식(Flex Builder Plug-in and Flex SDK)을 택했다. 물론 이클립스 3.1버전 이상이 미리 설치되어 있어야 한다.

 

위와 같이 C:\Flex\Flex Builder 2 Plug-in 폴더로 지정한다.

 

이클립스를 설치한 폴더를 지정해준다. 필자는 C:\Java\eclipse 폴더에 설치 하였다.

 

위의 화면은 플래시 플레이어의 디버그 버전을 설치하는 화면이다.

브라우저에 따른 버전들을 선택하여 설치 할 수 있다.

※ 플래시 플레이어가 9버전이 아닌 이전 버전이 있을 땐 제어판에서 삭제를 한 후 설치해준다.

프로그램의 설치를 완료한 후 이클립스를 실행시키면 아래와 같은 박스가 나타난다.

Flex Builder 2와 Flex Charts 2의 시리얼 번호를 넣고 다시 실행 시킨다.

(※ 시리얼이 없으면 Flex project를 만들 수 없다.)

이제 플렉스 애플리케이션을 개발하면 된다.