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.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 형태로 돌려주게 되어 있습니다.

신고
2010.01.21 12: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

 

 
<그림1> Web browser 컨트롤을 사용해서 RSS를 읽어 들인 예

HTML을 Silverlight에서 바로 보여줄 수 있다면…. 할 수 있는 게 엄청 많아 질 것입니다. Silverlight 4 부터는 HTML을 Silverlight에서 바로 보여줄 수 있는 컨트롤이 추가 되어서 Silverlight에서 할 수 있는 게 엄청 많아 졌습니다.

HTML을 불러올 수 있는 방법은 html 파일을 직접 읽어오는 방법 혹은 html 문자열을 이해하는 방법 그리고 타 사이트에 있는 HTML을 직접 읽어오는 방법 등 여러 가지 방법이 있을 수 있는데 HTML 컨트롤의 치명적인 한 가지 제약 사항이 있습니다. 그것은 바로 OOB(Out of browser) 상태에서만 지원되는 점입니다.

 

웹 브라우저 컨트롤을 사용하기 위해서는 다음과 같이 한 줄만 입력하면 됩니다.


 <WebBrowser x:Name="HtmlContent" Height="600" Width="800” />


 하지만 웹 브라우저 컨트롤은 기본적으로 OOB에서만 실행되기 때문에 다음과 같은 코드를 사용해서 OOB 상태에서만 실행되는 것을 확인해야 합니다.


 if (!App.Current.IsRunningOutOfBrowser)
{
    WarningText.Visibility = Visibility.Visible;
}


 두 번째로 현재 실행되고 있는 Silverlight 애플리케이션이 이미 해당 컴퓨터의 로컬에 설치되었는지를 확인하고 설치가 되지 않았으면 설치 버튼을 노출 시켜주기 위해서 다음과 같은 코드가 필요합니다.


 if (App.Current.InstallState == InstallState.Installed)
{
    InstallButton.Visibility = Visibility.Collapsed;
}
else
{
    return;
}


 위의 두 가지 소스에서 보면 알 수 있지만 App 객체는 현재 실행되고 있는 애플리케이션의 정보를 알 수 있게 해준다.
그럼 해당 컴퓨터에서 자기 자신을 설치하기 위한 코드는 어떤 것일까? 놀랍게도 딱 한 줄만 사용하면 됩니다.


 App.Current.Install();


 Web Browser 컨트롤에서 특정한 페이지로 이동하기 위해서는 다음과 같이 Navigate 메소드를 사용하면 됩니다.


 HtmlContent.Navigate(new Uri(“http://winkey.tistory.com”));


 하지만 Silverlight는 좀 더 재미있는 방법도 제공되고 있는데 로컬에 있는 HTML 파일을 읽어드릴 수도 있습니다. 이럴 경우에는 아래와 같은 방법으로 접근 할 수 있습니다.


 HtmlContent.Navigate(new Uri(App.Current.Host.Source, “./test.html”));


재미있는 사실은 Web Browser 컨트롤에서는 그냥 메모리상에서 문자열로 조합되어 있는 html도 역시 출력할 수 있습니다.


HtmlContent.NavigateToString(“<P>Hello World<P>”);


이럴 경우에는 Navigate 메소드가 아니라 NavigateToString을 사용하셔야 합니다.

 
<그림2> NavigateToString을 사용해서 HTML 문자열을 읽어드린 경우.


이미 이 글을 읽으시는 분들의 머리 속에는 이것을 활용할 아이디어가 무궁무진하게 흘러 나오기 시작하는 느낌이 들 것입니다. 첨부된 샘플을 보시면 XML 타입으로 되어 있는 RSS를 파싱하는 방법도 함께 포함되어 있으니 꼭 참조하시기 바랍니다.

신고