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를 설계하고 이때 이벤트 델리게이트를 사용해서 이벤트를 추가하고 해당 이벤트가 비동기적으로 발생할 때 마다 검증과 동시에 사용자에게 검증 결과를 알려주는 것입니다.

 

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

 

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

신고


티스토리 툴바