Flash Builder 4의 HTTP 서비스로 ASP.NET에 접근하는 Flex 애플리케이션 구축하기

자료의 출처를 아래 밝힙니다.

 

Flash Builder 4의 HTTP 서비스로 ASP.NET에 접근하는 Flex 애플리케이션 구축하기 Flash Builder 4의 데이터-중심 개발기능을 사용하면, HTTP 서비스에서 데이터를 검색하는 Flex 애플리케이션을 쉽게 구축할 수 있다. 또한 Flash Builder 4는 HTTP 서비스에서 반환된 XML 데이터를 이용해서, 자동으로 value object를 생성할 수 있고, 이러한 기능은 백-엔드와 연관을 쉽게(많은 코딩 없이 처리)하고, 여러분은 프런트-엔드 개발에 전념할 수 있도록 도와 준다. 이번 문서에는, Microsoft .NET 프레임워크로 구축된 HTTP 서비스에서, SQL DB 테이블에서 검색된 정보를 어떻게 가져와서, 화면에 나타내는지 기술한다. Flex 애플리케이션에서 데이터를 사용하기 위해서는, 서비스 모델을 정의한 후, Flex 컴포넌트를 사용하여 서비스 operation에 바인딩 해야 한다. 요구 사항 이번 문서에 포함된 대부분의 작업을 하기 위해서, 다음과 같은 소프트웨어와 파일이 필요하다: Flash Builder 4 Try Buy 샘플 파일들: flashbuilder4_httpservice_dotnet.zip (ZIP, 3 KB) 선수 지식 .NET 플랫폼을 사용한 웹 프로그래밍 경험뿐만 아니라, SQL Server를 설정하고, ASP.NET과 데이터 베이스를 사용 경험이 요구되며, Flex에 대한 사전 경험은 이번 문서를 학습하는데 많은 도움이 될 것이다.   데이터베이스와 .NET HTTP 서비스 설정하기 이번 튜토리얼에 대한 예제 데이터베이스는, Visual Studio를 사용하여, 다음과 같은 열과 데이터 타입(그림 1 참조)의 형태로, 사무실의 위치를 저장할 수 있는 임의의 택배 회사 테이블(테이블 명 Centre)을 만들어 사용한다: Name - nchar(10) Longitude - numeric(9,6) Latitude - numeric(9,6) [그림1] Centre 데이터베이스 테이블 스키마 이 테이블의 데이터 정보가 XML 형식으로 반환되는 샘플 파일을 통해서, 이번 튜토리얼을 학습할 수 있도록 제공한다. 제공되는 코드는 세 개의 파일로 구성되어 있다: Centre.cs – C# 클래스는 데이터베이스의 Centre 테이블 집합을 나타낸다. CentreInterface.cs – C# 클래스는 System.Data.sqlClient 네임스페이스를 사용하여 데이터베이스 연결을 설정하고, Centre 테이블 집합의 목록을 검색하는 메소드가 포함되어 있다. CentreXml.aspx – 이것은 필요한 데이터를 포함하고 있는 XML을 반환하는 ASPX 페이지이다. 기본적으로, 데이터베이스의 집합 목록을 반환한다. 튜토리얼 예제 파일에 포함되어 있는, Database.mdf 파일을 SQL Server 데이터베이스에서 사용할 수 있다. CentreInterface.cs 소스코드에서, 두 군데의 경로를 변경해야 한다. 파일에서 AttachDbFilename=/*ENTER PATH OF THE DB HERE*/ 찾아서, 여러분의 구성요소에 맞게 두 개의 인스턴스를 수정한다. 경로 속성 형식을 올바르게 수정해야 한다. 코드를 여러분의 로컬 서버에 있는 데이터베이스로 설정한 후, 브라우저에서 ASPX 파일을 호출해, 올바르게 데이터에 접근하고 XML 데이터를 응답하는지 검증해야 한다.   Flex에서 HTTP service 정의하기 Flex 애플리케이션을 만들어, XML 형식의 데이터를 사용하려면 다음 단계를 따른다: Flash Builder에서, File > New > Flex Project를 선택한다. Project name 입력 (예, DotNetHttpService 사용). Application Type은, Web 선택 (Runs In Flash Player). Application Server Type은, None/Other 선택. Finish 클릭. Window > Data/Services 선택해서, Data/Services 뷰를 연다. Data/Services 뷰에서, Connect To Data/Service 클릭. Select Service Type 다이얼로그 박스에서, HTTP 선택 (그림 2 참조).  [그림 2] 서비스 타입으로 HTTP 선택    Configure HTTP Service 다이얼로그 박스에서, 모든 작업 URL에 대한 접두어로 기본 URL을 사용할 것인가를 묻는 옵션에서 No를 선택 (그림 3 참조).   [그림3] HTTP 서비스 메뉴 여러분의 서비스 내에 많은 operation을 가지고 있다면, 여러분은 이번 옵션에서 Yes를 선택하는 것이 좋다. Base URL을 변경하면, URL을 통해서 액세스 할 수 있는 모든 operation들에 대해서, 적어도 한번은 주소 값을 수정해야 한다. 그러나 이번 예제에서는, 단지 하나의 operation만 가지고 있어서, base URL에 대한 명시가 필요하지 않다. Operations 그리드의 name 칼럼을 클릭하고, operation 이름을 GetCentres 로 입력한다. method 칼럼은 GET을 선택한다. URL 칼럼에는, 여러분의 ASPX 페이지의 URL을 입력한다. Service Name에 서비스에 대한 설명이 포함된 이름을 입력; CentreService 사용한다. Finish 클릭. Flash Builder 4로 서비스를 생성한 후, Data/Service 뷰에서 디스플레이 되는 서비스를 볼 수 있다 (그림 4 참조). [그림 4] Data/Services 뷰의 CentreService 서비스   반환형 구성하기 Data/Services 뷰에서 GetCentres() 함수를 보면, 반환형이 일반적인 객체인 것을 알 수 있을 것이다. 만약 여러분의 백-엔드에서 사용하는 것처럼, Flex에서도 동일한 사용자 정의 데이터 타입을 사용하고 있다면, 이러한 구현은 좋은 방법이 아니다. Flash Builder 4사용하면, Flex에서 사용하는 클래스와 .NET에서 사용하는 C# 클래스에 대응하는 value object를 자동으로 생성할 수 있다. 반환형을 구성하기 위해서 다음 단계를 따른다:    GetCentres()를 오른-클릭 한다: Data/Services 뷰 내의 객체와 Configure Return Type을 선택한다.  [그림 5] 반환형 구성하기 이것은 처음으로 데이터를 introspect 할 예정이기 때문에, Auto-detect The Return Type From Sample Data를 선택한다. 만약 여러분의 호스트가 인증이 필요하면, Authentication Required를 체크하고, 사용자명과 패스워드를 입력하라는 메시지를 줄 것이다. 여러분이 두 번째 옵션(Use An Existing Data Type)을 선택하면, 내장된 데이터 형식이나, 이전에 구성된 사용자 정의 데이터 형식을 사용할 수 있다.   Next 클릭. [그림 6] Auto-Detect Return type 메뉴 반환형을 자동으로 검출하는 세 가지 옵션을 사용할 수 있다. 처음 두 가지는 구동되고 있는 서버가 필요하다. 만약에 operation이 매개 변수를 필요로 하면, Enter Parameter Values And Call The Operation을 선택하고, 그리드에 매개 변수 값을 입력한다. 그렇지 않으면, Enter A Complete URL And Parameters And Get It을 선택한 다음, 매개변수를 포함하는 쿼리 문을 가지고 있는 URL을 입력한다. 만약 여러분이 테이블에 값을 입력하지 않고, 이미 수작업을 한 URL을 가지고 있으면, 이 방법이 더 편리하다. 여러분의 백-엔드가 완전히 또는 아직 개발되지 않은 경우에는, Enter A Sample XML/JSON Response를 선택할 수 있고, XML 형식은 샘플로 제공 받을 수 있다. 예를 들어, 이번 프로젝트에서, CentreXML.aspx에서 XML 형태의 샘플을 제공해 준다: <?xml version="1.0" encoding="UTF-8"?> <Centres>   <Centre>     <name>One</name>     <longitude>29.777770000</longitude>     <latitude>23.455666000</latitude>   </Centre>   <Centre>     <name>Two</name>     <longitude>54.777770000</longitude>     <latitude>8.999999000</latitude>   </Centre> </Centres>          이번 예제에서는 매개변수가 없으니, 단순히 첫 번째 옵션을 선택하고 Next를 클릭한다. Flash Builder 4는 연산자를 호출하고, introspect를 응답할 것이다. 이번 경우에는 Centre 객체 배열을 가진다. [그림 7] Return type detected successfully    Data type 명으로 Centre_type 를 입력하고, Centre를 루트로 선택한다. [그림 8] root property 선택하기.    Finish 클릭(그림 9 참조). [그림 9] return type을 선택한 후 메뉴 Data/Services 뷰의 GetCentres()의 반환형이 Centre_type[]으로 변경될 것이다 (그림 10 참조). [그림 10] GetCentres()의 반환형 구성 UI를 위한 연산자 바인딩 다음 단계에 따라서 새로운 서비스를 이용하고, 반환된 정보를 디스플레이 한다. Flash Builder 4를 디자인 보기로 전환한다. Components 뷰에서 DataGrid 컨트롤을 드래그 해서, 메인 디자인 영역에 드롭한다. DataGrid 컨트롤을 오른-클릭해, Bind To Data를 선택한다. Service가 CentreService가 선택되고, Operation이 GetCentres() 선택된 것을 확인한다 (그림 11 참조). OK 클릭한다. [그림 11] Bind To Data 다이얼로그 박스 사용자 정의 Centre의 프로퍼티 이름들을 데이터 그리드의 칼럼에 반영되도록 한다. [그림 12] 자동으로 생성된 칼럼 헤더를 가진 DataGrid 컨트롤 Run > Run DotNetHttpService를 실행한다. 여러분은 데이터베이스의 데이터로 채워진 데이터 그리드를 볼 수 있다. 나아가기 여러분은 얼마나 쉽게 Flex의 데이터-중심 개발을 사용하여 .NET HTTP 서비스를 연결하는 것을 보았다. 코딩 없이 여러분은 반환형을 구성할 수 있고, 자동으로 생성된 value object를 만들고, 결과 값을 데이터 그리드에 나타내도록 할 수 있다. 여러분이 백-엔드로 HTTP 서비스를 사용하는 경우, 이런 간소화된 작업 흐름은, 쉽고 편하게 프런트-엔드에서 풍부하고 인터렉티브 한 애플리케이션을 만들 수 있다. 데이터 중심의 개발에 대한 자세한 정보는 Data-centric development with Flash Builder 4 문서를 참조한다.   앞으로의 애플리케이션 개발은 비즈니스 니즈(need)에 의존적일 것이다. 예를 들면, 고객이 그들의 패키지를 보내고, 그것을 온라인으로 추적할 수 있는 애플리케이션을, HTTP 서비스의 데이터를 사용하여 구현할 수 있다. 여러분은 인터렉티브 한 지도 및 고객 서비스를 위한 비디오 채팅을 추가 할 수 있고, 여러분의 프런트-엔드를 Flex로 구현하면, 그 가능성은 사실상 무한하다.

RIA_Tech해외_ASPNET접근하는Flex_20100628.pdf

저자 : Nishad Musthafa

저자소개 : nishadmusthafa.wordpress.com  어도비 Flash Platform 팀의 개발자로서 그의 블로그를 통해서 RIA 의 가능성과 경험들을 공유하고 있습니다.