2010.04.12 09:06

Silverlight 4를 사용해서 PC버전의 Twitter 프로그램과 Windows Phone 7의 앱을 간단하게 복사, 붙여넣기 만으로 만드는 과정을 보여 드립니다.


개발자를 위한 IT블로그 영욱닷컴(http://www.YoungWook.com)
저작자 표시 변경 금지
신고
2010.04.11 23:39
http://rubrik.ch.msn.com/reportagen/kunsthaus_en.aspx 

고흐의 작품들을 볼 수 있게 만든 겔러리 입니다.
Web상에서 Windows Phone과 같은 효과를 Silverlight를 사용해서 내고 있습니다. 또 DeepZoom을 사용해서 유화의 붓 터치까지 볼 수 있게 되어 있습니다. 좋은 아이디어네요 ^^

개발자를 위한 IT블로그 영욱닷컴(http://www.YoungWook.com)
저작자 표시 변경 금지
신고
2010.03.15 20:39

1.RichTextArea Part 1
2.RichTextArea Part 2
3.Accessing Web Camera and Microphone
4.Right Click Mouse Events
5.MouseWheel API
6.Using Silverlight Controls As Drip Targets
7.DataGrid Enhancements
8.Printing API Basics 
9.Hosting HTML Content
10.Accessing the Global Clipboard Programmatically
11.Using the ViewBox Control
12.Asynchronous Data Validation 
13.BiDi and Right-to-Left Support 
14.Notification API
15.Local File Access
16.RIA Services support in Visual Studio 2010  
 

블로그 이미지 김영욱 차장 Microsoft Korea  .NET Evangelist
Enterprise UX 를 위한  UI 기술과 SOA, Cloud Computing, NUI등 다양한 분야의 접목과 응용을 통해 최적의 IT 인프라 구축을 위해서 노력하고 있다.
Email: iwinkey@hotmail.com
Blog: http://winkey.tistory.com

오늘 살펴 볼 내용은 .NET RIA Service 입니다.
최근 국내에 있는 모 업체와 접촉 할 일이 있었는데 단순 반복적인 개발이 많은 업무인지라 이를 어떻게 하면 좀 쉽고 간단하게 관리 할 수 있을까 하는 고민이 있었습니다. 또 다른 하나의 고민은 다른 건 다 바꾸어도 Database만큼은 기존에 사용하던 Oracle을 바꾸기가 쉽지 않다는 고민도 있었습니다.

이런 고민들에 딱 들어 맞는 프레임웍이 바로 RIA Service가 아닌가 합니다. (정식 명칭은 .NET RIA Service입니다. )
RIA Service는 원래 코드명은 알렉산드리아(Alexandria)로 추진되어 온 프로젝트 입니다.

대부분의 RIA 기반의 프로젝트는 그렇게 복잡하지 않고 트랜젝션이 중요하지 않은 경우가 많고 그리고 라이프 사이클이 짧은 특징을 대부분 가지고 있습니다. 이러한 특성들을 고려해서 MVVM(Model - View - View Model) 형태의 프레임웍으로 기획 된 것이 바로 오늘 날 이야기 하고 있는 RIA Service가 되었습니다.

RIA Service는 기본적으로 WCF를 통신 기반으로 하고 있으며 LINQ 혹은 Entity Framework을 함께 사용할 수 있게 되어 있습니다. UI에서는 Silverlight를 기반으로 한 몇 가지 기능들이 함께 포함되어 있습니다. 
 Visual Studio 2010 Beta를 설치해 보면 <그림1>과 같이 Silverlight Business Application이라는 이름의 탬플릿이 추가로 설치되어 있는 것을 볼 수 있습니다. 이 탬플릿을 사용해서 RIA Service를 사용할 수 있습니다. 물론 다들 아시겠지만 이 탬플릿을 사용하지 않더라도 활용할 수 있지만 그건 생고생의 길을 자쳐하므로 제발 그런 무모한 시도는 하지 않기를 미리 부탁 드립니다.

<그림1>Silverlight Business Application 탬플릿

오늘 예제를 실행해 보기 위해서는 또 하나 준비해야 하는 것이 바로 Sample Database 입니다. SQL Server 2000 까지는 Pubs와 Northwind와 같은 샘플이 제공되어서 뭘 하든 간에 쉽게 적용할 수 있었는데 이제는 추가로 설치해 주어야 하는 일이 되었습니다. 오늘은 Pubs를 사용할 예정입니다.

SQL Server에 아래 첨부된 쿼리를 실행 시키시면 샘플 데이터베이스와 테이블들이 자동으로 생성되게 됩니다.
<파일1>Pubs 생성 Query 파일

여기 까지 되었으면 이제 오늘의 요리를 위한 준비는 대충 끝났습니다. 참고로 글을 쓰고 있는 시점에서는 RIA Service는 Visual Studio 2010 RC를 사용할 수 있으며 닷넷 프레임웍의 타겟을 3.x로 놓게 되면 에러가 발생합니다. 4.0으로 놓고 프로젝트를 생성하시기 바랍니다.
<그림2>생성된 프로젝트

<그림2>에서 보면 생성된 프로젝트가 보이는데 Model 폴더와 Service 폴더를 눈여겨 보기 바랍니다. Model에는 데이터 모델을 생성하게 될 것이고 Service 폴더에는 Service와 관련된 코드를 작성할 예정입니다. (나중에 보면 전혀 작성하지 않고도 사용할 수도 있습니다. ^^)
 RIA Service를 사용하기 위해서는 Model --> Service --> UI 순으로 작업을 하시면 됩니다. 먼저 모델을 생성하기 위해서 Database를 연결해야 합니다.

작업에 앞서서 사용하게 될 Database를 생성해야 합니다. Database는 함께 설치되는 SQL Server Express를 사용할 예정입니다. Visual Studio가 설치될 때 별다른 옵션을 선택하지 않아도 함께 설치되는 버전이 SQL Server 2008 Express 버전인데 Database 엔진만 설치되는 것이 때문에 관리를 위해서는 별도의 관리 도구를 추가로 설치해 주는 것이 좋습니다.
아래 링크에서 SQL Server 2008 Management Studio Express 버전을 다운로드 받을 수 있습니다. 32/64bit가 별도로 제공되기 때문에 해당되는 버전을 다운로드 받아서 설치해 주시기 바랍니다.

http://www.microsoft.com/downloads/details.aspx?familyid=08e52ac2-1d62-45f6-9a4a-4b76a8564a2b&displaylang=en

SQL Server 2008 Management Studio Express를 통해서 앞에서 파일로 제공해 드린 파일을 실행 시키면 샘플 데이터 베이스인 pubs가 생성됩니다.

<그림3>데이터 베이스의 생성
데이터 베이스까지 생성되었으면 작업은 많이 진행되었습니다. 나머지는 이제 간단한 작업만으로 연결이 가능하기 때문입니다.

.NET RIA Service를 사용하기 위해서 LINQ를 사용할 수도 있고 Entity Framework을 사용하는 방법도 있지만 여기서는 Entity Framework을 사용하는 방법을 사용해 볼 생각입니다. Entity Framework을 사용하기 위해서 Connection을 연결해 두는 편이 편리하다.
 View 메뉴에서 Server Explorer를 불러낸다.

<그림4>Server Explorer
Server Explorer에서 Data Connections를 오른쪽 마우스로 선택해 보면 Add Connection을 선택할 수 있게 되는데 여기서 많이 해왔던 방식으로 Database를 연결할 수 있다. 여기서 SQL Server 를 예제로 쓰고 있다고 Entity Framework는 SQL Server만 지원한다고 오해하지 않기를 부탁드립니다. SQL Server는 OR Mapping 기술의 또 다른 형태로 Oracle과 같은 다른 Database도 다 충분히 사용할 수 있도록 설계되어 있는 기술입니다.

<그림5>Data Connection 설정

<그림5>까지 수행 했으면 <그림6>과 같이 연결되어 있는 것을 볼 수 있다.
<그림6>연결된 Pubs 데이터베이스
<그림5> Add Connection...

이제 데이터베이스와 연결이 되었으면 ADO.NET Entity Data Model을 추가해 볼 차례 입니다. 아까 생성된 Web 프로젝트에 보면 Model이라는 폴더가 보일 것 입니다. Model 폴더에서 새로운 아이템 추가를 선택해서 Data 행목에 있는 ADO.NET Entity Data Model을 Pubs.edmx로 추가해 봅니다.
<그림6>ADO.NET Entity Data Model

추가하고 나면 직접 Entity를 설계할 것인지 혹은 데이터베이스의 테이블로 부터 자동으로 생성할 것인지를 물어 봅니다. 여기서는 자동 생성을 선택합니다.
<그림7>Choose Model Contents

<그림8>데이터 연결 선택
<그림8>과 같이 미리 연결해 둔 데이터베이스를 선택합니다.  연결하면 이제는 기준이 될 데이터베이스 오브젝트를 선택하라고 나옵니다. 여기서는 Titles라는 테이블을 선택했습니다.

<그림8>테이블 선택
여기까지 하고 나면 확장자가edmx가 붙은 Entity 클래스가 자동으로 생성된 것을 볼 수 있습니다.

<그림9>생성된 Entity 클래스

<그림10>생성된 Entity 클래스는 Model Browser에서도 볼 수 있다.

클릭 몇번과 이름을 붙여주는 것 만으로 이미 Entity를 생성했습니다. 이제 서비스를 만들 차례입니다. 흔히 소프트웨어를 개발하는 사람들은 추가, 조회, 수정, 삭제 기능을 한 본이라고 이야기하고 프로젝트에서 최소 단위로 흔히 이야기 합니다. .NET RIA Service의 경우 별다른 작업을 하지 않아도 쉽게 한 본을 생성할 수 있게 해 줍니다.
<그림11>과 같이 Service 폴더에서 아이템 추가를 선택하고 Domain Service Class를 추가해 봅니다.
<그림11>Domain Service Class의 추가
Domain Service Class를 추가하고 나면 어떤 Entity를 사용할 것인 가를 선택할 수 있게 해 줍니다. 여기서는 이미 만들어 둔 pubsEntities를 선택합니다.

<그림12>Entity Class의 선택

신기한 것은 여기까지만 작업을 하고나면 자동으로 4가지 기능의 코딩이 끝나있다는 점입니다. 아래 소스를 보면 GetTitles(), InsertTitles(), UpdateTitles(), DeleteTitles()와 같이 네 가지 기능이 이미 생성되어 있는 것을 볼 수 있습니다.
<소스1>생성된 4가지 기능
벌써 서비스쪽 기능이 모두 완료 되었습니다. 이제 거의 막바지 작업을 할 시간입니다. 메뉴에서 Show Data Sources를 선택해 보면 Entity 목록을 볼 수 있습니다.

디자인에서 DataGrid를 추가하고 나서 Data Source에서 Titles를 선택해서 DataGrid에 드래그 앤 드롭해 하면 DataGrid와 Ttitles이 연결됩니다.

여기까지 하고 나면 Xaml 코드 상에 riaControls라는 객체가 추가 된 것을 볼 수 있습니다.

이제 F5을 눌러서 실행해 보면 Title 테이블의 내용이 DataGrid에 연결되어 나타나는 것을 볼 수 있습니다.

 마우스로 몇 번이면 될 것을 말로 설명하다 보니 설명이 길어졌습니다.
조만간 동영상으로 한번 찍어서 올려 볼까 합니다. ^^
저작자 표시 변경 금지
신고
2010.03.10 08:29

개발자의 디자이너를 위한 행사인 MIX가 열립니다.
이번에도 Silverlight 4, ASP.NET MVC와 같은 대박 기술에 대한 세션들이 기대되고 있는 가운데 Windows Mobile 7.0이 이야기 될 것 같습니다.

 한국 마이크로소프트에서도 5명이 참가해서 발빠르게 좋은 정보들을 전달해 주실 예정입니다.
트위터 @winkey7과 본 블로그를 통해서도 핵심 이슈들을 빠르게 정리해 드리도록 하겠습니다.

또 하나 UX Bakery에서도 MIX 10의 방대한 내용을 정리하는 "MIX 10 다시 보기" 세미나를 3월 24일과 3월 30일 양일에 걸쳐서 진행한다고 합니다. 관련한 공지를 곧 올리도록 하겠습니다.

MIX와 관련한 가장 빠르고 정확한 채널 UX 엔지니어(http://winkey.tistory.com) 과 UX Bakery(http://www.uxbakery.com)에서 함께 하십시오
저작자 표시 변경 금지
신고
2010.02.08 09:40

1.RichTextArea Part 1
2.RichTextArea Part 2
3.Accessing Web Camera and Microphone
4.Right Click Mouse Events

5.MouseWheel API

6.Using Silverlight Controls As Drip Targets
7.DataGrid Enhancements
8.Printing API Basics 
9.Hosting HTML Content

10.Accessing the Global Clipboard Programmatically

11.Using the ViewBox Control

12.Asynchronous Data Validation 
13.BiDi and Right-to-Left Support 
14.Notification API
15.Local File Access 
16.RIA Services support in Visual Studio 2010 

블로그 이미지 김영욱 차장 Microsoft Korea  .NET Evangelist
Enterprise UX 를 위한  UI 기술과 SOA, Cloud Computing, NUI등 다양한 분야의 접목과 응용을 통해 최적의 IT 인프라 구축을 위해서 노력하고 있다.
Email: iwinkey@hotmail.com
Blog: http://winkey.tistory.com

 거듭 강조하는 이야기 중에 하나가 바로 Silverlight 4에서 강화된 부분이 바로 OOB(Out of browser)에 관한 내용이다. OOB를 통해서 Silverlight 4는 단순한 웹 플랫폼이 아니라 Microsoft의 클라이언트 플랫폼으로 정확하게 자리 매김 할 수 있게 되었습니다

 Visual Studio 2008에서는 OOB를 사용하기 위해서는 AppManifest.xml 파일을 직접 편집해 주어야 하지만 Visual Studio 2010을 사용하게 되면 AppManifest.xml을 툴에서 관리하게 되면서 훨씬 작업이 편리해 졌습니다.

<그림1>프로젝트 속성에서 지원이 가능해진 OOB 기능
<그림1>에서 보면 알 수 있듯이 프로젝트 속성에서 바로 OOB 기능을 선택할 수 있으며 옆에 있는 Out of browser setting 버튼을 누르면 <그림2>와 같이 세세한 세팅을 할 수 있는 창이 나타나게 되어 있다.


<그림2>Out of browser setting
그런데 <그림2>에서 보면 못 보던 옵션이 하나 생긴 것을 볼 수 있는데 Require elevated trust when running outside the browser라는 체크 박스가 그것입니다. 단순한 체크 박스 하나로 보기에는 너무 막강하기 때문에 주의해서 사용해야 하는데 이 이유는 이 체크 박스를 선택하는 순간 실행시에 사용자에게 권한 상승을 요구하게 됩니다.
 사용자가 권한 상승을 허가해 주게 되면 그 때 부터는 Silverlight 응용프로그램이지만 로컬의 파일과 API에 접근이 가능하게 된다. Silverlight가 그냥 웹 응용 프로그램을 개발하기 위한 툴이 아니라 Microsoft의 클라이언트 플랫폼이라고 이야기 할 수 있는 근거가 바로 이 체크 박스로 하나로 생길 수 있습니다

 이 글에서 설명하려고 하는 로컬 파일 접근도 이와 같이 권한 상승을 통해서 충분한 권한이 있어야 사용가능 한 기능입니다. 아무튼 이렇게 권한 상승을 하게 되면 로컬 파일에 대한 접근 권한이 생기기 때문에 유의해서 사용하셔야 합니다. 아무리 사용자에게 권한을 요청한다고 해도 좀비와 같은 성향을 보이는 우리네 고객들은 아무생각없이 마구 권한을 승일 해줄 일들이 분명하기 때문입니다.

우선 OOB상태로 실행시키기 위해서 해당 응용프로그램을 로컬에 설치하는 기능을 다음과 같이 한 줄로 추가해야 합니다.

<소스1>Silverlight 응용 프로그램을 로컬에 설치하기 위한 파일

일단 로컬에 설치되고 충분한 권한이 주어진 상태라면 파일을 핸들링 하는 과정은 일반적인 로컬 파일을 다루는 과정과 다를 바 없습니다. 한 가지 재미있는 점은 Enviroment 객체를 추가적으로 사용 할 수 있게 된 점인데 이를 통해서 로컬의 각종 경로들을 확인 할 수 있게 되었습니다.
<소스2>파일 읽기 쓰기

OOB 상태에서 좋은 점이 바로 Cross domain과 관련된 제약이 없어진다는 것이다. OOB를 하게 되면 실행이 로컬 기준으로 바뀌게 되므로 일반적인 Cross domain 제약이 없어지게 된다. 따라서 상당히 편리하게 여러 주소에서 데이터를 모아 오는 것이 가능하게 된다.

<소스3>파일 다운로드 소스
<소스3>에서 볼 수 있듯이 특정한 주소의 RSS를 다운 받는 등의 행위가 자연스럽게 가능하게 되었다. 또 주석으로 처리 된 부분을 보면 mp3 파일을 다운로드 받는 소스도 함께 포함되어 있다.

<소스4>로컬 비디오 목록을 가져오는 소스

설명을 길게 한 듯 하지만 핵심 키워드는 '권한상승'에 있다. ^^

저작자 표시 변경 금지
신고
2010.01.29 09:00

1.RichTextArea Part 1
2.RichTextArea Part 2
3.Accessing Web Camera and Microphone
4.Right Click Mouse Events

5.MouseWheel API

6.Using Silverlight Controls As Drip Targets
7.DataGrid Enhancements
8.Printing API Basics 
9.Hosting HTML Content

10.Accessing the Global Clipboard Programmatically

11.Using the ViewBox Control

12.Asynchronous Data Validation 
13.BiDi and Right-to-Left Support 
14.Notification API
15.Local File Access 
16.RIA Services support in Visual Studio 2010 

블로그 이미지 김영욱 차장 Microsoft Korea  .NET Evangelist
Enterprise UX 를 위한  UI 기술과 SOA, Cloud Computing, NUI등 다양한 분야의 접목과 응용을 통해 최적의 IT 인프라 구축을 위해서 노력하고 있다.
Email: iwinkey@hotmail.com
Blog: http://winkey.tistory.com

 

경고창을 띄울 수 있는 방법을 물으면 혹자는 자바스크립트의 Alert()을 이야기 할 것 이고 또 다른 분은 MessageBox.Show()를 이야기 할 것 입니다. 하지만 두 가지 방법 모두다 웹 브라우저 기반의 방법으로 시스템 기반의 경고창을 띄우지는 못합니다. 시스템 기반의 경고창은 Silverlight를 사용해서 모니터링 시스템을 만든다든지 할 경우에 꼭 필요한 기술 입니다. 시스템 기반의 경고창을 이용하면 다른 창들에 의해서 경고창이 가려져서 인지하지 못하는 경우가 없어지기 때문입니다.

 

<그림1>Notification API 샘플

 

이미 눈치를 채신 분들이 계실지 모르겠습니다만 시스템 차원에서 경고창을 띄우는 것은 시스템 API에 대한 접근이 필요로 합니다. 그래서 이 기능은 OOB에서만 사용 가능합니다. 앞서서 설명한 적이 있는 방법으로 로컬에 설치를 해줘야 실행이 가능합니다.

 

 

Silverlight 4에서는 Notification을 위한 방법을 제공해 주고 있습니다. 기본적으로는 Window만 제공해주고 있는 방법으로 아주 심플하게 사용할 수 있는 방법입니다.

 

<그림2> NotificationWindow 사용 예

 

시스템 차원의 경고창을 지원하는 객체로 NotificationWindow라는 객체가 제공 됩니다.

 

<소스1>NotificationWindow의 사용 예

 

사용하는 방법은 NotificationWindows 객체를 하나 만들고 거기에 화면에 보여줄 객체를 넣고 Show()를 호출하면 됩니다. 여기서는 Show(3000)이라고 되어 있는데 이는 3초를 의미합니다.

 

그런데 보기 싫기도 하고 사용자가 원하는 타입이 아닐 확률이 대단히 대단히 높습니다. 그래서 사용자가 좀 더 예쁜 레이아웃을 정의해서 사용할 수 있는 방법을 <소스2>에서 볼 수 있습니다.

 

 

<소스2>Custom 디자인을 보여주는 NotificationWindows

<소스2>에서 보면 중간에 CustomNotification이라는 객체가 나오는데 이는 기본으로 제공 해주는 객체는 아니고 예쁜 디자인을 위해서 사용자가 추가한 커스텀 컨트롤입니다. 첨부된 샘플을 보시면 디자인 소스를 보실 수 있습니다.

저작자 표시 변경 금지
신고
2010.01.28 09:00

1.RichTextArea Part 1
2.RichTextArea Part 2
3.Accessing Web Camera and Microphone
4.Right Click Mouse Events
5.MouseWheel API
6.Using Silverlight Controls As Drop Targets
7.DataGrid Enhancements
8.Printing API Basics
9.Hosting HTML Content
10.Accessing the Global Clipboard Programmatically 
11.Using the ViewBox Control 
12.Asynchronous Data Validation 
13.BiDi and Right-to-Left Support 
14.Notification API
15.Local File Access 
16.RIA Services support in Visual Studio 2010  
 

블로그 이미지 김영욱 차장 Microsoft Korea  .NET Evangelist
Enterprise UX 를 위한  UI 기술과 SOA, Cloud Computing, NUI등 다양한 분야의 접목과 응용을 통해 최적의 IT 인프라 구축을 위해서 노력하고 있다.
Email: iwinkey@hotmail.com
Blog: http://winkey.tistory.com

 

이번에 설명할 기능은 RTL(Right To Left)라고 불리는 기능이다. <그림1>에서 볼 수 있듯이 아랍권 언어들은 글자의 방향이 우리와는 반대 반향으로 흘러간다. 우리가 보기에는 이해하기 힘든 방식이기도 하고 글씨를 쓰다 보면 이미 쓴 글씨가 손에 묻거나 할 텐데 그래도 아랍권의 많은 사람들은 RTL 방식으로 글을 쓰고 읽는다. 

 

 
<그림1>RTL Sample

 

이번에는 RTL을 별도로 지원하는 방법이 없어서 전용 컨트롤을 사용하거나 혹은 온갖 꼼수를 동원하기도 했다. 하지만 Silverlight 4에서는 드디어 RTL이 기본으로 지원되기 시작했다.

 

하나 하나의 컨트롤 상에서 글씨의 흐름을 제어하기 위해서는 다음과 같이 사용할 수 있다.

 

<TextBlock FlowDirection="RightToLeft" Text="BiDi and RTL Sample" FontSize="20"  />

 

하지만 모든 컨트롤에 일일이 이렇게 지정할 수는 없기에 상위 레벨에서 지정하면 페이지 전체에 영향이 가게끔 할 수 있다.

 

<UserControl x:Class="BiDiRTL.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    d:DesignHeight="300" d:DesignWidth="400" FlowDirection="RightToLeft">

 

위와 같이 UserControl Level에서 RTL을 지정하게 되면 이 페이지에 포함된 모든 객체들이 RTL방식으로 출력되게 된다.


신고
2010.01.27 09:00

1.RichTextArea Part 1
2.RichTextArea Part 2
3.Accessing Web Camera and Microphone
4.Right Click Mouse Events

5.MouseWheel API

6.Using Silverlight Controls As Drip Targets
7.DataGrid Enhancements
8.Printing API Basics 
9.Hosting HTML Content

10.Accessing the Global Clipboard Programmatically

11.Using the ViewBox Control
12.Asynchronous Data Validation 
13.BiDi and Right-to-Left Support 
14.Notification API
15.Local File Access 
16.RIA Services support in Visual Studio 2010 

블로그 이미지 김영욱 차장 Microsoft Korea  .NET Evangelist
Enterprise UX 를 위한  UI 기술과 SOA, Cloud Computing, NUI등 다양한 분야의 접목과 응용을 통해 최적의 IT 인프라 구축을 위해서 노력하고 있다.
Email: iwinkey@hotmail.com
Blog: http://winkey.tistory.com

 

이번 시간에 설명해 드리는 내용은 Silverlight에서 비동기적으로 데이터의 내용을 검증하는 것에 대한 내용입니다.

ASP.NET 등에서는 데이터의 내용을 검증하는 컨트롤들이 제공되고 있어서 비교적 쉽게 데이터의 내용을 검증하는 작업이 가능하지만 Silverlight에서는 아직 검증(Validation)과 관련된 컨트롤이 따로 제공되지 않고 있습니다.

 

<그림1> 비동기 검증에 대한 기법을 보여주는 샘플

 

검증 작업을 자동으로 처리해주는 컨트롤이 없으면 일일이 코딩으로 처리해 주어야 하기 때문에 이번에 설명할 내용은 꽤 코드 위주로 진행 될 예정입니다. 또 대부분은 Silverlight 4가 아니더라도 적용 가능하기 때문에 본 내용은 Silverlight를 사용하는 대부분의 개발자들에게 도움이 되는 내용입니다.

 

 

1. 왜 비동기 적인 검증을 하는가?

 

비동적인 검증을 하는 이유는 여러 가지 이유가 있을 수 있지만 가장 중요한 이유는 사용자들의 작업을 최대한 방해하지 않는다는 것입니다. 사용자의 작업을 최대한 방해 하지 않으면서 자연스럽게 잘못된 입력을 알려는 방법으로 비동기 검증을 이야기 하고 있습니다.

물론 경고 창이 별도로 팝업되고 사용자들의 확인을 요구하는 것은 부적절하고 쓸데 없는 클릭을 유발합니다.

 

<그림2>자연스러운 입력 오류의 안내

 

<그림2>를 보면 팝업이 발생하지 않는 방법으로 사용자들에게 입력 오류가 발생한 컨트롤의 위치와 오류의 내용을 설명하고 있는 것을 볼 수 있습니다. 이런 작업을 가장 적절하게 해결 할 수 있는 방법은 바로 사용자 정의 컨트롤을 제작하는 것입니다. 여기서는 EditCustomer라는 사용자 정의 컨트롤을 제작하겠습니다.

 

 

2. 사용자 정의 컨트롤을 만들어 보자.

 

사용자 정의 컨트롤을 만들 때는 반복적으로 사용되거나 혹은 동적으로 변화하는 UI영역, 혹은 이벤트 핸들링이 필요한 경우 등 다양한 목적으로 인해서 만들게 됩니다. 여기서는 이벤트 핸들링을 목적으로 EditCustomer라는 사용자 정의 컨트롤을 만들어 보려고 합니다.

 

<그림1>에서 볼 수 있는 영역 자체가 지금 만들려고 하는 EditCustomer 컨트롤 입니다. 메인 페이지에서 해당 폼을 불러서 사용하기 위해서 아래와 같이 코드를 이용할 수 있습니다.

 

EditCustomer wind = new EditCustomer();
wind.VerticalAlignment = System.Windows.VerticalAlignment.Top;
wind.Margin = new Thickness(0, 50, 0, 0);
wind.Show();

 

본격적으로 코딩에서 들어가기 전에 EditCustomer는 System.Windows.Controls.ChildWindow로 부터 상속을 받게 합니다. ChildWindow는 Silverlight 안에서 하나의 팝업 창의 역할을 할 수 있게 해주는 컨트롤로 앞으로 많이 활용 될 것으로 기대되는 컨트롤 중 하나 입니다.

 

<소스1>ChildWindow로 부터 상속

 

EditCustomer 사용자 컨트롤이 Load되고 나면 기본적인 이벤트 핸들러 들을 붙이기 시작하는데 그 이전에 보면 theWindow, theCustomer에 각 각 값을 대입하고 있는 것을 볼 수 있습니다.

<소스2>theWindow와 theCustomer의 사용

 

그런데 자세히 보면 theWindow에는 자기 자신을 집어 놓고 있고 theCustomer에는 CCustomer.RandomCustomer를 대입하고 있는 것을 볼 수 있는데 여기서 theWindow는 정적인 맴버 변수로 외부에서 자기 스스로를 잘 참조할 수 있게 추가한 구문입니다.

 

<소스3>맴버 변수인 theWindow

 

이와는 상관없이 theCustomer는 LayoutRoot.DataContext에 설정하는 것을 볼 수 있는데 이는 해당 되는 Entity Class를 해당 폼에 바인딩 시키기 위함입니다.  하지만 그냥 Entity class가 아닌 게 데이터만 가지고 있지 않고 이벤트도 가지고 있기 때문입니다. 해당 되는 Customer의 값이 바뀌면 발생되는 이벤트로 ChangeStatus를 가지고 있습니다.

 

<소스4>theCustomer_ChangeStatus 이벤트 핸들러

폼에 해당 Entity class가 바인딩 되어 있는 상태에서 사용자의 폼의 내용을 수정할 경우 Entity class도 변경되고 이와 관련된 이벤트가 발생되게 되는데 이는 그냥 되지는 않고 Customer class에서 해당 이벤트를 정의해 주었기 때문에 가능한 것입니다.

 

어찌되었던 변경이 감지되면 해당 상태에 맞추어서 메시지를 출력할 수 있게 해주는 코드가 <소스4>에 나와있습니다.

메시지를 내보는 메소드인 WriteToLog( )는 Log라는 ListBox에 아이템을 추가하는 방식으로 구현되어 있습니다.

 

<소스5>WriteToLog ( )

 

이제 Customer Class의 내용을 살펴보면 아까 사용했던 이벤트를 정의하는 부분이 있습니다.

<소스6>Customer class의 이벤트 델리게이트

 

이제 검증과 관련된 작업이 거의 끝났습니다.

정리해 보면 다음과 같이 요약 할 수 있습니다.

 

검증이 필요한 컨트롤을 사용자 정의 컨트롤로 만들고 Entity class를 설계하고 이때 이벤트 델리게이트를 사용해서 이벤트를 추가하고 해당 이벤트가 비동기적으로 발생할 때 마다 검증과 동시에 사용자에게 검증 결과를 알려주는 것입니다.

 

사소 소스가 불편하고 어려운 점들이 있어 보이는데 후에 좀 더 사용하기 쉬운 소스를 만들어볼까 합니다.

 

역시 나머지 내용은 첨부된 소스를 참조해 주시기 바랍니다.

신고
2010.01.26 09:00

1.RichTextArea Part 1
2.RichTextArea Part 2
3.Accessing Web Camera and Microphone
4.Right Click Mouse Events

5.MouseWheel API

6.Using Silverlight Controls As Drip Targets
7.DataGrid Enhancements
8.Printing API Basics 
9.Hosting HTML Content

10.Accessing the Global Clipboard Programmatically

11.Using the ViewBox Control

12.Asynchronous Data Validation 
13.BiDi and Right-to-Left Support 
14.Notification API
15.Local File Access 
16.RIA Services support in Visual Studio 2010  

블로그 이미지 김영욱 차장 Microsoft Korea  .NET Evangelist
Enterprise UX 를 위한  UI 기술과 SOA, Cloud Computing, NUI등 다양한 분야의 접목과 응용을 통해 최적의 IT 인프라 구축을 위해서 노력하고 있다.
Email: iwinkey@hotmail.com
Blog: http://winkey.tistory.com

 

  이번에 설명 해 드릴 내용은 매우 짧은 내용입니다. ViewBox 는 자기 자신 위에 다른 컨트롤을 올려 놓을 수 있는 일종의 컨테이너 역할을 하는 레이아웃과 관련된 컨트롤입니다. 한 가지 특이한 점은 ViewBox는 자기 자신의 크기가 바뀔 때 자기 위에 있는 컨트롤의 크기도 함께 변화시키는 특징이 있습니다.

그래서 크기를 자연스럽게 변화시키거나 할 때 유용하게 사용할 수 있는 컨트롤입니다.

 

<그림1> ViewBox 샘플

 

ViewBox를 사용할 경우에 잘 지정해야 하는 속성이 두 가지가 있는데 StretchDirection과 Stretch 입니다.

StretchDirection의 경우 크기가 변화 될 때 어느 정도까지 변화되는가에 대한 상한 혹은 하한선을 결정할 때 사용하는 속성인데 여기에서 설정할 수 있는 옵션은 다음과 같습니다.

 

UpOnly : 내용이 부모보다 작은 경우에만 크기가 커집니다. 내용이 부모보다 크면 크기가 줄어들지 않습니다.

DownOnly : 내용이 부모보다 큰 경우에만 크기가 줄어듭니다. 내용이 부모보다 작으면 크기가 커지지 않습니다.

Both : Stretch 모드에 따라 내용이 부모에 맞게 늘어납니다.

 

또 Stretch 속성은 ViewBox안에 있는 컨트롤이 ViewBox내에 채워지는 형태를 지정할 수 있게 되었는데 아래와 같이 4가지 방식으로 채워 질 수 있게 되어 있습니다.

 

None : 내용의 원래 크기가 유지됩니다.

Fill : 내용의 크기가 조정되어 대상 크기를 채웁니다. 가로 세로 비율은 유지되지 않습니다.

Uniform : 원래 가로 세로 비율을 유지하면서 대상 크기에 맞게 콘텐츠의 크기가 조정됩니다.

UniformToFill : 원래 가로 세로 비율을 유지하면서 대상 크기를 채우도록 콘텐츠의 크기가 조정됩니다. 대상 사각형의 가로 세로 비율이 소스와 다른 경우에는 소스 내용이 대상 크기에 맞게 클리핑됩니다.

 

여러 TileBrush Stretch 설정

<그림2>Stretch의 4가지 형태

 

첨부된 파일을 실행시켜서 여러 가지 옵션을 잘 실행시켜 보시기 바랍니다.

신고
2010.01.25 09:00

1.RichTextArea Part 1
2.RichTextArea Part 2
3.Accessing Web Camera and Microphone
4.Right Click Mouse Events

5.MouseWheel API

6.Using Silverlight Controls As Drip Targets
7.DataGrid Enhancements
8.Printing API Basics 
9.Hosting HTML Content
10.Accessing the Global Clipboard Programmatically 
11.Using the ViewBox Control 
12.Asynchronous Data Validation 
13.BiDi and Right-to-Left Support 
14.Notification API
15.Local File Access 
16.RIA Services support in Visual Studio 2010 

블로그 이미지 김영욱 차장 Microsoft Korea  .NET Evangelist
Enterprise UX 를 위한  UI 기술과 SOA, Cloud Computing, NUI등 다양한 분야의 접목과 응용을 통해 최적의 IT 인프라 구축을 위해서 노력하고 있다.
Email: iwinkey@hotmail.com
Blog: http://winkey.tistory.com

 

일시적으로 어떤 데이터를 잠시 보관해 두는 영역을 클립보드라고 부릅니다. 사용자의 의지에 따라서 다른 곳의 내용을 복사해서 붙여 넣기 등의 작업을 할 때 임시로 보관해 두는 메모리 영역도 역시 클립보드 입니다.

 

사용자의 의지라고 제가 명시한 이유는 클립보드의 내용을 접근할 때 일반적으로는 사용자들이 Ctrl + C, V 등을 사용해서 클립보드의 작업을 하지만 그렇지 않은 경우도 있을 수 있기 때문입니다. 우리가 만들려고 하는 응용프로그램에서 클립보드의 내용에 직접 접근해야 할  필요가 있을 수도 있습니다.

 

Silverlight 3까지는 코드 상에서 클립보드에 접근할 수 있는 방법을 제공해 주지 않고 있었지만 Silverlight 4에서는 방법을 제공하고 있습니다.

 

<그림1>클립보드 샘플 프로그램

 

<그림1>에 나오는 샘플에서 첫 번째 RichTextArea 안에 포함되어 있는 내용을 Ctrl + C를 통해서 Copy 하고 두 번째 RichTextArea에 Ctrl + V를 통해서 붙여 넣기 했을 경우에는 아무런 메시지 없이 잘 실행됩니다.

하지만  하단에 있는 Copy 혹은 Paste를 사용할 경우 다음과 같은 경고 메시지가 나타나게 됩니다.

 

<그림2> 클립보드 접근시 나오는 메시지

 

이렇게 코드에서 클립보드에 접근할 경우에 메시지가 뜨는 이유는 클립보드 역시 로컬의 자원이기 때문에 보안 모델을 위반할 수 있기 때문에 사용자에게 적절하게 메세지를 주는 것 입니다.

 

클립보드에 실제로 접근하기 위해서 사용할 수 있는 객체는 System.Windows.Clipboard 입니다.

클립보드에  선택된 텍스트를 저장하기 위해서는

 

Clipboard.SetText( LeftTextBox.Selection.Text );

와 같이 사용할 수 있으며 반대로 클립보드에 있는 내용을 가져오기 위해서는

 

RightTextBox.Selection.Text = Clipboard.GetText();

와 같이 사용할 수 있습니다.

 

여기서 한 가지 더 알아두면 좋은 메소드는 현재 클립보드에 내용이 있는지 없는지 확인하는 Clipboard.ContainsText() 입니다. Clipboard.ContainsText()의 경우 내용 유무를 bool 형태로 돌려주게 되어 있습니다.

신고