2010/01/06 글 목록

2010/01/06 에 해당되는 글 2건

2010.01.06 First Look Silverlight 4]RichTextArea Part 1 (1)
2010.01.06 UX Bakery PDC 다시보기 Day1 [5/5]

2010. 1. 6. 12:00

First Look Silverlight 4]RichTextArea Part 1

Silverlight 2010. 1. 6. 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 Silveright 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

첫 번째 강좌를 시작하기 전에 먼저 몇 가지 체크해야 하는 것 들입니다. 우선 개발 툴과 디자인 툴에 관해서 입니다.

Silverlight 4를 개발하기 위해서는 기본적으로 Visual Studio 2010이 필요합니다. 이 이야기는 Visual Studio 2008에서는 불편하다는 이야기가 아니라 할 수 없다는 이야기 입니다. 따라서 이 강좌를 따라 해 보기 위해서는 Visual Studio 2010을 설치해 주어야 한다는 점을 강조 해 드립니다.

또 디자인 툴도 Expression Blend 4 Preview 버전을 사용하셔야 Silverlight 4 프로젝트를 사용할 수 있습니다. 이와 관련된 환경 설정은 http://www.silverlight.net/getstarted/silverlight-4-beta/ 에 가셔서 필요한 구성 요소들을 설치 할 수 있습니다.

개발에 필요한 문서

모든 환경을 설치하는데 다소 시간이 걸리기 때문에 마음 편히 먹고 진행하는 것이 정신 건강에 이롭습니다. 특히 Visual studio 2010의 경우는 시간이 꽤 많이 걸립니다. 이제 필요한 환경이 다 구축되었으면 Silverlight 4의 세계에 입문할 준비가 끝났습니다.

첫 번째 강좌는 RichTextArea에 관한 내용입니다. Silverlight 4에서 새롭게 추가된 RichTextArea(흔히 다른 툴이나 언어에서는 RichTextBox로 많이 부르고 있습니다.) Silverlight 4의 RichTextArea는 그 기능 만으로 보면 새로울 것 없지만 기존에 제공되지 않던 것이 이번 버전부터 제공 될 수 있게 되었다는 점에서 의미가 있습니다.

Silverlight 4 프로젝트를 생성하기 위해서 Visual Studio 2010을 실행 시키고 Silverlight Application 템플릿을 선택해서 프로젝트를 시작합니다. 프로젝트 이름은 RichText로 정했습니다.

프로젝트가 생성되고 나면 약간의 디자인 작업을 해야 합니다. Visual Studio 2010에서는 Silverlight 개발 시에 디자인 모드가 지원되지 않았지만 Visual Studio 2010 부터는 디자인 모드가 지원되기 때문에 편리하게 디자인 할 수 있습니다. 하지만 전문적인 디자인은 역시 Expression Blend를 사용해야 합니다.

화면에 나타난 폼 중에서 상단에 나타난 상하좌우 화살표를 클릭하면 Grid를 나눌 수 있는 상태가 됩니다.

Grid 분할 영역을 클릭하면 Grid 영역이 분할됩니다. 여기에 간단하게 소스 코드를 입력해서 디자인을 완성해 봅니다. RichTextArea와 버튼을 추가합니다. 각 각의 버튼은 볼드, 이텔릭, 크게, 작게 등 폰트와 관련된 속성을 변경하는 기능을 가지고 있습니다.

이제 각 각의 버튼에 대한 C#코드를 작성해서 해당되는 기능을 완성하려고 합니다. 먼저 샘플 텍스트를 넣어줄 간단한 메소드를 추가 합니다.

private void FillText()
{
    rtArea.Selection.Text = "Lrem ipsum dolor sit amet, consectetur adipiscing elit. Aenean"
        + "congue, orci ut placerat dignissim, nibh odio imperdiet diam, in porta libero lacus sit amet risus."
        + "Nullam ultrices purus nec sapien pellentesque at dignissim leo facilisis. Phasellus congue convallis metus, "
        + "eu ultrices augue malesuada sit amet. Nam varius, leo ac pretium pharetra, arcu turpis varius tellus, "
        + "vitae lacinia turpis dolor vitae mauris. Maecenas lacinia laoreet justo, eget imperdiet nulla porta eu. "
        + "Etiam nec elit vel lacus rhoncus vehicula at rutrum elit. Nunc cursus, erat vel rhoncus porta, leo ipsum venenatis "
        + " nisi, nec eleifend ligula quam non massa. Sed neque odio, euismod at egestas ac, scelerisque et nisl. Cum sociis "
        + "natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam ornare risus augue, nec semper "
        + "mauris. Nam feugiat suscipit arcu, sit amet mattis purus lacinia at. Sed ut purus at arcu rhoncus elementum ac at "
        + "enim. Morbi at quam ac magna rutrum gravida eu lacinia neque. Mauris purus augue, ornare sed vestibulum ac, lacinia "
        + "in sapien. Ut sit amet vehicula augue. Donec a dictum felis. In hac habitasse platea dictumst. "
        + "Pellentesque id hendrerit diam. ";
}

길어서 그렇지 그냥 문장을 계속 더해서 rtArea에 넣는 문장입니다. ^^ 그리고 각 버튼의 클릭 이벤트에 대한 이벤트 핸들러를 작성해 주어야 합니다.

boldButton.Click += new RoutedEventHandler(buttonClickHandler);
italicsButton.Click += new RoutedEventHandler(buttonClickHandler);
biggerButton.Click += new RoutedEventHandler(buttonClickHandler);
smallerButton.Click +=new RoutedEventHandler(buttonClickHandler);

네 개의 버튼 모두 buttonClickHandler라는 이벤트 핸들러를 호출하게 되어 있습니다. buttonClickHandler에서 다음과 같은 부분들을 추가 합니다.

void buttonClickHandler(object sender, RoutedEventArgs e)
{
Button b = sender as Button;

    const double MaxFontSize = 36;
    const double MinFontSize = 10;
    const double IncrementFontSize = 2;

    if (b != null)
    {
        switch (b.Content.ToString().ToUpper())
        {
            case "BOLD":
                if (rtArea.FontWeight == FontWeights.Bold)
                {
                    rtArea.FontWeight = FontWeights.Normal;
                    b.FontWeight = FontWeights.Bold;
                }
                else
                {
                    rtArea.FontWeight = FontWeights.Bold;
                    b.FontWeight = FontWeights.Normal;
                }
                break;
            case "ITALICS":
                rtArea.FontStyle = rtArea.FontStyle == FontStyles.Italic ? FontStyles.Normal : FontStyles.Italic;
                b.FontStyle = rtArea.FontStyle == FontStyles.Italic ? FontStyles.Normal : FontStyles.Italic;
                break;
            case "BIGGER":
                rtArea.FontSize = rtArea.FontSize > MaxFontSize ? MaxFontSize : rtArea.FontSize + IncrementFontSize;
                break;
            case "SMALLER":
                rtArea.FontSize = rtArea.FontSize < MinFontSize ? MaxFontSize : rtArea.FontSize - IncrementFontSize;
                break;