Eclipse 에서 Flex Plugin 설치하기

====== Eclipse 에서 Flex Plugin 설치하기 ======

기본으로 JDK가 설치 되어 있어야 한다.

이클립스에서  Flex Plugin을 설치하여 개발환경을 준비하는 이유는 실무에 가장 적합하며(제일 많이 사용된다.)

Flex Builder의 경우 JDT 의 제한으로 Eclipse 의 다양한 Plugin을 설치하는데 제약이 있으며,

Servlet을 작성하고 관리하기 위해 따로 에디터를 사용해야 하기 때문에 직접 Builder가 아닌 Plugin 형태로 설치하는 것을 권장한다.

설치순서

  * 목록먼저 Eclipse 를 다운 받는다. 최신 버전의 Helios 의 경우 Flex Plugin 을 설치하면 정상적으로 동작하지 않기 때문에 Galileo R2 버전으로 다운 받아서 원하는 위치에 압축을 풀어준다.

  * 목록Eclipse 실행 시 JVM terminate. EXIT code=-1 에러가 발생하는 경우 설치 폴더내에 eclipse.ini를 열어 다음과 같이 수정한다.

<code>
-showsplash
org.eclipse.platform
--launcher.XXMaxPermSize
256M
-vm
C:\Program Files\Java\jdk1.6.0_07\bin\javaw.exe
-Dosgi.requiredJavaVersion=1.5
-vmargs
-Xms40m
-Xmx512m
</code>

  * 목록Flex Plugin 을 설치한다. 설치 도중에 Eclipse 의 경로를 반드시 지정하여 준다.

  * 목록설치가 완료되면 eclipse 를 실행하여 정상적으로 동작하는지 확인한다.

참고1. http://blog.jidolstar.com/607 <지돌스타 / Eclipse에 Flash Builder 4 plugin 설치하기>

참고2. http://okm12.springnote.com/pages/5048827 <개발자 오경무님 / 1. 로컬서버에 BlazeDS 설치하고 Flex RemoteObject로 연동하기>

참고3. http://digicom.tistory.com/475 <라딘의 Ti스토ry / Tomcat - Context 경로설정>

참고4. http://playgame.egloos.com/287965 <Play Game!!! / Tomcat - Context 경로설정>

====== Flex4 Project & BlazeDS 프로젝트 생성하고 실행하여 보기 ======

Eclipse 를 실행하여 File > New > Ohter... 에서 다음과 같이 Flex Project를 실행한다.

{{:개발:new.png?direct&300|}}

Project name에 HelloFlex로 입력하고 아래와 같이 설정하고 Next를 누른다.

{{:개발:project.png?direct&300|}}

Context root와 folder 그리고 BlazeDS 의 WAR 파일을 불러온 뒤 Output folder을 아래와 같이 입력한다.

{{:개발:project2.png?direct&300|}}

다시 Target runtime을 보면 방금 등록한 Tomcat 서버가 있을 것이다. 선택하자.

Context root는 자동으로 프로젝트명이 들어가 있을 것이다.

Content folder 역시 자동으로 WebContent가 들어가 있을 것이다.

Flex WAR file은 BlazeDS WAR파일이 위치하면 된다. Browse... 버튼을 눌러 파일 경로를 지정하자.

Output folder는 Context folder\Context root 로 한다. 즉, WebContent\RemoteObj_Test

<code>
Output folder는 정확히 말하자면 WebContent 폴더 안에만 있으면 된다. 즉, 하위 폴더를 정하지 않아도 된다는 것이다.
그러나 서버에서 작업할 때 BlazeDS로 돌릴 플렉스가 두개 이상이라면 하위 폴더로 정리해 놓는 것이 좋다.
Output folder가 WebContent 안에 있어야 하는 이유는 WebContent가 서버의 루트폴더이며,
WebContent>WEB-INF>classes 폴더에 플렉스에서 사용할 JavaBean이 들어있기 때문이다.     
</code>
           
다른 설정들은 되도록 기본 상태를 유지하는 것이 좋다.

Next 버튼을 누르자.

프로젝트 생성!

{{:개발:project3.png?direct&300|}}

Output folder URL 을 입력하고 Finish를 누르면 드디어 프로젝트가 생성된다!

여기서 중간에 생략된 부분이 있는데 그것은 바로 Tomcat 설정이다. 톰캣은 이클립스에서도 연동하여 사용할 수 있지만 context설정이 정확하게 설정되지 못하여 지금과 같이 이클립스내에 플러그인으로 설치한 경우 실행할 때 정상적으로 수행되지 못하는 경우가 발생한다.

이를 위해 context 설정을 수동으로 변경해 주어야 하기 때문에 Tomcat의 경우는 콘솔에서 관리하였다. 

Tomcat의 context 설정

{{:개발:project4.png?direct&300|}}

위처럼 이클립스에서 톰캣 서버에 방금 생성한 HelloFlex를 포함하여 서버를 시작 하였다. 결과는 아래와 같다.

{{:개발:project5.png?direct&300|}}

이 현상이 발생하는 이유는 처음 프로젝트를 생성하며 지정해준 Context 설정이 실제 톰캣에서 제대로 설정되지 못하였기 때문이다.

{{:개발:project6.png?direct&300|}}

콘솔을 살펴보면 context 설정이 잘못되어 매핑을 하지 못했다는 로그를 확인 할 수 있다. 이를 위해 수동으로 Context 를 수정하여 보자.

5.5 버전 이후 부터는 Server.xml 에 Context를 입력하는 것을 강력하게 잘못된 문법으로 정의하고 있다. (실행에는 문제가 없다.)

5.5 이후 버전에는 Context 설정이 [$CATALINA_BASE]/conf/[enginename]/[hostname]/ 로 옮겨졌다. 이것은 context 설정을 server.xml 에서 분리함으로써 변경후에도 톰캣이 재시작 할 필요없이 바로 적용되며 유지보수가 용이하게 하기 위함이다.

즉 호스트 설정을 위해서는 다음 폴더에서 output url로 지정한 HelloFlex 라는 이름을 가지는 HelloFlex.xml 을 생성하여 주고 이 안에 Context설정을 하여 주면 된다.

{{:개발:project7.png?direct&300|}}

다음과 같은 위치에 xml 파일을 생성하여 주고 아래와 같이 내용을 입력한다.

<code>
<Context docBase="C:\flex_development\flex_workspace\HelloFlex\WebContent\HelloFlex(예)" 
      debug="0" privileged="true">
</Context>
</code>

server.xml에 자동으로 context 설정이 되므로 이 부분은 삭제하여 준다.

실행화면

{{:개발:project8.png?direct&300|}}

이로써 context 설정까지 마치고 나면 드디어 생성된 프로젝트가 동작됨을 확인할 수 있다.

다음에는 BlazeDS와 본격적으로 연동하는 방법을 포스팅 해보자.

====== BlazeDS로 RemoteObject 기능 사용해보기 ======

BlazeDS를 사용하는 가장 큰 이유는 바로  RemoteObject 기능을 사용하기 위해서다.

예제를 따라 RemoteObject를 활용하는 간단한 예제를 만들어보고 발생하는 문제를 해결하기 위한 방법을 알아보자.

먼저 지난 포스팅에서 만든 HelloFlex 라는 예제를 활용해보자.

다음 그림처럼 src 폴더 및에 package 아래에 ShowMyString 이라는 간단한 java 파일을 작성하였다.

이 파일은 BlazeDS 서버에서 동작될 것이며 입력된 문자열을 받아서 리턴해주는 역할을 한다. 

{{:개발:helloflex.png?direct&300|}}

통신을 담당할 Class를 작성하였으니 이젠 BlazeDS 서버에 내가 작성한 이 파일이 RO를 수행하기 위한 Class 라는 것을 명시하기 위해

{{:개발:helloflex1.png?direct&300|}}

다음처럼 remote-config.xml 파일에서 <destination id="testRO"> 를 추가하여 준다.

source의 위치는 패키지.클래스명 순으로 정확하게 적어준다. 이로써 BlazeDS를 통한 RO를 할 준비가 완료되었다.

{{:개발:helloflex2.png?direct&300|}}

굉장히 간단하게 구성한 화면이다.

텍스트에 글자를 입력하고 단추버튼을 클릭하면 문자열이 BlazeDS 서버를 통해

우리가 작성한 class에서 문자열을 리턴 받아 Alert를 통해 화면에 보여주게 될 것이다.

소스는 다음과 같다.

{{:개발:helloflex3.png?direct&300|}}

소스의 내용도 큰 어려운 부분이 없으니 실행해보자.

그럼 방금 위의 화면에서 글자를 입력하고 버튼을 입력하면 다시 화면에 호출될 것이다. 그럼 실행.

{{:개발:helloflex4_1_.png?direct&300|}}

!!!!!!

전송이 실패했다. 로그를 잘 살펴보자. 살펴보면 http://localhost:8080/WebContent/messagebroker/amf 로 접속이 실패했다는 것을 알 수 있다. 여기서 WebContent 는 올바른 경로가 아니므로 수정하여 보자.

MessageSend의 설정을 관리하는 부분은 remote-object.xmll 바로 아래에 있는 service-config.xml 에서 담당한다. (다음 프로젝트에서는 WebContent 를 ContextRoot로 설정하지 않고 프로젝트 명을 입력하면 지금처럼 수동으로 수정하지 않아도 된다.)

<code>
        <channel-definition id="my-amf">

            <endpoint url="http://server.name:server.port/context.root/messagebroker/amf"/>

        </channel-definition>이와 같은 소스의 구조에서 context.root를 수정하여 주자.

        <channel-definition id="my-amf">

            <endpoint url="http://server.name:server.port/HelloFlex/messagebroker/amf"/>
        </channel-definition>
</code>

수정하였으면 저장하고 서버를 재 시작하자. 하지만 context는 수정이 된 채 동일한 오류가 발생할 것이다.

원인을 조사해본 결과 이클립스 플러그인형태가 아닌 빌더와 java를 따로 개발했던 경우에는 동일한 증상이 발생하지 않았었다. 플러그인 환경에서는

workspace 안으로 web root 폴더가 설정되고 xml 설정파일이 rewrite 되는 과정상에서 충돌이나 문제가 발생하는 듯 하여 message channel이 정상적으로 동작 되지 못하는 듯 하였다. 수많은 외국 포럼과 관련 에러를 찾아 해결방법을 모색해본 결과 아래와 같은 해결 방법을 찾을 수 있었다.

<code>
import mx.messaging.ChannelSet;

import mx.messaging.channels.AMFChannel;

private var cs:ChannelSet;

private function createChannelSet():ChannelSet {

if (cs == null) cs = new ChannelSet();

var ac:AMFChannel = new AMFChannel("my-AMF","http://localhost:8080/HelloFlex/messagebroker/amf");

cs.addChannel(ac);
}

return cs;
</code>

다음처럼 서버에 대한 채널셋을 직접 지정해주고 RO객체에 이것을 등록시켜 주는것이다.

<code>
srv.channelSet = createChannelSet();

srv.destination = "testRO";
</code>

destination 보다 먼저 선언해줘야 함을 명심하자.

이제 실행하여 보자!

{{:개발:helloflex5.png?direct&300|}}

정상적으로 동작한다!

이젠 RO를 사용하여 다양하게 응용하는 길만 남았다.

추신1. 해당 오류의 원인을 좀더 찾아보니 context 와 root 폴더와 xml 파일들의 위치와 관계가 있다.

해당 root 가 되는 폴더 내에 META-INF와 WEB-INF 폴더가 속해있어야만 정상적으로 동작되었다. 위와 같이 해도 통신이 되지 않는다면

폴더위치들을 살펴보자.

추신2. 이렇게 폴더위치가 모두 정상적으로 맞는다면 직접 채널을 추가 하지 않아도 정상적으로 통신이 된다.

workspace/ContextRoot/안에 history, META-INF, WEB-INF 와 Flex에서 생성된 파일과 RootName.html이

모두 정상적으로 존재하도록 셋팅하면 추가적인 채널 변경 없이 실행이 정상적으로 됨을 확인 할 수 있다.
====== 대용량 파일 업로드 테스트 ======

BlazeDS의 RO 기능을 활용한 대용량 파일 업로드 기능 구현을 위한 테스트 결과 100MB 이하의 파일 업로드의 경우에는 정상적으로 파일이 업로드 되었음.

그러나 100MB 이상의 파일을 업로드할 경우 문제가 발생.

190MB 업로드 테스트 중 JVM에서 Out of Heap Memory 발생

400MB 업로드 테스트 중 테스트 프로젝트가 브라우저 상에서 예기치 못하게 중단

원인 분석.

서버 단에서 파일을 전송받는 class에서의 전송 방식 문제.

일반적인 java.io.File 에서의 Stream 방식은 파일을 memory에 다 받은 다음 디렉토리로 이동

때문에 대용량 파일의 경우 정상적으로 전송되지 않음.

해결방법.

flex에서 Filereference 를 통해 파일을 byte array 형태로 변환 가능하다.

이를 일정한 크기(10M)로 분할하여 바이너리 형태로 서버로 전송한다.

전송이 완료되면 전송이 완료되었다는 메시지를 서버에 전달한다.

서버는 완료 메시지를 전달받으면 전송받은 파일을 하나로 합친다.

파일의 무결성 테스트를 위한 분할 전 MD5 값과 전송 된 파일의 MD5 비교하여 체크.

한번에 하나의 파일이 아닌 다중쓰레드 방식을 구현한다면 한번에 여러 조각 파일도 전송이 가능.

고려사항.

위와 같이 upload Class를 작성했을때 서버에 미치는 부하

타 통신 방법과의 비교 (속도, 안전성 등)

참고.

http://adnaru.com/65

http://biemond.blogspot.com/2008/08/flex-upload-and-download-with-blazeds.html

http://www.albumbang.com/board/board_view.jsp?board_name=dev_tip&no=292

http://www.aboutjsp.com/lec/multipart.jsp
====== BlazeDS 연동 및 사용방식 ======

BlazeDS 연동 및 사용하기

Flex에서의 5가지 Data 연동방식

<code>
HttpService : jsp, php 등으로 url을 호출하여 xml return 결과와 연동
WebService : soap 등의 wsdl 방식으로 연동
RemoteObject : WAS의 Java beans와 연동 (속도 빠름)
MessageObject : push, pull 방식 지원
DataService : DB와 연동하여 바로 View에서 확인
</code>

BlazeDS는 1~4번까지 지원한다.

설치 방법

<code>
톰캣 설치
adobe 에서 BlazeDS 다운 받는다.
압축을 풀어보면 blazeDS.war 파일이 존재
이 파일을 톰캣에 webapps 에 복사
톰캣을 가동 하면 자동으로 blazeds 설치됨
이클립스에서 blazeds.war  를 import
src 폴더에 servlet 단 작성
서버에서 blaze 포함하여 실행하도록 설정
</code>

연동 준비 완료
====== Flex4 with FileBrowser ======

Flex builder 와 BlazdeDS 를 연동한 RemoteObject 사용하기

로그인 로직 (구상)

<code>
클라이언트에서 사용자가 Login Event Handler 호출
서버에서 Event Handler 발생
BlazeDS Sever와 통신하여 Java beans 에서 mysql 접속
mysql 에서 리턴된 결과값이 BlazeDS 서버의 RO를 통해 사용자가 return 받음
return 결과에 따라 로그인이 정상적으로 이루어지면 state2로 변경
틀리면 alter
</code>

Remote Object 개요

<code>
BlazeDS 는 서버의 Servlet 단에서 처리된 결과만을 Binary 형태로 통신.
즉 RO를 위해서는 Server 에서 java/jsp 로 class 작성하여 blazeDS server conf 에 RO Listener 등록
client 쪽 Browser의 Flex 에서는
var svr:RemoteObject = new RemoteObject();
</code>

svr.destination = (서버 conf에 등록한 RO 리스너의 id);

이를 통해 RO 호출

<code>
서버에서는 RO가 호출되면 conf에 정의되어 있는 참조해야 하는 class 파일을 실행하여 동작 수행
결과가 DS서버로 return 된다
return 된 값은 Serialized 되어 DS서버에서 Client 로 전송된다.
전송된 값은 flex 단에서 다시 원래의 형태로 선언하여 처리.
</code>