Flash & Asp.net - 1 : Form 전송으로 Flash 개체와 통신하기

Flash & Asp.net - 1 : Form 전송으로 Flash 개체와 통신하기

웹 환경에서 플래시가 갖는 장점을 설명하는 것은 아마 이젠 식상한 일이 될 것입니다. 하지만 플래시 컨트롤만으로는 동적인 내용을 보여주는 것에 한계가 있습니다. 앞으로 몇 번에 걸쳐서 ASP.net에서 플래시에 동적인 데이터를 보여주는 내용을 설명할 것이며, 이 아티클은 그중 Form 전송(Get/Post)를 사용해 플래시 컨트롤에 데이터를 전달하는 방법을 설명합니다.

 

 

안녕하세요 : )

 

웹 환경에서 플래시가 갖는 장점을 설명하는 것은 아마 이젠 식상한 일이 될 것입니다. 하지만 플래시 컨트롤만으로는 동적인 내용을 보여주는 것에 한계가 있습니다. 앞으로 몇 번에 걸쳐서 ASP.net에서 플래시에 동적인 데이터를 보여주는 내용을 설명할 것이며, 이 아티클은 그중 Form 전송(Get/Post)를 사용해 플래시 컨트롤에 데이터를 전달하는 방법을 설명합니다.

 

그럼 시작합니다 : )

 

 

클라이언트/서버 시스템에서 웹 환경으로

 

C/S 시스템이 웹 환경으로 이전해 오는 과정에서 생긴 문제가 있다면, 클라이언트의 표현 방식에 한계가 생겼다는 점이었다. (구현에 대한 어려움은 일단 논외로 하자) ActiveX나 자바 애플릿을 사용할 수도 있었으나, 전자는 Windows 시스템에 종속되어 있었고, 애플릿의 경우는 엄청난 실행 속도를 자랑했다.

 

이 런 상황에서 플래시는 웹 프레젠테이션 부문에서만큼은 완벽한 대안이 되었다. 벡터 그래픽을 기반으로 해 보다 적은 네트워크 대역폭을 차지하면서도 다채로운 멀티미디어 환경을 제공할 수 있다는 점은, 웹의 특성에 알맞은 해결책이 되었고, 수많은 사이트가 플래시 기술을 적용하게 되었다.

 

 

데이터를 보여다오

 

하 지만 플래시는 어디까지나 '프레젠테이션'을 목적으로 한 기술이었기 때문에 버전 초기에는 동적인 데이터를 표현하는데에 제약조건이 많았다. 하지만 지금까지 여러 버전을 거쳐 오면서 데이터와의 연동 기능 및 XML 지원이 강화되어 왔고, 최신 버전인 MX 2004에서는 리모팅 서비스 및 웹 서비스와 연동되는 기능까지도 갖추게 되었다.

 

일단은 그 기능들을 처음부터 알아나가는 내용으로써, Form 전송을 이용해 웹 서버와 연동하는 방법을 알아보도록 하겠다.

 

참고로 이 아티클은 VS.net 2003과 Flash MX 2004를 기준으로 작성되었음을 알려둔다. Flash MX의 경우에도 거의 동일한 작업이 가능하나, 웹 서비스는 지원되지 않으므로 참고하기 바란다.

 

 

Form 데이터 전송, GET/POST

 

일반적인 GET/POST 방식의 차이를 기술하자면 끝도 없겠으나, 일단 여기에서는 url에 http://localhost/test.aspx?name=test&pass=pass 같은 형태와 <Form> 태그에서 Method 속성을 POST로 지정해서 값을 전달하는 것으로 보도록 하고, 자세한 내용은 넘어가도록 하겠다.

 

이 예제는 Flash측에서 간단한 폼 데이터를 aspx 페이지에 전송하고, aspx 페이지에서는 Flash 컨트롤이 전송한 내용에 대한 데이터 길이 및 그 내용을 반환하는 코드이다.

 

먼저 ASP.net 측의 소스 코드를 보도록 하겠다 :

 

- FormReceiver_Get.aspx.cs

	... private void Page_Load(object sender, System.EventArgs e) {             Response.Expires = 0;             int nLength = 0;             // 데이터의 길이를 얻는다             if(Request.QueryString["data"] != null)                 nLength = Request.QueryString["data"].Length;             // 반환할 메시지를 적는다             Response.Write(                 string.Format("datalength={0} 바이트 수신. 수신 내용 : {1}",                 nLength, Request.QueryString["data"])                 );             // 응답을 멈춘다             Response.End(); } ...

- FormReceiver_Post.aspx.cs

	... private void Page_Load(object sender, System.EventArgs e) {     Response.Expires = 0;     int nLength = 0;     // 데이터의 길이를 얻는다     if(Request.Form["data"] != null)         nLength = Request.Form["data"].Length;     // 반환한 메시지를 적는다     Response.Write(         string.Format("datalength={0} 바이트 수신. 수신 내용 : {1}",         nLength, Request.Form["data"])         );     // 응답을 멈춘다     Response.End(); } ...

 

Get/Post 의 차이는 Request 객체에서 QueryString을 사용하느냐 Form을 사용하느냐의 차이밖에 없다. 주목해야 할 코드 중 하나는 Response.End()인데, 이 문장이 있어야 .aspx 파일에 있는 html 태그들이 출력되지 않고 Response.Write()에서 쓰여진 내용만 출력되게 된다.

 

이번에는 플래시측의 소스를 보기로 하겠다. 먼저 다음과 같은 폼을 만든다 :

 

   

 

각 각 버튼은 Button 컴포넌트를, 텍스트를 넣을 공간은 TextArea 컴포넌트를 넣고 txtResult라는 Instance Name을 주도록 하자. 그리고 Form_Get, Form_Post 버튼에 각각 다음과 같은 코드를 입력한다 :

 

- Form_Get 버튼 

	on(release) {     // 보낼 변수 준비     var temp="GetMessage";     // 보내고 받을 변수의 목록 세팅     request = new LoadVars();     request.data = temp;        response = new LoadVars();     response.onLoad = onReceive;       request.sendAndLoad("http://localhost/flashtest/FormReceiver_Get.aspx", response, "GET");       function onReceive(result)    {             _root.txtResult.text = response.datalength;     }; }

- Form_Post 버튼

	on(release) {     // 보낼 변수 준비     var temp = "PostMessage";     // 보내고 받을 변수의 목록 세팅     request = new LoadVars();     request.data = temp;        response = new LoadVars();     response.onLoad = onReceive;       request.sendAndLoad("http://localhost/flashtest/FormReceiver_Post.aspx", response, "POST");       function onReceive(result)    {             _root.txtResult.text = response.datalength;     }; }

 

플 래시에서는 Form 데이터를 주고 받기 위해서 LoadVars 개체를 사용한다. 위 소스처럼 request, response 두 개의 인스턴스를 만들지 않고 하나의 인스턴스로도 작업을 할 수 있으나, 개념적인 이해를 돕기 위해서 두 개의 인스턴스를 생성했다.

 

request.data = temp 이 코드는 data 속성에 temp 변수에 들어있는 문자열 값("GetMessage")을 할당하는 코드이며, 실제 'FormReceiver_Get.aspx?data=GetMessage' 형태의 url을 전송(sendAndLoad)하는 것과 같은 효과를 가져온다. Flash ActionScript에서는 JScript와 비슷하게 개체에 대해 명시적으로 속성을 선언하지 않고도 값을 할당할 수 있다.

 

그 다음 response.onLoad = onReceive 코드는 이벤트 핸들러를 등록하는 함수이다. response.onLoad는 이벤트에 해당하며, response 인스턴스에서 load 이벤트가 일어났을 경우 onReceive 함수를 사용해 해당 이벤트를 처리하도록 하는 코드이다. (onLoad는 메서드이며, 위 코드는 함수 포인터/딜리게이트를 할당하는 것과 비슷한 개념이라고 이해하는 것이 쉽다)

 

이 제 request.sendAndLoad() 메서드를 통해서 특정 url에 폼 데이터를 전송하고, 폼 데이터의 전송에 따른 응답을 response 인스턴스에 연결하게 된다. 최종적으로 응답이 Flash 컨트롤에 도달(load)하면 onReceive() 함수가 호출되고, 'datalength=xxxxx' 형태의 응답은 response 인스턴스의 datalength 속성에 데이터를 할당하게 된다. 여러 속성을 할당하고 싶을 경우에는 'test=abc&test2=abcd& ...' 같은 식으로 test, test2에 대한 속성의 값을 할당해줄 수 있다.

 

그래서 최종적으로 txtResult 인스턴스에 웹 서버로부터의 응답(datalength 속성의 내용)이 출력되게 된다.

 

출력 결과는 다음과 같다 :

 

   

    Form_Get 버튼을 클릭한 경우

 

   

    Form_Post 버튼을 클릭한 경우

 

 

정리

 

이 번에는 그림이 적은 아티클이 되어버려서, 실제로 작업을 해보시려면 플래시를 조금이라도 아는 분을 납치해다가 ( ? ) 실습해보시는 편이 나을거라는 생각이 듭니다. ( 이만큼 만드는데도 시간이 너무 오래 걸려요 으으..) 다음 아티클에서는 Flash와 ASP.net에서 XML 데이터를 교환하는 방법과, 그에 따르는 부수적인 팁 등을 소개하도록 하겠습니다.

 

그럼 : )