한빛출판네트워크

제공 : 한빛 네트워크
저자 : Tony Hillerson
역자 : 이대엽
원문 : Anatomy of an Enterprise Flex RIA Part 18: Building the View

지난 기사에서는 Flex를 테스트하고 테스트를 자동화하는 것을 살펴보았습니다. 이제 Flex뷰를 만들어 보기로 합시다.

Bookie의 뷰는 예제 코드에 있는 것처럼 딱히 주의깊게 살펴봐야 할 것은 없습니다. 저는 설계자는 아니지만 프론트엔드에서 백엔드에 걸쳐 이루어지는 상호작용을 파악하는데 초점을 두고 싶습니다. [그림 22]는 Bookie 애플리케이션의 뷰를 담고 있는 파일들을 보여줍니다.


[그림 22] Bookie 애플리케이션의 뷰가 포함된 파일

사용자 영역 : 로그인 과정

로그인 과정은 애플리케이션의 사용자 영역에서 첫 번째로 나타나는 상호작용이며, [그림 23]에서처럼 Flex를 비롯하여 Flex와 서비스 계층간에 나타나는 중요한 특징과 상호작용을 잘 보여줍니다.


[그림 23] 로그인 과정

이 과정에서 어떤 일이 일어나는지 전체 과정을 살펴보기로 합시다. Bookie 애플리케이션의 사용자 영역에 대한 루트 애플리케이션 파일인 index.mxml을 살펴보면 가장 먼저 몇 가지 중요한 사항들을 확인할 수 있습니다:

38번째 줄 근처에서는 Cairngorm을 초기화합니다. 우리는 이미 서비스를 살펴봤습니다. 컨트롤러인 BookieController에서는 모든 커맨드를 이벤트와 매핑하는데, 이것에 관해서는 조만간 다시 살펴볼 겁니다.

다음으로 한 가지 주의 깊게 살펴볼 것은 루트 애플리케이션 태그에서 currentState가 currentState라는 모델의 바인딩 변수로 설정된다는 것입니다. 이렇게 하면 모델에 초기화되어 있는 상태가 애플리케이션의 시작상태로 설정되는데, 여러분이 기억해둘 것은 시작 상태에 대한 기본값은 모델에 상수로 선언되어 있는 SIGNED_OUT이라는 것입니다. 다음 코드에서 여러분은 "로그인 화면" 상태의 이름이 모델에 선언된 상수로 설정된다는 사실을 알게 될 겁니다. 이 같은 방식으로 애플리케이션의 뷰의 상태를 변경해야 한다면 이전에 초기화 해놓은 상태 상수를 이용하여 어디서든 모델의 currentState를 설정할 수 있으며, Flex의 바인딩 메커니즘은 그와 같은 변화를 감시하고 있다가 애플리케이션의 currentState를 새로운 상태로 설정하게 됩니다.

이번에는 Flex의 상태에 관해 약간 알아보기로 합시다. Flex 컴포넌트는 프로퍼티와 다른 자식 컴포넌트의 집합을 그룹화하는데 상태를 활용할 수 있습니다. 그렇게 되면 개발자들은 ActionScript나 바인딩 프레임워크를 사용하여 프로그래밍 방식 또는 자동으로 컴포넌트의 상태를 변경할 수 있는데, 이것은 여러분이 작성하는 코드의 모든 프로퍼티를 변경하고 관리하는 것보다 쉽습니다.

47번째 줄 아래로 조금 더 살펴보면 태그가 시작되는 것을 볼 수 있습니다. 이 태그는 애플리케이션의 상태 프로퍼티에 들어있는 상태로 배열을 초기화합니다. 컬렉션의 첫 번째 상태는 시작 상태이기도 한 signInScreen인데, 단순히 뷰에 중앙 정렬된 SignInPanel을 추가하기만 합니다. SignInPanel은 사용자의 카드 번호를 입력 받아 사용자가 버튼을 클릭했을 때 로그인 과정을 시작하는 간단한 패널입니다.

    ...
    
    ...
    [Bindable]
    private var model:BookieModel =
                   BookieModel.getInstance();
    ...
    

    
    
    
    

그리고 우리는 바인딩을 통해 로그인 실패 여부를 보여주는 메시지를 설정합니다. 만약 로그인 과정에서 문제가 발생하면 어디에서든지 모델의 loginFailedMessage 프로퍼티를 설정하면 SignIn 패널의 Text 컨트롤에서 해당 실패 메시지를 보여주게 됩니다.

이것은 쾌속 애플리케이션 개발(RAD; Rapid Application Development)에 Flex가 매우 적합하다는 것을 보여주는 또 하나의 예라 할 수 있습니다. 로그인 화면에서 갱신되는 값을 획득하기 위한 모든 접착제 코드는 Flex에 내장되어 있습니다.

다음으로 cardNumber 필드에서 Enter 키를 누르거나 signInButton을 클릭하면 signIn 메서드가 호출됩니다.

private function signIn():void {
     new SignInEvent(cardNumber.text).dispatch();
     cardNumber.text = "";
}

이것은 우리가 처음으로 살펴볼 Cairngorm 이벤트입니다. 이벤트에는 어떤 일이 일어나는지 역추적해 보기로 하죠.

먼저 이벤트는 컨트롤러인 BookieController를 통해 커맨드에 매칭됩니다. 클래스를 살펴보면 어떤 커맨드가 이벤트에 매핑되는지 알 수 있습니다.

public class BookieController extends FrontController {
 
     public function BookieController()    {
  
           addCommand(SignInEvent.SignIn_Event, SignInCommand)
      ...

SignInEvent와 같은 CairngormEvent의 인스턴스는 생성된 후 디스패칭됩니다. 이벤트는 커맨드에 등록되며 CairngormEventDispatcher에서 이벤트가 등록된 커맨드를 어떻게 찾아야 할지를 알려줍니다. SignInEvent.SignIn_Event 문자열 상수에 매핑된 커맨드는 SignInCommand이며, 기억하시겠지만 SignInCommand는 자바로 작성된 BookSearchService POJO에 들어있는 동일한 메서드를 호출하는 BookieDelegate.findPersonByCardNumber를 호출합니다. 검색 서비스는 PersonDAOBean.findByCardNumber를 통해 주어진 카드 번호를 가진 사용자를 찾는데, 만약 사용자를 찾으면 해당 사용자에 대한 객체를 반환하고, 그렇지 않으면 null을 반환합니다.

서비스에서 값을 반환하면 서비스는 SignInCommand의 result 메서드를 호출합니다:

...
    public function result(result:Object):void {
          if (result.result != null) {
               var p:Person = Person(result.result);
               model.user = p;
               model.loginFailedMessage = "";
  
               model.currentState = BookieModel.SIGNED_IN;
           } else {
model.loginFailedMessage = "입력하신 카드 번호를 찾을 수 없습니다";
           }
      }
...

result 메서드는 찾고자 했던 사람을 발견했는지 판단합니다(result.result가 null인지를 확인하여). result가 null이면 모델의 loginFailedMessage를 변경하고, null이 아니면 모델의 currentState를 SIGNED_IN 상수로 설정하는데, 모델의 상태는 바인딩을 통해 애플리케이션 파일인 index.mxml의 현재 상태도 변경됩니다.

여러분도 알고 있겠지만 사용자 상호작용의 전체 과정은 버튼을 클릭하는 것에서부터 Cairngorm 커맨드에서 LCDS로, LCDS에서 자바 서비스, 자바 서비스에서 데이터베이스까지, 그리고 반대로 LCDS에서부터 모델의 변수를 변경하여 원래의 뷰를 조작하는 동일한 커맨드에까지 이릅니다.

여기에서 알아본 이 같은 서로 다른 시스템간의 일련의 상호작용은 Flex/Cairngorm/LCDS/자바 애플리케이션에서 상당히 흔하게 나타나는 패턴입니다. 이러한 상호작용을 이해하게 되면 여러분은 유연하고, 약하게 결합된(loosely coupled), 그리고 책임이 명확한 규모가 작고, 쉽게 이해할 수 있는 구성요소를 가진 RIA를 구축하는 여러분만의 최적화된 방법을 찾을 수 있을 것입니다.

다음 기사에서는 애플리케이션의 검색 절차와 검색 뷰, 서비스 상호작용을 살펴볼 예정입니다. 전체 시리즈는 언제나 여기에서 확인할 수 있습니다.