RIA(Rich Internet Application)은 차세대 웹의 중요한 기술로 현재 많은 관심을 받고 있고 국내에서 많은 RIA기술을 적용한 솔루션들을 내놓고 있다. RIA구현 솔루션들이 스크립트를 기반으로 한다면 Flex는 플레쉬를 기반으로 하고 있다. Flex와 플레쉬에 대해서 구별을 어려워 하는 사람들이 있는데 간단히 말해서 Flex는 XML테그로 작성한 스크립트를 컴파일해서 플레쉬파일로 만든 것이라고 생각하면 된다. Flex화면 개발과 컴파일, 디버깅을 위한 Flex Builder라는 개발툴이 있고 Server Side에서 컴파일, 데이터의 연동 등을 위한 Flex Data Service가 있다. Anyframe Sample Application에 Flex관련 화면은 국내 Flex기술 개발&지원 업체인 이메타의 지원을 받아 작성했다. Flex로 이용한 화면 개발과 Flex Data Service에 대한 상세한 내용은 여기서는 다루지 않고 Flex 개발환경 구축, Flex Data Service를 이미 설치되어 있는 Web Applicaton에 설치 하는 법, Flex Builder 3를 이용해 새로운 플레쉬 화면을 작성하는 법, Sample Application에 적용된 화면과 서버단 코드에 대한 설명만 다루겠다. eMarketPlace의 Flex Sample Application대해서는 이메타에 문의하도록 한다. 본 페이지에서 명시 된 Flex Data Service, Flex Builder의 버전은 Flex Sample Application개발에 사용 된 버전이므로 개발 시 참고한다.

Flex 개발환경

Flex의 개발환경은 서버 개발 환경, 클라이언트 개발환경으로 나뉜다. 서버 개발 환경은 모니터링, 데이터 자동 동기화, 대량 데이터 처리, RPC서비스, mxml파일의 동적 컴파일 등을 처리해주는 Flex Data Service가 필요하고 클라이언트 Flex SDK가 필요하다. 하지만 클라이언트에 Flex Builder가 설치되어 있으면 화면 개발 뿐 아니라, 컴파일, 디버깅과 같은 작업에 편리하다.

• Flex 개발 환경 : Flex Data Service 2
• 기타 개발 환경 : JDK 1.4 이상, WAS(Tomcat, Weblogic, JEUS 등)

• Flex 개발 환경 : Flex Builder 3

Flex Data Service 2와 Flex Builder 3을 설치 하기 위해서는 설치환경(운영체제, 하드웨어의 메모리, 하드디스크 용량 등)을 꼭 확인해야 한다.

Flex Data Service 2

Flex Data Service 2는 상용 소프트웨어 페키지 제품으로 사용 시 상업적인 목적으로 이용 시에는 반드시 구매를 해야 하며 Adobe를 통해서 익스프레스 버전(무료)을 다운 받아서 사용할 수 있다.

Flex Data Service를 기능은 테스팅, JMS 서비스, RPC 서비스 등과 같이 Server Side 환경에서 Flex실행을 위해 다양한 기능을 제공한다.

• 테스팅 : 기능 테스트를 위한 API 제공
• JMS : 메세지 전송, 데이터 동기화
• RPC : AMF를 이용한 바이너리 객체 전송, SOAP
• 기타 : MXML파일의 동적 컴파일, 캐시/세션의 관리

Tomcat, JEUS, Weblogic과 같은 이미 설치되어 있는 WAS나 이미 구성되어 있는 애플리케이션에 Flex개발환경을 구축해보도록 하겠다. Anyframe Sample Application eMarketPlace에 Flex개발 환경을 구축해 본다. eMarketPlace는 기본적은 Tomcat 5.5환경에서 실행 되도록 만들어져 있으로 Flea Data Service를 설치 할 때 Flex Data Service J2ee web application옵셥을 주어 설치해야 한다. Flex Data Service의 설치가 완료되면 설치폴더에 flex.war생성된다. flex.war 파일을 압축을 풀거나 TOMCAT_HOME\webapps\아래에 복사 한 후 deploy하면 다음과 같은 파일들이 존재한다.
flex.war파일의 내용
다음은 각 폴더와 파일들에 대한 간략한 설명이다.

• WEB-INF/web-xml : 애플리케이션의 배포지시자로 servlet 2.3으로 만들어져 있기 때문에 servlet 2.4의 웹애플리케이션에 설정할 때는 2.4스펙에 맞게 테그를 고쳐야 한다. 애플리케이션 실행에 필요한 servlet에 대한 설정과 action path등의 설정이 작성되어있다.
• WEB-INF/flex : flex의 환경 설정 파일들이 위치해 있다.
• WEB-INF/jars : flex서버관련 jar파일들이 위치해 있다.
• WEB-INF/lib : SWC 컴포넌트 파일들이 위치해 있다.
• INF/user_classes : 사용자 SWC 컴포넌트 파일이 위치 할 폴더이다.(기본 : 빈폴더)

다음은 web.xml파일에 매핑된 서블릿에 대한 설명이다.

• FlexInternalServlet : Flex관련 파일을 관리 해주는 servlet이다.
• MessageBrokerServlet : JMS 메세징 및 RPC를 처리해주는 servlet이다.
• FlexMxmlServlet : mxml파일의 동적 컴파일을 해주는 servlet이다.
• FlexSwfServlet : .swf대한 요청 시 swf를 리턴 해주는 servlet이다.
• FlexForbiddenServlet : .as나 .swc와 같은 파일로의 접근을 막는 servlet이다.

1. anyframe-sample-web/src/webapp/WEB-INF/아래에 flex.war파일의 WEB-INF/flex폴더의 모든 하위폴더 및 파일들을 복사한다.
2. flex.war파일의 WEB-INF/lib아래의 모든 jar파일들을 anyframe-sample-web/src/webapp/WEB-INF/lib폴더에 모두 복사한다.
3. flex.war파일의 WEB/web.xml파일을 열어서 anyframe-sample-web/src/webapp/WEB-INF/web.xml에 복사한다.
   - 복사 할 때 servlet 스펙에 맞도록 변경 또는 수정이 필요하다.
4. WAS를 실행 해 error없이 WAS가 정상적으로 시작되는지 확인한다.
5. WAS가 정상적으로 실행 됐으면 웹브라우저 주소창에 http://localhost:8080/flex/test.mxml을 입력해 test화면이 정상적으로 실행 되는지 확인한다.
   -test.mxml은 Flex개발 환경을 테스트 하기 위해서 만든 파일이다.
6. 화면이 정상적으로 보였다면 flex서버 개발 환경이 옳바르게 세팅된 것이다.

Flex Builder 3

Flex Builder는 WYSIWYG방식으로 코드 입력창을 통해 유저 인터페이스를 디자인하고, MXML파일을 SWF로 바로 컴파일 할 수 있고 디버깅과 프로젝트 관리를 가능하게 하는 툴이다. Flex Builder 2는 이클립스 3.2, Flex Builder 3는 이클립스 3.3플러그인방식으로 설치할 수 있다. 이클립스 플러그인 방식으로 설치하면 이클립스내에서 Web프로젝트 관리와 Flex프로젝트 관리를 동시에 할 수 있다.

• IDE : 이클립스 플러그인으로 설치했을 경우 이클립스 통합개발환경을 구축 할 수 있다.
• 코드자동완성 : 이클립스에서 ctrl+space를 입력했을 경우 코드가 자동완성 되는 것처럼 Flex화면 개발 시 자동완성 기능을 지원한다.
• 디버그 : 디버그 모드를 통해 오류수정을 원할하게 할 수 있다.
• 컴파일 : MXML파일을 SWF로 자동으로 컴파일 한다.

Flex Builder 3를 실행하면 아래와 같은 화면을 볼 수 있다.
Flex Builder 실행 화면
Flex Builder 3를 이용해 간단한 화면을 만들고 실행해 본다.

1. Flex Builder에서 File -> New -> Flex Project를 선택한다. 그러면 Create a Flex project창이 열릴 것이다.
2. 새로운 프로젝트 이름을 입력하고 Project name에 'test-flex'라고 입력하고 next버튼을 클릭한다. 이 때 프로젝트의 경로와 Application Type를 선택하도록 되어 있는데 경로는 Flex Builder의 workspace가 기본 경로이다. 필요에 따라서 Use default location의 체크를 없애고 새로운 경로를 입력해도 된다. Application type는 Web Application에 새 프로젝트를 만들 것이므로 Web application을 선택한다. 선택이 완료 됐으면 next버튼을 눌러서 다음 창으로 이동한다.
3. Configure Output창에서는 작성된 MXML파일이 컴파일 되서 위치 할 곳을 입력하도록 되어 있다. 이클립스에서 .java파일의 Output folder를 설정하는 것과 같은 개념이다. 기본으로 되어 있는 bin-debug를 선택한다. 물론 처음부터 Web Application의 지정된 위치로 정해도 된다. Output Folder를 입력했으면 next버튼을 클릭해 다음 단계로 넘어간다.
4. test-flex라는 프로젝트가 새롭게 생성된 것을 Flex Navigator창을 통해서 볼 수 있을 것이다. 바로 Source path와 Libary path를 선택 할 수 있는 창이 열리는 것을 볼 수 있는데 Source path는 mxml파일이 작성될 soruce folder을 선택하는 것이고 libary path는 mxml을 컴파일 할 때 필요한 라이브러리 파일(.swc)의 위치를 설정하는 것이다. source path는 이클립스 builder path의 source과 같고 library path는 libraries와 같은 개념이라고 생각하면 된다.
5. Source path텝에서 Main source folder에 'flex_src' Main application file에 test.mxml을 입력한 후 finish버튼을 클릭한다.

새 프로젝트 생성

6. Flex Builder의 Flex Navigator창에 src폴더 flex_src폴더 그리고 flex_src폴더 안에 test.mxml파일이 생성 됐음을 확인 할 수 있다. test.mxml을 수정하거나 작성하면 bin-debug폴더에 test.mxml파일이 컴파일 되서 test.swf로 생성된다.
7. text.mxml에 간단한 화면을 작성하고 실행해 본다. text.mxml파일을 열면 아래와 같은 내용을 볼 수 있을 것이다.
   

       <?xml version="1.0" encoding="utf-8"?>
   	<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
   	<!-- Code 입력 -->
   	</mx:Application>
   

   여기에 이젠 텍스트박스에 값을 입력하고 버튼을 클릭하면 팝업창에 입력한 내용을 출력하는 예제를 만들어 본다.

       <mx:Panel x="57" y="24" width="466" height="311" layout="absolute">
   	<mx:TextInput x="100" y="100" id="textBox"/>
   	<mx:Button x="279" y="100" label="Button"
   		click="mx.controls.Alert.show(textBox.text)"/>
       </mx:Panel>
   

   테그 안에 입력하고 저장한다.
   9) text.mxml을 실행한다. Flex Navigator에서 text-flex/flex_src/text.mxml파일을 선택한 후 오른쪽 마우스클릭
   Run Application을 선택한다. 웹브러우저가 실행 되고 Flex로 만든 화면을 볼 수 있을 것이다.
   text박스에 이름'Anyframe'을 입력하고 버튼을 클릭하면 Anyframe이 팝업창에 뜨는 것을 확인 할 수 있다.

Sample Application에 Flex Builder 3를 이용해 새로운 화면을 만들기 위해서는 다음과 같은 절차를 따른다.

1. 위 새 Flex프로젝트 생성'에서 처럼 Flex Builder에서 새 프로젝트를 생성하고 test.mxml파일을 만들어 실행한다.
2. 위 'eMarketPlace 프로젝트에 Flex 개발 환경 구성하기'를 참고하여 Sample Application의 Flex개발 환경을 세팅한다.
3. 이제 Flex Builder 3을 이용해 만든 프로젝트의 output folder을 Sample Application의 특정폴더로 지정하면 된다. Flex Builder 3에서 test-flex프로젝트를 선택하고 오른쪽 마우스를 클릭한 다음 context메뉴에서 properties를 선택한다.

properties view화면

4. Properties화면에서 Flex Builder Path -> Output folder -> Browse... -> anyframe-sample-web프로젝트의 src/webapp/test-flex폴더는 선택한다(test-flex가 없으면 새 폴더 만들기를 해서 폴더를 생성한다.) -> OK 버튼을 클릭한다.

Select Output Folder

5. Flex Builder 3의 test-flex프로젝트의 bin-debug폴더의 아이콘이 바뀐 것을 확인 할 수 있다. 그럼 Eclipse에서 Anyframe-sample-web프로젝트에서 해당 폴더가 생성 됐는지 확인한다.

Eclipse의 프로젝트에서 확인

6. WAS를 시작한 후 웹 브라우져에 주소창에 http://localhost:8080/anyframe-sample-web/test-flex/test.swf를 입력한다.

Sample Application에서 실행 된 Flex화면

Flex Sample Application

Flex로 화면을 개발 했다면 이젠 데이터 베이스에 연결해서 데이터를 주고 받고 하는 방법에 대해서 알아 보자. 일반적인 RIA 솔루션의 경우 HTTP방식으로 XML로 된 데이터를 처리한다. Flex는 HTTP방식의 XML데이터 연동 뿐 아니라 몇 개의 데이터 연동 방법을 제공하고 있다.

• Flex는 크게 두가지 방식의 데이터 연동 방식을 제공한다. RPC방식과 데이터 서비스 방식이 있는데 RPC방식에는 HTTP, 웹서비스, RemoteObject가 있고 데이터 서비스 방식에는 메세지 서비스, 데이터관리서비스가 있다.
• HTTP, 웹서비스 방식은 데이터의 포멧이 XML이고 RemoteObject는 List,Map과 같은 Java Object이다. Anyframe Sample Application은 RemoteObject방식으로 데이터 연동을 했고 RemoteObject방식으로 데이터연동을 하기 위해서는 앞서 언급한 것처럼 Flex Data Service가 Server Side환경에 설치 되어 있어야 한다. 여기에서는 Flex화면에서 Spring Bean의 Method를 직접 호출하고 RemoteObject방식으로 데이터를 연동하는 방법에 대해서만 설명하겠다.

• RemoteObject의 특징 : Java Bean의 Method를 호출 해 List, Map형식의 데이터를 Binary방식으로 처리한다.
• RemoteObject의 통신방식 : AMF(Action Message Format)방식 사용
• RemoteObject의 장점 : XML방식의 데이터를 처리하는 HTTP, 웹서비스 방식보다 속도가 빠르다.
• RemoteObject의 단점 : Flex Data Service를 구매해야 한다.
AMF(Action Message Format)는 SOAP을 기본으로 한 binary format이다. RPC(Remote Procedure Call)를 사용할 때 Adobe Flash application과 database의 데이터를 교환 할때 사용된다. FLex에서는 mx.messaging.channels.AMFChannel클래스에서 담당한다.

일반적인 RemoteObject을 사용해서 Flex application과 database의 데이터를 연동하는 방법에 대해서는 여기서는 다루지 않겠다. 본 페이지에서는 Anyframe Sample에 적용 된 이메타의 FlyDataService를 사용해 RemoteObject를 이용해 데이터를 연동하는 방법에 대해서만 설명하겠다. 일반적인 Flex의 RemoteObject사용 법과 크게 다르지는 않다.

1. AMF를 이용해 통신하기 위한 설정

Web Project/src/webapp/WEB-INF/flex폴더의 services-config.xml파일을 열면 각 통신에 channel에 대한 설정을 볼 수 있다.

<channel-definition id="my-amf" class="mx.messaging.channels.AMFChannel">
    <endpoint url="http://{server.name}:{server.port}/{context.root}/messagebroker/amf" 
        class="flex.messaging.endpoints.AMFEndpoint"/>
    <properties>
        <polling-enabled>false<polling-enabled>
    </properties>
</channel-definition>

Flex Data Service를 설치하면 기본적으로 위와 같이 세팅이 되어 있다. 새로운 {server.name}과 같은 property값은 Flex프로젝트를 만들 때 property파일에 따로 정보를 설정 했기 때문에 수정하기 않고 그냥 둔다. 만약 Flex프로젝트에서 propery파일에 설정하지 않았다면 서버환경에 맞게 설정하면 된다. 기본 설정되어 있는 Channel외에 새롭게 추가를 하고 싶을 때는 id값을 바꿔서 channels테그 안에 등록만 하면 된다.

2. Spring Bean 등록

Web Project/src/webapp/WEB-INF/flex폴더의 remoting-config.xml파일을 열어 사용 할 Spring Bean파일을 등록한다.

<destination id="CategoryFlexService">
    <properties>
        <factory>spring</factory>
        <source>categoryService</source>  -- applicationContext에 등록 된 Spring의 서비스 id or name 
    </properties>
</destination>

FlyDataService를 사용하지 않고 destination에 Java Bean을 등록 할 때는 아래 처럼 풀페키지이름을 등록해야 한다.

<destination id="CategoryFlexService">
    <properties>
        <source>com.sds.emp.sale.services.impl.CategoryServiceImpl</source>
    </properties>
</destination>

위에 설정한 것처럼 Java Bean의 풀페키지 이름이 아닌 Spring의 Service이름을 직접적으로 사용할 수 있는 것은 FlyDataService에서 제공하는 API때문이다.

3. Factory등록

다음은 FlyDataService에서 ApplicationContext에 등록 된 Spring Bean을 이용하기 위해서 Web Project/src/webapp/WEB-INF/flex폴더의 services-config.xml파일에 다음과 같은 설정을 추가 한다.

<factories>
<factory id="spring" class="com.emeta.factory.SpringFactory"/>
</factories>

4. Flex프로젝트에 환경변수 등록

Flex Builder 3를 이용해 개발 할 경우 Flex프로젝트에 services-config.xml파일을 환경 변수로 등록해야 한다. Flex Builder에서 해달 Flex프로젝트를 선택한 후 오른쪽 마우스를 클릭해 Properties메뉴를 선택한다. Properties창에서 Flex Compiler -> Additional compiler arguments에

-services {Web Application의 services-config.xml의 경로} -context-root /anyframe-sample-web/

를 입력하고 OK버튼을 선택한다.

이것으로 Flex UI에서 Spring의 특정 빈을 호출해서 데이터를 주고 받을 수 있는 환경 세팅이 끝났다.

RequestPacket은 하나 이상의 서비스 요청 정보를 담을 수 있고 사용자가 요청한 각 서비스는 각각 Request Service 객체로 생성되며, 각 Request Service는 Service 요청에 필요한 Parameter 정보를 setParam 메서드를 통해 전달받아 저장한다. RequestPacket을 ServiceBroker에 전달하여 요청을 하면 ReturnPacket으로 반환된다. 요청에 대한 결과는 PacketName과 ServiceName으로 구분된다.

• FlyDataService의 Data흐름

FlyDataService의 데이터 흐름

• RequestPacket 사용

본 페이지에서는 RequestPacket에 Spring의 Bean으로 등록된 서비스의 특정 method를 호출 하는 방법만 설명하겠다. 자세한 사용 방법에 대해서는 이메타에 문의하기 바란다.

var QP:RequestPacket = new RequestPacket("MASTER"); -- RequestPacket의 인스턴스를 생성하고 
                                                               인스턴스의 이름이 "MASTER"이다.
QP.remoteDestination="CategoryFlexService" ;        -- RemoteObject의 클래스명을 세팅한다. 
                                                       여기서는 WebApplication에 등록된 
                                                               Spring Bean을 사용했다.
                                                       설정안했을 경우 default값은 CommonService이다.
QP.methodName="getFlexCategoryList";                -- RemoteObject에 요청할 Method Name을 지정한다.
                                                       설정안했을 경우 default commonList이다.

var sb:DataServiceBroker = new DataServiceBroker(); -- RequestPacket를 전달할 DataServiceBroker의 
                                                               인스턴스를 생성한다.
sb.callService(QP, selectEventHandler);             -- DataServiceBroker를 통해 RequestPacket를 
                                                               전달하고 리턴값은 selectEventHandler
                                                       스트립트 함수에 전달한다.

중략 된 부분에는 조회 및 저장 시에 필요한 데이터값 세팅과 기타 입력,수정,삭제를 한꺼번에 처리하기 위해 RequestPacket에 세팅하는 로직이 포함되어 있다.

• Server Side(Spring Bean)

DataServiceBroker가 Spring Bean의 메소드를 호출 할 때 Argument는 ArrayList이고 리턴 값은 Collection이다.
조회 시 : categoryService의 getFlexCategoryList메소드를 보면 다음과 같다.

public Collection getFlexCategoryList(ArrayList acList) throws Exception{
<!-- 중략 -->
}

조회 시 필요한 parameter들을 얻는 방법은 다음과 같다.

HashMap searchMap = (HashMap) acList.get(0);

특별한 설정이 없었을 경우 ArrayList의 0번째에 HashMap에 조회 시 필요한 parameter들의 키,벨류값이 들어있다.

String searchCondition = (String) searchMap.get("searchCondition");
<!-- 중략 -->
ArrayList resutlList = new ArrayList();
resutlList.add((ArrayList) dynamicHibernateService.findList("getFlexCategoryList", args));
return resultList;

키 값을 이용해 조회 조건 등 조회에 필요한 값들을 얻으면 된다. 리턴 할 때는 조회된 결과 값(ArrayList)를 ArrayList에 add한 후 리턴한다.


저장 시 : 입력, 수정, 삭제를 한꺼번에 처리하는 categogyrService의 processAllFelx메소드는 다음과 같다.

public Collection processAllFlex(ArrayList acList) throws Exception{
    HashMap hashMap = new HashMap();
    ArrayList resultList = new ArrayList();
    for( int i = 0 ; i < acList.size() ; i ++ ){
        hashMap = (HashMap) acList.get(i);
        String state = hashMap.get("__COMMAND__").toString();
        if(state.equals("INSERT")){
            hashMap.put("CATEGORY_NO", idGenerationService.getNextStringId());
            categoryDAO.insertFlexCategory(hashMap);
            <!-- 중략 -->
        }
        if(state.equals("UPDATE")){
            categoryDAO.updateFlexCategory(hashMap);
            <!-- 중략 -->
        }
        if(state.equals("DELETE")){
            categoryDAO.deleteFlexCategory(hashMap);
            <!-- 중략 -->
        }
    }
    return resultList;
}

Flex화면에서 입력, 수정, 삭제 되는 데이터들은 "_COMMAND_"라는 키값에 데이터를 INSERT, UPDATE, DELETE의 값을 주어 구별해 RequestPacket에 세팅 했다.
"_COMMAND_"의 값에 따라 입력, 수정, 삭제 분류해서 DB에 접근하면 된다. 다음은 INSERT할 때의 DAO의 예제이다.

Category category = new Category();
category.setCategoryName((String) insertMap.get("CATEGORY_NAME"));
category.setCategoryDesc((String) insertMap.get("CATEGORY_DESC"));
category.setUseYn( ((String) insertMap.get("USE_YN")).charAt(0) );
category.setRegDate(new Date());

저장 시 리턴 되는 값은 각 각의 프로세서를 실행 하고 화면에 보여 줄 이벤트 값을 ArrayList에 입력하면 된다.

조회, 저장 시 리턴되는 Collection은 DataServiceBroker에 의해서 화면으로 전달되고 DataServiceBroker에 설정 된 화면의 이벤트 함수에 전달된다.