시작하세요. 실버라이트 & 윈도우폰7

시작하세요.  Silverlight

#7-1 Layout

 이번 강좌에서는 Silverlight 에서 가장 기본이 되는 Layout 에 대해 알아 보도록 하겠습니다. Layout 은 위치를 를 잡아 주는 아주 중요한 컨트롤 입니다. 레이아웃 컨트롤의 종류는 기본적으로  Canvas , Grid ,StackPanel 등이 있고 Silverlight Toolkit 에 포함된 확장 컨트롤인 WrapPanel, DockPanel 등이 대표적인 레이아웃 컨트롤 이라 할 수 있습니다.

# Canvas Control
 레이아웃 컨트롤은 자식 컨트롤의 위치를 잡는 방법에서 큰 차이 점이 있습니다. 그중 Canvas 컨트롤에 대해 알아 보도록 하겠습니다.
 
 Silverlight 가 막 세상에 나왔을때는 지금과 같은 많은 컨트롤들이 지원 되지는 않았습니다. 그때는 레이아웃 컨트롤 역시 마찬가지로 Canvas 밖에 지원하지 않았습니다. 이처럼 가장 기본이 되었던 Canvas 컨트롤의 특징은 자식 UIElement 들의 위치를 잡을때 상단과 좌측을 기준으로 위치를 잡는것이 큰 특징 입니다.

Canvas can = new Canvas();
LayoutRoot.Children.Add(can);

Button btn = new Button();
btn.Width = 100;
btn.Height = 30;
btn.Content = "Click!!";

can.Children.Add(btn);

Canvas.SetLeft(btn, 100);
Canvas.SetTop(btn, 50);

#6-2 App.xaml.cs

앞서 강좌에서 App.xaml.cs 이 Silverlight Application 의 시작과 끝을 관리 한다고 설명하였는데요. 오늘은 이 App.xaml.cs 를 이용해서 HTML 페이지와의 상호 매개변수를 전달하는것을 알아 보도록 하겠습니다.

# InitPrams 사용하기
Silverlight Application은 html과 상호 매개변수를 전달할때 <object> 태그의 파라미터를 통해서
받을 수 있습니다. 이 파라미터를 당담하는 것이 바로 InitParams 입니다. 이 InittParams 는  param1=value1,param2=value2 와 같은 형식으로 보내어 지고 Silverlight 에서는 IDictionary<string,string> 형으로 전달되어 집니다.  사용법은 다음과 같습니다.

[HTML - <object> 태그]

public static IDictionary InitPrams; 
private void Application_Startup(object sender, StartupEventArgs e)
{
    InitPrams = e.InitParams;
    this.RootVisual = new MainPage();
}

IDictionary 변수를 선언 합니다. 다른 UserControl 에서도 참조를 하기위해 static 으로 선언 합니다.

[MainPage.xaml]
<?xml version="1.0"?>
<UserControl x:Class="SilverlightApplication2.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" Width="640" Height="480">
  <Grid x:Name="LayoutRoot">
        <StackPanel Orientation="Horizontal" VerticalAlignment="Center" HorizontalAlignment="Center">
            <TextBlock Text="사용자의 아이디는  "/>
            <TextBlock x:Name="txtUser" FontWeight="Bold"/>
            <TextBlock Text="  비밀번호는  "/>
            <TextBlock x:Name="txtPwd" FontWeight="Bold"/>
            <TextBlock Text="  입니다."/>
        </StackPanel>
    </Grid>
</UserControl>


[MainPage.xaml.cs]

using System.Windows;
using System.Windows.Controls;
using System.Collections.Generic;

namespace SilverlightApplication2
{
    public partial class MainPage : UserControl
    {
        public MainPage()
        {
            InitializeComponent();
            Loaded += new RoutedEventHandler(MainPage_Loaded);    
        }

        void MainPage_Loaded(object sender, RoutedEventArgs e)
        {
            try
            {
                txtUser.Text = App.InitPrams["user"];
                txtPwd.Text = App.InitPrams["pwd"];
            }
            catch (KeyNotFoundException ex)
            {
                MessageBox.Show(ex.Message);
            }
        }

        
    }
}

[Silverlgiht 샐행화면]

#6-1 App.xaml.cs

앞서 # 프로젝트 구성 살펴보기 강좌에서 App.xaml.cs 에 대한 대용을 간단하게 살펴 보았는데 이번강좌는 이 App.xaml.cs 에 대해 좀더 자세하게 살펴 보도록 하겠습니다.


# Silverlight 시작과 끝

App.xaml.cs 는 Silverlight Application 의 시작과 끝을 관리 합니다. App.xaml.cs 은 아래과 같은 코드로 이루어져 있는데요.

public partial class App : Application
    {

        public App()
        {
            this.Startup += this.Application_Startup;
            this.Exit += this.Application_Exit;
            this.UnhandledException += this.Application_UnhandledException;

            InitializeComponent();
        }

        private void Application_Startup(object sender, StartupEventArgs e)
        {
            this.RootVisual = new MainPage();
        }

        private void Application_Exit(object sender, EventArgs e)
        {
            
        }
        private void Application_UnhandledException(object sender, ApplicationUnhandledExceptionEventArgs e)
        {
            // 응용 프로그램을 디버거 외부에서 실행 중인 경우 브라우저의 예외 메커니즘을
            // 사용하여 예외를 보고합니다. IE에서는 예외가 상태 표시줄에 노란 경고 
            // 아이콘으로 표시되고 Firefox에서는 스크립트 오류가 표시됩니다.
            if (!System.Diagnostics.Debugger.IsAttached)
            {

                // 참고: 예외가 throw된 후 처리되지 않아도 응용 프로그램은 계속
                // 실행됩니다. 
                // 프로덕션 응용 프로그램의 경우 이 오류 처리는 웹 사이트로 오류를 보고하고 응용 프로그램을 
                // 중지하는 다른 방식으로 대체되어야 합니다.
                e.Handled = true;
                Deployment.Current.Dispatcher.BeginInvoke(delegate { ReportErrorToDOM(e); });
            }
        }
        private void ReportErrorToDOM(ApplicationUnhandledExceptionEventArgs e)
        {
            try
            {
                string errorMsg = e.ExceptionObject.Message + e.ExceptionObject.StackTrace;
                errorMsg = errorMsg.Replace('"', '\'').Replace("\r\n", @"\n");

                System.Windows.Browser.HtmlPage.Window.Eval("throw new Error(\"Unhandled Error in Silverlight Application " + errorMsg + "\");");
            }
            catch (Exception)
            {
            }
        }
    }

위코드에서 눈여겨 보실것이 바로 Application_Startup(object sender, StartupEventArgs e) 와 Application_Exit(object sender, EventArgs e) 입니다.  Application_Startup 는 Silverlight Application 이 시작 될때 호출 됩니다. Application_Exit 는 Silverlight Application 이 종료 될때 호출 됩니다. 확인을 위해 아래와 같이 수정 합니다.

        private void Application_Startup(object sender, StartupEventArgs e)
        {
            MessageBox.Show(" Silverlight Application 을 시작 합니다.");
            this.RootVisual = new MainPage();
        }

        private void Application_Exit(object sender, EventArgs e)
        {
            MessageBox.Show(" Silverlight Application 을 종료 합니다.");
        }

자! 이제 디버깅을 실행하여 Silverlight Application 을 실햅 시킵니다. 아래와 같이 MainPage.xaml 이 나타나기 전에 메세지가 나타나고, 부라우져를 닫으면 메세지가 나타나는 것을 보실수 있습니다.

.

#5 Silverlight.. HTML문서에 삽입하기 <object>

Silverlight는 플래시와 마찬가지로 HTML문서 안에 임베딩 되서 실행 됩니다. 물론 OOB 같이 그렇지 않는 경우도 있구요.(OOB 역시도 최초 HTML 문서 안에서 설치 하셔야 합니다.) Silverlight 를 HTML 에 삽입 하는 방법은 두가지가 있습니다. 바로 <object> 태그를 이용하는 방법과 Silverlight.js 이용하는 방법 입니다.


# <object> 태그로 삽입하기.

Silverlight 프로젝트를 컴파일 하게 되면은 최종적으로 xap 파일 생성이 됩니다. 이 xap 파일만 있으면 Silverlight Application 을 WebSite 에서 사용할수 있는 것이지요. <object> 태그로 html 문서안에 삽입이 가능 한데요. 이 <object> 태그는 다음과 같습니다.
 

<object data="data:application/x-silverlight-2,"
          type="application/x-silverlight-2"
          width="100%"
          height="100%">
   
    <param name="source" value="xap 파일주소"/>
    <param name="onError" value="onSilverlightError" />
    <param name="background" value="white" />
    <param name="minRuntimeVersion" value="3.0.40818.0" />
    <param name="autoUpgrade" value="true" />
    <a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=3.0.40818.0">
      <img src="http://go.microsoft.com/fwlink/?LinkId=108181" />
    </a>
</object>

<object > 태그를 살펴 보면  data, type 속성은 이 <object> 태그의 플러그인은 Silverlight 임을 알수가
있습니다.  data="data:application/x-silverlight-2," 부분 때에 따라(클립보드로 복사한후 위지웍에디터에 삽입할때) 삭제해서 써도 무관합니다.  width, height 는 삽입되는 플러그인영역 입니다.

<object> 태그를 <param> 태그를 이용해서 파라미터 세팅이 가능합니다. Silverlight 플러그인에서 사용하는 파라미터는 다음과 같습니다.

source : xap 파일의 경로 값입니다. 예) http://www.naver.com/Silverlight/test.xap
onError : Silverlight 플러그인에서 활성화에 실패 했을때 콜백할 JavaScript 의 함수 명입니다.
background : 플로그인영역의 배경색 입니다. 예) RGB 값 #cdcdcd
minRuntimeVersion : 현재의 Silverlight Application 이 실행될 최저 Version 을 설정 합니다.
autoUpgrade : Silverlight 런타임이 업그레이드 되었을때 자동으로 업그레이드 하도록 설정 합니다. 예)true ,false
windowless : windowless 모드를 활성화 합니다. 예) true,false
initPrams : 사용자 지정 매게 변수를 받습니다" 예) url=http://naver.com,site=http://google.com,uid=inde83
enableHtmlAccess : 임베딩 되어 있는 html 문서의 DOM 접근 허용설정 예) true,false
allowHtmlPopupWindow : 팝업 접근 허용설정 예)true,false

모든 파라미터가 끝나고 </object> 를 넣어진 태그는 Silverlight 런타임이 설치되지 않았을때 출력되는 영역 입니다. 그래서 이영역에 실버라이트 설치 안내문을 넣으 시면 되겠습니다.

# <embed> 태그로 삽입하기.

요즘의 대형 포털이나 웹사이트를 보면 게시판에 글을 입력할때 위지웍에디터를 이용하는곳이 많습니다. 이 위지웍 에디터는 보안에 문제가 되는 <object> 태그를 허용하지 않을수 있습니다. 그때는 이 <embed> 태그를 이용하시면 <object> 태그가 지원하지 않는 게시판 에서도 Silverlight Application 삽입이 가능합니다.

<EMBED id=SilverlightComponent height=383 type=application/x-silverlight-2 width=480
initParams="user=inde"
enableHtmlAccess="true" autoUpgrade="true" minRuntimeVersion="3.0.40624.0"
background="black" source="http://naver.com/Silverlight/test,xap"/>

시작하세요.  Silverlight


#3 Hello World.

모든 프로그래밍을 처음 접하게 되면 꼭 하고 넘어가야 할것이 있습니다. 프로그래머라면 누구든 피해 갈수 없는 단한가지!! 바로 Hello World 입니다. Hello World 는 C 의 책에서 맨처음 쓰였다고 하는데요. 모든 프로그램의 시작이 이 Hello World 를 출력 함으로서 개념을 잡는것 같습니다.

자 그럼 이것 저것 묻지도 따지지도 말고 따라해주시기 바랍니다.


# 프로젝트 생성하기

Silverlight 개발을 위해서 vs2008 을 실행 합니다. 상단 메뉴에서 파일-> 새로만들기 ->프로젝트를 선택합니다. Silverlight Tools 까지 정상적으로 설치가 완료 되었다면 프로젝트에 Silverligth 텝이 추가 된것을 확인 할수 있습니다.

원할한 디버깅을 위해서 ' 새 웹 사이트에서 Silverlight 응용 프로그램 호스트' 를 체크합니다.
자 Silverlight 프로젝트가 생성 되었습니다.


# XAML 코드 편집

본격적으로 Hello World 를 출력 하기 위해 XAML 코드를 편집 하겠습니다. 예제는 대충 이렀습니다.
화면에 버튼을 누르면 Hello World 라는 문장이 나타납니다.

우선 MainPage.xaml 파일을 엽니다.

파일을 열었으면 아래와 같이 Button 태그를 삽입니다.

<UserControl x:Class="SilverlightApplication7.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:DesignWidth="640" d:DesignHeight="480">
  <Grid x:Name="LayoutRoot">
        <Button Width="100" Height="30" Content="Click!!" Margin="50" VerticalAlignment="Bottom" HorizontalAlignment="Right" x:Name="HelloButton"/>
    </Grid>
</UserControl>

Silverlight 3 에서 부터는 미리보기가 숨겨져 있는데요. XAML 코드를 렌더링모습을 확인하기 위해
비주얼 디자이너를 로드 합니다.

화살표 방향에 마우를 가져가면 마우스 커서가 바뀠니다. 그때 클릭한상태로 창의 경계선을 위로 올립니다. 그러면 다음과 같은 메세지가 보이게 됩니다.

디자이너 로드 다시 시작을 누르게 되면 비주얼 디자이너가 시작하게 되는데 아래와 같이 우리가 생성만 버튼의 모습을 확인 하실수 있습니다.

자 이제 화면 이 완료 되었습니다. 이제 버튼을 눌러 Hello World 를 출력 시켜 보도록 하겠습니다.

# CS 코드 편집

namespace SilverlightApplication7
{
    public partial class MainPage : UserControl
    {
        public MainPage()
        {
            InitializeComponent();
            HelloButton.Click += new RoutedEventHandler(HelloButton_Click);
        }

        void HelloButton_Click(object sender, RoutedEventArgs e)
        {
            TextBlock txt = new TextBlock();
            txt.Text = "Hello World";
            txt.VerticalAlignment = VerticalAlignment.Center;
            txt.HorizontalAlignment = HorizontalAlignment.Center;
            LayoutRoot.Children.Add(txt);
        }

    }
}



# Hello World 완성!!

모든 코딩이 완료가 되었습니다. 이제는 디버그->디버깅시작을 눌러 Silverlight Application 을 실행 시킵니다. 자 이제 화면상에 Click 버튼을 클릭하면 Hello World 가 출력 되는것을 보실수 있습니다.

시작하세요.  Silverlight

#1 개발 환경 구성하기.

실버라이트는  .Net의 무수한 라이브러리를  Light 하게 옮겨 놓은 것을 말합니다. 이로서 우리는 무거운 .Netframework를 설치할 필요 없이 간단하게 Silverlight Application 를 이용할수 있는 것이지요.

하지만 Silverlight 의 개발 환경은 다릅니다. 기본적으로 .Netframework 3.5 를 기반으로 개발 API 구성되어 있어 .Netframework 3.5 sp1 이상의 환경에서 개발이  가능합니다.

Silverlight를 개발하기 위해서는 여러가지 방법이 있습니다. 우선 우리가 Windows 개발쪽으로 많이 썼었던 Visualstudio 2008 과, Visual Express 2008 에서 개발이 가능합니다. 그외에 비 윈도우 에서는 Mono Project 를 이용한 이클립스 플러그인이 있습니다.

이클립스 설치 방법은 http://cafe.naver.com/mssilverlight/3220 를 참고하세요.


# Visual Studio 2008 개발환경

Visual Stidio 2008 에서 Silverlight 를 개발 하기 위해선 VS2008 SP1 와 Silverlight tools 가 필요 합니다.

다운로드
VS 2008 SP1 http://www.microsoft.com/downloads/details.aspx?displaylang=en&FamilyID=fbee1648-7106-44a7-9649-6d9f6d58056e

Silverlight 3 Tools http://www.microsoft.com/downloads/details.aspx?displaylang=en&FamilyID=e82db5e2-7106-419e-80b0-65cce89f06bb

여기서 주의해야 할점은 VS 2008 과 Silverlight Tool 은 언어 선택이 동일 하여아 합니다. 이문제도 많이들 고생하시는걸 보았습니다  또한 설치시에는 웹브라우져를 반드시 종료한 다음 설치해 주시기 바랍니다.
설치가 완료 되면 VS2008 에 Silverlight 프로젝트 템플릿이 추가 된것을 보실수 있습니다.