그런데 코딩된 UI 테스트 빌더를 사용하다 보면, 어설션을 추가할 수 있는 속성의 수가 매우 제한 적인 것을 알 수 있습니다. 예를 들어서, WPF의 리스트 박스에 항목이 몇 개 있는지를 나타내는 Count와 같은 속성에 어설션을 추가하고 싶은데, 그런 속성을 코딩된 UI 테스트 빌더를 사용하면 찾을 수가 없는 것이죠.
이럴 때는 코드를 통해서 어설션을 추가해야 합니다. 그래서 다음과 같이 UIMap.Designer.cs에 어설션을 추가합니다.
그리고 테스트를 실행하면, 다음과 같이 테스트가 통과하게 되죠.
하지만, 코딩된 UI 테스트 빌더를 이용해서 새 테스트를 추가하거나, 편집을 수행하는 순간 UIMap.Designer.cs에 추가한 코드는 날아가 버립니다. 이 때문에 UIMap클래스는 partial 클래스로 선언이 되어 있습니다. 디자이너가 생성하는 코드는 UIMap.Designer.cs에, 그리고 코딩된 UI 테스트 빌더를 사용해서 추가하기 힘든 코드는 UIMap.cs에 직접 추가하게 되는 것이죠. 그렇다면 위 테스트는 UIMap.cs에 다음과 같이 코드를 추가하면 간단하게 해결 됩니다.
그리고 테스트 메서드에서 CheckListItemCount를 호출하도록 코드를 추가해주면 되는 것이죠.
[TestMethod]
publicvoid CodedUITestMethod1()
{
// 이 테스트의 코드를 생성하려면 바로 가기 메뉴에서 "코딩된 UI 테스트에 대한 코드 생성"을 선택한 다음 메뉴 항목 중 하나를 선택하십시오.// 생성된 코드에 대한 자세한 내용은 http://go.microsoft.com/fwlink/?LinkId=179463을 참조하십시오.this.UIMap.SelectionTest();
this.UIMap.CheckListItemCount();
}
그러면, 의도 했던 테스트가 제대로 추가 되는 것을 볼 수 있습니다.
정말 오랜만에 썼는데, 쓰고 나니 별 내용이 없는 포스트 네요 ㅠ_ㅠ;; 다음에 또 찾아 뵙겠습니다.
ps. 예제 코드를 첨부해드립니다. 예제는 Visual Studio 2010에서 작성했습니다.
최근 2년 동안 다양한 개발 분야의 기술들이 물망에 오르는 굉장히 뜻 깊은 해였습니다. 2년 전이면 Microsoft 강성재 차장과 함께 처음으로 "Visual Studio 한국 공식 팀"을 창설하면서 http://vsts2010.net 이 탄생한 시기이군요. 2008년 12월에 팀이 창설되고, 2009년 1월 5일이 팀 블로그 2주년이 되는 날이었군요.
바로 저희 "Visual Studio 한국 공식 팀" 블로그에서 한홀 한홀 정성스럽게 작성된 포스트들이 2년 여간의 기술 흐름을 대변해 주고 있으며, 그리고 2011년의 기술도 짐작해 볼 수 있는 짧지만 굵은 변화의 흐름과 함께 여기까지 온 것 같습니다.
우리 팀이 함께 해왔던 핵심 키워드의 태그는 무엇이었을까요?
Visual Studio 2010
.NET 4.0, .NET Framework 4.0
ASP.NET MVC
C# 4.0
C++0x, C++/CLI
Parallel Computing
WCF
Cloud
Application Lifecycle Management
그리고 위의 태그들에 대해 더 자세히 살펴보더라도 생소한 기술과 이름, 아키텍처, 환경 등이 2년 동안 격변을 일으키며 변화를 해왔다는 사실입니다.
2011년 이전까지는 여러분들에게 선택권이었던 것들이, 이제는 필수가 되어야 한다고 해도 과언이 아닐 겁니다. 비즈니스 요구사항의 단면을 보면 업무적인 요인, 시대적인 배경 등인데, 이 시대적인 배경에는 트랜드+시장+기술+… 이 있을테고요. 그리고 '우리가 이 시대적인 배경 중 '기술'에 한 배를 타고 흐르고 있는가…?' 에 다시 한번 생각해 볼만 합니다.
예전 2010년 6월 1일 REMIX10 세미나에서 여러분에게 말씀 드린 마지막 문구가 다시금 생각이 나네요.
너무 멋져요을 개봉된! 나는 필자 전에 이런 걸 배우는 가정 없다. 그래서이 주제에 대한 몇 가지 참신한 아이디어가있는 모든 사람을 찾을 수 좋네요. 정말이 일을 시작 주셔서 감사합니다. 이 웹 사이트는 약간 독창성과 웹, 누군가에 원한의 한 가지입니다. 웹에 새로운 것을 가져다 유용 직업!
Visual Studio 2010 베타2에서는 WPF와 Silverlight 개발을 위한 디자이너(코드네임 Cider) IDE가 많이 향상되었습니다. VS2010 베타1에서 특히 사용하기 불편 했던 점이 성능에 관한 문제였는데 베타2에서는 불편함 없이 사용이 가능합니다.
Channel 9의 VS2010 베타2의 Cider 디자이너 소개 동영상을 보시면 성능을 더욱 향상 시킬 수 있는 팁이 소개됩니다. VS2010 베타2가 개발 되는 중에 늦게 발견되어 베타2에는 포함되지 못했다고 하는데 최종 릴리즈 때는 따로 수정이 불필요 하도록 포함된다고 합니다.
간단하게 레지스트리에 키를 추가 해주는 방법으로 성능 향상이 이루어 진다고 하는데 방법은 다음과 같습니다.
※ 레지스트리 수정은 시스템에 큰 영향을 줄 수 있으니 주의 바랍니다.
1. 먼저 VS가 실행 중이라면 모두 종료합니다.
2. regedit 명령으로 레지스트리 편집기를 엽니다.
3. HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\VisualStudio\10.0 키를 선택합니다.
4. 마우스 오른쪽 버튼을 클릭하고 "새로만들기 - 키"를 선택하고 ClrHost라는 이름을 줍니다.
5. 새로 추가한 키에서 다시 마우스 오른쪽 버튼을 눌러 DWORD32 값을 StartupFlags 이름으로 추가합니다.
6. 값은 5로 해줍니다.
7. 레지스트리 편집기를 종료합니다.
8. 이제 모든 수정이 완료되었고 평소처럼 VS를 사용하면 됩니다.
실제로 어느정도 성능이 향상되는지는 알 수 없으나 강력히 추천하고 있으니 꼭 적용시켜서 사용하시길 바랍니다.
맨 처음 초기 어플리케이션을 보면 스타일이 적용되어 멋지게 보입니다. DataGrid를 적용하여 수정된 버전은 좀 더 기능적이긴 하지만 밋밋하고 보기엔 좀... 이번에는 DataGrid에 스타일을 주어서 컬러풀하고 비주얼적으로 멋지게 만들어 보도록 하겠습니다.
프로젝트를 열고 MainWindow.xaml 파일을 열어서 DockPanel 부분을 보면 뭔가 스타일이 적용된것을 볼 수 있습니다. 이 중에서 몇가지 brush와 GridViewColumnHeader와 ListViewItem 스타일을 DataGrid 스타일에 적용해 보도록 하겠습니다.
DataGrid의 스타일 프로퍼티 1. CellStyle - 각각의 cell에 사용되는 스타일 (DataGridCell) 2. RowStyle - row에 사용되는 스타일 (DataGridRow) 3. ColumnHeaderStyle - header bar에 사용되는 스타일 (DataGridColumnHeader)
사용자가 grid와 상호작용하는 것에 대한 프로퍼티 1. SelectionMode - 단일선택과 확장된 선택에 대한 모드 2. SelectionUnit - 무엇이 선택되는가에 대한 설정 (FullRow vs Cell vs CellOrRowHeader) 3. GridLinesVisibility - cell 주변의 라인에 대한 속성 4. VerticalGridLinesBrush - 수직 라인에 대한 색상 5. HorizontalGridLinesBrush - 수평 라인에 대한 색상
먼저 TargetType으로 스타일이 적용될 타입에 대해 설정해줍니다. TargetType 값에 GridViewColumnHeader를 dg:DataGridColumnHeader로 바꿔줍니다. 그리고 ListViewItem도 dg:DataGridRow로 바꿔줍니다. 변경된 xaml 코드는 아래와 같습니다.
이제 몇가지 grid에 대한 속성을 주도록 하겠습니다. 1. Extended 선택 모드 적용 2. SelecionUnit을 FullRow로 설정 3. GridLinesVisibility를 All로 설정 4. VerticalGridLinesBrush를 DarkGray로 설정
또 몇가지 설정을 해서 header 스타일을 주도록 해보겠습니다. 1. BorderTickness를 1로 주어서 border를 볼 수 있도록 2. pixel snapping을 활성화 (SnapsToDevicePixels="True") 3. 컨텐트 horizontal 정렬 (HorizontalContentAlignment="Center") 4. MinWidth="0" MinHeight="30" 으로 설정 5. 기본 커서 모양을 Hand로 설정
다시 컴파일해서 실행해보면 좀 더 직관적으로 보기 쉽게 스타일 적용이 된 것을 볼 수 있습니다.
다음으로는 Cell 자체에 대한 스타일 적용을 해보겠습니다. Cell의 컨텐트가 가운데로 오고 필요할 때 포커스가 적용되면 좀 더 편리할 것 같은데 이것을 해보도록 하겠습니다.
새로운 스타일 속성을 DockPanel.Resources에 추가하도록 합니다. 1. TargetType을 dg:DataGridCell로 설정 2. 중요한 속성은 기본 DataGridCell을 따르기 위해 BasedOn 프로퍼티 설정 "{StaticResource{x:Type dg:DataGridCell}}" 3. SnapsToDevicePixels를 "True"로 설정 4. VerticalAlignment를 "Center"로 설정 5. Trigger 컬렉션 추가 - 셀이 선택되었을 때 background/foreground 색상 변경 6. <Style.Triggers> 부분에 IsSelected 프로퍼티를 True로 설정하고 a. Background를 Transparent로 b. BorderBrush를 Transparent로 c. Foreground를 Black으로 7. 두번째 trigger를 추가하고 IsKeyboardFocusWithin="True" 프로퍼티에 a. Background에 "{StaticResource whiteBackBrush}" 리소스 b. BorderBrush에 "{DynamicResource{x:Static dg:DataGrid.FocusBorderBrushKey}}" 리소스 c. Foreground에 Black
WPF 4에서는 새로운 컨트롤들이 포함되게 되는데 대표적으로 DataGrid, Ribbon, VIsual State Manager 컨트롤이 있습니다. WPF Features Privew를 통해서 새로운 컨트롤들을 미리 보는 시간을 가져보겠습니다.
Exercise 1 - Using the new WPF DataGrid
먼저 기존에 있는 Checkbook 어플리케이션을 살펴보면 ListView를 이용해서 DataGrid 형태로 사용하는 것을 볼 수 있습니다. 이번 실습에서는 몇가지 단계를 따르게 되는데 다음과 같습니다.
1. DataGrid 어셈블리 추가 (WPF Toolkit) 2. ListView와 GridView를 DataGrid로 교체 3. 스타일과 템플릿 변형
먼저 WPF 어플리케이션을 실행해보면 몇가지 데이터가 바인딩된 어플리케이션 형태를 볼 수 있습니다.
Task 1 - Examine the existing application
CheckbookManager 어플리케이션을 Visual Studio를 이용해서 열어서 살펴보면 어떤 형태로 동작하는지 쉽게 알 수 있습니다. 이제 소스코드를 살펴보면 메인 윈도우인 MainWindow.xaml에 보면 ListView가 정의된것을 볼 수 있습니다. 스타일과 컬럼 효과를 이용해서 형태를 정의하고 있는데 column definition은 템플릿을 필요로 하게 됩니다. 왜냐하면 기본적인 ListView 컬럼은 읽기 전용 속성이기 때문입니다. 이것을 TextBox를 이용해서 DataGrid처럼 표현하고 있는것을 볼 수 있습니다. Data 폴더에 보면 자료구조가 정의되어 있는데 여기서 살펴볼것은 아니니 그냥 넘어가도록 하겠습니다.
Task 2 - Using the DataGrid
이번 단계에서는 ListView를 WPF DataGrid로 교체해보도록 하겠습니다. 먼저 DataGrid를 포함하고 있는 WPFToolkit 어셈블리를 참조합니다.
참조 추가를 선택하고 WPFToolkit.dll 파일을 선택해주면 됩니다.
그리고 나서 MainWindow.xaml 상단에 보면 네임스페이스가 정의된 부분이 있는데 여기에 WPF Toolkit을 추가해줍니다.
스크롤을 좀 더 내려서 XAML을 살펴보면 ListView가 있는데 ListView를 dg:DataGrid로 바꿔서 DataGrid 컨트롤을 사용할 수 있게 해줍니다. 물론 바꾸고 나면 많은 에러가 나게 되는데 이것은 차차 고쳐 나갈것입니다. 그리고 ItemContainerStyle 속성을 지워줍니다. 이것은 나중에 다시 해줄텐데 우선 지우도록 하겠습니다.
그리고 TextBox 스타일 리소스 역시 지워줍니다. 우리는 새로운 데이타 컬럼 타입을 사용하게 되니 더 이상필요하지 않습니다. ListView의 ContextMenu 속성 역시 dg:DataGrid로 바꿔줍니다. 이렇게 해주면 다음과 같은 XAML 형태를 가지게 됩니다.
이제 어플리케이션을 컴파일하고 다시 실행시켜 보면 DataGrid가 자동적으로 컬럼을 생성해서 데이터를 보여주는것을 볼 수 있습니다.
다시 소스코드로 돌아와서 컬럼 타입을 정의해주도록 하겠습니다. DataGrid 안에 <dg:DataGrid.Columns>를 추가 해 줍니다. 그리고 <dg:DataGridTextColumn> 요소를 위의 컬럼 컬렉션 안에 추가 해 줍니다.
Header 프로퍼티는 Header 텍스트값의 속성이고 Width는 컬럼의 폭을 정할 수 있는데 고정값을 줄 수도 있고 컬럼의 헤더나 셀 사이즈에 맞게 해줄 수도 있습니다. 마지막으로 컬럼에 데이터 바인딩을 해줘야 하는데 Binding 속성을 이용해서 ListView에서 해줬던것 처럼 같은 방식으로 해주면 됩니다.
여기까지 하고 실행을 해보면 새로 정의해준 컬럼이 추가되긴 했지만 기존 컬럼이 그대로 남아있는것을 볼 수 있습니다. DataGrid 속성중에 AutoGenerateColumns라는 속성이 기본적으로 True값을 가지게 되어 이렇게 되는데 이 속성을 False로 바꿔주면 정의된 컬럼만 나타나게 됩니다.
여기까지 마치고 실행해보면 정의해준 컬럼 스타일에 맞게 데이터가 바인딩되어 보이게 됩니다. 지금까지 WPF Toolkit을 이용해서 DataGrid를 추가하고 컬럼 속성 스타일을 주어서 데이타 바인딩하는 방법까지 살펴보았습니다. 다음에는 여기에 추가해서 Calendar와 DatePicker 컨트롤을 이용해서 데이터 필드를 구성하는것에 대해 보도록 하겠습니다.
WPF가 발표된지도 많은 시간이 흘렀지만 아직 WPF를 사용한 어플리케이션이 많이 나오지 않는 것이 현실입니다. 앞으로 Visual Studio 2010과 .NET Framework 4.0이 발표되면 WPF 역시 4.0으로 버전업이 되는데 이제 현실적으로 많이 사용 될 수 있을 정도로 많은 발전이 있습니다.
알려진 바와 같이 Visual Studio 2010 IDE에서도 WPF가 사용될 정도로 성능이나 여러 면에서 많은 발전이 있습니다.
이번 MIX09 행사의 WPF4 소개 세션 자료를 보면 매우 많은 요소가 향상된 것을 볼 수 있습니다.
이 중에서 가장 눈에 띄는 것은 아무래도 Multi-Touch 지원이 되겠는데 이 것은 Windows 7에서 기본으로 Multi-Touch를 지원 하게 됨으로써 WPF에서도 이를 활용한 어플리케이션 개발을 할 수 있게 되었습니다.
이 외에도 중요한 몇 가지를 보면 Windows 7에서 새롭게 바뀐 Taskbar와 Office 2007에서 사용된 Ribbon UI를 기본으로 지원하게 되고 다양한 새로운 컨트롤과 .NET Framework 4에서 향상된 언어 기능들도 추가 되었습니다.
이런 향상된 기능들을 지원하기 위해 WPF에서 어떤 변화가 있는지 자세히 알아보도록 하겠습니다.
Multi-Touch in WPF
UIElement 변화
WPF 개발을 해보신 분들은 UIElement 클래스에 대해 잘 알고 계실겁니다. UIElement 클래스는 WPF의 가장 기본이 되는 최상위 기본 클래스인데 멀티터치 지원을 위해서 내부적으로 몇 가지 변화가 생겼습니다. 우선 기존의 이벤트로는 멀티 터치를 지원 할 수 없기 때문에 멀티터치와 제스처 인식을 위한 이벤트가 추가 되었습니다.
멀티터치 지원 컨트롤
ScrollViewer 컨트롤의 경우 제스처 인식을 하도록 업데이트 되었고 다른 기본 컨트롤들도 멀티터치 지원을 위해 업데이트 되었습니다. 동시에 하나 이상의 포인트를 인식하기 위해 멀티캡쳐 기능도 지원하게 되었습니다. 이 외에도 ScatterView 같은 멀티터치를 위한 새로운 컨트롤도 추가 되었습니다.
Surface SDK 2.0 호환
Sufrace SDK 2.0의 호환으로 Surface 컴퓨터의 멀티터치 어플리케이션 개발을 쉽게 할 수 있습니다.
WPF Taskbar Integration
Windows 7에서는 기존보다 향상된 태스크바를 제공하는데 이를 지원하기 위한 내용이 포함 되었습니다.
Windows API Code Pack for .NET
Windows 7에서 추가되거나 향상된 API들을 사용하기 위해서는 C, C++, COM API 같은 네이티브 코드를 사용해야 합니다. 그러나 C# 등의 매니지드 코드를 사용하는 닷넷 개발자에게는 이것이 어렵게 느껴 질 수 있습니다. 그렇다고 새로운 멋진 기능들을 포기하자니 아쉽고 네이티브 코드를 사용하자니 불편하고 좀 더 편하게 할 수 있는 방법은 없을까요?
이러한 것을 해결 하기 위해 Microsoft에서는 Windows Vista Bridge project를 만들었는데 이것을 사용하면 매니지드 코드 개발자가 Windows API를 쉽게 사용 할 수 있습니다. 현재 최신 버전은 1.4인데 Restart and Recovery, Search, Power Awareness and other Shell integrations 같은 Windows Vista의 많은 유용한 기능들을 포함 하고 있습니다. 그러나 현재 버전은 Windows7의 기능들을 포함하고 있지는 않습니다.
Windows7은 현재 베타가 공개되었고 조만간 RC버전이 나온다고 하는데 Windows 7의 API 지원을 위한 Windows API Code Pack for the .NET Library(이것은 Windows Vista Bridge의 새 이름)도 함께 개발중으로 같이 배포 될 예정입니다.
현재는 Windows Vista Bridge에서 약간 수정된 버전으로 Windows 7 API 일부를 지원하는 샘플 라이브러리가 있는데 이것은 다음에 자세히 알아 보도록 하겠습니다.
WPF Ribbon
Visual Studio 2008에서는 MFC를 사용하여 Ribbon UI를 개발 할 수 있습니다. 그런데 WPF에서는 기본적으로는 Ribbon UI를 지원하지 못하고 WPF Toolkit을 통해서 따로 지원하고 있는데 WPF 4에서는 Ribbon UI를 기본적으로 지원하게 됩니다.
WPF Controls
윈도우 프로젝트에서 많이 쓰이는 컨트롤 중 하나가 데이터 그리드나 달력 컨트롤 등이 있는데 WPF 기본 컨트롤에서는 지원하지 않고 WPF Toolkit으로 따로 지원하고 있습니다. Ribbon과 마찬가지로 이것도 역시 WPF 4에서는 기본으로 포함되게 됩니다. 이 외에도 Silverlight에서 지원하고 있는 차트 컨트롤 등도 WPF에서 역시 지원하게 됩니다.
대표적으로 살펴 본 것 외에도 많은 변화가 있고 향상 되었습니다. 다음 포스팅 부터는 이번에 살펴본 것을 중심으로 실제로 어떻게 사용하고 구현하게 되는지 자세히 알아보도록 하겠습니다.
앞으로 Visual Studio 2010과 WPF 4의 향상된 기능 많이 기대 해주세요 :)
CodedUITestExam.zip
댓글을 달아 주세요
정말 오랜만에 썼는데, 쓰고 나니 별 내용이 없는 포스트 네요 ㅠ