Sun Developer Network 공식 블로그

2007년 3월 13일자 테크팁 jMaki 입문을 통해 CSS, HTML, JavaScript 등 표준 기반의 기술을 사용하여 Web 2.0 애플리케이션을 제작할 수 있는 가벼운 프레임워크 jMaki에 대해 소개한 바 있습니다. 무엇보다 자바 기술, PHP 또는 Phobos 개발자들에게 익숙한 방식으로 Dojo, Yahoo, Scriptaculous, Google과 같은 인기 있는 JavaScript 툴킷의 위젯을 사용할 수 있다는 점이 jMaki 프레임워크의 가장 큰 매력입니다.

이 테크팁에서는 jMaki의 구성요소를 대략적으로 설명하고 이 프레임워크를 사용하여 애플리케이션에 Web 2.0 기능을 내장하는 몇 가지 예제를 소개합니다. 또한 이 프레임워크의 이벤트 메커니즘과 jMaki 이벤트 메커니즘의 핵심 기능인 Glue에 대해서도 간단히 다룹니다.

다음 팁에서는 jMaki의 이벤트 메커니즘에 대해 보다 자세히 논의합니다. jMaki 이벤트 메커니즘의 토대가 되는 개념과 이 메커니즘을 활용하여 보다 손쉽게 위젯을 사용하는 방법을 알아봅니다. 예를 들어, 사용자가 달력 위젯에서 날짜를 클릭하면 그 이벤트에 의해 콤보박스 등의 다른 위젯이 새로 고쳐지거나 다른 데이터를 로드하게 되는 애플리케이션이 있다고 생각해 봅시다.

또는 콤보박스 위젯에서 값을 선택하면 그에 따라 테이블에 다른 값이 표시되는 애플리케이션을 생각해 보십시오. 위젯을 클릭하면 서비스(예: 블로그)가 테이블 위젯 등 다른 위젯으로 로드되는 애플리케이션도 생각해 볼 수 있습니다. jMaki 이벤트 메커니즘을 사용하여 이러한 작업을 쉽고 간단하게 처리할 수 있습니다.

jMaki 이벤트 개요

jMaki는 Glue라는 기능으로 이벤트를 처리합니다. jMaki Glue는 JavaScript 구성요소 간의 통신에 사용되는 강력한 기능입니다. 웹 애플리케이션에 Glue를 사용하여 위젯 간 통신을 구현할 수 있으며, 그 밖의 모든 JavaScript 구성요소에 jMaki Glue의 강력한 기능을 활용할 수 있습니다.

우선 Glue를 사용하는 간단한 예제를 하나 살펴보겠습니다. 그림 1과 같이 버튼 2개와 테이블 2개를 한 페이지에 표시하는 애플리케이션이 있다고 가정하겠습니다.

그림 1. 버튼 2개와 테이블 2개가 표시된 웹 페이지

"select row 2"라는 레이블의 첫 번째 버튼을 누르면 그림 2와 같이 두 테이블의 두 번째 행이 선택되고, "yahoo table: select row 2"라는 레이블의 두 번째 버튼을 누르면 두 번째 테이블의 두 번째 행만 선택됩니다.

그림 2. select Row 2 버튼을 클릭했을 때

이러한 상호 작용을 유발하는 코드는 다음과 같습니다.

   <a:widget name="yahoo.button"
     value="
        {label : 'select row 2',
        action : {topic : '/table/select', message: {targetId: 'bar'}}}"/>

   <a:widget name="yahoo.button"
     value="
        {label : 'select row 2 in yahoo table',
        action : {topic : '/mytable/select', message: {targetId: 'bar'}}}"/>

   <a:widget name="dojo.table"
   value="{columns : [
        { label : 'Title', id : 'title'},
        { label :'Author', id : 'author'},
        { label : 'ISBN', id : 'isbn'},
        { label : 'Description', id : 'description'}
        ],
        rows : [
        { title : 'Book Title 1',
          author : 'Author 1',
          isbn: '4412',
          description : 'A Some long description'},
        { id : 'bar',
          title: 'Book Title 2',
          author : 'Author 2',
          isbn : '4412',
          description : 'A Some long description'}
        ]
        }" />

<a:widget name="yahoo.dataTable"
   subscribe="['/table', '/mytable']"
   value="{columns : [
        { label : 'Title', id : 'title'},
        { label :'Author', id : 'author'},
        { label : 'ISBN', id : 'isbn'},
        { label : 'Description', id : 'description'}
        ],
        rows : [
        { title : 'Book Title 1',
          author : 'Author 1',
          isbn: '4412',
          description : 'A Some long description'},
        { id : 'bar',
          title: 'Book Title 2',
          author : 'Author 2',
          isbn : '4412',
          description : 'A Some long description'}
        ]
        }" />

이 코드 예제에는 네 개의 위젯을 포함하는 ajax 사용자 정의 태그가 있음에 유의하십시오. 두 개는 Yahoo 버튼 위젯용, 하나는 Dojo 테이블 위젯용, 나머지 하나는 Yahoo 테이블 위젯용입니다. 또한 두 버튼 위젯의 태그에는 다음과 같은 action 속성이 있습니다.

        action : {topic : '/table/select' ...

jMaki에서 모든 테이블 래퍼는 해당하는 특정 테이블을 지정하는 항목(예: "dojo/table")은 물론 일반 항목인 "/table"도 구독합니다. Dojo 테이블 위젯의 태그에 subscribe 속성이 포함되어 있습니다.

        subscribe="['/table', '/mytable']" ...

두 경우 모두 각 위젯은 버튼 위젯에서 게시한 항목을 구독합니다. 보다 구체적으로 설명하자면, 테이블 위젯 하나는 일반 항목("/table" 및 "/dojo/table")을 구독하고 다른 하나는 일반 항목("/table")과 해당 테이블 인스턴스의 사용자 정의 항목("/mytopic")을 구독합니다.

여기까지만 작성하면 이 위젯들이 서로 통신할 수 있게 됩니다. 사용자가 별도의 JavaScript 코드를 작성하지 않아도 jMaki Glue가 위젯 간 통신을 처리해 줍니다.

게시/구독 메커니즘

이제 Glue가 과연 무엇인지 말씀 드리겠습니다. Glue는 게시/구독 메커니즘에 기초하여 jMaki의 이벤트를 처리하는 프로그램 형식의 접근 방식입니다. 게시/구독 메커니즘은 메시지 전송 시스템에 광범위하게 사용되는 메커니즘입니다. jMaki에는 이벤트 생성자(게시자)와 이벤트 소비자(구독자)가 있습니다. 위젯은 생성자도 될 수 있고 소비자도 될 수 있습니다. 생성자 역할을 하는 위젯에서 이벤트가 발생하면 위젯은 그 이벤트의 알림 메시지를 특정 항목에 게시합니다. 여기서 항목이란 이벤트 생성자를 이벤트 소비자에게 연결시켜 연결된 생성자와 소비자가 서로 단절된 비동기 방식으로 통신할 수 있도록 하는 문자열 또는 이름을 말합니다. 특정 항목에 게시된 이벤트에 대한 알림 메시지를 받고자 하는 위젯은 해당 항목의 소비자로 등록하면 됩니다. 이를 위해서는 해당 항목을 구독해야 합니다.

jMaki의 위젯은 대부분 일종의 액션을 기준으로 이벤트를 항목에 게시합니다. 예를 들어 사용자가 테이블의 한 행을 선택하거나, 버튼을 클릭하거나, 트리 노드를 확장하면 해당 위젯이 알림 메시지, 즉 이벤트를 항목에 게시합니다. jMaki dcontainer와 같은 위젯은 이벤트 소비자로서, 이벤트 알림 메시지를 수신한 뒤 그에 따라 다른 페이지의 컨텐트를 로드하거나 테이블 행을 업데이트하거나 트리에 노드를 추가하는 등의 작업을 하게 됩니다. 이 알림 메시지에는 생산자 위젯을 나타내는 데이터와 해당 위젯의 데이터 중 소비자가 이용할 수 있는 기타 데이터가 들어 있습니다. 각 소비자는 이벤트 알림 메시지와 함께 게시된 데이터를 받게 됩니다. 모든 생산자 위젯은 이렇게 느슨한 연결 메커니즘을 사용하여 소비자 위젯(또는 소비자 위젯 그룹)에게 "이야기"할 수 있습니다.

게시/구독 사용

jMaki 게시/구독 메커니즘을 사용하는 데는 (1) 선언적 접근 방식인 액션을 이용하거나 (2) 프로그램 형식의 이벤트를 이용하는 두 가지 방식이 있습니다. 두 방식 모두 동일하게 구현되며 따라서 동일한 방식으로 작동합니다.

액션

액션이란 이벤트 생성자를 선언적 형태로 정의하는 것입니다. 이 접근 방식은 단순하거나 간단한 액션에 유용합니다. 위에서 다룬 예제를 생각해 보십시오. 사용자가 "select row 2" 버튼을 클릭하면 두 테이블 모두에서 두 번째 행이 선택되도록 해야 합니다.

여기서 버튼 위젯의 태그를 다시 보여 드리겠습니다.

   <a:widget name="yahoo.button"
     value="
        {label : 'select row 2',
        action : {topic : '/table/select', message: {targetId: 'bar'}}}"/>

이 버튼 위젯은 action 등록 정보를 사용하여 '/table' 항목에 '/select' 명령과 targetId: 'bar' 페이로드를 게시합니다.

액션 접근 방식에 대해 자세히 논의하기 전에 항목의 이름과 명령, 페이로드를 간단히 소개하겠습니다.

• 항목 이름 - 기본적으로 항목 이름은 슬래시 다음에 툴킷 이름(예: jmaki, dojo, yahoo, google), 다시 슬래시 다음에 위젯 이름(예: table, tree, accordion)으로 구성됩니다. 예를 들어, dojo 테이블 항목의 기본 이름은 "/dojo/table"이 됩니다. 위젯이 게시하는 항목의 기본 이름에 대해서는 jMaki 위젯 설명서를 참조하십시오. 그러나 사용자가 이 기본 항목 이름을 덮어쓸 수도 있습니다. 항목 이름은 문자열이므로 원하는 문자열로 설정하면 됩니다. Yahoo 버튼 위젯의 항목 이름은 "table"로 설정됩니다.
• 명령 - 많은 위젯은 이벤트 소비자이며, 따라서 이벤트 핸들러 코드가 들어 있습니다. 위젯 코드의 이벤트 핸들러는 해당 위젯에서 공통 작업을 수행합니다. 지원되는 작업 세트는 jMaki 데이터 이벤트 모델 페이지에 정의되어 있습니다. jMaki 문서에서는 이러한 작업을 명령이라고 부릅니다. 명령은 위젯 유형별로 정해져 있습니다. 명령 이름은 항목 이름 끝에 추가되며, 규칙에 따르면 항목 이름의 마지막 슬래시 뒤에 이 문자열이 와야 합니다. Yahoo 버튼 위젯에 대해 게시되는 명령은 "select"이며 이 문자열은 항목 이름인 "table" 다음의 슬래시 뒤에 옵니다.
• 페이로드 - 위젯은 항목에 게시할 때 항목 이름과 페이로드를 지정합니다. 페이로드란 위젯이 해당 항목에 게시하는 데이터를 말합니다. 예를 들어 Yahoo 버튼 위젯은 targetId: 'bar' 페이로드를 게시합니다.

   <a:widget name="yahoo.dataTable"
      subscribe="['/table', '/mytable']"
      value="{columns : [
        { label : 'Title', id : 'title'},
        { label :'Author', id : 'author'},
        { label : 'ISBN', id : 'isbn'},
        { label : 'Description', id : 'description'}
        ],
        rows : [
        { title : 'Book Title 1',
          author : 'Author 1',
          isbn: '4412',
          description : 'A Some long description'},
        { id : 'bar',
          title: 'Book Title 2',
          author : 'Author 2',
          isbn : '4412',
          description : 'A Some long description'}
        ]
       }" />

   <a:widget name="yahoo.button"
     value="
        {label : 'add row',
        action : {topic : '/mytopic'}}"/>

   jmaki.subscribe("/mytopic", function(args) {
       jmaki.log("in mytopic");
       var row = { id : 'new',
                   title : 'Book Title 3',
                   author : 'Author 3',
                   isbn : '4413',
                   description : 'A Some long description'};
       jmaki.publish("/table/addRow",{value: row});
   });

그림 3은 "add row"라는 레이블의 새 버튼을 클릭했을 때 페이지의 모습을 나타낸 그림입니다.

이벤트 체인

마지막으로 예제 하나를 더 소개합니다. 이전 예제에서 테이블에 행을 추가하는 동시에 추가된 새 행을 선택하는 버튼을 만들어 보겠습니다. 이를 위해 태그를 변경할 필요는 없습니다. 그냥 glue.js 파일의 핸들러만 업데이트하면 됩니다. 업데이트한 핸들러 코드는 다음과 같은 모양이 됩니다.

   jmaki.subscribe("/mytopic", function(args) {
       jmaki.log("in mytopic");
       var row = { id : 'new',
                   title: 'Book Title 3',
                   author : 'Author 3',
                   isbn : '4413',
                   description : 'A Some long description'};
       jmaki.publish("/table/addRow",{value: row});
       jmaki.publish("/table/select", {targetId: 'new'});
   });

이것은 jMaki에서 이벤트 체인을 만드는 예제 코드입니다. 두 이벤트의 게시, 즉 테이블에 행을 추가하도록 하는 이벤트와 추가된 행을 선택하는 이벤트를 체인으로 연결하면 됩니다.

그림 4는 행 추가 버튼을 클릭했을 때의 페이지 모양을 보여 줍니다.

그림 4와 같은 페이지를 표시하는 애플리케이션을 다운로드하여 직접 시험해 볼 수 있습니다.

추가 자료

jMaki 샘플 getwidgetdata는 jMaki에서 Glue를 사용하는 보다 완전한 예제를 담고 있습니다. 이 예제는 핸들러를 사용하여 위젯에서 데이터를 가져오는 방법과 그 데이터를 서버에 전달하여 애플리케이션의 다른 페이지에 나타나게 하는 방법을 보여 줍니다. 한편 jMaki loadtable 예제는 액션과 Glue 코드를 사용하여 테이블 위젯을 조작하는 방법을 보여 줍니다. 이들 두 예제는 독립형 번들인 jmaki-java-1.1.zip 및 jmaki-php-1.1.zip에 들어 있으며 jMaki 다운로드 페이지에서 해당 번들을 다운로드할 수 있습니다.

게시/구독 메커니즘에 대한 자세한 내용은 게시 및 구독 메커니즘을 사용한 jMaki 위젯 이벤트 처리를 참조하십시오.

또한 Fun with jMaki: Using the Yahoo Geocoder service with the Dojo Combobox 블로그에는 jMaki Glue를 컨트롤러로 사용하는 몇 가지 예제가 실려 있습니다.

저자 정보

Carla Mott는 Project jMaki 프로젝트를 돕는 사용자입니다. Carla는 이와 함께 java.net의 자바 엔터프라이즈 커뮤니티를 이끌고 있으며 오픈 소스 JavaScript 툴킷인 Dojo에도 참여하고 있습니다. 이 프로젝트에 참여하기 전에는 GlassFish 프로젝트 책임자로서 썬 애플리케이션 서버의 오픈 소스 작업을 담당하고 GlassFish 커뮤니티 구축을 도왔습니다.


이 글의 영문 원본은
Working with jMaki Events
에서 보실 수 있습니다.