Atlas Tutorial: AJAX Scribble 애플리케이션 작성하기

[DN=cfile25.uf@165E070C4AA14607275C11.zip]Download C# source files[/DN]
[DN=cfile10.uf@161CCE0E4AA146070DE99F.zip]Download VB.NET source files (Contributed by Hudson Akridge)[/DN]

소스를 다운 받고 나서 이 애플리케이션이 어떻게 동작하는지는 아티클을 끝까지 읽어주세요.



들어가기

ASP.NET Atlas는 AJAX 형식 애플리케이션들을 ASP.NET에서 사용할 수 있도록 개발한 클라이언트측과 서버측 라이브러리입니다. 이 튜토리얼(아마도 시리즈로 발전할 수 있는)은 Atlas의 유용성에 대한 일반적인 관점을 제공합니다. Atlas는 매우 광대한 라이브러리이기 때문에 첫 번째 튜토리얼은 Atlas에서 가장 중요한 두 가지에 집중하도록 하겠습니다.

　1. 클라이언트 측 스크립트로부터 서버측 웹서비스 호출 가능
　2. 브라우저간 호환되는 자바스크립트 코드 개발을 손쉽게

배경

MFC Scribble 애플리케이션은 제가 MFC를 배울 때 사용했던 첫 번째 프로그램 가운데 하나입니다. 그러므로, 저는 이 튜토리얼에서 Scribble를 기반에 두기로 결심했습니다. Scribble 애플리케이션은 사용자가 마우스를 이용해서 자유롭게 스케치할 수 있도록 해줍니다. 저는 이와 유사한 프로그램을 인터넷에서 구현한 것은 처음 보았는데, JavaScript Draw라는 웹사이트였고 AJAX 기술을 이용했습니다. JavaScript draw 웹사이트는 오직 모질라 파이어폭스에서만 동작합니다. 이 아티클에서는 그 애플리케이션이 브라우저간에 호환되는 버전을 어떻게 빌드하는지 설명합니다. 우리는 이 시리즈에서 매 아티클 마다 이 애플리케이션을 빌드하면서 Atlas에 대해 점차 설명하는 방식으로 나아가도록 하겠습니다.

Atlas 설치

이 아티클을 작성하는 시점에서, December CTP of Atlas를 이 link를 클릭하면 다운로드 받을 수 있습니다. 만약 이 링크가 동작하지 않는다면 Atlas 웹사이트에서 정확한 링크를 얻을 수 있습니다. Atlas 라이브러리는 Visual Studio 2005 template (VSI)에서 사용할 수 있습니다. 다운로드 사이트에서는 템플릿을 어떻게 설치할 수 있는지 알려주고 있습니다.

Atlas 프로젝트 생성

Atlas 템플릿이 설치되면 메뉴 옵션에서 파일 -> 새로만들기 -> 웹 사이트 를 차례대로 클릭해 새로운 빈 Atlas 프로젝트를 생성할 수 있습니다. 차례대로 하면 아래 보이는 바와 같이 새 웹 사이트 다이얼로그 박스가 나타납니다.



아래 위치에서 파일 시스템 이나 HTTP를 선택할 수 있습니다. HTTP를 선택하면 당신은 IIS server에서 웹 사이트를 생성할 수 있습니다. 파일 시스템을 선택하면 당신의 로컬 파일 시스템(ASP.NET 개발 웹 서버를 이용해서 디버깅하고 테스트 할 수 있는)에서 웹 사이트를 생성할 수 있습니다. 당신은 어떠한 옵션도 선택할 수 있지만, 저는 이 애플리케이션이 IIS의 인터넷 익스플로러에서 더 잘 동작한다는 것을 알아냈습니다.

Atlas 빈 프로젝트

새로 생성된 Atlas 웹 사이트는 디렉토리 구조를 따르게 됩니다.

• App_Data
  데이터 파일을 위치시킬 수 있는 빈 디렉토리
• Bin
  Microsoft.Web.Atlas 어셈블리를 위한 dll 파일이 위치하는 디렉토리로 Atlas 라이브러리의 서버 영역을 가집니다.
• ScriptLibrary
  애플리케이션에 사용하는 어떠한 자바스크립트 파일들이 위치하는 디렉토리
  • Atlas
    Atlas 클라이언트 스크립트들은 두 가지 다른 하위 디렉토리에 존재합니다.
    • Debug
      디버그 버전 Atlas 클라이언트측 자바스크립트 파일들은 디버그 디렉토리에 위치합니다.
    • Release
      릴리즈 버전 Atlas 클라이언트측 자바스크립트 파일들은 릴리즈 디렉토리에 위치한다. 이 디렉토리에 위치한 스크립트들은 디버그 코드가 제거된 상태로 경량화되어 쓰입니다.

Atlas 클라이언트 스크립트

Atlas December release는 다음과 같은 클라이언트 스크립트를 가집니다.

• Atlas.js
  이 핵심 Atlas 스크립트 파일은 기본적인 유용한 기능과 클라이언트측 컨트롤, 컴포넌트들을 가지고 있습니다.
• AtlasCompat.js
  이 파일은 모질라 파이어폭스와 애플 아이맥 사파리 웹 브라우저를 위해 제공되는 Atlas 호환 레이어를 포함하고 있다. 이 스크립트는 Atlas 코드가 브라우저간 호환될 수 있도록 합니다.
• AtlasCompat2.js
  사파리 웹 브라우저 호환을 위한 추가적인 기능들이 있습니다.
• AtlasRuntime.js
  핵심 Atlas 스크립트 파일을 최소화한 파일입니다. 이 스크립트 파일은 클라이언트측 컴포넌트와 컨트롤들을 가지지 않습니다. 이 스크립트 파일은 웹 페이지에서 사용되지 않는 앞서 말한 컴포넌트와 컨트롤들을 사용하고자 할 때 쓰일 수 있습니다.
• AtlasUIDragDrop.js
  이 파일에는 웹 페이지에서 드래그 & 드랍 기능들을 제공하기 위한 유용한 기능들이 담겨져 있습니다.
• AtlasUIGlitz.js
  이 파일에는 웹 페이지에서 애니메이션과 다른 특별한 효과를 제공하기 위한 유용한 기능들이 담겨져 있습니다.
• AtlasUIMap.js
  이 스크립트 파일은 Virtual Earth를 사용하기 위한 Atlas 맵핑 프레임워크입니다.

다른 파일들

Atlas는 웹사이트의 루트 디렉토리에 다음과 같은 파일들을 추가적으로 제공합니다.

• Default.aspx 와 Default.aspx.cs
  이 웹 페이지는 Atlas 클라이언트측 스크립트를 참조하는 렌터링 스크립트 블록을 감당하고 있는 Atlas 스크립트 매니저 컨트롤을 포함하고 있습니다. 추가적으로 클라이언트 test/xml-script 블록이 페이지에 있습니다. 이 스크립트 블록은 선언된 XML 구문을 사용하고자 할 때 쓰입니다.
• eula.rtf
• readme.txt
• Web.Configweb.config는 Atlas 애플리케이션이 동작하는데 꼭 필요한 파일입니다. 이 파일에는 Atlas 와 다른 추가적인 Atlas HTTP 모듈, HTTP 핸들러를 특정하기 설정하기 위한 몇 가지 내용들이 있습니다.

Scribble 애플리케이션

Scribble 애플리케이션은 사용자가 왼쪽 마우스 버튼을 클릭하고 움직이면서 자유롭게 스케치할 수 있도록 합니다. 스케치는 사용자가 마우스 버튼을 놓았을 때나 드로윙 범위를 벗어났을 때 끝나게 됩니다. 이런 그리기는 VML을 이용한 자바스크립트를 통해서 구현하지만, 이런 예제가 VML 사용에 대한 내용으로 가지는 않을 것입니다.

Scribble 기본 웹 페이지는 이미지를 갖습니다(일반적인 HTML 이미지 - IMG 태그). 이미지에서 일어난 사용자의 마우스 이벤트는 자바스크립트 이벤트 핸들러에 의해서 캡쳐됩니다. 자바스크립트 기능은 스케치된 점들을 웹 서비스로 보냅니다. 웹 서비스는 업데이트되고 이미지 객체는 클라이언트가 보낸 모든 점들을 통해서 선들을 그려내고 세션 안에 저장됩니다. 결국엔, 클라이언트 요청에 의해 서버로부터 이미지가 업데이트 됩니다. 이 이미지 소스는 HTTP 핸들러에 의해 세션에 저장된 이미지를 클라이언트에게 출력됩니다. 여기에 애플리케이션의 메인 컴포넌트들이 있습니다.

• Default.aspx
  다이나믹한 이미지와 Atlas 스크립트 매니저 콘트롤이 있는 페이지
• ScribbleImage.ashx
  세션에 저장된 이미지 객체를 출력하는 HTTP 핸들러
• ScribbleService.asmx
  모든 스크레칭 요청을 보내주는 웹 서비스. 이미지를 수정합니다.
• Scribble.js
  파일 안에 포함된 디자인과 코드를 깔끔하게 분리시켜 애플리케이션에 재배치 시키는 자바스크립트 코드
• Global.asax
  Session_Start 와 Session_End 이벤트는 Global.asax에서 다뤄집니다. Session_Start는 사용 가능한 세션을 생성하고, Session_End는 세션에 저장된 이미지를 해제시킵니다.

Global.asax

우리는 Global.asax. 에서 코딩 과정을 시작합니다.

1. 웹 사이트 메뉴에서 새 항목 추가 또는 Ctrl + Shift + A를 누릅니다.
2. 새 항목 추가 다이얼로그 박스에서 전역 응용 프로그램 클래스를 선택하고 클릭하면 됩니다. 당신은 Global.asax 파일이 생성된 것을 볼 것입니다.
3. 우리는 System.Drawing 네임스페이스를 임포트하는 것으로 시작할 겁니다. 다음 줄에 나오는 코드를 첫 줄에 삽입해주세요.
   
   <%@ Import Namespace="System.Drawing" %>
4. 이어서 Session_Start 기능 코드를 삽입해 주세요.
   
   void Session_Start(object sender, EventArgs e)
   {
     Bitmap bmp = new Bitmap(200, 200);
     using (Graphics g = Graphics.FromImage(bmp))
     {
        g.FillRectangle(new SolidBrush(Color.White),
           new Rectangle(0, 0, bmp.Width, bmp.Height));
        g.Flush();
     }
   
     Session["Image"] = bmp;
     }
   이 코드는 흰 200픽셀들로 배경이 완전히 하얗게 칠해져 있고 Image이라는 이름의 세션이 할당된 간단한 비트맵 200 픽셀을 생성합니다.
5. Session_End 기능은 세션안에 저장된 이미지를 해제합니다.
   
   Bitmap bmp = (Bitmap)Session["Image"];
   bmp.Dispose();
6. 웹 사이트 메뉴에서 참조 추가를 선택합니다.
7. 참조 추가 다이얼로그 박스에서 System.Drawing을 선택하고, 확인 버튼을 누릅니다.
8. 마지막으로, 빌드 메뉴에서 웹 사이트 빌드 또는Ctrl + Shift + B 를 누르면 빌드 에러가 없다는 것을 확신합니다.

ScribbleImage.ashx

웹 핸들러는 세션 변수안에 저장된 이미지를 다시 클라이언트에 출력하기 위한 목적입니다.

1. 웹 사이트 메뉴에서 새 항목 추가 또는 Ctrl + Shift + A를 누릅니다.
2. 새 항목 추가 다이얼로그 박스에서 제네릭 처리기를 선택하고, 이름을 ScribbleImage.ashx 라고 입력한 후 확인 버튼을 누릅니다.
3. 웹 핸들러는 필요한 인터페이스 IRequiresSessionState를 구현할 때 세션 변수를 사용하기 위해서 필요합니다. 이건 단지 메이커 인터페이스(marker interface)이며 오버라이드하기 위한 메소드를 가지지 않습니다. 아래의 보이는 바대로 클래스 선언을 수정합니다.
   
   public class ScribbleImage : IHttpHandler,
   System.Web.SessionState.IRequiresSessionState
   
4. 다음에 우리는 ProcessRequest 메소드 코드를 추가합니다.
   
   public void ProcessRequest (HttpContext context)
   {
     context.Response.ContentType = "image/png";
     context.Response.Cache.SetNoStore();
     context.Response.Cache.SetCacheability(HttpCacheability.NoCache);
     context.Response.Cache.SetExpires(DateTime.Now);
     context.Response.Cache.SetValidUntilExpires(false);
   
     System.Drawing.Bitmap bmp = (System.Drawing.Bitmap)context.Session["Image"];
   
     lock(bmp)
     {
          using (MemoryStream ms = new MemoryStream())
          {
              bmp.Save(ms, ImageFormat.Png);
              ms.Flush();
              context.Response.BinaryWrite(ms.GetBuffer());
          }
     }
   }
   • 첫째 줄 ContentType 헤더는 image/png 에 반응하도록 설정합니다. 이는 브라우저가 HTML 대신에 png 이미지에 반응하도록 구별합니다.
   • 다음 네 줄은 반응할 때 캐시하지 않도록 브라우저에 지시합니다. 이 코드들은 상호 브라우저간 호환되도록 하기 때문에 꼭 필요합니다. 우리는 나중에 튜토리얼에 맞추어 바꿀 것입니다.
   • 마지막으로, 세션 변수로부터 온 비트맵은 메모리 스트림에 저장이 되고, 저장된 메모리 스트림의 내용은 응답(response)시 씁니다. BinaryWrite 기능이 사용되고, 이미지는 바이너리 데이터입니다.

ScribbleService.asmx

세션 이미지를 초기화하고 응답시 이미지 내용을 출력해야 합니다. 이제 이미지 스스로 내용을 추가하도록 하기 위해 몇 가지 메소드를 추가해야 합니다. 우리는 클라이언트가 이미지에 선을 추가하기 위해서 ScribbleService.asmx 웹 서비스를 호출하리라 기대합니다.

1. 웹 사이트 메뉴를 누르고 새 항목 추가 혹은Ctrl + Shift + A를 누릅니다.
2. 새 항목 추가 다이얼로그 박스에서 웹 서비스를 선택하고, ScribbleService.asmx 이라는 이름을 입력한후 확인 버튼을 누릅니다. 저는 당신이 다른 파일에 코드 입력를 체크하지 않았을 것이라고 확신합니다.
3. 다음 줄에 나오는 바와 같이 System.Drawing 네임스페이스를 임포트합니다.
   
   using System.Drawing;
4. 다음엔, 점을 위한 간단한 클래스를 정의해야 합니다. 우리는 XML serializable이 아니기 때문에 System.Drawing.Point 클래스를 사용하지 않을 것입니다. 이후의 튜토리얼에서 우리는 커스텀 클래스를 대신하여 System.Drawing.Point 를 사용하는 방법을 알아 볼 것입니다. ScribbleService 클래스 선언 전에 다음 코드를 추가합니다.
   
   public class Point
   {
     public int X;
     public int Y;
   };
5. 마지막으로, 우리는 주어진 점들의 집합인 스케치를 그리기 위해서 메소드를 추가해야 합니다. 우리는 우리의 웹 서비스에 Draw 라는 웹 메소드를 추가할 것입니다.
   
   [WebMethod(EnableSession = true)]
   public void Draw(Point[] points)
   {
     Image scribbleImage = (Image)Session["Image"];
     lock(scribbleImage)
     {
          using (Graphics g = Graphics.FromImage(scribbleImage))
          using(Pen p = new Pen(Color.Black, 2))
          {
              if (points.Length > 1)
              {
                  int startX = points[0].X;
                  int startY = points[0].Y;
                  for (long i = 1; i < points.Length; i++)
                  {
                      g.DrawLine(p, startX, startY,
                          points[i].X, points[i].Y);
                      startX = points[i].X;
                      startY = points[i].Y;
                  }
              }
          }
     }
   }
   • WebMethod(EnableSession = true) 속성은 세션 변수가 웹 서비스에서 접근 가능하도록 합니다.
   • 이미지는 잠겼기 때문에 현시점 접근시 안전합니다.
   • points 배열안에 제공된 점들을 조인하는 것처럼 드로윙은 꽤 간단합니다.

Scribble.js

우리는 서버측 이미지 핸들러와 이미지를 업그레이드 시키는 서버측 웹 서비스를 가지고 있습니다. 이제 우리는 마우스 이벤트로 인한 점들을 서버의 웹 서비스에 보내주는 scribble 애플리케이션의 클라이언트측 스크립트가 필요합니다.

1. 솔루션 탐색기에서 ScriptLibrary 폴더를 선택합니다.
2. 웹 사이트 메뉴를 누르고 새 항목 추가 혹은Ctrl + Shift + A를 누릅니다.
3. 새 항목 추가 다이얼 로그 박스에서 JScript 파일,을 선택하고 Scribble.js 라고 이름을 지정한 후 확인 버튼을 누릅니다. Scribble.js 파일은 ScriptLibrary 폴더안에 위치할 것입니다.
4. 다음엔 우리는 몇 가지 글로벌 변수를 선언해야 합니다. Scribble의 첫 번째 버전에서는 글로벌 변수를 사용하지만 차기 버전에서는 자바스크립트 객체를 사용할 것입니다.
   
   //The HTML image element that is to be drawn
   var image;
   //The source of the image
   var originalSrc;
   //The number of iteration
   var iter = 0;
   //The array of points
   var points = null;
   변수 선언 위의 주석은 각 변수의 목적을 묘사합니다. iter 변수는 그리기 요청 이후에 서버에 보내지는 이미지 소스를 수정하는데 쓰입니다. image.src = image.src로 설정하는 경우에 인터넷 익스플로러는 이미지를 다시 불러들이지만, 이 동일한 코드가 파이어폭스에서는 동작하지 않습니다. 이 문제를 안고 동작하기 위해서 매 시간 증가된 iter 변수를 지속시키기 위해 Draw 요청을 웹 서비스에 보냅니다. 브라우저는 캐시된 이미지를 이용하기 보다는 새 데이터를 받도록 서버에 요청할 필요가 있다고 생각하기 때문에 originalSrc 변수에 iteration number를 추가합니다.
5. mousedown 이벤트에 반응하여 스트로크를 시작하기 위해서 function startStroke 를 정의합니다.
   
   function startStroke()
   {
     points = new Array();
     window.event.returnValue = false;
   }
   새로운 스트로크가 시작되면 첫 번째 줄에 지시된 새로운 점들의 집합을 생성합니다. 두 번째 줄은 이벤트의 기본 행위를 취소시킵니다. 이건 이미지에 대한 mousedown 이벤트의 기본 행위처럼 꼭 필요합니다. 드래그 동작을 시작하면 작업이 시작됨에 따라 차후 일어날 이벤트를 이끌어가기 위해 이미지는 드래그 동작을 시작합니다.
6. mouseup 이벤트나 mouseout 이벤트가 일어나면 스트로크는 끝이 납니다. 우리는 실제로 웹 서비스를 호출하도록 할 필요가 있습니다. 이건 function endStroke에서 이루어집니다.
   
   function endStroke()
   {
     if (!points || points.length < 2)
        return true;
   
     //Send the points to the webservice
     ScribbleService.Draw(points, onWebMethodComplete,
        onWebMethodTimeout, onWebMethodError);
     points = null;
     window.event.returnValue = false;
   }
   이 기능에서 흥미를 끄는 유일한 코드 라인은 ScribbleService.Draw(points, onWebMethodComplete, onWebMethodTimeout, onWebMethodError); 입니다. 여기에서는 비동기적으로 ScribbleService.asmx 에 있는 웹 서비스 메소드 Draw 를 호출합니다. 이 기능은 Atlas 프레임워크에 위해 우리가 즉각적으로 사용할 수 있도록 합니다.
7. onWebMethodError 는 웹 서비스 메소드에서 에러 발생시 Atlas 프레임워크에 의해 호출됩니다. onWebMethodTimeout 는 웹 메소드 호출이 Atlas 프렘임워크에 정의된 타임아웃 설정을 초과할 때 호출됩니다. 이 버전에서 우리는 사용자에게 에러 텍스트가 담긴 메시지 박스를 보여줄 겁니다.
   
   function onWebMethodError(fault)
   {
     alert("Error occured:\n" + fault.get_message());
   }
   
   function onWebMethodTimeout()
   {
     alert("Timeout occured");
   }
8. function onWebMethodComplete 는 웹 메소드 호출이 성공되었을 때 호출됩니다. 이때 이미지는 리로드되어야 합니다.
   
   function onWebMethodComplete(result, response, context)
   {
     //We need to refresh the image
     var shimImage = new Image(200, 200);
     shimImage.src = originalSrc + "?" + iter++;
     shimImage.onload = function()
     {
     image.src = shimImage.src;
     }
   }
   우리는 Image 객체object shimImage 를 생성하고, 우리가 드로윙할 때 이 소스에서 이미지의 오리지널 소스로 설정합니다. 이미지 객체가 로드 될 때 페이지의 실제 HTML 이미지 요소의 소스 집합에서 임시 이미지 개체의 소스로 설정합니다. 이는 이미지를 대체할 때 flicker를 피합니다.
9. 우리는 mousemove 이벤트가 일어날 동안 points 배열을 채워야 합니다. 이건 function addPoints에서 담당합니다.
   
   function addPoints()
   {
     if (points)
     {
        var point = { X : window.event.offsetX,
           Y : window.event.offsetY};
        points.push(point);
   
        if (points.length == 3)
        {
           endStroke();
           points = new Array();
           points.push(point);
        }
   
        window.event.returnValue = false;
     }
   }
   • 새로운 point 객체는 이벤트 객체의 offsetX 과 offsetY 속성을 생성하고, 그것을 points 배열에 추가합니다. offsetX 와 offsetY 속성은 이벤트를 일으킨 HTML 요소에 관해 연관된 마우스 위치를 줍니다.
   • 만약 배열의 길이가 3에 이른다면, 우리는 즉각적으로 그리기 동작을 할 것을 서버에 요청하고, points 배열을 재설정하도록 합니다. 이 동작은 사용자가 마우스 버튼을 놓기 전에 드로윙을 볼 수 있도록 합니다.
10. 마지막으로, 이벤트들을 hook해야 합니다. 이건 function pageLoad에서 담당합니다.
    
    function pageLoad()
    {
      var surface = document.getElementById("drawingSurface");
      image = surface.getElementsByTagName("IMG")[0];
      originalSrc = image.src;
    
      surface.attachEvent("onmousedown", startStroke);
      surface.attachEvent("onmouseup", endStroke);
      surface.attachEvent("onmouseout", endStroke);
      surface.attachEvent("onmousemove", addPoints);
    }
    • function pageLoad는 Atlas framework가 로딩을 마쳤을 때 호출되는 특별한 기능입니다. 우리는 이걸 regular window 나 body load events를 대신하여 사용합니다. 그래서 우리는 Atlas가 로딩을 마쳤다는 것을 확신할 수 있습니다.
    • 실제 이미지 요소는 div 태그 와 drawingSurface의 id안에 위치한 곳에서 스케치된 것을 갖습니다. 요소의 크기는 이미지의 크기와 동일합니다. 그래서 우리는 안전하게 drawingSurface div에 이벤트를 추가할 수 있습니다.

Default.aspx

애플리케이션의 각 컴포넌트는 Default.aspx 페이지에서 어셈블(assembled)되어야 할 필요가 있습니다. 다음은 이 페이지의 코드입니다.

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs"
  Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
  "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
  <title>Atlas Scribble Sample</title>
</head>
<body>
  <form id="form1" runat="server">
       <Atlas:ScriptManager ID="AtlasScriptManager" runat="server"
           EnableScriptComponents="False" >
  <Services>
  <Atlas:ServiceReference Path="ScribbleService.asmx" />
  </Services>
  <Scripts>
  <Atlas:ScriptReference Path="ScriptLibrary/Scribble.js" />
  </Scripts>
  </Atlas:ScriptManager>
       <div id="drawingSurface" style="border:solid 1px black;height:200px;width:200px">
       <img alt="Scribble" src="ScribbleImage.ashx" style="height:200px;width:200px" galleryimg="false" />
       </div>
  </form>
</body>
</html>

이 페이지에서 가장 중요하게 보아야 할 것은 atlas:ScriptManager 서버 콘트롤입니다. ScriptManager 서버 콘트롤은 Atlas를 위한 클라이언트측 스크립트 블록과 웹 서비스 프록시 스크립트를 생성해야 할 책임을 가지고 있습니다. Default.aspx 페이지에 있는 ScriptManager 컨트롤을 이용해서 실험해볼 수 있습니다.

1. EnableScriptComponents 속성은 false로 설정합니다. 이로 인해 AtlasRuntime.js Atlas.js대신 AtlasRuntime.js 를 참조하여 클라이언트 측 스크립트 블록을 생성합니다. 우리는 이번 scribble 버전에서 다른 어떠한 Atlas 컴포넌트와 컨트롤을 사용하지 않는 것처럼 Atlas 프레임워크의 라이트 버전를 선호합니다.
2. ScribbleService.asmx 웹 서비스에 서비스 레퍼런스를 추가합니다. 이건 웹 서비스 프록시를 위한 클라이언트측 스크립트에 URL 레퍼런스를 생성할 겁니다.
3. Scribble.js 와 같은 또 다른 스크립트 레퍼런스를 추가합니다.

이건 모든 조각들을 하나로 묶어주므로, 이제 당신은 컴파일 할 수 있고, 프로젝트를 실행할 수 있습니다. 저는 Atlas 스크립트 매니저에 의해 생성된 실제 클라이언트 HTML을 볼 것을 권고합니다.

Atlas 마법

여기에서는 프레임워크가 우리를 위해 어떤 일을 하는지 알려줍니다.

1. 여기에서 우리는 상호 브라우저가 동작하기 위해서 어떤 특별한 효과를 사용하지 않고 웹 애플리케이션을 작성하였습니다. 웹 서비스 호출과 클라이언트측 이벤트 핸들링은 인터넷 익스플로러와 파이어폭스 모두에서 즉각적으로 동작합니다. Atlas 프레임워크는 인터넷 익스플로러 객체와 같이 보이게 하기 위해 파이어폭스 객체에 요구된 자바스크립트 프로토타입을 추가했습니다. 인터넷 익스플로러에 특성화된 기능들인 attachEvent 와 event.offsetX , event.offsetY 는 파이어폭스에서 동작되도록 했습니다. 당신은 이것이 어떻게 이루어지는지 AtlasCompat.js 파일에서 볼 수 있습니다.
2. Scribble 웹 서비스 메소드를 위한 자바스크립트 프록시를 자동적으로 생성합니다. ScribbleService.asmx 파일을 위한 자바스크립트 프록시 파일은 URL ScribbleService.asmx/js를 가집니다. 이건 web.config.에 추가된 the Atlas HTTP 메소드에 의해 생성됩니다.

우리는 어디에 있는가

우리는 웹 서비스를 호출하는 방법과 Atlas를 이용하여 쉽게 브라우저간에 애플리케이션을 사용하는 방법을 알아보았습니다. 다음 튜토리얼에서 우리는 Atlas 클라이언트 클라이언트측 컨트롤과 선언적인 프로그래밍(사용자 피드백에 의존하는!)을 알아볼 것입니다. 만약 당신이 이 튜토리얼에 만족했다면 코멘트를 남겨주세요. 만약 만족스럽지 못했다면 어떻게 개선하면 좋을지 코멘트를 남겨주세요.

다운로드와 소스 실행

Atlas를 재배포 할 수 있도록 되어 있지 않기 때문에, 저는 Atlas 파일을 소스 다운로드에 포함하지 않았습니다. 소스를 동작시키기 위해서는 여기에 적힌 순서에 따라 다운로드 받아야 합니다.

1. 당신은 Atlas 웹 사이트에서 Atlas를 다운로드 받아야 합니다.
2. Atlas blank project template를 다운로드 받은 후에 새로운 웹 사이트를 다음 순서에 따라 생성삽니다. 파일 메뉴에서 새로 만들기를 웹 사이트를 선택합니다.
3. 새롭게 생성된 프로젝트 디렉토리에 소스파일의 압축을 풀어 이전에 존재했던 파일들을 덮어 씁니다.
4. 웹 사이트 메뉴에서 기존 항목 추가를 선택하고, 웹 사이트의 최상위 디렉토리에 ScribbleService.asmx 와 ScribbleImage.ashx를, ScriptLibrary 폴더에서는 Scribble.js를 추가합니다.
5. 빌드하고 웹 사이트를 실행시킵니다.

★ 참고사항
ASP.NET 'Atlas' Web Site Template의 최신 버전은 January 2006 Release입니다.

번역 : 날개달기 (http://blog.naver.com/pinao_forte)
원문 : The Code Project (Atlas Tutorial: Creating an AJAX Scribble application)