Local Connection과 InkPresenter 2010. 1학기, 소프트웨어 설계 및 실험(Ⅰ) 14주 실습강의 Local Connection과 InkPresenter 2010. 1학기, 소프트웨어 설계 및 실험(Ⅰ)

로컬 커넥션(Local Connection) 실버라이트3에 새롭게 추가 네트워크 통신을 위한 것이 아니라 지역간의 통신에 사용 같은 컴퓨터상에서 동작하는 여러 개의 실버라이트 애플리케이션 간의 통신 지원

로컬 커넥션의 사용 구조 브라우저 간의 Local Connection은 서로 다른 브라우저에서 실행되고 있는 실버라이트 애플리케이션에서 사용 하나의 브라우저 안에서 실행되는 실버라이트 애플리케이션의 통신에서도 사용 가능

Message Sender 실버라이트가 제공하는 클래스 LocalMessageSender 클래스 다른 실버라이트 애플리케이션으로 메시지를 보내고자 할 때 사용 Method, Property & Event of LocalMessageSender ReceiverDomain : 메시지를 수신할 Receiver가 속한 Domain ReceiverName : 메시지를 수신할 Receiver의 고유 이름 SendAsync() : 메시지를 Receiver에 전달할 경우 사용 SendCompleted : 메시지가 상대방에게 전달된 경우 발생하는 이벤트

Message Receiver 실버라이트 제공하는 클래스 LocalMessageReceiver 클래스 LocalMessageSender로부터 메시지를 수신하기 위해 사용 Method, Property & Event of LocalMessageReceiver NameScope : 같은 도메인의 실버라이트 애플리케이션으로부터 메시지를 받을 것인지 다른 도메인의 실버라이트 애플리케이션으로부터 받을 것인지를 표현 ReceiverName : LocalMessageReceiver의 이름 Listen() : 메시지 수신을 시작하기 위해 사용 MessageReceived : 메시지를 수신하면 발생하는 이벤트

예제 – 간단한 Sender-Receiver 실버라이트 애플리케이션 프로젝트를 만든다. 솔루션에 실버라이트 애플리케이션 프로젝트를 하나 더 추가한다. 실버라이트 프로젝트 하나는 Sender 애플리케이션으로 다른 하나는 Receiver 애플리케이션으로 작업한다.

예제 – Sender 애플리케이션 부분 MainPage.xaml

예제 – Sender 애플리케이션 부분 MainPage.xaml.cs System.Windows.Messageung 네임스페이스 추가

예제 – Receiver 애플리케이션 부분 MainPage.xaml

예제 – Receiver 부분 MainPage.xaml.cs Sender와 동일한 네임스페이스 추가.

예제 지난주에 배운 대로 Default.aspx에 <object>태그를 이용하여 Sender와 Receiver 어플리케이션 추가. 실행 결과

InkPresenter 컨트롤 InkPresenter 컨트롤은 Canvas에서 파생된 컨트롤로 Child 프로퍼티를 사용하여 자식 UIElement를 표시하거나 StrokeCollection 프로퍼티를 사용하여 드로잉 데이터(Stroke)를 화면에 표시하는데 사용 Stroke는 사용자가 마우스를 클릭하여 드로잉을 하고 난 후 마우스를 놓기까지의 각 시퀀스와 드로잉 시 펜의 내부 색, 테두리 색, 너비, 높이 및 드로잉 데이터가 포함되는 바운드를 의미

InkPresenter 구조도 InkPresenter의 StrokeCollection에 유저가 드로잉한 데이터가 Stroke의 형태로 저장됨.

실습 InkPresenter를 이용하여 간단한 드로잉이 가능한 웹페이지를 만들어라.

실습 설명 UI 부분 코드는 다음과 같다. InkPresenter를 사용하려면 System.Windows.Ink 네임스페이스를 .cs파일에 추가하여야 한다.

실습 설명 드로잉이 마우스를 통해서 이루어지므로 Page를 Load할 때(MainPage 함수에서) 필요한 마우스 이벤트를 InkPresenter에 등록하여 준다. MouseLeftButtonDown MouseMove LostMouseCapture

실습 설명 아래 4가지의 이벤트 CallBack 함수를 구현하여야 함. inkPresenter_MouseLeftButtonDown은 마우스 왼쪽 버튼을 눌렀을 경우 동작하는 이벤트 함수. inkPresenter_MouseMove는 마우스를 움직였을 경우 동작하는 이벤트 함수. inkPresenter_LostMouseCapture는 InkPresenter가 마우스 또는 스타일러스 캡쳐를 잃을 때 동작하는 이벤트 함수. DeleteButton_Click은 지우기 버튼 클릭시 동작하는 이벤트 함수.

실습 설명 - MouseLeftButtonDown 마우스 왼쪽 버튼을 누른다는 것은 사용자가 그림을 그리기 시작한다는 말이다. 따라서 마우스의 위치를 캡쳐하여야 한다. InkPresenter의 메소드중 CaptureMouse()를 사용한다. StylusPointCollection 컬렉션을 생성한다. StylusPointCollection 클래스를 사용. 생성자는 기본 생성자임(new StylusPointCollection()) InkPresenter를 기준으로 하는 마우스 상대좌표 컬렉션을 추가한다. e.StylusDevice.GetStylusPoints(InkPresenter의 아이디)가 InkPresenter의 상대좌표 컬렉션이다.

실습 설명 - MouseLeftButtonDown 컬렉션 데이터를 이용하여 Stroke를 생성한다. 코드 최상단에 이미 선언한 Stroke 변수를 사용. Stroke의 DrawingAttribute 프로퍼티를 설정한다. DrawingAttributes.Width DrawingAttributes.Height DrawingAttributes.Color DrawingAttributes.OutlineColor 위와 같은 속성들의 값에 따라 드로잉 데이터가 바뀐다. Stroke 데이터를 InkPresenter의 Stroke 컬렉션에 추가한다.

실습 설명 - MouseMove Stroke의 null 여부를 체크한다. Null이 아닐경우 MouseLeftButtonDown 이벤트 함수에서 생성하여 InkPresenter에 추가했던 Stroke 컬렉션(Stroke 변수)에 마우스 좌표 컬렉션을 추가합니다. Stroke의 Attribute중 StylusPoints에 추가. e.StylusDevice.GetStylusPoints(InkPresenter 아이디)가 마우스 좌표 컬렉션이다.

실습 설명 - LostMouseCapture InkPresenter가 마우스 또는 스타일러스 캡쳐를 잃었기에 이미 선언된 Stroke를 null로 초기화 하면 된다.

실습 설명 - DeleteButton_Click InkPresenter의 Stroke 컬렉션을 Clear 해주고 선언한 Stroke 변수를 null로 초기화 해주면 된다.