RIA
Web2hub wiki
목차 |
What is RIA?
Rich Internet Applications (RIA) are a cross between web applications and traditional desktop applications, transferring some of the processing to the client end. --Rich Internet Application
웹 애플리케이션과 그 한계
Rich Internet Application (RIA)에 대해 이야기하기 앞서, 우리가 흔히 쓰는 MS사의 오피스 프로그램 (애플리케이션)부터 시작해 보자. 오피스를 쓰기 위해서는 먼저 윈도우 위에 설치해야 하며, 항상 윈도우 위에서 실행시켜야 한다. 만약 여러분의 컴퓨터에 윈도우가 설치되어 있지 않다면? 윈도우부터 설치해야 한다!
이러한 불편함을 싫어하는 사람들에게 특별한 설치 없이 웹 위에서 실행되는 웹 애플리케이션이 각광을 받고 있다. 웹 애플리케이션은 보통 웹 브라우저 안에서 실행되며 일련의 웹 페이지들을 통해 사용자에게 상호 작용적인(interactive) 경험을 제공해 준다.
그러나 웹 애플리케이션이 데스크톱 애플리케이션 (오피스와 같은)에 비해 편리한 면도 있지만, 부족한 부분도 많다. 먼저, 기존 웹 애플리케이션에서는 모든 대화(interaction)가 서버를 통해 이루어 지므로, 사용자의 모든 명령(action)에 대해서 데스크톱 애플리케이션만큼 빠르게 처리하지 못하였다. 또한 서버와 데이터를 주고 받는 동안에도 사용자는 다른 작업을 계속하지 못하며 단지 결과가 올 때까지 기다려야 했다. (기존 웹 애플리케이션에서 메뉴의 한 항목을 선택하면, 여러분은 단지 진행중이라는 표시와 모래시계만 바라봐야 한다. -> 실제 예제로 교체) 이러한 지연은 사용자의 작업 집중력을 떨어뜨리며 짜증나게 만든다.
기존 웹 애플리케이션의 또 다른 부족한 점으로 빈약한 사용자 인터페이스 표현력이다. 스크린 위에 그림을 그리는 것과 같은 그래픽 처리 기능이나 drag and drop과 같은 기능들이 데스크톱 애플리케이션에 비해 잘 지원되지 않거나 쓰기에 편리하지 않았다. 이러한 빈약한 사용자 인터페이스 표현력은 웹 애플리케이션 개발자나 사용자에게 있어 아쉬운 면이었다.
Rich Internet Application (RIA)
앞에서 언급한 기존 웹 애플리케이션의 부족한 부분들을 매운 웹 애플리케이션이 Rich Internet Application (RIA)이다. 따라서 RIA를 정의해 보면, 웹 위에서 실행되며 사용자에게 더욱 풍부한 그리고 더욱 데스크톱 같은 경험을 제공해 주는 애플리케이션 이라 할 수 있다. 정의가 와 닿는가? RIA의 예제를 통해 그 특성에 대해 좀 더 살펴보자.
네이버(www.naver.com)에 가보자. 검색란에 글자를 치는 순간 (그림 1)과 같이 검색어 자동완성이 뜨며, 글자를 쳐갈수록 자동완성의 목록이 달라지는 것을 볼 수 있다. 자동완성의 목록이 달라진다는 것은 여러분의 입력에 맞춰 서버와 계속 통신한다고 볼 수 있다. 중요한 것은 서버와 통신하는 동안에도 여러분은 계속 글자를 칠 수 있고 자동완성 목록에서 하나를 선택할 수 있다는 것이다. 즉, 여러분의 검색 활동이 서버와의 통신에 의해 방해 받지 않는다.
이제 이런 RIA의 특성들을 가능하게 해준 기술들로 무엇이 있는지 살펴볼 차례이다.
RIA techniques
여기서는 RIA 기술들로 어떠한 것들이 있는지 살펴보고 각 기술들에 대해 개괄적으로 살펴본다. 각각의 RIA 기술들은 개별적인 특징을 가지며, 그 기술을 사용할 수 있는 환경 또한 가지각색이다. 따라서 각 기술들의 특징을 잘 인지하여 적절하게 사용할 수 있는 능력이 성공적인 RIA를 만드는 중요 요소이다.
우리는 각 RIA 기술들이 작동하는 기반을 중심으로 다음과 같이 분류하여 설명을 시작하려 한다.
Browser 기반의 기술들
AJAX (Asynchronous Javascript And XML)
Ajax(Asynchronous JavaScript And XML)의 주요 철학은 기존 웹 애플리케이션에서 모든 계산이 서버에서 이루어지고 사용자 브라우저는 결과 HTML 페이지만 보여준 것과는 달리 상당량의 계산을 사용자 브라우저로 옮겨오자는 것이다. 많은 계산이 브라우저에서 일어남으로 인해 사용자는 데스크톱 애플리케이션과 비슷한 상호 작용성(interactivity)을 느낄 수 있다. "Ajax in Action"에서 나온 "The browser hosts an application, not content" 라는 말도 이것과 상통하는 것이라 볼 수 있다. (그림 4)는 기존 웹 애플리케이션 모델과 Ajax 애플리케이션 모델이 어떻게 다른지 보여준다.
기존 웹 애플리케이션 모델에서는 사용자가 일련의 웹 페이지를 통해 애플리케이션과 대화를 하고 각 웹 페이지를 얻기 위해서는 항상 서버와 통신해야 했다. 그러나 Ajax 애플리케이션 모델에서는 사용자가 로그인 했을 때 클라이언트 애플리케이션이 브라우저에게 전달된다. 이 애플리케이션이 사용자와 대화하며, 서버의 데이터가 필요한 경우 사용자 모르게 서버와 통신하여 필요한 데이터를 받아오는 것이다. 따라서 시간에 따라 서버에서 받아오는 데이터도 달라지게 되는데 (그림 5)는 그러한 것을 보여준다.
(AJAX 설명은 아직 미완성입니다. 꾸벅;)
XUL (eXtensible User interface Language)
XUL (eXtensible User interface Language) (보통 '줄'이라 발음한다) 은 Mozilla 응용프로그램들 (예를 들어, Firefox나 Thunderbird)을 지원하기 위해 개발된 사용자 인터페이스 마크업 (markup) 언어이다 [1]. 이름에서 알 수 있듯이 XML의 한 응용사례로 비주얼 컴포넌트들을 묘사하는 XML 태크들로 이루어져 있다. 최신 Netscape/Mozilla 브라우저의 비주얼 컴포넌트들은 XUL 언어로 정의되어 있으며 브라우저의 렌더링 엔진인 Gecko를 통해 파싱되어 사용자 인터페이스로 보여진다.
일단 텍스트 편집기를 열어 다음 예제를 직접 작성하면서 XUL를 향한 첫 걸음을 디뎌보자.
<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
<window id="findfile-window"
orient="horizontal"
align="start"
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<button id="find-button" label="Find"/>
<button id="cancel-button" label="Cancel"/>
</window>
다 작성하였으면 확장자를 xul로 하여 저장한 뒤, Mozilla 계열의 브라우저 (Mozilla, Firefox) 로 열어보자. (그림 1)처럼 두개의 버튼이 나타날 것이다. 여러분은 방금 아주 간단하게 버튼 두 개를 만들었다. 즉, 앞서 입력한 'button' 태그들이 각각 비주얼한 버튼 (사용자 인터페이스) 으로 나타난 것이다. 버튼 외에도 많은 인터페이스들이 XUL로 표현될 수 있는데 예를 들면 다음과 같다. (XUL이 표현할 수 있는 인터페이스 (엘리먼트)들에 대해서는 XUL에 대한 위키 페이지에서 상세히 다룰 예정이다.)
* 텍스트 박스나 체크 박스와 같은 입력 인터페이스 * 버튼 등을 포함하고 있는 툴바 * 메뉴 바 위의 메뉴 또는 팝업 메뉴 * 다이얼로그 창 * 계층적 또는 테이블 형태의 정보 표현을 위한 트리 * 키보드 단축키
XUL이 발전할수록, 다양한 기술들이 XUL의 특징들을 보완하기 위해 가미되었다. XUL 엘리먼트의 스타일을 묘사하기 위해 Cascading Style Sheets (CSS)가 사용되며, 이벤트 처리를 위해 JavaScript가 사용되고 있다. 또한, XUL 엘리먼트의 확장 및 수정을 용이하게 해주는 eXtensible Binding Language (XBL)가 활용되고 있다. XUL은 HTML처럼 원격 사이트나 로컬 파일 시스템에서 로드될 수 있고, chrome URL을 사용하여 패키지 형태로도 로드될 수 있다. 이 외에도 (그림2)에 있는 여러 기술들이 XUL에서 사용되고 있다.
그럼, 각 기술들이 XUL과 어떻게 연관되는지를 살펴보면서 XUL에 대해 좀 더 다가가 보자.
1. XUL은 XML이다.
XUL은 XML 어휘로 XML의 규칙들을 따르므로, 기본적으로 XUL 다큐먼트는 아래와 같은 구조를 가진다.
<?xml version="1.0"?>
<?xml-stylesheet href="chrome://navigator/skin/" type="text/css"?>
<window id="main-window"
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
</window>
(코드 2)
여기서 언급해야 할 XUL 다큐먼트의 특징은 다음과 같다.
* 모든 XML의 문서와 마찬가지로, 첫 줄에 XML 선언이 있다. * 네임스페이스는 http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul 이다. * XUL 다큐먼트의 루트 엘리먼트 (element) 는 항상 <window> 태크이다.
2. XUL은 Cascading Style Sheets를 사용한다.
HTML과 마찬가지로, XUL은 각 element에 스타일을 적용시키기 위해 Cascading Style Sheets (CSS)를 사용한다. 사용 방법은 (코드 2)의 두번째 줄처럼 외부 스타일 시트를 참고하거나, 다음과 같이 개별 XUL 엘리먼트의 style 속성을 사용하는 것이다.
<button id="okbutton" style="background-color: green;" label="OK"/>
3. XUL은 "Well-Formed" HTML을 사용한다.
하나의 XUL 인터페이스 안에서 HTML 엘리먼트가 XUL 엘리먼트와 섞여 사용될 수 있다. 이 때 XUL이 XML이므로 HTML 엘리먼트는 "well-formedness"에 대한 XML 명세서를 지켜야 한다. XUL 다큐먼트에 HTML 엘리먼트를 넣고 싶으면, 먼저 루트 엘리먼트 (window 태그) 선언부에 HTML 네임스페이스를 선언하자. 그리고 나서 넣고자 하는 HTML 엘리먼트가 그 네임스페이스를 참고하게 하자. 아래 코드를 보면 무슨 말인지 알 것이다.
<?xml version="1.0"?>
<window id="example-window"
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
xmlns:html="http://www.w3.org/1999/xhtml">
<html:p>
Search for:
<html:input id="find-text"/>
<button id="okbutton" label="OK"/>
</html:p>
</window>
4. XUL은 JavaScript를 사용한다.
XUL 사용자 인터페이스의 이벤트 핸들링을 위해 JavaScript를 이용한다. HTML에서와 마찬가지로 <script src=""> 태그를 통해 XUL 파일 안에 스크립트를 포함시킬 수 있다.
in pressButton.js
function pressed() {
alert('Button was pressed!');
}
in example.xul
<?xml version="1.0"?> <window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <script src="pressButton.js"/> <button label="press" oncommand="pressed();"/> </window>
5. XBL은 XUL 엘리먼트들을 확장시킨다.
XBL (eXtensible Bindings Language)은 XUL 엘리먼트에 대해 "바인딩 (binding)"을 정의하기 위한 XML 언어이다. XBL 바인딩이 적용된 XUL 엘리먼트는 바인딩에 정의된 여러 성질들을 가짐으로써 확장된다 (또는 수정된다). 즉, XBL은 XUL 엘리먼트의 기능 (엘리먼트가 어떻게 작동할 것인가)을 수정할 방법을 제공해 주기에 XUL의 한 기반 기술이 된다. XBL 바인딩에 정의될 수 있는 성질들로는 다음과 같은 것들이 있다. 1. 컨텐트 <content>: 바인딩이 적용될 엘리먼트에 추가될 자식 엘리먼트 1. 성질 <property>: 엘리먼트에 추가될 성질들 1. 메소드 <method>: 엘리먼트에 추가될 메소드들 1. 이벤트 <handlers>: 엘리먼트가 대답할 이벤트들과 그 처리 XBL 파일은 여러 바인딩을 포함하고 있으며, 아래와 같은 기본 골격을 가진다.
<?xml version="1.0"?> <bindings xmlns="http://www.mozilla.org/xbl"> <binding id="binding1"> </binding> <binding id="binding2"> </binding> </bindings>
<bindings> 엘리먼트는 XBL 파일의 루트 엘리먼트이고 하나 이상의 <binding> 엘리먼트를 포함하고 있다. 각 <binding> 엘리먼트는 하나의 바인딩을 정의한다. 하나의 바인딩은 CSS의 -moz-binding을 "{binding 파일의 URL}#{binding ID}"로 설정함으로써 XUL 엘리먼트에 적용될 수 있다. 예를 들면, scrollbar { -moz-binding: url('chrome://findfile/content/findfile.xml#binding1'); }
자 그럼, 다음 예제를 통해 <box> XUL 엘리먼트를 XBL를 통해 확장시켜 보자. XUL (example.xul): <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <?xml-stylesheet href="chrome://example/skin/example.css" type="text/css"?> <window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <box class="okcancelbuttons"/> </window> CSS (example.css): box.okcancelbuttons { -moz-binding: url('chrome://example/skin/example.xml#okcancel'); } XBL (example.xml): <?xml version="1.0"?> <bindings xmlns="http://www.mozilla.org/xbl" xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <binding id="okcancel"> <content> <xul:button label="OK"/> <xul:button label="Cancel"/> </content> </binding> </bindings> 이 예제는 okcancelbuttons 클래스를 가진 박스를 하나 만든다. 파일에 연결된 스타일시트에는 okcancelbuttons 클래스를 가진 박스는 okcancel이라는 바인딩을 가진다고 정의되어 있다. okcancel 바인딩에는 엘리먼트에 버튼을 두개 추가하라는 컨텐트(<content>)가 정의되어 있으므로, 박스 안에는 OK와 Cancel이라는 두 개의 버튼이 추가되었다.
SVG (Scalable Vector Graphics)
SVG (Scalable Vector Graphics)는 정적 또는 동적인 2차원 그래픽을 표현하기 위해 XML 기반으로 만들어진 언어로서 W3C (World Wide Web Consortium)에 의해 제안된 XML 그래픽 표준이다. XML 기반이라는 말에 이미 알아겠지만 SVG는 텍스트로 기술되는 그래픽이다. 그래픽 툴 없이 메모장 하나만으로도 그림을 그릴 수 있다. 따라서 검색 엔진을 이용하여 그래픽을 텍스트처럼 검색할 수 있으며, 다른 응용 프로그램에서도 SVG를 쉽게 사용할 수 있다. 또한, XML의 개방성, 상호운용성을 모두 수용하므로, 다양한 플랫폼에서 고품질의 그래픽을 구현할 수 있다. SVG는 3가지 타입의 그래픽 객체 - 벡터 그래픽 도형, 이미지, 텍스트 를 허용한다. SVG 그래픽 객체들은 스타일, 변환, 그룹화 등 다양한 효과들이 적용될 수 있으며 SVG의 다른 웹 표준 ([Web Standard])과의 호환성으로 인해 동적이면서 인터액티브한 그래픽 객체가 될 수 있다. 이러한 SVG의 특징을 잘 보여주는 예제로 SVG로 구현된 테트리스 게임이 있다. SVG를 지원하는 브라우저 (예를 들면, Mozilla Firefox)로 [http: //www.croczilla.com/svg/samples/svgtetris/svgtetris.svg]을 열어보자.
자 그럼, SVG로 스마일 마크를 직접 그려보면서 SVG의 기본적인 것들을 살펴보자.
1. SVG 문서 구조
SVG문서는 다음과 같은 기본 구조를 가진다. <?xml version="1.0"?> <svg version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="140" height="170"> </svg> * SVG 문서는 XML선언으로 시작한다. 예전에는 DOCTYPE을 선언하였으나, 점차 DOCTYPE 대신에 <svg> 루트 엘리먼트에 버전과 프로파일을 선언하는 것으로 대체되고 있다. * 루트 엘리먼트는 <svg>이며, 여기서 SVG 버전과 프로파일 및 네임스페이스를 선언한다. 그 외에 다큐먼트 속성, 위 예제의 다큐먼트 너비와 높이 (픽셀 단위)와 같은, 을 정의한다.
2. 기본 도형
자 그럼, 스마일 마크의 얼굴을 만드는 것으로 시작해 보자. 편집기를 하나 열어 아래 코드을 입력하고 확장자를 .svg로 하여 저장한 뒤 SVG를 지원하는 브라우저로 열어보자. <?xml version="1.0"?> <svg version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="140" height="170"> <circle cx="70" cy="95" r="50" style="stroke: black; fill:yellow"/> <ellipse cx="60" cy="80" rx="5" ry="7" fill="black"/> <ellipse cx="80" cy="80" rx="5" ry="7" fill="black"/> </svg> 눈이 두 개 있는 노란 원이 하나 그려져 있을 것이다. 위 예제에서 추가한 <circle> 엘리먼트가 원으로, <ellipse> 엘리먼트가 타원으로 각각 그려진 것이다. <circle> 엘리먼트를 선언할 때 정의된 속성을 보면, cx와 cy는 각각 중심점의 x좌표와 y좌표이고 r은 반지름이다. 그리고 style 속성을 통해 원이 어떤 스타일로 그려질지 정했다. style 속성 대신에 <ellipse> 엘리먼트에서처럼 개별적 속성으로도 정의할 수 있다. 원, 타원 외에도 선, 다각형들이 모두 표현될 수 있는데 자세한 것은 참고 링크에 있는 튜토리얼들을 참고하길 바란다.
3. Path
모든 기본 도형은 <path> 엘리먼트의 단축형이라 볼 수 있다. <path> 엘리먼트는 경로 (일련의 직선과 곡선)를 명시하면 그대로 그려진다. <path> 엘리먼트로 스마일 마크의 입을 그려보자. <path d="M 35 100 A 25 20 0 0 0 105 100" style="stroke: black; fill: none"/> 위의 코드를 <ellipse> 엘리먼트 아래에 정의한 뒤, 브라우저로 보면 스마일 마크의 입이 생긴 것을 볼 수 있다. <path> 엘리먼트의 d 속성은 다음과 같이 번역할 수 있다. "(35, 100)으로 이동(Move)한 뒤, x-반지름이 25, y-반지름이 20이고 끝점이 (105,100)인 호(Arc)를 그려라."
4. 텍스트
<text> 엘리먼트를 통해 텍스트를 추가할 수 있다. 위에서 정의한 <path> 엘리먼트 아래에 다음 코드를 추가한 뒤 브라우저로 확인해 보자. <text x="50" y="165" style="font-family: tahoma; font-size: 12pt; stroke: none; fill: black;">Smile~</text> 최종적으로 다음과 같은 그림이 나오면 잘 해온 것이다.
XAML (eXtensible Application Markup Language)
XAML(ZAML로 읽힌다.)은 Microsoft가 만든 XML기반의 Markup language이다. XAML은 XML을 사용하여 object model을 기술한다. XAML은 Microsoft의 Windows Presentation Foundation(WPF)와 결합되어 차세대 그래픽과 인터넷 서비스 기술인 WinFX의 중요한 부분이다.
XAML file format을 이용하면, HTML, Flash 또는 PDF같은 여러 언어를 지원할 필요가 없다. XML과 WPF의 결합은 2D, 3D 이미지, 애니메이션, 오디오, 비디오 등의 문서를 가능케 한다. XML과 WPF는 빠르고 효율적으로 2D, 3D vector 기반의 application과 web user interface를 지원한다. XAML file format은 web site 개발과 .NET application에 사용이 가능하다.
XAML은 개발자나 디자이너가 짧은 라인수의 문법으로 UI개발의 모든 것을 가능케 한다.
그렇다면 XAML의 사용법을 알아보자.
<FlowPanel xmlns="http://schemas.microsoft.com/2003/xaml">
<Text>Hello World</Text>
<Button>Click me!</Button>
</FlowPanel>
앞의 예제는 text element와 button element를 FlowPanel을 통해 보여주는 예제이다. 이들 object들은 WinFX에 모두 정의되어있다. 또한 이러한 object들은 property들은 갖는게 가능하다. 다음과 같이 button의 배경색을 빨간색으로 수정할 수 있다.
<Button Background="Red">Click me!</Button>
모든 property들이 string만으로 표시되는게 아니라 nested object로도 표현이 가능하다. 이런 문법은 complex property라고 불린다.
<Button>
<Button.Background>
<LinearGradientBrush>
<LinearGradientBrush.GradientStops>
<GradientStopCollection>
<GradientStop Color="Red" Offset="0" />
<GradientStop Color="Magenta" Offset="0.25"/>
<GradientStop Color="Blue" Offset="0.5"/>
<GradientStop Color="White" Offset="1"/>
</GradientStopCollection>
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
</Button.Background>
Click me!
</Button>
앞에 보여진 것처럼 정의된 XML파일들은 통해 XAML compiler는 class를 생성한다.. class들은 XAML파일의 root element의 type들을 상속하여 child element의 code들을 생성한다. 그러나 이렇게 생성된 code들은 기능적인 UI를 만들기엔 충분하지 않다. 따라서 XAML에는 사용자가 직접 code를 넣을 수 있게 되어있다. Definition namespace의 <p>Macromedia Flex는 2004년 3월에 application server로 처음에 공개되었다. Flex는 Flex Mark-Up Language (MXML)과 ActionScript를 Flash application (binary SWF file)로 실행 중에 compile하는 J2EE application이나 JSP tag library이다.
Flex의 목표는 web application 개발자가 빠르고 쉽게 Rich Internet Application을 만들 수 있게 하는 데에 있다. Multi-tiered model에서 Flex application은 Presentation Tier를 담당한다. 이런 application은 Macromedia Flash MX를 통해 이루어지고 있다. 이런 Flash를 지렛대로 삼아 Flex는 개발자들이 MXML로 불리는 XML기반의 language를 이용해 rich UI는 Flash에 맡기고, business logic에만 집중할 수 있게 해준다. Flex는 web service, remote object, drag and drop, sortable columns, charting/graphing 들을 다양한 component로 지원한다.
Flex는 enterprise급을 위해 만들어져 CPU당 15000불의 가격이다. 각 license는 5개의 Flex Builder license를 포함하고 있다. 현재 Flex builder는 Dreamweaver MX2004를 기반으로 만들어 졌다. Flex 2에서는 licensing model이 바뀌어서, Flex builder를 license당 1000불이다. 새로운 Flex builder는 Eclpise IDE기반이다. Enterprise server는 data push나 automated testing같은 고급 기능을 가능케 한다. Flex 2는 ActionScript3를 지원하고 Flash Player 8.5를 필요로 한다.
Flex의 한계는 Macromedia Flash player의 결과의 한계에 있다. 따라서 어떤 business logic은 client에서 실행을 위해 많은 CPU power를 필요로 한다. CPU utilization은 Flash player가 향상되면서 나아지고 있지만 아직도 문제가 되고 있다.
Flex의 대안은 open source project인 OpenLaszlo platform이다. Ajax application 또한 Flex와 경쟁하고 있다.
Flex의 개발에 대해서 알아보고 싶다면 Macromedia Flex Developer Center에서 tutorial을 제공하고 있다.
그렇다면 Flex에서 쓰이는 MXML(Macromedia Flex Markup Language)에 대해서 알아보자.
Flex language는 markup language와 object-oriented programming language라는 두 가지 인기있는 개발 패러다임을 따른다. Markup language는 쉽게 application의 user interface를 만들 수 있다. MXML은 HTML보다 더 구조적이고 덜 모호만 문법을 갖고 있다. MXML은 또한 HTML보다 풍부한 tag들을 갖고 있다. 또한 MXML tag들은 사용자의 component을 통해 확장이 가능하다.
Programmatic logic을 구현하기 위해 markup language는 적당하지 않으므로 flex에서는 ActionScript programming langue를 이용하여 event를 handling하는 code를 추가할 수 있다. ActionScript는 ECMA-262 표준에 기반한 Java나 C#같은 언어와 비슷하게 쓸 수 있는 object-oriented language이다.
다음 예제는 간단한 Flex application의 소스코드이다. Application은 두개의 TextInput component를 갖고 있다. Copy를 클릭하면, source TextInput의 내용은 destination TextInput에 나타난다. 이 예제는 MXML과 ActionScript를 통해 application을 만드는 것을 보여준다. MXML을 사용하여 user interface를 정의하고 copy logic은 Button component에 있는 click event handler안의 ActionScript에 기술된다.
<p>야후 위젯 엔진 (이전에는 콘파뷸레이터(Konfabulator)로 알려진, [1])은 MS 윈도우와 MAC OS X 위에서 자바스크립트를 기반으로 하는 런타임 엔진으로, 위젯(Widget)이라 불리는 작은 소프트웨어들을 실행할 수 있도록 해준다. 위젯으로는 아날로그 시계, 계산기, 날씨를 표시해 주는 위젯, CPU 및 메모리 사용량을 표시해 주는 위젯, 주식 정보를 보여 주는 위젯 등 다양한 종류가 존재할 수 있다. 이러한 각종 정보를 화려한 그래픽으로 표시해주기 때문에 처음 보는 순간 그 매력에 빠지게 된다.</p>
<p>야후 위젯의 유용성과 화려함 외에 중요한 것은 그것의 형식(format)이 오픈되어 있고 배우기 쉽기 때문에 스스로 새로운 위젯을 만드는 것이 쉽다는 것이다. 따라서 원하는 스타일을 가진 그리고 자신이 원하는 정보를 가져오는 위젯들로 데스크탑을 꾸밀 수 있다. 자, 그럼 새로운 위젯을 만드는 것이 정말 쉬운지 예제를 직접 해보면서 판단해보자.</p>
<p>아래 예제는 야후 위젯에서 제공하고 있는 레퍼런스 문서에 있는 예제로 사용자가 "Click Here"를 누를 때마다 이미지의 불투명도가 10%로 감소하는 예제이다. 다른 위젯들에 비해 유용성이 형편없지만 위젯의 몇 가지 특징을 보이기 위한 간단한 예제로 생각하자. 간단한 편집기로 작성한 다음, FirstWidget.kon으로 저장한 후 야후 위젯 엔진으로 열어보자. 열기 전에 예제에서 'Sun.png' 그림 파일을 이용하니 FirstWidget.kon 파일이 위치한 폴더에 그림 파일을 같이 놓자. ('Sun.png'는 한 예제이다. 아무 그림 파일을 사용해도 된다.)</p>
<p>야후 위젯 엔진은 위젯을 정의하기 위해 XML를 사용한다. XML로 정의된 위젯의 구조 및 동작은 KON 파일로 저장되어 하나의 위젯이 된다. 이 KON 파일은 위젯에서 사용되는 그림 파일 등 리소스 파일과 함께 .widget이라는 확장자로 압축되어 배포된다.</p>
<p>위젯을 작성할 때 기본적으로 알아야 하는 기본적인 키워드는 <window>와 같은 위젯의 윈도우를 정의하는 엘리먼트이다. 이러한 기본 키워드들로는 <about-box>, <action>, <hotkey>, <image>, <preference>, <text>, <textarea> 등과 같은 위젯 XML의 엘리먼트들이 있다. 위젯의 개발은 기본 엘리먼트들을 어떠한 방식으로 활용하는가에 달려 있다. 위젯의 개발은 이러한 기본 구조만 알면 좀 더 가깝게 접근할 수 있다.</p>
<p>야후 위젯 엔진(콘파뷸레이터)과 비슷한 것으로 애플에서 나온 Dashboard가 있다. Mac OS 위에서만 돌아가서 Mac OS를 쓰지 않는 한 접하기가 어렵지만, 기본적으로 야후 위젯 엔진과 마찬가지로 위젯을 돌리기 위한 홈 역할을 하는 녀석이다. 위젯은 야후 위젯 엔진에서 설명하였듯이 어떤 특정 기능을 하는 작은 애플리케이션인데, 애플 Dashboard 설명서에 위젯을 그 성질에 따라 잘 분류해 놓았기에 인용하면 다음과 같다.</p>
<p>Dashboard 위젯의 구성물은 야후 위젯과는 조금 다른데, 대표적인 게 야후 위젯에서는 위젯의 구조와 동작을 .kon 파일안에 XML로 정의하였지만, Dashboard에서는 .html 파일안에 HTML로 정의된다. 그 외에 Dashboard 위젯은 다음과 같이 구성된다.
이 모든 것이 .wdgt 확장자를 가진 파일 안에 묶여진다.</p>
1. [2]
2. Essential XUL Programming, John Wiley & Sons.
3. Pike's SVG Tutorial-->
4. Yahoo! Widget Engine 3.0 Reference Manual
5. 마이크로 소프트웨어 2006년 1월호 '콘파뷸레이터를 이용한 위젯 프로그래밍' element를 통해 element에 직접적으로 code를 넣을 수 있다. 다음은 code를 넣은 예이다.
<FlowPanel xmlns="http://schemas.microsoft.com/2003/xaml"
xmlns:def="Definition">
<Text>Hello World</Text>
<Button>Click me!</Button>
<def:Code>
<![CDATA[
// Will be added to generated source file
public string Hello()
{
return "Hello!";
}
]]>
</def:Code>
</FlowPanel>
XAML page에서 code를 넣는 중요한 이유는 event를 handling하기 위해서이다. 다음과 같은 형식으로 event와 함수를 연결 시킬 수 있다.
<Button Click="OnClick">Click me!</Button>
관련링크
개발과정 동영상
Inside XAML
www.xaml.net</p>
Plugin 기반의 기술들
Macromedia Flex
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.macromedia.com/2003/mxml">
<mx:TextInput id="source" width="100"/>
<mx:Button label="Copy" click="destination.text=source.text"/>
<mx:TextInput id="destination" width="100"/>
</mx:Application>
관련링크
위키피디아:Macromedia Flex
위키피디아:OpenLaszlo
macromedia:MXML</p>
Web Desktop 기반의 기술들
Yahoo! Widget
<?xml version=1.0 encoding="utf-8"?>
<widget>
<window title="Sample Yahoo! Widget">
<name>main_window</name>
<width>500</width>
<height>500</height>
<image src="Sun.png" name="sun1">
<hOffset>250</hOffset>
<vOffset>250</vOffset>
<alignment>center</alignment>
</image>
<text data="Click Here" size="36" style="bold">
<name>text1</name>
<hOffset>250</hOffset>
<vOffset>100</vOffset>
<alignment>center</alignment>
<onMouseUp>
sun1.opacity = (sun1.opacity / 100) * 90;
</onMouseUp>
</text>
</window>
</widget>
Apple Dashboard
Google Desktop
Personalized Google
Microsoft live.com/start.com
전통적인 기술들
Macromedia Flash
Java Applets
Comparison of RIA techniques
참고 자료
