IT/모바일
제공: 한빛미디어 네트워크 기사
저자: Jesse Liberty, 조성재 역
제가 Atlas에 대해 읽었던 모든 책이나 기사들은 저에겐 단순한 두통거리였습니다. 그것들은 공통적으로 2가지 메시지를 담고 있었습니다. 첫 번째로 제가 제작한 서버 측 ASP.NET 응용프로그램들이 지금은 오래되었다는 것, 두 번째로 그것들을 고치기 위해서는 정말 복잡한 자바스크립트를 추가해야 한다는 것입니다. 이렇게 슬플수가...
이런 책들과 기사들 (이름은 언급하지 않겠습니다. 요즘들어 변호사 비용이 비싸졌기 때문에...) 모두 진짜 Atlas 프로그래머가 되기 위한 것들을 포함했다고 보지만, 저는 블랙박스로 감춰진 것들을 숨기지 말고, Ajax와 JavaScript 그리고 좋은 평가 수단으로서의 XMLHTTPRequest 객채들을 이해해야 한다고 생각합니다. 이것은 1985년의 진짜 C 프로그래머가 되기 위해 겪었던 악몽과도 같은 일의 재현입니다. 여러분은 실제로 무언가 잘못된 경우 때문에 어셈블러를 이해해야 할 필요가 있었으며, 레지스터에 무엇이 있었는지 보기 위해 스냅샷 디버거에 프로그램을 넣기도 했었습니다. (잠시동안 그런 일을 하지 않았지만, 전 더 많은 것들을 잃어버리지 않았습니다.)
아니, 전 그것을 갖지 않길 원했습니다. 추상화의 사다리 위로 올라가 있는 것은 좋은 것입니다. 우리가 더 높은 추상화 단계의 도구를 사용하는 것을 말했을 때가 옳았습니다. 마이크로소프트와 다른 벤더들이 제공하는 잘 테스트된 컨트롤들을 연결하는 것을 떠나서, 우리는 문제에 더 집중할 수 있습니다. 저는 자료형도 불안정하고 객체지향적이지도 않은 자바스크립트를 쓰게끔 된다면 욕을 해댈겁니다. 연기속에서, 하수도 아래에서, 문 밖에서 진행해온 20년. 우웩~
운좋게도, 그것은 얼리어답터의 조각난 현미경 렌즈를 통해 보이는 수평선에 나타난 키메라입니다. 스크립트 지향적 접근은 자바스크립트 기반이 최고라고 알고 있는 사람들이 탐사중인 먼저 배포된 기술의 인공물입니다. Ajax가 큰 관심을 얻으며 시작됐을 때, 그것을 쓰려던 사람들은 실제로 자바스크립트 애호가들이었습니다. 그들은 사용자들이 경험했던 것보다 충분히 다른 차이점을 갖춘 클라이언트 측의 자바스크립트 코드를 만들 수 있었던 사람들이었습니다.
Atlas 전문가는 스크립트 전문가와 같다고 인식됩니다. 하지만, 잘못된 인식은 노출될 필요가 있으며 가능한 빨리 깨져야 합니다. ASP.NET 프로그래밍 4판이 출간되었을 때, 우리는 Atlas를 충분히 다룰 것입니다만, 자바스크립트에 대해서는 거의 다루지 않을 것입니다. 저는 응용프로그램 프로그래머들이 응용프로그램에 초점을 두고, 컨트롤 프로그래머들이 훌륭히 캡슐화된 (사용자들이 제공할 수 없는, 블랙박스를 여는 것이 워런티를 피하는 것이 아닌) 컨트롤들을 완성하는데 초점을 둘 것이라고 생각합니다.
이 기사는 자바스크립트를 보여주지 않습니다.
이 기사를 쓰는 동안, 저는 Atlas 컨트롤들과 Visual Studio 2005에서의 그래그 앤 드랍을 사용하여 하향식으로 프로그래밍을 시작하고 있습니다. 그리고 가능한 모든 곳에서 블랙박스 안을 들여다보지 않을 것입니다. (모든 사람들이 불가능하게 보거나, 적어도 죄받을 만한 일이라고 봅니다만, 아닌가요? 그러나, 제가 어떻게 일반 ASP.NET 컨트롤들을 알려드릴지에 따라 결정될 것입니다.)
모든것을 다룰까요? 아니오. 그러나 우리는 여러분이 작업할 ASP.NET 프로그램을 어떻게 하면 빠르고 쉽게 Atlas 컨트롤들을 사용하여 개선할지에 대해 구성할 것입니다. Atlas 컨트롤들은 마이크로소프트에서 무료로 다운로드 할 수 있으며 잘 작동합니다. 그리고 제 생각엔 여러분들이 이 방법들을 배우자마자 이 방법을 지지할 것이라 생각합니다.
여러분이 Atlas 응용프로그램을 작성하는데 필요한 것
Microsoft Atlas 웹사이트는 여러분이 원하는 것에 대해, 그리고 파일들을 어떻게 설치할지에 대해 (잘 아시다시피, 비주얼 스튜디오에 어떻게 통합하는지) 아주 좋은 설명을 제공합니다. ASP.NET Atlas 홈페이지를 검색하고 JUNE CTP 와 관련된 다운로드 아이콘을 클릭해주십시오. (짐작컨데 지금 최신의 CTP가 있다면 그걸 써보고 싶고, 이 기사의 예제 코드가 잘 작동하길 바라거나 약간만 수정해서 가능하기를 바랄 것입니다.) June CTP는 문서, 예제, 설치 3 부분으로 구성됩니다. 설치부분만 사용해도 됩니다만, 여러분은 3가지 모두를 원할 것입니다. 완료했을 때 홈페이지로 돌아가서 Atlas 컨트롤 툴킷에 클릭하십시오. 이 기사 다음에 클릭 하시는 것이 좋을 것입니다.
다운로드한 것에는 여러분의 도구상자에 Atlas와 Atlas Toolkit, 두 탭을 추가하는 것과 (정확한 DLL을 검색할 수 있는 수단인) 컨트롤들을 탭에 두는 것에 대한 지시사항을 포함합니다. 이 작업은 무척 쉽습니다. 만약 드래그 앤 드랍 접근이 적용되지 않는다면, 여러분은 항상 도구상자 탭에서 오른쪽 클릭을 하고 "Choose Items"를 선택한 후 "Browse"를 클릭하여 Bin 디렉터리에 있는 DLL을 선택할 수 있습니다. 그렇게 하면 그림 1에 보이는 것처럼 모든 Atlas 컨트롤들을 dll로부터 탭에 추가할 것입니다.
그림1. dll로부터 컨토를을 더하기
동작하는 프로그램으로 시작하기
5월에 저는 Building a Web-Based Bug Tracking Application를 출판했습니다. 기사와 완벽한 소스는 제 웹 사이트에서 얻으실 수 있습니다. (책을 클릭하고 기사를 클릭하십시오.) 저희는 존재하는 응용프로그램을 개선하기 위해 Atlas 기능을 추가하는 시작점으로 Tiny Bug Tracker를 구성하는 응용프로그램을 이용할 것입니다. 나아가서 여러분이 이미 작성한 어떤 웹 응용프로그램을 개선하는데 Atlas 컨트롤들을 추가할 수 있을 것입니다.
Tiny Bug Tracker의 목적은 개인 프로그래머(혹은 아주 작은 그룹의 프로그머들)에게 알려진 버그들의 진행, 작업, 수정, 그리고 팀의 여러 구성원들이 버그 항목의 닫은 상태를 추적하기 위한 간단한 웹 기반 응용프로그램을 제공하는 것입니다. 그림 2에서 보이는 것처럼 웹 사이트 관리자 도구를 사용하여 사용자와 역할을 생성하는 것으로 시작합니다.
그림2. WAT로 사용자 추가하기
다음으로 그림 3에서 보이는 것처럼, 응용프로그램을 사용하기 위해 사용자가 인증을 합니다.
그림3. 로그인
그림 4에서 보이는 것처럼 사용자들은 버그를 입력하기 위해 새로운 버그 형식을 제공하는 (또한 버그를 수정하는데 사용되는) 메뉴를 클릭할 수 있습니다.
그림4. 버그 입력하기
이 버그들의 모든것은 그림 5에 나타난 것과 같이, Bugs 테이블에 각 버그에 대한 하나의 항목, BugHistories 테이블에 버그의 각 수정에 대한 하나의 항목으로 이뤄진 TBTData 데이타베이스에 위치합니다.
그림5. 버그 데이터베이스
여러분의 데이타베이스에 버그를 갖게 되면, 여러분은 TBTReview.aspx 에서 버그들을 다시 볼 수 있습니다. Details 를 클릭하는 것은 그 버그에 대한 세부사항 패널을 전달하고, 규격과 다른 영역을 나타냅니다. 그림 6 과 같이 History 를 클릭하는 것은 주어진 버그에 대한 각각의 변경된 점을 갖는 규격을 전달합니다. 그리고 그 변경된 점에 대한 세부사항을 나타나게 할 수 있습니다.
그림6. 미리보기
우리가 이 응용프로그램이 가지고 있는 문제를 해결하는데 Atlas가 도움이 됩니다. 여러분이 한 버그의 세부사항에서 다음 세부사항으로 이동할 때마다, 전체 페이지가 서버에 다시 포스트 됩니다. 거기엔 지연시간이 있으며 그 때문에 화면의 깜빡임이 있습니다. 또한, 미리보기를 스크롤하면서, 새로운 버그에 들어가려 할 때에는, 메뉴가 맨 위에 있어서 다시 스크롤을 위로 올려야 합니다. 이 부분은 사용하기 편한 메뉴가 될 것입니다. 마지막으로, 만약 여러분이 새 버그로 들어갈 때 Cancel 을 클릭하면 이 작업은 취소됩니다. 겉으로 드러내지 않고 바로 작업처리를 버리는 것입니다.
Atlas 버전 생성하기
작업을 편하게 하기 위해, 이미 있는 응용프로그램에 Atlas 컨트롤들을 추가하는 것보다, 새 Atlas 응용프로그램을 만드는 것이 좋습니다. 그 다음에 이전 응용프로그램에 있던 페이지들을 추가할 것입니다. 이 방법은 비주얼 스튜디오가 Atlas 에 필요로 하는 모든 레퍼런스들을 설치할 것이며, 이전 기사의 페이지들을 사용하여 기본 응용프로그램 코드가 작동하는지 알 수 있도록 하고, 기본적인 기능들을 다시 시험해보지 않도록 합니다. 저는 Atlas의 June CTP 버전을 사용하고 있다는 것을 주의하십시오. 만약 여러분이 다른 버전을 사용하고 있다면, 여러분의 재량에 따라 결과가 다를 것입니다.
원본 기사를 잠시 읽어본다면 다음의 내용이 훨씬 쉽게 이해될 것입니다. 전 여기서 기다릴 것입니다. 여러분이 읽어보실 시간을 갖으십시오. 전 다른 프로젝트를 작업할 것입니다. 준비되면 저를 깨워주세요.
첫번째 개선: 깜빡임 감소-각 페이지의 일부분만 갱신하기
Tiny Bug Tracker 응용프로그램의 가장 큰 문제 중 하나는 다른 버그의 세부사항에 대해 요청할 때마다, 전체 페이지가 다시 그려지고 지겨운 깜빡임을 유발한다는 것입니다. (캐쉬로 인해 데이터베이스는 매번 멈추지 않으나, 서버에 대한 라운드 트립이 현저한 정지 상태를 유발합니다.)
우리는 업데이트 되어야 할 페이지의 일부분만을 업데이트 하도록 Atlas를 사용할 수 있습니다. 그렇게 하기 위해, 우리는 TBTReview 페이지에 네가지 업데이트 패널을 추가할 것입니다. 업데이트 패널은 페이지의 다른 것들과 독립적으로 갱신되기 위해 세부적으로 설계된 Atlas 컨트롤입니다. 이것이 어떻게 동작하는지에 대한 세부사항을 아는 것은 매력있는 것이지만, 여러분이 실제로 기억할 내용은 이것이 비동기적으로 동작한다는 것입니다. 즉, 전체 페이지를 모두 다시 포스트 할 필요가 없습니다. 심지어 더 좋은 것은, 여러분이 도구상자로부터 페이지에 드래그 하여 바로 올려놓는 것으로 각 업데이트 패널을 생성할 수 있다는 것입니다. (얼쑤!) 그것 참. 비주얼 스튜디오가 여러분들을 위해 작업을 해줍니다. (또한 여러분은 소스 뷰에 수동으로 업데이트 패널을 추가하는 것으로 업데이트 패널을 생성하거나, 실행시에 C#에서 동적으로 업데이트 패널을 추가할 수 있습니다.)
단계적으로 Atlas 응용프로그램 생성하기
여러분은 여러분이 가지고 있는 응용프로그램에 Atlas 컨트롤들과 라이브러리들, 레퍼런스들을 추가하는 것으로 새 응용프로그램을 생성할 수 있습니다. 정말입니다. 그러나 제가 위에서 말했듯이, 저는 그렇게 하지 않을 것입니다. 왜냐하면 베타 소프트웨어와 함께 비주얼 스튜디오가 한 번에 모든 것을 설치하도록 하는 것을 좋아하기 때문입니다. 그래서, 저는 그림 7에서 나오듯이 새 웹 사이트를 생성하고 템플릿에 "Atlas Web Site"를 선택하는 것으로 Atlas 버그 트랙커라고 불리는 웹 사이트를 생성할 것입니다.j
그림7. 새로운 Atlas 웹사이트 생성하기
기본적인 사이트는 기본적으로 포함되어 있는 readme.txt, eula.rtf, default.aspx, web.config, 그리고 bin 안에 있는 Microsoft.Web.Atlas.dll 과 같은 몇몇 파일들로 구성될 것입니다. readme.txt, eula.rtf, Default.aspx 파일을 지우세요. 여러분은 그것들을 필요로 하지 않을 것입니다.
WAT를 열고, security 탭에서 forms-based authentication을 선택한 다음, 이전 응용프로그램에 있었던 사용자 이름과 역할을 생성하십시오. (Alex, Dan, Jesse, Ctacey와 같은 이름, Developer, Manager, QA, 그리고 User 등과 같은 역할)
TBTMaster.master, TBTReview.aspx, TBTBug.aspx, TBTWelcome.aspx 페이지와 그 뒤의 코드 페이지에 복사하십시오. 그리고 그것들을 프로젝트에 추가하십시오. web.config 파일에 복사하지 마십시오.
WAT가 여러분이 Atlas 프로젝트를 선택할 때 여러분들을 위해 생성된 web.config 파일을 수정했습니다. 그래서 여러분들은 폼 기반 보안을 갖는 Atlas 페이지로서 양쪽의 조합된 설정을 동시에 가지고 있습니다.
여러분들은 프로그램을 변경하기 이전에 프로그램을 실행해보길 원할 것이고, 모든 설정이 잘되었는지 확인하길 원할 것입니다.
주의: 완성 소스 코드는 (책을 클릭하고 기사를 클릭하면 나오는) 저의 웹사이트에서 다운로드 받을 수 있습니다. 제 개인적인 지원 포럼에 대한 링크와 흥미로울만한 내용도 같이 있습니다.
스크립트 관리자
Atlas에 대한 핵심 컨트롤은 스크립트 관리자입니다. 가상적으로 모든 Atlas 컨트롤은 컨트롤이 있는 페이지가 스크립트 관리자를 필요로 합니다. 그 페이지에서 모든 Atlas 컨트롤들을 조정하는 것이 스크립트 관리자의 일입니다. 운좋게도, 이 응용프로그램은 주 페이지를 가지고 있으므로 스크립트 관리자를 주 페이지에 하나만 놓는 것으로 응용프로그램의 각 페이지에 대한 스크립트 관리자를 제공할 수 있습니다.
우리가 스크립트 관리자에 추가할 필요가 있는 한가지 속성은 EnablePartialRendering= "True" 입니다. 왜냐하면 이 속성이 페이지 전체를 포스트하지 않고 비동기적으로 페이지의 일부분을 나타나도록 하는 기능을 작동시키기 때문입니다.
여러분은 스크립트 관리자 컨트롤을 주 페이지 어디에든 위치할 수 있습니다. 저는 로그인 상태 컨트롤 아래에 바로 두었습니다.
mmlt;atlas:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="True" /mmgt;
컨트롤을 도구상자로부터 드래그 앤 드랍하는 것은 아마도 페이지에 컨트롤을 추가하는 가장 쉬운 방법일 것이며, 그렇게 하는 것이 페이지에 컨트롤을 적절하게 등록하도록 보장합니다. 하지만 그렇게 할 때 그림 8에서 보이는 것처럼 Destination File Exists 대화상자를 보게 될 것입니다.
그림8. Destination File Exists
컨트롤이 페이지에 추가될 때, 그것은 대화 상자와 함께 Microsoft.Web.Atlas.dll 을 보냅니다. Yes를 클릭하고 파일을 갱신하지 않을 이유가 없습니다.
섹션에 TBTReview를 쪼개넣기
배치해놓은 스크립트 관리자로, 이미 여러분은 다양한 규격들에 대한 비동기 업데이트들과 DetailsView 객체들을 TVTReview 페이지에 추가할 준비가 되었습니다. 그렇게 하기 위해 페이지에 있는 도구상자의 Atlas 탭으로부터 4개의 UpdatePanel 객체들을 드래그하십시오. 각 UpdatePanel은 독립적으로 갱신될 수 있는 UI의 블럭을 나타냅니다. 저는 BugReviewGrid와 그것의 데이터 소스를 처음에 두고, BugDetailsView와 그 데이터를 2번째에, BugHistoryGrid와 그 데이터를 세번째, BugHistoryDetailsView와 그 데이터 소스를 4번째에 두었습니다. 여러분들도 Design 뷰에서 드래그 앤 드랍을 하거나, 소스뷰에서 HTML을 옮기는 것으로 이 작업을 할 수 있습니다.
예를 들어 그림 9에서 UpdatePanel2 를 폼에 드래그 했고 패널에 BugDetailsView를 드래깅하고 있습니다.
그림9. 업데이트 패널에 드래그하기
마우스 버튼을 떼었을 때, 소스뷰 안에서 HTML에 반영되는 것으로 BugDetailsView와 이것의 SqlDataSource가 Update Panel 안에 내장될 것입니다. (간소하게 여기선 생락되었습니다.)
mmlt;span class="style1">mmlt;atlas:UpdatePanel ID="UpdatePanel2" runat="server"mmgt;
mmlt;ContentTemplatemmgt;mmlt;/spanmmgt;
mmlt;asp:DetailsView ... mmlt;/asp:DetailsViewmmgt;
mmlt;asp:SqlDataSource ...mmgt; mmlt;/asp:SqlDataSourcemmgt;
mmlt;span class="style1"mmgt;mmlt;/ContentTemplatemmgt;
mmlt;/atlas:UpdatePanelmmgt;mmlt;/spanmmgt;
mmlt;/spanmmgt;
성능상으로 변경된 것들은 즉각적이고 놀랄만한 것입니다. 갑자기 페이지가 껌뻑임을 멈췄습니다. 여러분이 어떤 버그의 세부사항에서 다른 버그로 이동할 때, 부드럽고 빠르며 껌뻑임도 없습니다. 차이점이 실제 그러한지 확인하기 위해 마스터 페이지에 있는 스크립트 관리자에서 EnablePartialRendering="True" 속성을 제거하고 응용프로그램을 다시 실행해보십시오. 결코 모르지 않을 것입니다. (속성을 되돌려 놓는 것을 잊지 마십시오!)
엄마 봐봐! 자바스크립트가 없어.
잠시 멈추고 자바스크립트를 쓸 시간이 없었다는 것에 주목하십시오. 여러분은 XMLHttpRequest를 건들지 않았으며, 이것이 어떻게 동작을 완료하는지 생각하지도 않았습니다. 이것은 예를 들어 DataGrid 컨트롤이 스스로 작동하는 것처럼 모두 아주 놀라울 만한 것들입니다. 제 말의 요점이 이것입니다. 단순히 괜찮은 것이 아니라 엄청나게 좋습니다. 이러한 무시가 여러분들이 시도하려는 것에 초점을 맞추도록 만들며, Microsoft가 컨트롤들을 제작하는데 힘을 쏟도록 만듭니다. (이봐요! 그만 훌쩍거려요. 만약 당신이 정말로 그게 어떻게 동작하는지 알기 원한다면, 제가 장담하죠. 우리는 모든 잔인할 정도의 세부사항을 지향하는 자바스크립트와 Atlas 프로그램에 대한 책을 엄청나게 많이 가지고 있습니다. 그러나 작업을 완료하기 위한 관점에서는 한순간으로 충분하지 않나요?)
그러나 더 많은게 있습니다...
좋아요, 우리는 비동기식 업데이트를 완성했고, 여기까지는 Atlas 에 관한 아주 좋은 감정을 느낄 수 있습니다만, 잠시만 컨트롤 익스텐더들에 대해 짚고 넘어가자고요. 여러분은 Atlas 도구키트로 아주 일부를 얻었습니다. (그리고 더 많은 것들은 시간이 알려주겠죠.) 제가 정말로 좋아하는 것은 AlwaysVisible 익스텐더 입니다. 이것은 여러분이 어떤 컨트롤을 갖출 수 있도록 하며, "사용자들이 이것으로 스크롤 하도록 내 페이지에 보이게 하길 원해." 라고 말하게 할 것입니다. 그뿐만이 아니라 이것은 이것저것 따져봐도, 아주 인상깊으며, 실제로 아주 유용합니다. 이것은 여러분들에게 어떤 혼란 없이 프레임들의 힘과 (아까 전에 제 디자이너 친구들이 저에게 말하는 프레임들)을 부여할 것입니다.
우리의 주 페이지는 익스텐더에 대한 몇몇 수정될 항목을 가지고 있습니다. 그 중의 하나가 사용자가 버그를 추가하도록 하게 해주는 메뉴입니다. 심지어 그/그녀가 다시보기 페이지에서 스크롤을 했을 때에도 사용자가 그 메뉴를 쓸 수 있다면 좋을 것입니다. 이것은 황당할 정도로 너무 쉽게 고칠 수 있습니다.
TBTMaster.master 를 열고 페이지에 AlwaysvisiblecontrolExtender 의 인스턴스를 드래그 합니다. 소스 뷰에서 이렇게 하세요. 여는 태그와 닫는 태그 사이에 여러분은 AlwaysVisibleControlProperties 형식의 한가지 요소를 추가할 것입니다. (여러분들의 지력으로 여러분들 스스로 알아맞춰 보세요.) 여러분들은 이미 속성에 대해 알고 있겠지만, 저는 그것들을 여러분들에게 보여줄 것입니다.
TargetControlID="mnuTBTNavigation"
VerticalSide ="top"
VerticalOffset = "10"
HorizontalOffset ="10"
HorizontalSide ="right"
ScrollEffectDuration =".1" /mmgt;
TargetControlID는 여러분이 보이도록 만들 컨트롤입니다. 이 경우는 menu 입니다. 수직, 수평부분은 (그림 10에서처럼) 메뉴를 어디에 나타내게 하는지 지시합니다. 오프셋은 왼쪽 상단으로부터 여러분이 원하는 만큼 얼마나 떨어지게 하는지, 그리고 스크롤 효과 시간을 여러분이 얼마나 유지할 것인지에 대한 값입니다. (이 경우 0.1초 입니다.) 저는 이것을 허용하는 것을 싫어합니다만 이것은 여러분들이 결정하십시오. Atlas는 나머지를 제거합니다. 스크롤을 하면서 메뉴는 애완견처럼 여러분을 따라다닙니다.
그림10. 항상 보이는 메뉴
여러분이 버그의 세부사항을 찾아보기 위해 스크롤하는 만큼 메뉴가 따라다니다니 놀랍군요. 이렇게 간단한 것만으로도 다른 사람들은 엄청 힘들게 만들만한 것을 쉽게 만들다니... 전 이런 모든 것들을 폼에 드래그 하고, 이것이 작동하도록 마이크로소프트사가 하나의 컨트롤에 캡슐화 했다는 사실이 너무나 좋습니다. --풉!-- 네, 시간이 지났어요. 저는 그것들이 어떻게 동작하는지 알았으면 합니다만, 여러분은 어떤가요? 전 마감할 때가 다 되었고, 이 프로그램은 잘 동작합니다.
취소를 위한 트랩 생성하기
우리가 십수번 (혹은 천 번 넘게) 쓰는 코딩 중 하나가 취소 버튼을 위한 "트랩"입니다. 우리는 사용자가 Cancel을 클릭할 때, 사용자에게 그/그녀가 작업한 내용을 모두 취소한다는 내용을 확인하기 위한 팝업창을 원합니다. 이것은 ASP.NET 응용프로그램 안에서 장난처럼 작성될 수 있습니다. 몇몇 자바스크립트에서 필요로 하는 대화상자처럼 말이죠. 다시 한 번 Atlas는 이런 하찮은 것뿐만이 아니라, 나머지 부분도 똑같이 구성하여, 현재 가지고 있는 응용프로그램과 경계없이 통합됩니다.
TBTBug.aspx 파일은 btnSave와 btnCancel, 두 컨트롤들을 가지고 있습니다. btnCancel에 대한 트랩을 추가하기 위해 여러분이 해야 할 모든것은 ConfirmExtender를 두 버튼이 있는 셀에 드래그 하는 것입니다.
mmlt;td colspan="2"mmgt;
mmlt;AtlasToolkit:ConfirmButtonExtender
ID="ConfirmButtonExtender1" runat="server"mmgt;
mmlt;AtlasToolkit:ConfirmButtonProperties ConfirmText="Are you sure you want to discard this?"
TargetControlID="btnCancel" /mmgt;
mmlt;/AtlasToolkit:ConfirmButtonExtendermmgt;
mmlt;asp:Button ID="btnSave" runat="server" Text="Save" BackColor="Lime" Font-Bold="True" OnClick="btnSave_Click" /mmgt;
mmlt;asp:Button ID="btnCancel" runat="server" Text="Cancel" BackColor="Red" Font-Bold="True" ForeColor="Yellow" OnClick="btnCancel_Click" /mmgt;
mmlt;/tdmmgt;
이 효과는 그림 11과 같습니다.
그림11. 취소 확인
ConfirmExtender는 자체적으로 두 가지 속성을 갖는 ConfirmButtonProperties 형식의 내부적인 속성을 가집니다. 한 속성은 메시지 박스 안에 표시될 텍스트에 대한 것이고, 다른 하나는 확인을 알리는 버튼을 확인하기 위한 것입니다.
이 작업을 위해, 컨트롤은 꼭 등록되어 있어야 합니다만, 이것은 여러분이 폼에 컨트롤을 드래그 할 때에 이미 완료되었습니다. 얼씨구나! 제가 사용하는 버전 안에선 태그가 CC1에 설정되어 있지만, 여러분이 원하는 대로 태그를 변경하는 것도 간단합니다. 저는 그것을 AtlasToolkit 으로 변경했습니다.
mmlt;%@ Register Assembly="AtlasControlToolkit" Namespace="AtlasControlToolkit" TagPrefix="AtlasToolkit" %mmgt;
그래서 제가 컨트롤을 사용 할 때, 저는 이렇게 코드를 쓸 수 있습니다. mmlt;AtlasToolkit:ConfirmButtonProperties, 컨트롤의 소스 중 일부입니다. 꼭 필요하진 않지만, 좋습니다.
Toolkit과 함께 유용한 컨트롤들이 많이 있습니다. 그리고 Atlas에서 볼 수 있는 How Do I 시리즈 비디오 튜토리얼을 보기를 권합니다. 그것은 이 부분과 이후의 것도 모두 다룰 것입니다. 여러분은 어떤 Atlas 컨트롤들이 발표되었는지 꾸준히 업데이트 되는 내용을 RSS 피드를 통해 구독하길 원할지도 모르겠습니다.
이 글 전체를 통틀어, 어느 누구도 여러분에게 Atlas가 어렵다고 강요할 수 없습니다. 주안점은 이것이 ASP.NET처럼 쉽고, 여러분의 응용프로그램을 구성하는데 초점을 두도록 하며 밑바닥에서부터 구성하도록 만들지 않는다는 것입니다.
Jesse Liberty 는 Microsoft .NET MVP 이며 베스트셀러인 오라일리 미디어의 ASP.NET 프로그래밍, C# 프로그래밍, VB2005 프로그래밍, 그리고 수십권의 웹과 객체지향 언어에 대한 다른 책들의 저자입니다. 그는 .NET 에서 계약 프로그래밍, 상담, 그리고 온라인 강좌를 제공하는 자유연합의 대표입니다.
저자: Jesse Liberty, 조성재 역
제가 Atlas에 대해 읽었던 모든 책이나 기사들은 저에겐 단순한 두통거리였습니다. 그것들은 공통적으로 2가지 메시지를 담고 있었습니다. 첫 번째로 제가 제작한 서버 측 ASP.NET 응용프로그램들이 지금은 오래되었다는 것, 두 번째로 그것들을 고치기 위해서는 정말 복잡한 자바스크립트를 추가해야 한다는 것입니다. 이렇게 슬플수가...
이런 책들과 기사들 (이름은 언급하지 않겠습니다. 요즘들어 변호사 비용이 비싸졌기 때문에...) 모두 진짜 Atlas 프로그래머가 되기 위한 것들을 포함했다고 보지만, 저는 블랙박스로 감춰진 것들을 숨기지 말고, Ajax와 JavaScript 그리고 좋은 평가 수단으로서의 XMLHTTPRequest 객채들을 이해해야 한다고 생각합니다. 이것은 1985년의 진짜 C 프로그래머가 되기 위해 겪었던 악몽과도 같은 일의 재현입니다. 여러분은 실제로 무언가 잘못된 경우 때문에 어셈블러를 이해해야 할 필요가 있었으며, 레지스터에 무엇이 있었는지 보기 위해 스냅샷 디버거에 프로그램을 넣기도 했었습니다. (잠시동안 그런 일을 하지 않았지만, 전 더 많은 것들을 잃어버리지 않았습니다.)
아니, 전 그것을 갖지 않길 원했습니다. 추상화의 사다리 위로 올라가 있는 것은 좋은 것입니다. 우리가 더 높은 추상화 단계의 도구를 사용하는 것을 말했을 때가 옳았습니다. 마이크로소프트와 다른 벤더들이 제공하는 잘 테스트된 컨트롤들을 연결하는 것을 떠나서, 우리는 문제에 더 집중할 수 있습니다. 저는 자료형도 불안정하고 객체지향적이지도 않은 자바스크립트를 쓰게끔 된다면 욕을 해댈겁니다. 연기속에서, 하수도 아래에서, 문 밖에서 진행해온 20년. 우웩~
운좋게도, 그것은 얼리어답터의 조각난 현미경 렌즈를 통해 보이는 수평선에 나타난 키메라입니다. 스크립트 지향적 접근은 자바스크립트 기반이 최고라고 알고 있는 사람들이 탐사중인 먼저 배포된 기술의 인공물입니다. Ajax가 큰 관심을 얻으며 시작됐을 때, 그것을 쓰려던 사람들은 실제로 자바스크립트 애호가들이었습니다. 그들은 사용자들이 경험했던 것보다 충분히 다른 차이점을 갖춘 클라이언트 측의 자바스크립트 코드를 만들 수 있었던 사람들이었습니다.
Atlas 전문가는 스크립트 전문가와 같다고 인식됩니다. 하지만, 잘못된 인식은 노출될 필요가 있으며 가능한 빨리 깨져야 합니다. ASP.NET 프로그래밍 4판이 출간되었을 때, 우리는 Atlas를 충분히 다룰 것입니다만, 자바스크립트에 대해서는 거의 다루지 않을 것입니다. 저는 응용프로그램 프로그래머들이 응용프로그램에 초점을 두고, 컨트롤 프로그래머들이 훌륭히 캡슐화된 (사용자들이 제공할 수 없는, 블랙박스를 여는 것이 워런티를 피하는 것이 아닌) 컨트롤들을 완성하는데 초점을 둘 것이라고 생각합니다.
이 기사는 자바스크립트를 보여주지 않습니다.
이 기사를 쓰는 동안, 저는 Atlas 컨트롤들과 Visual Studio 2005에서의 그래그 앤 드랍을 사용하여 하향식으로 프로그래밍을 시작하고 있습니다. 그리고 가능한 모든 곳에서 블랙박스 안을 들여다보지 않을 것입니다. (모든 사람들이 불가능하게 보거나, 적어도 죄받을 만한 일이라고 봅니다만, 아닌가요? 그러나, 제가 어떻게 일반 ASP.NET 컨트롤들을 알려드릴지에 따라 결정될 것입니다.)
모든것을 다룰까요? 아니오. 그러나 우리는 여러분이 작업할 ASP.NET 프로그램을 어떻게 하면 빠르고 쉽게 Atlas 컨트롤들을 사용하여 개선할지에 대해 구성할 것입니다. Atlas 컨트롤들은 마이크로소프트에서 무료로 다운로드 할 수 있으며 잘 작동합니다. 그리고 제 생각엔 여러분들이 이 방법들을 배우자마자 이 방법을 지지할 것이라 생각합니다.
여러분이 Atlas 응용프로그램을 작성하는데 필요한 것
Microsoft Atlas 웹사이트는 여러분이 원하는 것에 대해, 그리고 파일들을 어떻게 설치할지에 대해 (잘 아시다시피, 비주얼 스튜디오에 어떻게 통합하는지) 아주 좋은 설명을 제공합니다. ASP.NET Atlas 홈페이지를 검색하고 JUNE CTP 와 관련된 다운로드 아이콘을 클릭해주십시오. (짐작컨데 지금 최신의 CTP가 있다면 그걸 써보고 싶고, 이 기사의 예제 코드가 잘 작동하길 바라거나 약간만 수정해서 가능하기를 바랄 것입니다.) June CTP는 문서, 예제, 설치 3 부분으로 구성됩니다. 설치부분만 사용해도 됩니다만, 여러분은 3가지 모두를 원할 것입니다. 완료했을 때 홈페이지로 돌아가서 Atlas 컨트롤 툴킷에 클릭하십시오. 이 기사 다음에 클릭 하시는 것이 좋을 것입니다.
다운로드한 것에는 여러분의 도구상자에 Atlas와 Atlas Toolkit, 두 탭을 추가하는 것과 (정확한 DLL을 검색할 수 있는 수단인) 컨트롤들을 탭에 두는 것에 대한 지시사항을 포함합니다. 이 작업은 무척 쉽습니다. 만약 드래그 앤 드랍 접근이 적용되지 않는다면, 여러분은 항상 도구상자 탭에서 오른쪽 클릭을 하고 "Choose Items"를 선택한 후 "Browse"를 클릭하여 Bin 디렉터리에 있는 DLL을 선택할 수 있습니다. 그렇게 하면 그림 1에 보이는 것처럼 모든 Atlas 컨트롤들을 dll로부터 탭에 추가할 것입니다.
그림1. dll로부터 컨토를을 더하기
동작하는 프로그램으로 시작하기
5월에 저는 Building a Web-Based Bug Tracking Application를 출판했습니다. 기사와 완벽한 소스는 제 웹 사이트에서 얻으실 수 있습니다. (책을 클릭하고 기사를 클릭하십시오.) 저희는 존재하는 응용프로그램을 개선하기 위해 Atlas 기능을 추가하는 시작점으로 Tiny Bug Tracker를 구성하는 응용프로그램을 이용할 것입니다. 나아가서 여러분이 이미 작성한 어떤 웹 응용프로그램을 개선하는데 Atlas 컨트롤들을 추가할 수 있을 것입니다.
Tiny Bug Tracker의 목적은 개인 프로그래머(혹은 아주 작은 그룹의 프로그머들)에게 알려진 버그들의 진행, 작업, 수정, 그리고 팀의 여러 구성원들이 버그 항목의 닫은 상태를 추적하기 위한 간단한 웹 기반 응용프로그램을 제공하는 것입니다. 그림 2에서 보이는 것처럼 웹 사이트 관리자 도구를 사용하여 사용자와 역할을 생성하는 것으로 시작합니다.
그림2. WAT로 사용자 추가하기
다음으로 그림 3에서 보이는 것처럼, 응용프로그램을 사용하기 위해 사용자가 인증을 합니다.
그림3. 로그인
그림 4에서 보이는 것처럼 사용자들은 버그를 입력하기 위해 새로운 버그 형식을 제공하는 (또한 버그를 수정하는데 사용되는) 메뉴를 클릭할 수 있습니다.
그림4. 버그 입력하기
이 버그들의 모든것은 그림 5에 나타난 것과 같이, Bugs 테이블에 각 버그에 대한 하나의 항목, BugHistories 테이블에 버그의 각 수정에 대한 하나의 항목으로 이뤄진 TBTData 데이타베이스에 위치합니다.
그림5. 버그 데이터베이스
여러분의 데이타베이스에 버그를 갖게 되면, 여러분은 TBTReview.aspx 에서 버그들을 다시 볼 수 있습니다. Details 를 클릭하는 것은 그 버그에 대한 세부사항 패널을 전달하고, 규격과 다른 영역을 나타냅니다. 그림 6 과 같이 History 를 클릭하는 것은 주어진 버그에 대한 각각의 변경된 점을 갖는 규격을 전달합니다. 그리고 그 변경된 점에 대한 세부사항을 나타나게 할 수 있습니다.
그림6. 미리보기
우리가 이 응용프로그램이 가지고 있는 문제를 해결하는데 Atlas가 도움이 됩니다. 여러분이 한 버그의 세부사항에서 다음 세부사항으로 이동할 때마다, 전체 페이지가 서버에 다시 포스트 됩니다. 거기엔 지연시간이 있으며 그 때문에 화면의 깜빡임이 있습니다. 또한, 미리보기를 스크롤하면서, 새로운 버그에 들어가려 할 때에는, 메뉴가 맨 위에 있어서 다시 스크롤을 위로 올려야 합니다. 이 부분은 사용하기 편한 메뉴가 될 것입니다. 마지막으로, 만약 여러분이 새 버그로 들어갈 때 Cancel 을 클릭하면 이 작업은 취소됩니다. 겉으로 드러내지 않고 바로 작업처리를 버리는 것입니다.
Atlas 버전 생성하기
작업을 편하게 하기 위해, 이미 있는 응용프로그램에 Atlas 컨트롤들을 추가하는 것보다, 새 Atlas 응용프로그램을 만드는 것이 좋습니다. 그 다음에 이전 응용프로그램에 있던 페이지들을 추가할 것입니다. 이 방법은 비주얼 스튜디오가 Atlas 에 필요로 하는 모든 레퍼런스들을 설치할 것이며, 이전 기사의 페이지들을 사용하여 기본 응용프로그램 코드가 작동하는지 알 수 있도록 하고, 기본적인 기능들을 다시 시험해보지 않도록 합니다. 저는 Atlas의 June CTP 버전을 사용하고 있다는 것을 주의하십시오. 만약 여러분이 다른 버전을 사용하고 있다면, 여러분의 재량에 따라 결과가 다를 것입니다.
원본 기사를 잠시 읽어본다면 다음의 내용이 훨씬 쉽게 이해될 것입니다. 전 여기서 기다릴 것입니다. 여러분이 읽어보실 시간을 갖으십시오. 전 다른 프로젝트를 작업할 것입니다. 준비되면 저를 깨워주세요.
첫번째 개선: 깜빡임 감소-각 페이지의 일부분만 갱신하기
Tiny Bug Tracker 응용프로그램의 가장 큰 문제 중 하나는 다른 버그의 세부사항에 대해 요청할 때마다, 전체 페이지가 다시 그려지고 지겨운 깜빡임을 유발한다는 것입니다. (캐쉬로 인해 데이터베이스는 매번 멈추지 않으나, 서버에 대한 라운드 트립이 현저한 정지 상태를 유발합니다.)
우리는 업데이트 되어야 할 페이지의 일부분만을 업데이트 하도록 Atlas를 사용할 수 있습니다. 그렇게 하기 위해, 우리는 TBTReview 페이지에 네가지 업데이트 패널을 추가할 것입니다. 업데이트 패널은 페이지의 다른 것들과 독립적으로 갱신되기 위해 세부적으로 설계된 Atlas 컨트롤입니다. 이것이 어떻게 동작하는지에 대한 세부사항을 아는 것은 매력있는 것이지만, 여러분이 실제로 기억할 내용은 이것이 비동기적으로 동작한다는 것입니다. 즉, 전체 페이지를 모두 다시 포스트 할 필요가 없습니다. 심지어 더 좋은 것은, 여러분이 도구상자로부터 페이지에 드래그 하여 바로 올려놓는 것으로 각 업데이트 패널을 생성할 수 있다는 것입니다. (얼쑤!) 그것 참. 비주얼 스튜디오가 여러분들을 위해 작업을 해줍니다. (또한 여러분은 소스 뷰에 수동으로 업데이트 패널을 추가하는 것으로 업데이트 패널을 생성하거나, 실행시에 C#에서 동적으로 업데이트 패널을 추가할 수 있습니다.)
단계적으로 Atlas 응용프로그램 생성하기
여러분은 여러분이 가지고 있는 응용프로그램에 Atlas 컨트롤들과 라이브러리들, 레퍼런스들을 추가하는 것으로 새 응용프로그램을 생성할 수 있습니다. 정말입니다. 그러나 제가 위에서 말했듯이, 저는 그렇게 하지 않을 것입니다. 왜냐하면 베타 소프트웨어와 함께 비주얼 스튜디오가 한 번에 모든 것을 설치하도록 하는 것을 좋아하기 때문입니다. 그래서, 저는 그림 7에서 나오듯이 새 웹 사이트를 생성하고 템플릿에 "Atlas Web Site"를 선택하는 것으로 Atlas 버그 트랙커라고 불리는 웹 사이트를 생성할 것입니다.j
그림7. 새로운 Atlas 웹사이트 생성하기
기본적인 사이트는 기본적으로 포함되어 있는 readme.txt, eula.rtf, default.aspx, web.config, 그리고 bin 안에 있는 Microsoft.Web.Atlas.dll 과 같은 몇몇 파일들로 구성될 것입니다. readme.txt, eula.rtf, Default.aspx 파일을 지우세요. 여러분은 그것들을 필요로 하지 않을 것입니다.
WAT를 열고, security 탭에서 forms-based authentication을 선택한 다음, 이전 응용프로그램에 있었던 사용자 이름과 역할을 생성하십시오. (Alex, Dan, Jesse, Ctacey와 같은 이름, Developer, Manager, QA, 그리고 User 등과 같은 역할)
TBTMaster.master, TBTReview.aspx, TBTBug.aspx, TBTWelcome.aspx 페이지와 그 뒤의 코드 페이지에 복사하십시오. 그리고 그것들을 프로젝트에 추가하십시오. web.config 파일에 복사하지 마십시오.
WAT가 여러분이 Atlas 프로젝트를 선택할 때 여러분들을 위해 생성된 web.config 파일을 수정했습니다. 그래서 여러분들은 폼 기반 보안을 갖는 Atlas 페이지로서 양쪽의 조합된 설정을 동시에 가지고 있습니다.
여러분들은 프로그램을 변경하기 이전에 프로그램을 실행해보길 원할 것이고, 모든 설정이 잘되었는지 확인하길 원할 것입니다.
주의: 완성 소스 코드는 (책을 클릭하고 기사를 클릭하면 나오는) 저의 웹사이트에서 다운로드 받을 수 있습니다. 제 개인적인 지원 포럼에 대한 링크와 흥미로울만한 내용도 같이 있습니다.
스크립트 관리자
Atlas에 대한 핵심 컨트롤은 스크립트 관리자입니다. 가상적으로 모든 Atlas 컨트롤은 컨트롤이 있는 페이지가 스크립트 관리자를 필요로 합니다. 그 페이지에서 모든 Atlas 컨트롤들을 조정하는 것이 스크립트 관리자의 일입니다. 운좋게도, 이 응용프로그램은 주 페이지를 가지고 있으므로 스크립트 관리자를 주 페이지에 하나만 놓는 것으로 응용프로그램의 각 페이지에 대한 스크립트 관리자를 제공할 수 있습니다.
우리가 스크립트 관리자에 추가할 필요가 있는 한가지 속성은 EnablePartialRendering= "True" 입니다. 왜냐하면 이 속성이 페이지 전체를 포스트하지 않고 비동기적으로 페이지의 일부분을 나타나도록 하는 기능을 작동시키기 때문입니다.
여러분은 스크립트 관리자 컨트롤을 주 페이지 어디에든 위치할 수 있습니다. 저는 로그인 상태 컨트롤 아래에 바로 두었습니다.
mmlt;atlas:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="True" /mmgt;
컨트롤을 도구상자로부터 드래그 앤 드랍하는 것은 아마도 페이지에 컨트롤을 추가하는 가장 쉬운 방법일 것이며, 그렇게 하는 것이 페이지에 컨트롤을 적절하게 등록하도록 보장합니다. 하지만 그렇게 할 때 그림 8에서 보이는 것처럼 Destination File Exists 대화상자를 보게 될 것입니다.
그림8. Destination File Exists
컨트롤이 페이지에 추가될 때, 그것은 대화 상자와 함께 Microsoft.Web.Atlas.dll 을 보냅니다. Yes를 클릭하고 파일을 갱신하지 않을 이유가 없습니다.
섹션에 TBTReview를 쪼개넣기
배치해놓은 스크립트 관리자로, 이미 여러분은 다양한 규격들에 대한 비동기 업데이트들과 DetailsView 객체들을 TVTReview 페이지에 추가할 준비가 되었습니다. 그렇게 하기 위해 페이지에 있는 도구상자의 Atlas 탭으로부터 4개의 UpdatePanel 객체들을 드래그하십시오. 각 UpdatePanel은 독립적으로 갱신될 수 있는 UI의 블럭을 나타냅니다. 저는 BugReviewGrid와 그것의 데이터 소스를 처음에 두고, BugDetailsView와 그 데이터를 2번째에, BugHistoryGrid와 그 데이터를 세번째, BugHistoryDetailsView와 그 데이터 소스를 4번째에 두었습니다. 여러분들도 Design 뷰에서 드래그 앤 드랍을 하거나, 소스뷰에서 HTML을 옮기는 것으로 이 작업을 할 수 있습니다.
예를 들어 그림 9에서 UpdatePanel2 를 폼에 드래그 했고 패널에 BugDetailsView를 드래깅하고 있습니다.
그림9. 업데이트 패널에 드래그하기
마우스 버튼을 떼었을 때, 소스뷰 안에서 HTML에 반영되는 것으로 BugDetailsView와 이것의 SqlDataSource가 Update Panel 안에 내장될 것입니다. (간소하게 여기선 생락되었습니다.)
mmlt;span class="style1">mmlt;atlas:UpdatePanel ID="UpdatePanel2" runat="server"mmgt;
mmlt;ContentTemplatemmgt;mmlt;/spanmmgt;
mmlt;asp:DetailsView ... mmlt;/asp:DetailsViewmmgt;
mmlt;asp:SqlDataSource ...mmgt; mmlt;/asp:SqlDataSourcemmgt;
mmlt;span class="style1"mmgt;mmlt;/ContentTemplatemmgt;
mmlt;/atlas:UpdatePanelmmgt;mmlt;/spanmmgt;
mmlt;/spanmmgt;
성능상으로 변경된 것들은 즉각적이고 놀랄만한 것입니다. 갑자기 페이지가 껌뻑임을 멈췄습니다. 여러분이 어떤 버그의 세부사항에서 다른 버그로 이동할 때, 부드럽고 빠르며 껌뻑임도 없습니다. 차이점이 실제 그러한지 확인하기 위해 마스터 페이지에 있는 스크립트 관리자에서 EnablePartialRendering="True" 속성을 제거하고 응용프로그램을 다시 실행해보십시오. 결코 모르지 않을 것입니다. (속성을 되돌려 놓는 것을 잊지 마십시오!)
엄마 봐봐! 자바스크립트가 없어.
잠시 멈추고 자바스크립트를 쓸 시간이 없었다는 것에 주목하십시오. 여러분은 XMLHttpRequest를 건들지 않았으며, 이것이 어떻게 동작을 완료하는지 생각하지도 않았습니다. 이것은 예를 들어 DataGrid 컨트롤이 스스로 작동하는 것처럼 모두 아주 놀라울 만한 것들입니다. 제 말의 요점이 이것입니다. 단순히 괜찮은 것이 아니라 엄청나게 좋습니다. 이러한 무시가 여러분들이 시도하려는 것에 초점을 맞추도록 만들며, Microsoft가 컨트롤들을 제작하는데 힘을 쏟도록 만듭니다. (이봐요! 그만 훌쩍거려요. 만약 당신이 정말로 그게 어떻게 동작하는지 알기 원한다면, 제가 장담하죠. 우리는 모든 잔인할 정도의 세부사항을 지향하는 자바스크립트와 Atlas 프로그램에 대한 책을 엄청나게 많이 가지고 있습니다. 그러나 작업을 완료하기 위한 관점에서는 한순간으로 충분하지 않나요?)
그러나 더 많은게 있습니다...
좋아요, 우리는 비동기식 업데이트를 완성했고, 여기까지는 Atlas 에 관한 아주 좋은 감정을 느낄 수 있습니다만, 잠시만 컨트롤 익스텐더들에 대해 짚고 넘어가자고요. 여러분은 Atlas 도구키트로 아주 일부를 얻었습니다. (그리고 더 많은 것들은 시간이 알려주겠죠.) 제가 정말로 좋아하는 것은 AlwaysVisible 익스텐더 입니다. 이것은 여러분이 어떤 컨트롤을 갖출 수 있도록 하며, "사용자들이 이것으로 스크롤 하도록 내 페이지에 보이게 하길 원해." 라고 말하게 할 것입니다. 그뿐만이 아니라 이것은 이것저것 따져봐도, 아주 인상깊으며, 실제로 아주 유용합니다. 이것은 여러분들에게 어떤 혼란 없이 프레임들의 힘과 (아까 전에 제 디자이너 친구들이 저에게 말하는 프레임들)을 부여할 것입니다.
우리의 주 페이지는 익스텐더에 대한 몇몇 수정될 항목을 가지고 있습니다. 그 중의 하나가 사용자가 버그를 추가하도록 하게 해주는 메뉴입니다. 심지어 그/그녀가 다시보기 페이지에서 스크롤을 했을 때에도 사용자가 그 메뉴를 쓸 수 있다면 좋을 것입니다. 이것은 황당할 정도로 너무 쉽게 고칠 수 있습니다.
TBTMaster.master 를 열고 페이지에 AlwaysvisiblecontrolExtender 의 인스턴스를 드래그 합니다. 소스 뷰에서 이렇게 하세요. 여는 태그와 닫는 태그 사이에 여러분은 AlwaysVisibleControlProperties 형식의 한가지 요소를 추가할 것입니다. (여러분들의 지력으로 여러분들 스스로 알아맞춰 보세요.) 여러분들은 이미 속성에 대해 알고 있겠지만, 저는 그것들을 여러분들에게 보여줄 것입니다.
TargetControlID="mnuTBTNavigation"
VerticalSide ="top"
VerticalOffset = "10"
HorizontalOffset ="10"
HorizontalSide ="right"
ScrollEffectDuration =".1" /mmgt;
TargetControlID는 여러분이 보이도록 만들 컨트롤입니다. 이 경우는 menu 입니다. 수직, 수평부분은 (그림 10에서처럼) 메뉴를 어디에 나타내게 하는지 지시합니다. 오프셋은 왼쪽 상단으로부터 여러분이 원하는 만큼 얼마나 떨어지게 하는지, 그리고 스크롤 효과 시간을 여러분이 얼마나 유지할 것인지에 대한 값입니다. (이 경우 0.1초 입니다.) 저는 이것을 허용하는 것을 싫어합니다만 이것은 여러분들이 결정하십시오. Atlas는 나머지를 제거합니다. 스크롤을 하면서 메뉴는 애완견처럼 여러분을 따라다닙니다.
그림10. 항상 보이는 메뉴
여러분이 버그의 세부사항을 찾아보기 위해 스크롤하는 만큼 메뉴가 따라다니다니 놀랍군요. 이렇게 간단한 것만으로도 다른 사람들은 엄청 힘들게 만들만한 것을 쉽게 만들다니... 전 이런 모든 것들을 폼에 드래그 하고, 이것이 작동하도록 마이크로소프트사가 하나의 컨트롤에 캡슐화 했다는 사실이 너무나 좋습니다. --풉!-- 네, 시간이 지났어요. 저는 그것들이 어떻게 동작하는지 알았으면 합니다만, 여러분은 어떤가요? 전 마감할 때가 다 되었고, 이 프로그램은 잘 동작합니다.
취소를 위한 트랩 생성하기
우리가 십수번 (혹은 천 번 넘게) 쓰는 코딩 중 하나가 취소 버튼을 위한 "트랩"입니다. 우리는 사용자가 Cancel을 클릭할 때, 사용자에게 그/그녀가 작업한 내용을 모두 취소한다는 내용을 확인하기 위한 팝업창을 원합니다. 이것은 ASP.NET 응용프로그램 안에서 장난처럼 작성될 수 있습니다. 몇몇 자바스크립트에서 필요로 하는 대화상자처럼 말이죠. 다시 한 번 Atlas는 이런 하찮은 것뿐만이 아니라, 나머지 부분도 똑같이 구성하여, 현재 가지고 있는 응용프로그램과 경계없이 통합됩니다.
TBTBug.aspx 파일은 btnSave와 btnCancel, 두 컨트롤들을 가지고 있습니다. btnCancel에 대한 트랩을 추가하기 위해 여러분이 해야 할 모든것은 ConfirmExtender를 두 버튼이 있는 셀에 드래그 하는 것입니다.
mmlt;td colspan="2"mmgt;
mmlt;AtlasToolkit:ConfirmButtonExtender
ID="ConfirmButtonExtender1" runat="server"mmgt;
mmlt;AtlasToolkit:ConfirmButtonProperties ConfirmText="Are you sure you want to discard this?"
TargetControlID="btnCancel" /mmgt;
mmlt;/AtlasToolkit:ConfirmButtonExtendermmgt;
mmlt;asp:Button ID="btnSave" runat="server" Text="Save" BackColor="Lime" Font-Bold="True" OnClick="btnSave_Click" /mmgt;
mmlt;asp:Button ID="btnCancel" runat="server" Text="Cancel" BackColor="Red" Font-Bold="True" ForeColor="Yellow" OnClick="btnCancel_Click" /mmgt;
mmlt;/tdmmgt;
이 효과는 그림 11과 같습니다.
그림11. 취소 확인
ConfirmExtender는 자체적으로 두 가지 속성을 갖는 ConfirmButtonProperties 형식의 내부적인 속성을 가집니다. 한 속성은 메시지 박스 안에 표시될 텍스트에 대한 것이고, 다른 하나는 확인을 알리는 버튼을 확인하기 위한 것입니다.
이 작업을 위해, 컨트롤은 꼭 등록되어 있어야 합니다만, 이것은 여러분이 폼에 컨트롤을 드래그 할 때에 이미 완료되었습니다. 얼씨구나! 제가 사용하는 버전 안에선 태그가 CC1에 설정되어 있지만, 여러분이 원하는 대로 태그를 변경하는 것도 간단합니다. 저는 그것을 AtlasToolkit 으로 변경했습니다.
mmlt;%@ Register Assembly="AtlasControlToolkit" Namespace="AtlasControlToolkit" TagPrefix="AtlasToolkit" %mmgt;
그래서 제가 컨트롤을 사용 할 때, 저는 이렇게 코드를 쓸 수 있습니다. mmlt;AtlasToolkit:ConfirmButtonProperties, 컨트롤의 소스 중 일부입니다. 꼭 필요하진 않지만, 좋습니다.
Toolkit과 함께 유용한 컨트롤들이 많이 있습니다. 그리고 Atlas에서 볼 수 있는 How Do I 시리즈 비디오 튜토리얼을 보기를 권합니다. 그것은 이 부분과 이후의 것도 모두 다룰 것입니다. 여러분은 어떤 Atlas 컨트롤들이 발표되었는지 꾸준히 업데이트 되는 내용을 RSS 피드를 통해 구독하길 원할지도 모르겠습니다.
이 글 전체를 통틀어, 어느 누구도 여러분에게 Atlas가 어렵다고 강요할 수 없습니다. 주안점은 이것이 ASP.NET처럼 쉽고, 여러분의 응용프로그램을 구성하는데 초점을 두도록 하며 밑바닥에서부터 구성하도록 만들지 않는다는 것입니다.
Jesse Liberty 는 Microsoft .NET MVP 이며 베스트셀러인 오라일리 미디어의 ASP.NET 프로그래밍, C# 프로그래밍, VB2005 프로그래밍, 그리고 수십권의 웹과 객체지향 언어에 대한 다른 책들의 저자입니다. 그는 .NET 에서 계약 프로그래밍, 상담, 그리고 온라인 강좌를 제공하는 자유연합의 대표입니다.
TAG :
이전 글 : VIM이 뭘까?(생각보다 쉽다!)
다음 글 : Vista의 새로운 진단 툴 들여다보기
최신 콘텐츠