98..Etc/MyEclipse2009. 7. 7. 13:05
반응형

Eclipse + myEclipse + Flex 를 이용해서 Flex 개발 환경을 설정한다.

1. Eclipse 3.2 를 설치한 후, myEclipse 5.5 를 설치한다. 마지막으로 Flex 2 builder 를 eclipse plug-in 버전으로 설치한다.(myEclipse랑 Flex 설치할 때 eclipse 폴더를 지정하는 것만 주의한다.)

2. 설치가 완료되면 New - Project 에서 'Web Project'를 선택한다.
※ Flex Project를 선택하지 않는다.

사용자 삽입 이미지

3. 프로젝트 명을 입력하고 [Finish]를 눌러서 프로젝트를 생성한다.
사용자 삽입 이미지
4. 퍼스펙티브를 마이이클립스로 바꾸라는 것인데, 그냥 바꿔준다.
사용자 삽입 이미지
5. 생성된 프로젝트는 아래와 같은 구조로 되어 있다.
프로젝트 이름이 Context root 가 되고, src 폴더와 WebRoot 폴더가 생성된다.
사용자 삽입 이미지

6. 프로젝트에 Flex Project 속성을 부여한다.
Flex Project Nature -> Add Flex Project Nature 선택
사용자 삽입 이미지

7. Flex Project 속성을 부여하면 프로젝트 구조가 아래 처럼 바뀐다.
사용자 삽입 이미지

8. 에러를 해결하기 위해 에러 윈도우에서 에러를 선택한 후 마우스 오른쪽 버튼을 클릭해서 'Recreate HTML Templates'를 누른다.
사용자 삽입 이미지

9. 에러를 해결하면 아래처럼 템플릿이 추가된다.
사용자 삽입 이미지

10. 사용하지 않을 폴더를 제거한다. bin 폴더는 불필요하니 제거한다.
사용자 삽입 이미지


11. 소스 폴더를 생성한다.(프로젝트 아래에 생성하며, 이름은 자유롭게 정한다.)
사용자 삽입 이미지


12. output 폴더를 생성한다.(WebRoot 밑에 '소스 폴더 이름\bin'으로 정한다.)
사용자 삽입 이미지

13. flex build path를 추가한다.
( 퍼스펙티브를 Flex Development로 바꾼 후, 프로젝트를 선택하고 오른쪽 버튼을 눌러 Properties를 누른다. Flex Build Path를 선택한다. )
사용자 삽입 이미지

14. Main source folder에는 방금 생성한 소스 폴더를(flex) 지정하고, Output folder에는 방금 생성한 output 폴더(WebRoot\flex\bin)를 지정한다.
사용자 삽입 이미지
사용자 삽입 이미지
사용자 삽입 이미지

15. 설정이 다 되었으면 이제 애플리케이션을 Tomcat 서버에 deploy한다.
먼저 마이이클립스의 deploy 버튼을 눌러서(아래 그림 화살표 위치) deploy 창을 띄우고
deploy할 프로젝트를 선택한 후 [Add] 버튼을 누른다.
사용자 삽입 이미지
창이 뜨면 현재 설치해 둔 서버를 선택한다.(여기서는 Tomcat 5.x 버전 선택)
※ Deploy Location이 애플리케이션이 deploy되는 위치다.
사용자 삽입 이미지
[OK] 버튼을 눌러서 적용한 후, deploy를 한다.

16. deploy를 마쳤으면, [서버] 버튼(아래 그림 왼쪽 위)을 눌러서 Tomcat 서버를 띄운다.
사용자 삽입 이미지

17. 서버가 뜨고 나면, http://localhost:8080/FlexTest/ 로 접근해서 정상 동작 중인지 확인한다.
사용자 삽입 이미지

18. Flex Development 퍼스펙티브에서 Flex 화면을 디자인한다.
먼저 퍼스펙티브가 Flex Development인지 확인한 후 소스 폴더를 선택하고, 마우스 오른쪽 버튼을 누른다. new 를 선택한 뒤, MXML application을 선택한다. 이름을 지정한 뒤(mainTest.mxml) 생성되면 더블 클릭한다. 편집 창이 뜨면 'Design' 텝을 눌러서 GUI 환경으로 바꾼다. Components 텝에서 component를 가져다가 화면을 편집하고 저장한다.
사용자 삽입 이미지

19. 서버를 내리고, 다시 deploy를 해준다.
사용자 삽입 이미지

20. 서버를 기동시킨 후, http://localhost:8080/FlexTest/flex/bin/mainTest.html/ 로 접속해서 확인한다.
사용자 삽입 이미지

여기까지 되면 Flex Project 생성 끝!!!



출처 : http://digicom.tistory.com/180
Posted by 1010