Part3. Using Networking to Retrieve Data and Populate a DataGrid

u  Understand Silverlight Networking

1.     다양한 네트워크 통신을 지원합니다.

-       HTTP 통신 뿐만 아니라 TCP 통신을 위한 Socket 또한 지원합니다.

-       웹 서비스나 WCF 서비스로 데이터를 교환 할 수 있으며, RSS와 같은 Feed를 쉽게 가져올 수도 있습니다.

2.     네트워크 통신을 위한 클래스

-       WebClient (System.Net) 클래스

ð  일반 XML과 같은 데이터를 가져오기 위해 사용합니다.

-       SyndicationFeed (System.ServiceModel.Syndication) 클래스

ð  RSS와 ATOM과 같은 Feed 데이터를 해당 클래스를 활용하여 보다 쉽게 Feed 데이터를 가져올 수 있습니다.

ð  TCP 프로토콜의 통신을 지원하는 Socket 클래스를 제공하고, Socket의 경우 양방향으로 데이터를 주고 받을 수 있고, 비동기 이벤트와 메서드들을 제공합니다.

3.     보안을 위한 URL 접근 제약

-       Silverlight는 기본적으로 크로스 도메인의 통신을 지원하지 않습니다.

ð  demosample1.kr에서 제공하는 서비스를 demosample2.kr이라는 곳에서 호출하여 사용할 수 없습니다. 하지만, 보안 정책 파일을 통해서 특정 클라이언트의 접근을 허용할 수 있습니다. 추후에 샘플 코드를 통해 자세히 소개하겠습니다.

클래스명	WebClient와 HTTP클래스	Image클래스와 MediaElement 클래스(프로그레시브)	XAML 소스 파일	Font 파일	미디어 스트리밍
허용된 스키마	HTTP, HTTPS	HTTP, HTTPS, FILE	HTTP, HTTPS, FILE	HTTP, HTTPS, FILE	HTTP
크로스 스키마 접근	허용되지 않음	허용되지 않음	허용되지 않음	안됨	HTTP에서는 허용되지 않음
크로스 도메인 접근	보안정책 파일에서 필요 HTTPS에서 HTTPS라면 허용되지 않음	HTTPS에서 HTTPS가 아닐 경우 허용	HTTPS에서 HTTPS가 아닐 경우 허용	허용되지 않음	HTTPS에서 HTTPS가 아닐 경우 허용

 

u  Sameple Code

1.     Naver OpenAPI 를 이용한 Book Search (WebClient 클래스 이용)

-       UI 만들기

Code

<UserControl xmlns:data="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data"  x:Class="DemoSample.Page"     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"     >     <Grid x:Name="LayoutRoot" Background="DarkOrange" >         <Grid.RowDefinitions>             <RowDefinition Height="60"></RowDefinition>             <RowDefinition Height="*"></RowDefinition>         </Grid.RowDefinitions>                 <Grid Grid.Row="0">             <Grid.ColumnDefinitions>                 <ColumnDefinition Width="*"></ColumnDefinition>                 <ColumnDefinition Width="300"></ColumnDefinition>                 <ColumnDefinition Width="100"></ColumnDefinition>             </Grid.ColumnDefinitions>                         <Border CornerRadius="10" Background="Beige" Margin="10">                 <TextBlock Text="Naver OpenAPI를 이용한 책 검색" Margin="10" FontSize="16"></TextBlock>             </Border>             <TextBox x:Name="txtSearhWord" Width="700" Height="40" Grid.Column="1" HorizontalAlignment="Left" FontSize="20"  ></TextBox>             <Button x:Name="btnSearch" Grid.Column="2" Content="검색" Width="90" Height="50" Click="btnSearch_Click" ></Button>                     </Grid>                <data:DataGrid x:Name="dgResult" Grid.Row="1"></data:DataGrid>     </Grid> </UserControl>

Result

-       WebClient 클래스를 이용하여 검색 데이터(XML) 가져온 후, DataGrid에 데이터 바인딩 시키기

Code

private void btnSearch_Click(object sender, RoutedEventArgs e) {     string strSearchWord = txtSearhWord.Text;     string strSearchUrl = string.Format("http://openapi.naver.com/search?key=acb8d10036417f370d5db98b94f3be49&target=book&query={0}&display=5&start=1&sort=sim", strSearchWord);       WebClient webClient = new WebClient();     webClient.DownloadStringCompleted += new DownloadStringCompletedEventHandler(webClient_DownloadStringCompleted);     webClient.DownloadStringAsync(new Uri(strSearchUrl)); }   void webClient_DownloadStringCompleted(object sender, DownloadStringCompletedEventArgs e) {     if (e.Error == null)     {         // 검색 XML 데이터 바인딩하기         dgResult.ItemsSource = e.Result;     } }

Result

Description

ð  검색 클릭 시, XML 구조가 한 열에 그려지는 것을 확인 할 수 있습니다. 데이터 그리드에 알맞게 나타내 주기 위해, LINQ를 이용하여 보여주고자 UI에 맞게 XML 데이터를 Parse 하겠습니다.

-       LINQ를 사용하여 검색 XML 데이터 Parse하여 데이터 바인딩 하기

Code

1.     Book 클래스

ð  XML 데이터를 맵핑하기 위해 “Book” 클래스를 정의한 후, 데이터에 알맞은 타입으로 프로퍼티를 생성해보겠습니다.

public class Book {     public string BookName { get; set; }     public Uri LinkUrl { get; set; }     public Uri ImageUrl { get; set; }     public string Author { get; set; }     public int Price { get; set; }     public string Publisher { get; set; }     public string PubDate { get; set; }     public string ISBN { get; set; }     public string Description { get; set; } }

2.     Page.xaml 클래스

void webClient_DownloadStringCompleted(object sender, DownloadStringCompletedEventArgs e) {     if (e.Error == null)     {         //Using LINQ to XML to Parse NaverOpenAPI XML Items into Book Class         XDocument xmlBooks = XDocument.Parse(e.Result);           var books = from book in xmlBooks.Descendants("item")                     select new Book                     {                         BookName = (string)book.Element("title"),                         LinkUrl = new Uri((string)book.Element("link")),                         ImageUrl = new Uri((string)book.Element("image")),                         Author = (string)book.Element("author"),                         Price = (int)book.Element("price"),                         Publisher = (string)book.Element("publisher"),                         PubDate = (string)book.Element("pubdate"),                         ISBN = (string)book.Element("isbn"),                         Description = (string)book.Element("description")                     };           // XML Parse 한 데이터 바인딩하기 dgResult.ItemsSource = books;     } }

Result