태터데스크 관리자

도움말
닫기
적용하기   첫페이지 만들기

태터데스크 메시지

저장하였습니다.
   情  
Front Page
Tag | Location | Media | Guestbook | Admin   
 
'Web Development/Silverlight'에 해당하는 글(6)
2009.11.16   [Silverlight] Element to Element Binding
2009.11.16   [Silverlight] Create CheckBoxList in Silverlight
2009.11.06   [Silverlight] Font Family 변경하기 (1)
2009.10.25   [Silverlight] XML 파일 읽기 (1)
2009.10.24   [Silverlight] Browser에서 Silverlight를 실행하기까지의 과정 (1)
2009.10.11   [Silverlight] Silverlight 시작 시 실행 순서


[Silverlight] Element to Element Binding

Silverlight 3에서 새로 추가된 기능 중 하나가 바로 이 Element to Element Bidning입니다. 이 기능은 특정 Element의 속성 값을 다른 Element에서 Binding을 통해 사용할 수 있도록 하는 기능입니다. 다음의 예제를 본다면 쉽게 이해하실 수 있습니다.

예제

위의 예제를 보시면 CheckBox Control이 TextBox Control을 활성화 시키고, TextBox Control의 내용이 TextBlock의 크기나 색을 변화시키는 것을 확인하실 수 있습니다.

위 예제는 C#코드를 이용하지 않고 모두 Element To Element Binding를 이용한 예제입니다.이 기능을 CodeBehind에서 C#으로 구현하기 위해서는 보통 컨트롤별로 Event를 생성하고 수십줄의 코드를 작성해야하지만 Element To Element Binding를 이용하면 아래 소스 처럼 간편하게 직관적으로 코드를 작성하실 수 있습니다.

소스코드

<StackPanel x:Name="LayoutRoot">
    <StackPanel Orientation="Horizontal">
        <CheckBox x:Name="chkEnable" Content="입력하기" />
        <TextBlock Text="    텍스트 크기 입력 : " FontWeight="Bold" />
        <TextBox x:Name="tbxAmount" IsEnabled="{Binding IsChecked, ElementName=chkEnable}" Width="100" />
        <TextBlock Text="    텍스트 색 입력 : " FontWeight="Bold" />
        <TextBox x:Name="tbxColor" IsEnabled="{Binding IsChecked, ElementName=chkEnable} Width="100" />
    </StackPanel>
    <Border BorderBrush="Silver" BorderThickness="3">
        <TextBlock FontSize="{Binding Text, ElementName=tbxAmount}" Foreground="{Binding Text, ElementName=tbxColor}" Text="텍스트 크기" />
    </Border>
</StackPanel>

위의 코드에서 TextBox와 TextBlock의 각 부분에 존재하는 모든 Binding 구문이 Element To Element Binding을 사용하고 있습니다. 소스처럼 {Binding Property명, ElementName=Element명}으로 간단하게 Element To Element Binding를 사용하실 수 있습니다.

이 기능은 DataGrid에서 DataTemplate내부의 컨트롤이 부모 DataGrid를 참조할 수 없다는 제약이 있습니다. 이 문제는 공개적으로 Issue이며 언젠가는 수정되리라 믿고 있습니다...

신고
Tag : Silverlight

name    password    homepage
 hidden


[Silverlight] Create CheckBoxList in Silverlight

ASP.NET에서 제공하는 CheckBoxList나 RadioButtonList 등은 Silverlight에서는 직접 구현하셔야 합니다. Silverlight에서는 특정 컨트롤을 반복 시켜주는 컨트롤로 ItemsControl을 제공하기 때문에 CheckBoxList를 쉽게 구현하실 수 있습니다. Silverlight의 ComboBox, ListBox Control도 모두 이 ItemsControl을 상속하여 구현되었습니다.

여기서는 ItemsControl을 이용하여 ASP.NET의 CheckBoxList를 구현하는 소스코드를 간단히 소개하도록 하겠습니다.

소스코드

<ItemsControl ItemsSource="{Binding ServiceList}">
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <!-- 여기서 각 컨트롤들을 포함하는 FrameworkElement를 설정합니다. -->
            <StackPanel Orientation="Horizontal" />
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <!--여기서는 FrameworkElement에 포함될 Control들을 설정합니다. -->
            <CheckBox Content="{Binding Name}" IsChecked="{Binding Value}" />
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

결과

신고
Tag : Silverlight

name    password    homepage
 hidden


[Silverlight] Font Family 변경하기

Silverlight에서 글꼴을 변경하는데 있어서 약간 알아두어야 할 것이 있다면, FontFamily를 지정할 때 반드시 영문 글꼴명을 입력하셔야 한다는 것입니다.

Windows의 System 폰트는 기본적으로 영문명을 가지고 있지만, 문화권에 따라서 다른 이름으로 화면에 나타난다고 합니다. “돋움”, “바탕체”와 같은 한글 폰트명도 마찬가지이며, 내부적으로 “Dotum”, “BatangChe”의 영문폰트명을 가지고 있습니다. Silverlight나 WebSite개발과 같은 여러 Platfrom에서 실행되는 Application을 개발할 때에는 영문 폰트명을 사용하는 것이 문제의 소지를 낮춰준다고 합니다.

 

글꼴 파일이름과 실제 글꼴명은 다를 수 있으니 위와 같이 직접 글꼴을 열어서 글꼴명을 확인해야 합니다. 하지만, 한글 Windows에서는 영문 글꼴명을 확인하기 쉽지 않습니다. PhotoShop과 같은 Application을 이용하면 영문 폰트명을 확인하실수 있으며, 또는 영문 OS를 사용하면 기본적으로 영문 폰트명이 나타난다고 합니다.

image

한글-영문 폰트명

한글폰트명 영문폰트명
돋움 Dotum
돋움체 DotumChe
굴림 Gulim
굴림체 GulimChe
바탕 Batang
바탕체 BatangChe
궁서 Gungsuh
궁서체 GungsuhChe
맑은 고딕 Malgun Gothic
새굴림 New Gulim
신고
Tag : font-family, Silverlight
Commented by Favicon of http://slx.co.kr BlogIcon Kongpill at 2009.11.10 14:50 신고  r x
오~ 굿좝!!

name    password    homepage
 hidden


[Silverlight] XML 파일 읽기

원격지에 있는 XML파일, 그리고 xap에 포함되어 배포된 XML파일 모두 Silverlight에서 손쉽게 읽을 수 있습니다.

원격지에 있는 XML파일 읽기

접근가능한 특정 원격지에 XML파일은 WebClient를 통해 손쉽게 접근, 사용하실 수 있습니다.

public MainPage()
{
    InitializeComponent();
    WebClient wc = new WebClient();
    wc.DownloadStringCompleted += new DownloadStringCompletedEventHandler(wc_DownloadStringCompleted);
    wc.DownloadStringAsync(new Uri("http://주소/Contact.xml", UriKind.Absolute));
}

void wc_DownloadStringCompleted(object sender, DownloadStringCompletedEventArgs e)
{
    //XElement 또는 XDocument를 이용하여 전송받은 XML String를 Parsing 한 다음 사용하시면 됩니다.
    XElement xContact = XElement.Parse(e.Result);
}

한 가지 주의사항이 있다면 해당 XML자원이 XAP파일이 포함된 폴더 밖에 있다면, ‘상호 도메인 정책 파일’ 역시 해당 서버에 올려져 있어야 한다는 점입니다. Silverlight는 기본적으로 원격지에 접근할 때에는 ‘clientaccesspolicy.xml’나 ‘crossdomain.xml’ 등의 ‘상호 도메인 정책 파일’이 있는지 검사를 합니다. 만약 ‘상호 도메인 정책 파일’이 없거나 권한이 없다면 Exception을 발생시킬 것입니다.

절대경로를 통해 원격지에 있는 WebServer에 XML파일을 요청하는 것이라 할 지라도 xap가 포함된 폴더나 그 하위에 있는 자원이라면 ‘상호 도메인 정책 파일’이 없어도 문제없이 동작합니다.

xap파일에 포함되어 배포되는 xap파일 읽기

XElement, XDocument의 Load 옵션을 통해서 간단하게 읽으시면 됩니다.

XDocument xContact = XDocument.Load("Asset/XML/Contact.xml");

참~ 쉽죠?

신고
Tag : Silverlight, XML
Commented by Favicon of http://slx.co.kr BlogIcon Kongpill at 2009.10.26 09:41 신고  r x
일요일에도 공부하는겨? +_+!

name    password    homepage
 hidden


[Silverlight] Browser에서 Silverlight를 실행하기까지의 과정

Browser는 Silverlight를 언제, 어떻게 다운로드하고 실행할까요? HTML을 구성하는 모든 DOM요소가 Parsing되고 나서 Silverlight가 읽히는 걸까요? 만약 Silverlight를 Initialize하는 정보를 HTML페이지에 둬야 한다면 언제 어디에 둬야 할까요?

이 모든 궁금증을 해결하기 위해 실험을 진행하였으며, 그 페이지 구조와 소스 코드는 다음과 같습니다.

HTML Page
Head Area
Body Area
HTML Code Or Resource
Silverlight Area
App
Other Page
Html Code Or Resource
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >

<head>
    <!-- Check Read Head Area -->
    <script> alert("HTML : Load Header"); </script>
    <title>Silverlight Test</title>
    <script type="text/javascript" src="Silverlight.js"></script>
</head>
<body>
    <form id="frm" runat="server" style="height:100%">
    <!-- Check Read Pre Silverlight Resource -->
    <script> alert("HTML : Before Load Image1"); </script>
    <img src="Images/whale.jpg" style="width: 100px; height: 100px;" />
    <script> alert("HTML : After Load Image1"); </script>

    <!-- Check Read Silverlight Resource -->    
    <div id="silverlightControlHost" style="height: 300px; width: 100%;">
        <script> alert("HTML : Before silverlight object"); </script>
        <object data="data:application/x-silverlight-2," type="application/x-silverlight-2">
          <param name="source" value="ClientBin/Test.xap"/>
          <param name="onError" value="onSilverlightError" />
          <param name="background" value="white" />
          <param name="minRuntimeVersion" value="3.0.40624.0" />
          <param name="autoUpgrade" value="true" />
          <a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=3.0.40624.0" style="text-decoration:none">
              <img src="http://go.microsoft.com/fwlink/?LinkId=108181" alt="Get Microsoft Silverlight" style="border-style:none"/>
          </a>
        </object>
        <script> alert("HTML :After silverlight object 1"); </script>
        <iframe id="_sl_historyFrame" style="visibility:hidden;height:0px;width:0px;border:0px"></iframe>
    </div>

    <!-- Check Read Resource After Silverlight -->
    <script> alert("HTML : Before Load Image2"); </script>
    <img src="Images/whale.jpg" style="width: 100px; height: 100px;" />
    <script> alert("HTML : After Load Image2"); </script>
    
    </form>
</body>
</html>

HTML 페이지의 각 주요 부분에 Alert Message를 나타내는 코드를 삽입함으로써 순서를 확인합니다. Test.xap라는 Silverlight 개체 내부에도 주요 이벤트와 생성자에 MessageBox.Show()를 두었습니다.

출력된 Message를 그대로 나열하면 다음과 같습니다. 이는 FF3, IE8에서 실행한 출력결과 값입니다.

  1. HTML : Load Header
  2. HTML : Before Load Image1
  3. HTML : After Load Image2
    //여기까지는 단순합니다. 순차적으로 HTML코드를 실행합니다. 다만 Image와 같은 외부 Resource를 만나면 이 때부터 다운로드가 시작됩니다.
  4. HTML : Before silverlight object
  5. Silverlight : App 생성자 실행
  6. Silverlight : InitializeComponent 실행
  7. Silverlight : App Xaml 로드
  8. Silverlight : App 생성자 종료
  9. Silverlight : App StartUp Event 실행
  10. Silverlight : this.RootVisual 실행
  11. Silverlight : RootVisual 개체 생성자 실행
  12. SIlverlight : App StartUp Event 종료
    //xap파일이 다운로드 되고, Silverlight.js에 의해서 Silverlight Plugin으로 읽혀지게 됩니다. 또한 한가지 주목할 점은 Silverlight가 읽혀지고 내부적으로 모든 초기화가 끝나야 Silverlight 다음의 HTML문의 해석이 시작된다는 점입니다.
  13. HTML :After silverlight object 1
  14. HTML : Before Load Image2
  15. HTML : After Load Image2

위의 결과를 종합적으로 판단해보면 다음과 같은 몇 가지 결론이 도출됩니다.

  1. 브라우저는 HTML페이지만을 먼저 다운로드하며, 각 HTML코드를 해석하고 HTML Code가 가리키는 자원들을 다운로드 및 로드 합니다.
  2. Silverlight 개체가 초기화 될 때 외부의 자원을 참조하려면, 해당 외부 자원이 Silverlight 개체 보다 먼저 초기화 될 수 있도록 해당 Silverlight 개체 보다 위쪽에 기술해야 합니다.
  3. Silverlight 개체의 초기화가 모두 완료된 후에 Silverlight 개체 다음 HTML 코드 해석을 시작합니다.

다음에는 서버에서 출력한 Cookie나 각 인증서 또는 암호화 자원 등이 어느 시점에 어디에서 초기화되고 관리되는지 파악해야겠네요.

신고
Tag : Silverlight
Commented by Favicon of http://godffs.tistory,com BlogIcon Godffs at 2011.05.19 10:13 신고  r x
좋은정보 감사합니다.

name    password    homepage
 hidden


[Silverlight] Silverlight 시작 시 실행 순서

Silverlight 시작 시 실행되는 순서입니다. Silverlight 문서 구조가 아래와 같다고 가정해봅시다.

APP
App.xaml
UserControls or resources
App.xaml.cs
			App() //Constructor 
			{ 
				InitializeComponent(); 
			} 
			Startup() //Startup Event 
			{ 
				this.RootVisual = new MainPage(); 
			}
		
MainPage
MainPage.xaml
UserControls or resources
MainPage.xaml.cs
			MainPage() //Constructor 
			{ 
				InitializeComponent(); 
			} 
			Loaded() //Startup Event 
			{ 
				//Do something.. 
			} 
		

실행 흐름은 다음과 같습니다.

  1. App.xaml.cs의 App 생성자 실행
  2. InitializeComponent()의 실행
  3. App.xaml 해석 시작(이 곳에 포함된 모든 UserControl, Class, Resource들은 모두 초기화 또는 Instance화 됩니다.(즉 메모리에 모두 로드 됩니다.)
  4. RootVisual로 지정된 MainPage의 생성자 실행
  5. InitializeComponent()의 실행
  6. MainPage.xaml 실행(마찬가지로 이 곳에 포함된 모든 개체들이 초기화 되며 메모리에 로드 됩니다.)
  7. App의 Startup 이벤트 실행
  8. MainPage의 Loaded 이벤트 실행
  9. 끝. 위의 과정이 처음에 Application의 시작 시 실행되는 기본 흐름이며, 이 후부터는 기타 코드 실행, 이벤트 대기 및 처리 또는 프로그램 종료 등이 있겠죠.

몇 가지 주목할 만한 점은 다음과 같습니다.

  1. 반드시 App 개체부터 시작합니다.
  2. InitializeComponent에 의해서 Class의 xaml 페이지가 읽힙니다.

 

Author : thankee

신고
Tag : Silverlight

name    password    homepage
 hidden


 Category
분류 전체보기 (95)
Netwrok & Security (6)
Web Development (61)
Database (5)
Framework (6)
Others (17)
About (0)
 TAGS
SourceSafe2005 ebnf 영국 인턴쉽 PHP 강좌 ASP.NET ajax 오라클 구조 Silverlight XML linux WCF mantis bug tracker smarty mantis exception UpdateProgress web tier 리눅스 DTD 영국 홈스테이 php data tier Blog API ATRIX MS SQL Server 영국 학원 ASP 자바스크립트 ie6 자바스크립트 버그 오라클 특수문자 class id 차이 application error #401 RFC 4180 SourceSafe Internet id name 차이 maxRecievedMessageSize c#.net LiveMail It's me
 Calendar
«   2017/12   »
          1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
31            
 Visitor Statistics
Total : 251,720
Today : 49
Yesterday : 124
rss
 

티스토리 툴바