Laurence Moroney
2006년 12월
적용 대상: "WPF/E"(코드 이름) Microsoft Visual Studio 2005
요약: 이 백서에서는 "WPF/E"에 대한 간략한 개요와 이 기술을 차세대 웹 응용 프로그램 개발 스택에 적용하는 방법에 대해 살펴봅니다.
목차
"WPF/E"란?
"WPF/E"는 다양한 플랫폼에서 실행되도록 개발된 새로운 웹 프레젠테이션 기술의 코드 이름입니다. 이 기술을 사용하면 여러 장치와 데스크톱 운영 체제(예: Apple Macintosh)의 브라우저 화면에서 실행 가능한 화사하고 멋진 대화식 환경을 만들 수 있습니다. Microsoft .NET Framework 3.0(Windows 프로그래밍 인프라)의 프레젠테이션 기술인 WPF(Windows 프레젠테이션 파운데이션)와 마찬가지로 "WPF/E"의 프레젠테이션 기능은 XAML(eXtensible Application Markup Language)을 토대로 합니다.
이 백서는 "WPF/E"의 기본적인 내용, 그리고 Microsoft Expression Graphic Designer, Microsoft Visual Studio 2005를 비롯한 Microsoft 도구와 XAML을 사용하여 멋진 그래픽으로 장식된 사이트를 만드는 방법을 단계별로 안내합니다. 먼저 "WPF/E"의 발전 배경에 대한 기본적인 내용과 개발 영역에서 "WPE/E"의 위치에 대해 살펴보겠습니다.
웹 개발의 진화: 차세대 웹으로
CERN의 Tim Berners-Lee가 처음 웹을 만들었을 당시 웹은 네트워크 기반 시스템에서 정적 문서를 저장하고 연결하기 위한 시스템이었습니다. 시간이 지나면서 혁신이 이루어지고, 웹은 자연스럽게 "동적" 문서 단계로 발전했습니다. 동적 문서는 특정 시간 또는 사용자 정보에 따라 요청된 시점에 생성됩니다. CGI와 같은 기술이 이러한 개념을 채용했습니다. 이후 웹에서 문서를 생성할 수 있는 기능이 가장 중요한 요소로 부각되었으며 CGI, Java, ASP, 그리고 ASP.NET을 통해 기술 진화가 이루어졌습니다.
ASP.NET은 개발자가 서버 개발 패러다임과 Visual Studio 제품군의 분야별 최고급 도구를 사용하여 고품질 웹 응용 프로그램을 신속하게 개발할 수 있는 능력을 갖추는 데 있어 일대 전기가 되었습니다.
웹 응용 프로그램의 커다란 장벽은 사용자 환경이었습니다. 웹 응용 프로그램은 기술적인 제약으로 인해 로컬 데이터를 사용하는 클라이언트 응용 프로그램이 제공하는 것과 동일한 수준의 풍부한 사용자 환경을 제공하지 못했습니다.
Microsoft가 2000년 Internet Explorer 5의 일부로 발표한 XMLHttpRequest 개체는 AJAX(Asynchronous JavaScript and XML) 기술의 바탕이 되었습니다. AJAX 기술을 사용하면 웹 응용 프로그램에서 전체 콘텐츠를 다시 로드할 필요 없이 웹 페이지의 일부만 새로 고침으로써 사용자 입력에 대해 보다 동적인 반응을 제공할 수 있습니다. Windows Live Local 지도와 같은 AJAX 기반의 혁신적인 솔루션은 웹 응용 프로그램이 클라이언트와 유사한 사용자 환경을 제공할 수 있도록 한 단계 더 발전시켰습니다.
"WPF/E"는 응용 프로그램 개발자와 디자이너가 고객에게 제공할 수 있는 풍부한 사용자 환경의 다음 발전 단계입니다. 이러한 발전이 가능한 것은 "WPF/E"를 통해 디자이너가 창의력을 발휘하고 웹에서 바로 사용 가능한 형식으로 작업을 저장할 수 있기 때문입니다. 과거의 경우 디자이너가 풍부한 출력을 제공하는 도구를 사용하여 웹 사이트와 사용자 환경을 디자인한다 해도 개발자가 이를 구현하는 과정에서 웹 플랫폼의 제약을 받아야 했습니다. "WPF/E" 모델에서는 디자이너가 원하는 사용자 환경을 만든 다음 XAML로 이를 표현할 수 있으며 개발자는 "WPF/E" 런타임을 사용하여 이 XAML을 바로 웹 페이지로 만들 수 있습니다. 따라서 디자이너와 개발자는 이전보다 훨씬 더 긴밀하게 협력하여 풍부한 클라이언트 사용자 환경을 제공할 수 있게 됩니다.
XAML은 텍스트 기반인 XML이기 때문에 방화벽 환경에서도 편리하게 사용할 수 있고 풍부한 콘텐츠를 나중에 쉽게 확인할 수 있는 형태로 기술할 수 있습니다. DHTML/CSS/JavaScript보다 더 풍부한 콘텐츠를 제공할 수 있는 Java Applet, ActiveX, Flash와 같은 다른 기술도 있지만 이러한 기술은 모두 브라우저로 이진 콘텐츠를 전송하므로 보안 감사가 어려우며 당연히 업데이트도 어렵습니다. 변경 사항이 있으면 전체 응용 프로그램을 다시 설치해야 하는데, 이는 결코 사용자 친화적인 환경이 아니며 페이지 정체로 이어질 수도 있습니다. "WPF/E"를 사용하면 콘텐츠를 변경해야 하는 경우 서버 쪽에서 새 XAML 파일이 생성됩니다. 브라우저가 해당 페이지를 다음 번 방문할 때 이 XAML이 다운로드되어 아무런 재설치 작업 없이 환경이 업데이트됩니다.
"WPF/E"의 핵심은 XAML을 렌더링하고 브라우저 화면에 결과 그래픽을 그리는 브라우저 향상 모듈입니다. 이 모듈은 다운로드 크기가 작고(2MB 미만) 사용자가 "WPF/E" 콘텐츠를 포함하는 사이트를 방문할 때 설치할 수 있습니다. 이 모듈은 JavaScript 개발자에게 XAML 페이지의 기본 프레임워크를 제공합니다. 따라서 페이지 수준에서 콘텐츠와의 상호 작용이 가능하고, 개발자는 JavaScript 코드를 사용하여 이벤트 핸들러를 작성하거나 XAML 페이지 콘텐츠를 조작하는 등의 작업을 할 수 있습니다.
이론은 이것으로 마치고 이제 실습을 통해 첫 "WPF/E" 프로젝트를 만들어 살펴보겠습니다.
간단한 "WPF/E" 응용 프로그램 만들기
XAML을 사용하여 매우 간단한 "WPF/E"용 그래픽을 만들기 위해 Microsoft Expression Graphic Designer부터 살펴보겠습니다. 그림 1은 이 제품을 실행 중인 화면입니다.
.gif)
그림 1. Expression Graphic Designer 도구
Expression Graphic Designer는 Microsoft의 새로운 도구로, 벡터 기반 및 픽셀 기반 그래픽 디자인 도구의 장점을 취합하여 디자이너가 새로운 창의력을 발휘할 수 있게 해줍니다. 이 도구를 사용하면 다른 응용 프로그램의 그래픽을 가져오고, WPF 및 "WPF/E"용 XAML을 포함한 다양한 소프트웨어 도구로 디자인 요소를 내보낼 수 있습니다.
"WPF/E"를 위한 그래픽 디자인 파일 준비
Expression Graphic Designer를 사용하여 Popcan.xpr 파일을 엽니다. 이 파일은 Program Files\Microsoft Expression\Design Beta 1\Samples 디렉터리에 있으며 그림 1에 사용된 그래픽 파일입니다.
파일을 열면 픽셀 해상도가 상당히 높다는 것을 알 수 있습니다. 세로 및 가로 눈금자를 사용하여 확인하면 1280 × 1024 픽셀입니다. 그림 2는 이미지의 너비를 나타내는 가로 눈금자를 보여 줍니다.
.gif)
그림 2. Expression Graphic Designer의 가로 눈금자
그림 3에서 볼 수 있듯이 File(파일), Document Size(문서 크기)를 선택하면 표시되는 Document Size(문서 크기) 대화 상자에서도 확인할 수 있습니다.
.gif)
그림 3. Document Size(문서 크기) 대화 상자
Document Size(문서 크기) 대화 상자를 사용하여 이미지 크기를 300 × 150 픽셀로 변경합니다. Document Size(문서 크기) 대화 상자에서 Width(너비) 입력란에 300을 입력하고 Height(높이) 입력란에 150을 입력하면 됩니다(그림 4 참조).
.gif)
그림 4. 크기를 300 × 150 픽셀로 설정
대화 상자에서 OK(확인)를 클릭하면 이미지 크기가 조정됩니다. 이제 그림 5와 같이 깡통이 짧고 납작하게 변형된 상태가 됩니다.
.gif)
그림 5. 300 × 150 픽셀로 크기를 조정한 문서
그리기는 벡터 기반이므로 품질 손실 없이 크기를 조정할 수 있습니다. 디자인 화면에서 CTRL+A를 누르면 그리기의 모든 요소를 선택할 수 있습니다. 그림 6과 같이 녹색 윤곽선이 표시되어 선택된 요소를 나타냅니다.
.gif)
그림 6. 모든 이미지 요소 선택(더 큰 이미지를 보려면 그림을 클릭하십시오.)
이제 프레임 내에서 이미지를 이동하고 모서리를 끌어 크기를 조정하여 원하는 가로 세로 비율로 맞출 수 있습니다. 그림 7은 깡통의 크기를 사실적으로 조정하여 문서의 왼쪽 위 모서리에 배치한 상태입니다.
.gif)
그림 7. 적절한 가로 세로 비율로 크기를 조정한 깡통
이제 이 이미지를 "WPF/E" XAML 이미지로 내보낼 준비가 되었습니다.
내보내려면 File(파일), Export(내보내기), XAML을 클릭하거나 CTRL+ALT+X를 누릅니다. Common Save(일반 저장) 대화 상자가 표시됩니다. 이 대화 상자를 사용하여 XAML 파일의 위치를 지정할 수 있습니다. 파일 이름을 Popcan.xaml로 지정하고 Save(저장)를 선택합니다. Xaml Export(Xaml 내보내기) 대화 상자가 표시됩니다. 이 대화 상자를 사용하면 그림 8과 같이 "WPF/E"를 XAML 호환 형식으로 내보내는 데 관련된 세부 사항을 지정할 수 있습니다.
.gif)
그림 8. "WPF/E" XAML 내보내기
화면 오른쪽에는 미리 보기 창이 있습니다. 작업을 진행하기 전에 이 창의 확대 및 이동 기능을 사용하여 이미지에 문제가 없는지 살펴볼 수 있습니다. 오른쪽에 있는 탭을 사용하면 이미지와 이 이미지를 나타내는 XAML 코드 사이를 전환하면서 검사할 수 있습니다. XAML을 처음 사용하는 경우 XAML Code(XAML 코드) 탭을 통해 코드와 이미지의 상관 관계를 파악하는 것이 좋습니다.
오른쪽의 드롭다운 옵션에서는 내보내기 특성을 지정할 수 있습니다. 예를 들어 래스터화된 이미지를 벡터화할지 특정 디렉터리로 출력만 할지 처리 방법을 지정합니다. 현재로서는 기본값을 그대로 유지해도 관계없습니다. 단, 그림 8과 같이 Document Format(문서 형식)에서 "WPF/E"를 선택해야 합니다.
여기까지 모두 마쳤으면 Export(내보내기) 단추를 클릭합니다. 그러면 "WPF/E" XAML 코드가 디스크에 작성됩니다. 이 코드는 다음 단계에서 Visual Studio 2005 웹 프로젝트에 사용됩니다. 계속해서 웹 프로젝트를 설정하고 XAML에 맞게 준비하는 방법을 알아보겠습니다.
Visual Studio 2005를 사용한 "WPF/E" 프로젝트 빌드
"WPF/E" SDK에는 "WPF/E" 프로젝트를 빌드할 수 있는 Visual Studio 2005용 템플릿이 포함되어 있습니다. 이 템플릿을 Visual Studio 2005에서 사용하려면 다음 IDE 추가 기능을 다운로드해야 합니다.
먼저 Microsoft에서 Update to Support Web Application Projects를 다운로드 및 설치 (영문) 해야 합니다.
이 파일을 설치해야 Visual Studio 2005 Web Applications Projects 추가 기능을 설치할 수 있습니다. WebApplicationProjectSetup.msi (영문) 링크를 클릭하여 다운로드 및 설치합니다. "WPF/E" SDK 다운로드에는 "WPF/E" JSApplication.zip이라는 압축 파일이 포함되어 있습니다. \Program Files\Microsoft Visual Studio 8\Common7\IDE\ProjectTemplates\CSharp 디렉터리에 "WPF/E" 디렉터리를 만들어 이 압축 파일을 복사합니다. 그 다음 개발 환경이 닫혀 있는지 확인하고 명령 프롬프트에서 devenv.exe/setup을 실행합니다.
이제 Visual Studio에서 "WPF/E" 프로젝트를 만들 수 있습니다. Visual Studio IDE를 시작하고 파일, 새 프로젝트를 클릭하면 됩니다. 사용할 수 있는 프로젝트 형식에 "WPF/E"가 표시됩니다. 또한 그림 9와 같이 "WPF/E" 응용 프로그램을 새로 만들 때 사용되는 "WPF/E" JavaScript 응용 프로그램 템플릿도 표시됩니다.
.gif)
그림 9. Visual Studio 템플릿 사용
이렇게 하면 하나의 HTML 페이지와 간단한 단추를 표시하는 XAML 파일을 포함하는 새 프로젝트가 만들어집니다. HTML에서 JavaScript를 사용하여 "WPF/E" 컨트롤(나중에 자세히 다룸)을 설정하는 방법, 그리고 XAML이 JavaScript에서 포착해 처리할 수 있는 이벤트를 제공하는 방법을 살펴보는 것이 좋습니다.
"WPF/E"를 위한 Visual Studio 2005 프로젝트 준비
이전 섹션의 템플릿을 사용하여 바로 응용 프로그램을 만들 수도 있지만 그보다 먼저 "WPF/E"의 작동 방식과 배포 방식을 이해하는 것이 좋을 것입니다. 이 과정을 통해 기존 웹 사이트를 구성하여 브라우저에 "WPF/E" 모듈을 배포하는 것이 얼마나 간단한지 확인할 수도 있습니다. 이 섹션에서는 기존 웹 사이트를 "WPF/E" 사이트로 수동으로 구성하는 방법을 살펴보겠습니다.
이 백서를 작성할 때 필자는 Visual Studio 2005와 "Orcas" CTP Preview를 사용했습니다. "Orcas"는 필요 없지만 설치되어 있으면 IntelliSense를 사용할 수 있고 "Cider" XAML 디자이너에서 완성된 XAML을 미리 볼 수 있으므로 XAML 코드를 조금 더 쉽게 작성할 수 있습니다. 단, Cider는 "WPF/E"가 아닌 WPF용으로 고안되었으므로 현재로서는 "WPF/E"를 위한 XAML 코드를 개발하는 데 사용하면 안 됩니다.
시작하려면 Visual Studio 2005를 실행하고 파일의 새 웹 사이트 대화 상자를 사용하여 새 웹 사이트를 만듭니다(그림 10 참조).
.gif)
그림 10. Visual Studio 2005에서 새 웹 사이트 만들기
그러면 간단한 Default.aspx ASP.NET 페이지가 포함된 새 솔루션이 만들어집니다. 이 페이지를 실행하면 브라우저에서 렌더링되는 HTML이 생성됩니다. 이제 첫 "WPF/E" 페이지를 위한 기반이 마련되었습니다.
다음으로 플러그 인을 위한 배포 파일을 가져와야 합니다. 먼저 솔루션 탐색기에서 프로젝트(http://localhost/MyFirstWPFE)를 마우스 오른쪽 단추로 클릭하고 새 폴더를 선택하여 웹 사이트에 Bin 디렉터리를 만듭니다. 새 폴더의 이름을 "Install"로 바꾼 후 "WPF/E" 다운로드 파일에서 install.msi, MozillaControl1712.exe, WPFE.dmg, xcpctrl.cab 및 xcpctrl.xpi 파일을 이 디렉터리에 추가합니다. Windows 탐색기에서 이 파일을 끌어서 Visual Studio 2005 솔루션 탐색기 창의 Bin 디렉터리에 놓으면 됩니다. 또한 이전 섹션에서처럼 Visual Studio 2005 템플릿을 사용하여 개발한 모든 프로젝트에서 이 파일을 가져올 수 있습니다.
그 다음 웹 사이트에 aghost.js 파일을 추가해야 합니다. 이 파일 역시 Windows 탐색기에서 끌어서 솔루션에 놓는 방법으로 추가할 수 있습니다. 마지막으로 솔루션에서 XAML이라는 새 폴더를 만들고 앞서 만든 Popcan.xaml 파일을 이 폴더에 복사합니다.
"WPF/E" 콘텐츠를 렌더링하도록 웹 페이지 편집
이제 포함된 "WPF/E" 콘텐츠를 처리하도록 웹 페이지를 편집하는 방법을 살펴보겠습니다. 이 작업은 매우 간단합니다. JavaScript 참조 한 개를 추가하고 aghost.js에 정의된 JavaScript 개체를 호출하기만 하면 됩니다. 나머지 작업은 JavaScript 라이브러리와 "WPF/E" 설치 프로그램이 처리합니다.
먼저 목록 1과 같이 되도록 페이지를 편집합니다. 여기에서 수행하는 작업은 원래 "Untitled Page"인 페이지 제목을 바꾸고 aghost.js에 대한 JavaScript 참조를 추가하고 페이지 본문에 agHost 개체에 대한 호출을 포함하는 새 Div를 추가하는 것이 전부입니다. 목록 1에서 이 코드를 볼 수 있습니다.
목록 1. default.aspx HTML 코드
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs"
Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html >
<head id="Head1" runat="server">
<title>My first "WPF/E" Page!</title>
<script type="text/javascript" src="agHost.js "></script>
</head>
<body>
<form id="form1" runat="server">
<div id="AgControl1Host">
<script type="text/javascript">
new agHost("AgControl1Host", "AgControl1", "400",
"400", "#00000000", null, "xaml/Popcan.xaml",
"True", "30", null);
</script>
</div>
</form>
</body>
</html>
지금은 "new AgHost"라는 JavaScript 호출이 다소 어렵게 보일 수 있지만 걱정하지 마십시오. 여기에 대해서는 나중에 다시 설명하겠습니다. 다음 섹션에서는 먼저 Internet Explorer와 Mozilla Firefox에서 이 응용 프로그램을 실행하는 환경을 살펴볼 것입니다. 이후 "WPF/E"를 제어하는 JavaScript 개체를 알아보고 그래픽에 애니메이션을 추가하여 생동감 있게 만드는 편집 작업을 수행하게 됩니다. 이제 응용 프로그램을 실행하고 ASP.NET에서 "WPF/E" 콘텐츠를 포함하는 페이지를 생성할 준비가 되었습니다. 응용 프로그램을 시작하려면 Visual Studio 2005에서 F5를 누릅니다. 응용 프로그램을 처음 실행하면 브라우저에서 "WPF/E"가 설치되어 있는지 여부를 탐지합니다. 설치되어 있지 않은 경우 페이지가 시작될 때 "WPF/E" 모듈을 설치할 것인지 묻는 대화 상자가 표시됩니다. 부록 I에서는 Windows에서 실행되는 Internet Explorer와 Mozilla Firefox를 위한 설치 환경 세부 사항을 제공합니다.
JavaScript의 이해
"WPF/E"를 사용하여 이 XAML을 페이지에 넣는 JavaScript 코드는 다음과 같습니다.
new agHost("AgControl1Host", "AgControl1", "400", "400", "#00000000",
null, "xaml/Popcan.xaml",
"True", "30", null);
이 코드는 필요한 매개 변수를 사용하여 "WPF/E" 플러그 인의 새 인스턴스를 만듭니다. 이러한 매개 변수는 다음과 같습니다(순서대로).
hostElementID: 플러그 인 컨트롤을 호스팅할 HTML 요소의 이름입니다. 따라서 플러그 인을 포함하는 페이지에 <div>가 있다면 <div>에 이름을 지정하고 그 이름을 여기에 사용합니다.
controlID: 플러그 인의 ID입니다.
height: 픽셀 단위의 컨트롤 높이입니다.
width: 픽셀 단위의 컨트롤 너비입니다.
backgroundColor: 컨트롤의 배경색입니다.
sourceElement: 컨트롤의 XAML을 포함하는 페이지 요소의 이름입니다. 이는 <script> 요소에 포함된 컨트롤의 XAML을 구성하는 한 가지 방법입니다(페이지에서 XAML의 위치). 이 방식을 사용하는 경우 <script> 요소의 ID를 이 매개 변수에 넣으면 컨트롤이 해당 위치에서 요소를 가져옵니다.
sourceURL: 외부 XAML 파일의 위치입니다.
isWindowless: 부울 값입니다. 창이 없는 방식으로 "WPF/E" 컨트롤을 사용하려면 이 매개 변수의 값을 True로 설정합니다. 이렇게 하면 HTML 페이지에서 "WPF/E" 컨트롤이 인라인으로 표시됩니다. 예를 들어 투명으로 설정하면 HTML이 컨트롤 "뒤에" 표시됨을 의미합니다. 창이 없는 방식이 아니면(즉, False로 설정하는 경우) "WPF/E" 콘텐츠는 페이지의 별개 영역에 위치하고 HTML 태그가 그 앞뒤에 위치하게 됩니다.
maxFrameRate: "WPF/E"가 애니메이션 콘텐츠를 렌더링하는 최대 프레임 속도를 지정하는 숫자입니다.
loadHandler: 페이지에 있는 요소 중 컨트롤이 로드될 때 실행할 <script> 요소의 이름입니다.
errorHandler: 페이지에 있는 요소 중 컨트롤에 오류가 발생할 때 실행할 <script> 요소의 이름입니다.
이러한 매개 변수를 사용하여 agHost 컨트롤의 새 인스턴스를 만들면 agHost.js가 호출되어(따라서 HTML에 이 파일에 대한 참조가 필요) 컨트롤을 감싸는 <object> 태그를 생성합니다. 따라서 Internet Explorer를 사용한다면 앞의 경우 다음과 같은 <object> 태그가 생성됩니다..
<object id="AgCotnrol1" height="400" width="400"
Codebase="install/xcpctrl.cab"
classid="CLSID:32C73088-76AE-40F7-AC40-81F62CB2C1DA">
<param name="Source" value="xaml/Popcan.xaml" />
<param name="MaxFrameRate" value="30" />
<param name="BackgroundColor" value="#00000000" />
<param name="WindowlessMode" value="True" />
</object>
원할 경우 언제든 페이지에 이 코드를 바로 사용할 수 있지만 JavaScript 개체를 사용하는 편이 훨씬 더 간결하고 <object> 태그 구현 세부 사항으로 인해 HTML 페이지가 복잡해지는 일도 없습니다.
XAML을 편집하여 텍스트 추가
Visual Studio 2005에서 XAML을 직접 편집하여 원하는 항목을 추가할 수 있습니다. 이 예에서는 기본적인 텍스트를 포함하도록 XAML에 TextBlock 컨트롤을 추가해 보겠습니다.
Visual Studio 2005에서 XAML 파일을 엽니다. "Orcas" CTP가 설치되어 있는 경우 "Cider" 편집기에서 XAML을 미리 볼 수 있습니다(그림 11 참조). "Cider" 디자이너는 WPF 응용 프로그램 전용이므로 "WPF/E" XAML에는 도구 모음을 사용하여 컨트롤을 추가할 수 없다는 점을 유의하십시오. "Orcas" CTP가 설치되어 있지 않은 경우에는 XML 편집기만 열립니다.
.gif)
그림 11. Visual Studio 2005를 사용하여 XAML 편집(더 큰 이미지를 보려면 그림을 클릭하십시오.)
XAML에 텍스트 블록을 추가하려면 맨 아래로 스크롤한 후 닫는 </Canvas> 태그 바로 앞에 다음 코드를 추가합니다.
<Canvas x:Name="Layer_3">
<TextBlock x:Name="MyLink" Canvas.Left="150" Canvas.Top="0"
FontFamily="Verdana" FontSize="18"
Width="250" TextWrapping="Wrap">
Drink some of this yummy WPFE soda!
Much better than a Hello, World App, right?
</TextBlock>
</Canvas>
그림 12에서 이 코드가 웹 페이지에 미치는 영향을 볼 수 있습니다.
.gif)
그림 12. 텍스트 블록을 포함하는 XAML
간단한 애니메이션을 위한 XAML 편집
XAML을 사용하여 애니메이션을 위한 스토리보드를 지정할 수 있습니다. 이 예에서는 텍스트를 화면의 위아래로 튕기는 간단한 애니메이션을 "WPF/E" 페이지에 추가해 보겠습니다. Canvas가 로드될 때 실행되는 EventTrigger를 추가하여 이 작업을 수행합니다. 이 이벤트 트리거는 작업을 포함할 수 있습니다. 지정된 작업은 "DoubleAnimation"을 포함하는 스토리보드를 시작하는 것입니다. 이러한 유형의 애니메이션은 "From"에서 시작해 "To"에서 끝나는 범위로 숫자를 조작하는 데 사용됩니다. 자동으로 왕복하면서 영구 반복되도록 설정할 수도 있습니다. 즉, 텍스트를 "튕기도록" 지정하여 0부터 지정된 숫자만큼 Top 애니메이션이 수행되고, 지정된 숫자에 이르면 자동으로 반대 방향으로 진행되어 영구히 반복되도록 할 수 있습니다. 이를 구현하는 스토리보드는 다음과 같습니다.
<Storyboard Storyboard.TargetName="MyLink"
Storyboard.TargetProperty="(Canvas.Top)" >
<DoubleAnimation AutoReverse="True" RepeatBehavior="Forever"
BeginTime="0" Duration="0:0:1"
From="0" To="90">
</DoubleAnimation>
</Storyboard>
애니메이션 실행을 위한 텍스트와 트리거를 포함하는 완전한 Canvas 구현 내용은 다음과 같습니다.
<Canvas x:Name="Layer_3">
<Canvas.Triggers>
<EventTrigger RoutedEvent="Canvas.Loaded">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard Storyboard.TargetName="MyLink"
Storyboard.TargetProperty="(Canvas.Top)" >
<DoubleAnimation AutoReverse="True" RepeatBehavior="Forever"
BeginTime="0" Duration="0:0:1"
From="0" To="90">
</DoubleAnimation>
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</Canvas.Triggers>
<TextBlock x:Name="MyLink" Canvas.Left="150" Canvas.Top="0"
FontFamily="Verdana" FontSize="18" Width="250"
TextWrapping="Wrap">
Drink some of this yummy "WPF/E" soda!
Much better than a Hello, World App, right?
</TextBlock>
</Canvas>
이제 웹 사이트를 보면 오른쪽에서 텍스트가 위아래로 "튕기는 것"을 확인할 수 있습니다.
간단한 상호 작용을 위한 XAML 편집
"WPF/E"를 사용하면 JavaScript 코드와 XAML의 상호 작용이 가능합니다. 이 예에서는 사용자와 XAML 파일이 상호 작용할 때 발생하는 이벤트를 처리하는 방법을 살펴보겠습니다. 이전 예제의 "튕기는" 텍스트에 하이퍼링크를 적용하여 다른 페이지로 연결하는 데 사용합니다.
이를 수행하려면 TextBlock 선언에서 이벤트 처리기를 지정합니다. 마우스 클릭을 캡처하여 MouseLeftButtonDown 이벤트 처리기를 통해 클릭을 처리하는 JavaScript 함수를 지정합니다. 텍스트 블록 및 hyperlink_MouseLeftButtonDown이라는 JavaScript 처리기에 대한 선언은 다음과 같습니다.
<TextBlock MouseLeftButtonDown="javascript:hyperlink_MouseLeftButtonDown"
x:Name="MyLink" Canvas.Left="150" Canvas.Top="0"
FontFamily="Verdana" FontSize="18"
Width="250" TextWrapping="Wrap">Channel 9 is cool!</TextBlock>
이제 다음과 같이 호스팅 페이지(또는 페이지가 참조하는 외부 라이브러리)에서 JavaScript를 사용하여 이 이벤트를 처리할 수 있습니다.
<script language="javascript">
function hyperlink_MouseLeftButtonDown(sender, args) {
window.open("http://channel9.msdn.com");
}
</script>
이제 페이지를 실행하면 애니메이션이 적용된 움직이는 하이퍼링크가 표시되며 이 하이퍼링크를 클릭하면 MSDN Channel 9 사이트로 연결됩니다.
믹스에 미디어 추가
"WPF/E"는 웹 개발자에게 최고의 Windows Media를 제공합니다. 다음과 같이 XAML에서 <MediaElement> 태그를 사용하여 "WPF/E" 응용 프로그램에 미디어 콘텐츠를 손쉽게 추가할 수 있습니다.
<Canvas x:Name="Layer_4">
<MediaElement x:Name="VideoLayer" Source="Butterfly.wmv"
Canvas.Top="0" Canvas.Left="130"
Height="200" Width="200">
</MediaElement>
</Canvas>
이 코드가 작동하려면 루트 웹 사이트에 Butterfly.wmv 파일이 있어야 합니다. 이 WMV 파일은 Windows Vista와 함께 제공되는 "샘플 비디오" 중 하나로, 문서 폴더에 있습니다. 이 파일이 없으면 원하는 WMV 파일로 대체하십시오.
MediaElement는 비디오를 시작, 중지, 일시 중지 및 탐색하는 데 사용할 수 있는 메서드를 제공합니다. 이에 대한 자세한 내용은 "WPF/E" 설명서 및 샘플을 참조하십시오.
그림 13은 비디오가 포함된 "WPF/E" 응용 프로그램을 보여 줍니다.
.gif)
그림 13. 비디오가 포함된 "WPF/E"
결론
이 백서에서는 "WPF/E"에 대한 간략한 개요와 이 기술을 차세대 웹 응용 프로그램 개발 스택에 적용하는 방법에 대해 살펴보았습니다. 디자이너의 사양, 개발자의 도구 및 사용자에 제공되는 콘텐츠를 연결하는 고리로써 XAML을 사용하는 방법을 알아보고 Expression Graphic Designer에 대한 소개와 이 도구를 사용하여 웹 페이지를 위한 그래픽을 정의하는 방법, 그리고 이 그래픽을 "WPF/E" XAML로 내보내는 방법을 익혔습니다. 그 다음 Visual Studio 2005 웹 프로젝트로 이 XAML을 가져와 디자이너의 "WPF/E" XAML을 렌더링하기 위해 Internet Explorer 및 Firefox로 XAML 런타임을 배포하도록 구성하는 방법을 확인했습니다. 마지막으로 XAML을 조작하여 애니메이션, 상호 작용, 미디어를 추가하는 방법을 알아봤습니다.
이 기사에서 수행한 작업은 "WPF/E"로 할 수 있는 작업의 극히 일부에 불과합니다. 이 기술은 차세대 웹 구축을 시작하는 데 사용할 수 있는 풍부한 기능을 담고 있습니다. "WPF/E"와 함께 재미있는 여행을 시작해 보십시오!
부록 I: 설치 환경
"WPF/E" 콘텐츠가 있는 웹 페이지를 보려면 브라우저에 "WPF/E" 기능을 추가해야 합니다. 사용자에게 설치 여부를 묻는 개체 태그 메서드를 사용하거나 브라우저에 "WPF/E" 기능이 적용되어 있는지 확인한 다음 사용자에게 모듈을 받을 수 있는 적절한 다운로드 페이지를 알리는 방법 중 하나를 사용할 수 있습니다.
샘플 응용 프로그램에서는 "WPF/E" 모듈이 설치되어 있지 않은 경우 사용자가 적절한 모듈을 설치할 수 있도록 프롬프트를 표시하는 개체 태그를 사용하고 있습니다. 이 방법에서는 응용 프로그램을 처음 실행하면 브라우저에서 "WPF/E"가 설치되어 있는지 여부를 탐지합니다. 설치되어 있지 않은 경우 페이지가 시작될 때 "WPF/E" 모듈을 설치할 것인지 묻는 대화 상자가 표시됩니다. 다음 섹션에서는 각각 Internet Explorer와 Mozilla Firefox를 사용하여 이 워크플로를 따르는 경우의 사용자 환경에 대해 자세히 살펴보겠습니다.
Internet Explorer에서 페이지 실행
그림 14와 같은 Internet Explorer 보안 경고 대화 상자가 표시됩니다. 설치를 선택하면 플러그 인이 다운로드되어 설치됩니다. 다음 섹션에서 이에 대해 자세히 알아보겠습니다.
.gif)
그림 14. "WPF/E" 설치에 대한 브라우저 보안 경고
설치를 선택하면 그림 15와 같이 설치 마법사가 시작됩니다.
.gif)
그림 15. "WPF/E" 설치 시작
최종 사용자 사용권 계약을 신중하게 읽고 해당 내용에 동의하면 동의함을 선택합니다. 그림 16과 같이 WPFE 설치가 시작됩니다.
.gif)
그림 16. "WPF/E" 설치
설치가 성공적으로 완료되면 그림 17과 같은 설치 완료 대화 상자가 표시됩니다.
.gif)
그림 17. WPF/E 설치
마침을 누르면 준비가 완료됩니다. 그림 18에서 볼 수 있듯이 XAML이 즉각 렌더링됩니다.
.gif)
그림 18. 브라우저에서 렌더링되는 XAML
다음 섹션에서는 Mozilla Firefox 브라우저에서의 설치 플러그 인 환경을 살펴보겠습니다.
Mozilla Firefox에서 페이지 실행
이전 섹션에서 "WPF/E"를 통해 Internet Explorer가 어떻게 향상되는지 살펴봤습니다. 그러나 "WPF/E"는 다중 브라우저, 다중 플랫폼 기술입니다. 이 섹션에서는 Microsoft Windows Vista에서 실행되는 Mozilla Firefox에서의 "WPF/E" 작동 방식을 알아보겠습니다.
"WPF/E"가 설치되어 있지 않은 경우 Firefox를 실행하면 그림 19와 같은 화면이 표시됩니다.
.gif)
그림 19. Firefox에서 "WPF/E" 실행
화면의 오른쪽 위에 표시되는 Install Missing Plugins를 클릭합니다. Firefox에서 "WPF/E" 형식에 일치하는 알려진 플러그 인(application/xcp-plugin)을 탐색하지만 아무 것도 찾지 못합니다. 이는 "WPF/E"가 아직 릴리스된 제품이 아니고, 따라서 플러그 인도 Firefox Plugin Finder Service Directory에 게시되지 않았기 때문입니다. 제품이 릴리스되면 게시될 것입니다. 그림 20을 참조하십시오.
.gif)
그림 20. Firefox Plugin Finder Service
Plugin Finder Service 대화 상자에서 수동 설치를 수행할 수도 있습니다. 이렇게 하면 MSI 파일이 있는 URL로 이동되며 이 파일을 시작하면 "WPF/E" 런타임 설치가 시작됩니다. 여기서부터 설치 환경은 앞 섹션에서 설명한 Internet Explorer의 환경과 동일합니다.
설치를 완료하고 페이지를 실행하면 그림 21과 같이 Mozilla Firefox 내에서 XAML이 "WPF/E"에 의해 렌더링됩니다.
.gif)
그림 21. Mozilla Firefox에서 XAML 렌더링
부록 II: 서버 MIME 형식 구성
IIS 6.x 구성
"WPF/E" 응용 프로그램을 제공하는 데 필요한 MIME 형식을 위해 IIS를 구성하는 작업은 매우 간단합니다. 렌더링된 XAML 페이지가 아닌 빈 페이지가 표시되면 XAML이 IIS에서 인식 가능한 XML 형식으로 구성되지 않은 것입니다. 구성하려면 그림 22와 같이 웹 사이트 속성 대화 상자를 열고 HTTP 헤더 탭을 선택합니다.
.gif)
그림 22. IIS 6.x 구성
이 대화 상자의 맨 아래에 형식을 지정할 수 있는 단추가 있습니다. IIS는 이 목록에 등록된 확장명을 가진 파일만 지원합니다. 따라서 .xaml이 등록되지 않은 경우 이 파일을 사용할 수 없고 "WPF/E" 컨트롤에 XAML을 추가할 수 없습니다. 그림 23은 구성 방법을 보여 줍니다. 필요한 경우 대화 상자의 새로 만들기 단추를 사용하여 추가하십시오.
.gif)
그림 23. IIS에서 MIME 형식 구성
그림 23에는 없지만 Macintosh에 응용 프로그램을 설치하려면 application/octet-stream을 .DMG 파일 확장명에 대한 MIME 형식으로 사용해야 합니다.
IIS 7.x 구성
Windows Vista에서 IIS 7.x를 구성하려면 먼저 Windows 시작 메뉴에서 컴퓨터를 마우스 오른쪽 단추로 클릭한 다음관리를 선택합니다. 이렇게 하면 컴퓨터 관리 콘솔이 시작됩니다. 이 콘솔에서 그림 24와 같이 IIS를 선택할 수 있습니다.
.gif)
그림 24. Windows Vista의 컴퓨터 관리 콘솔(더 큰 이미지를 보려면 그림을 클릭하십시오.)
항목 목록을 스크롤하여 MIME 형식 애플릿을 찾습니다. 이 애플릿을 실행하여 그림 25와 같이 MIME 형식을 구성합니다.
.gif)
그림 25. IIS 7 MIME 형식 구성(더 큰 이미지를 보려면 그림을 클릭하십시오.)
작업 창을 사용하여 필요한 MIME 형식을 추가할 수 있습니다.
.XAML : text/xml
.DMG: application/octet-stream
.gif)
.gif)
.gif)
.gif)
