실습 정보: RSS 뉴스 수집기 만들기

뉴스 피드나 팟캐스트와 같은 웹 피드에서는 해당 콘텐츠에 XML 형식 파일을 사용하는 경우가 많습니다. 수집기나 어그리게이터와 같은 프로그램을 사용하여 웹 피드에 가입하고 구독할 수 있습니다. 대부분 수집기는 컴퓨터에서 열려 있으며 웹 피드가 업데이트될 때 새 콘텐츠로 자체 업데이트됩니다. 웹 피드의 가장 일반적인 전달 메커니즘을 RSS(Really Simple Syndication)라고 합니다.

다음 절차에서는 Microsoft Expression Blend 및 RSS 피드를 사용하여 간단한 RSS 수집기를 만드는 방법을 설명합니다. RSS 수집기를 사용하여 로컬 파일이나 웹 사이트의 XML 파일을 비롯한 모든 XML 데이터 원본을 읽을 수 있습니다.

[!참고]

다음 절차에서는 인터넷에 실시간으로 연결되어 있다고 가정합니다.

[!참고]

Silverlight 2에서는 XML 데이터 원본을 사용할 수 없습니다. 그러나 MSDN의 Silverlight에서 XML 데이터 구문 분석에서 XML 데이터 작업에 대한 자세한 내용을 찾을 수 있습니다.

데이터 원본 만들기

데이터 원본 만들기

1. Expression Blend의 파일 메뉴에서 새 프로젝트를 클릭한 다음 **WPF 응용 프로그램(.exe)**을 클릭합니다.

   새 프로젝트가 만들어집니다.

2. 프로젝트 패널의 데이터에서 +XML을 클릭합니다.

   XML 데이터 원본 추가 창이 열립니다.

3. 연결 이름 필드에 "rssDS"를 입력하고 XML 데이터의 URL 필드에 RSS 피드의 URL을 입력합니다. 예를 들어 MSNBC 날씨 피드에 대한 XML 데이터 원본을 만들려면 "http://rss.msnbc.msn.com/id/3032127/device/rss/rss.xml"을 입력합니다. 확인을 클릭합니다.

   팁:
   XML 데이터의 URL 필드에는 XML 파일의 URL이나 로컬 경로를 사용할 수 있습니다. 다른 RSS 피드를 사용하려는 경우 웹 브라우저에서 공급자의 웹 사이트(예: http://www.msnbc.com)를 열고 해당 RSS 피드에 대한 링크를 검색하여 URL을 찾을 수 있습니다. 일반적으로 웹 사이트에 사용 가능한 필드와 피드에 가입할 때 사용할 수 있는 단추가 나열됩니다. 원하는 피드의 XML 파일에 대한 링크를 찾습니다.

4. rssDS라는 데이터 원본이 프로젝트 패널의 데이터 아래에 추가됩니다. 노드를 확장하고 데이터 원본의 다른 필드를 검토합니다. 데이터는 표시되지 않고 데이터가 들어 있는 필드의 이름과 구조만 표시됩니다.

   이제 응용 프로그램의 컨트롤을 데이터에 바인딩할 수 있습니다.

   XML 데이터 원본이 추가된 후의 데이터 패널

   

맨 위로 이동

프로젝트 패널에서 데이터 필드를 끌어 바인딩

여러 가지 방법으로 데이터 원본의 항목에 컨트롤을 바인딩할 수 있습니다. 다음 절차에서는 프로젝트 패널에서 아트보드로 데이터 원본 필드를 끌어 두 개의 새 컨트롤을 만드는 방법을 설명합니다. 기존 컨트롤로 데이터 원본 필드를 끌어 해당 컨트롤의 속성에 데이터를 바인딩할 수도 있습니다.

프로젝트 패널에서 데이터 필드를 끌어 바인딩

1. 프로젝트 패널의 데이터에서 rss, channel 및 image 노드를 확장합니다. url : (String) 노드를 아트보드의 왼쪽 위 모퉁이로 끕니다. 드롭다운 목록이 표시되면 Image 컨트롤을 클릭합니다.

   아트보드에 Image 개체가 만들어지고 데이터 바인딩 만들기 대화 상자가 열립니다.

2. 필드 선택에서는 URL 데이터 항목을 바인딩할 Image 개체의 속성을 지정합니다. 기본 선택 항목(Source)이 적합하므로 확인을 클릭합니다.

   아트보드의 Image 개체는 데이터 항목의 URL에 있는 이미지를 반영합니다. 선택 도구 를 사용하여 아트보드의 왼쪽 위 모퉁이로 Image 개체를 끌어 비율 크기를 더 작게 조정합니다.

   Image 개체가 추가되고 URL 데이터 항목에 바인딩된 후의 아트보드(이미지 모양은 다를 수 있음)

   

3. 프로젝트 패널의 데이터에서 rssDS, rss 및 channel 노드를 확장합니다. title : (String) 노드를 아트보드의 Image 개체 오른쪽으로 끕니다. 드롭다운 목록이 표시되면 Label 컨트롤을 클릭합니다. 데이터 바인딩 만들기 대화 상자의 필드 선택 옆에 나열되는 기본 속성(Content)이 적합하므로 확인을 클릭합니다.

   데이터 템플릿 만들기 대화 상자가 나타납니다.

4. 새 데이터 템플릿 및 표시 필드 옵션을 선택하고 TextBlock 컨트롤에 제목 데이터 항목을 표시할 데이터 템플릿을 만들도록 구성합니다. 확인을 클릭합니다.

   뉴스 피드의 제목이 아트보드의 새 Label 컨트롤에 나타납니다. 선택 도구를 사용하여 Label 개체를 이동하고 비율 크기를 조정한 다음 속성 패널의 텍스트 및 브러시 범주에 있는 속성을 사용하여 텍스트 표시 방법을 변경합니다.

   [!참고]

   TextBlock 컨트롤은 데이터에 바인딩되는 컨트롤의 모양을 디자인하는 데 사용되는 생성된 콘텐츠 데이터 템플릿의 일부이므로 개체 및 타임라인에 표시되지 않습니다. 템플릿에 대한 자세한 내용은 컨트롤 템플릿 만들기 또는 편집을 참조하십시오.

   Label 개체가 추가되고 제목 데이터 항목에 바인딩된 후의 아트보드(아트보드 모양은 다를 수 있음)

   

맨 위로 이동

데이터 컨텍스트를 사용하여 동일한 데이터에 여러 컨트롤 바인딩

부모 개체에 데이터 컨텍스트를 할당하면 여러 자식 개체에서 동일한 데이터 스냅숏을 사용할 수 있습니다. 이 방법은 목록(마스터 창)의 항목을 클릭하면 해당 항목에 대한 정보가 다른 개체(세부 정보 창)에 나타나는 마스터 세부 정보 디자인을 만들려는 경우에 유용합니다.

데이터 컨텍스트를 사용하여 동일한 데이터에 여러 컨트롤 바인딩

1. 이미지와 제목 아래의 영역을 포함하는 모눈(Grid) 패널 을 만듭니다. Grid 개체는 데이터 컨텍스트를 설정하는 부모 개체가 됩니다.

2. 개체 및 타임라인에서 새 Grid 개체를 클릭하여 선택한 다음 속성 패널의 공용 속성에서 DataContext 속성을 찾습니다.

3. DataContext 속성과 연결된 고급 속성 옵션  단추를 클릭한 다음 데이터 바인딩을 클릭합니다.

   데이터 바인딩 만들기 대화 상자가 열립니다.

4. 데이터 필드 탭(기본값)의 데이터 원본에서 rssDS를 클릭합니다. 필드에서 rss 및 channel 노드를 확장하고 **item (배열)**을 클릭한 다음 마침을 클릭합니다.

   새 모눈 개체에 데이터 원본의 항목 컬렉션을 할당했습니다. 이제 모눈 개체의 모든 자식에서 동일한 항목 컬렉션 스냅숏을 사용할 수 있습니다.

5. 선택 도구를 사용하여 새 모눈 개체를 두 번 클릭하여 자식 개체를 추가할 수 있도록 활성화합니다.

6. 도구 상자에서 ListBox 컨트롤 을 선택한 다음 모눈의 왼쪽 절반을 차지하는 ListBox를 그립니다.

7. 선택 도구를 사용하여 ListBox를 선택한 다음 속성 패널의 공용 속성에서 ItemsSource 속성을 찾습니다.

   [!참고]

   ItemsSource 속성을 항목의 컬렉션으로 설정할 수 있습니다. 한 번에 ItemsSource 또는 Items 속성 중 하나만 사용할 수 있습니다. 일반적으로 ItemsSource 속성은 생성된 항목의 컬렉션에 바인딩하는 데 사용됩니다. Items 속성은 이 컬렉션의 항목 편집 단추를 사용하여 개별 항목을 수동으로 추가하는 데 사용할 수 있습니다.

8. ItemsSource 속성과 연결된 고급 속성 옵션  단추를 클릭한 다음 데이터 바인딩을 클릭합니다.

   데이터 바인딩 만들기 대화 상자가 열립니다.

9. 명시적 데이터 컨텍스트 탭을 클릭합니다. 필드에서 rss 및 channel 노드를 확장하고 **item (배열)**을 클릭합니다. 데이터 템플릿 정의 단추를 클릭합니다.

   데이터 템플릿 만들기 대화 상자가 열립니다.

10. 세 번째 옵션인 새 데이터 템플릿 및 표시 필드(기본값)를 선택합니다. item 옆에 있는 확인란의 선택을 취소하여 모든 확인란의 선택을 간편하게 취소할 수 있습니다. title 옆에 있는 확인란을 선택한 다음 확인을 클릭합니다.

    item (배열) 데이터에 데이터 바인딩된 ListBox 개체에 새 항목 목록이 표시됩니다.

    ListBox 개체가 추가되고 Item (배열) 데이터 컬렉션에 바인딩된 후의 아트보드(아트보드 모양은 다를 수 있음)

    

11. 도구 상자에서 TextBlock 컨트롤 을 선택한 다음 모눈의 오른쪽 절반을 차지하는 TextBlock을 그립니다.

12. 선택 도구를 사용하여 TextBlock을 선택한 다음 속성 패널의 공용 속성에서 Text 속성을 찾습니다. Text 속성과 연결된 고급속성옵션 단추를 클릭한 다음 데이터 바인딩을 클릭합니다.

    [!참고]

    아트보드에 텍스트 컨트롤을 추가하면 해당 컨트롤의 편집 모드로 들어갑니다. 즉, 컨트롤에 직접 콘텐츠를 입력할 수 있지만 해당 컨트롤의 일부 속성에는 액세스하지 못하게 됩니다. 컨트롤의 편집 모드를 종료하려면 Esc 키를 누르거나 선택 도구를 클릭하십시오.

    데이터 바인딩 만들기 대화 상자가 열립니다.

13. 명시적데이터 컨텍스트 탭을 클릭합니다. 필드에서 rss, channel 및 item (배열) 노드를 확장한 다음 **description : (String)**을 클릭합니다. 마침을 클릭합니다.

    ListBox와 TextBlock 컨트롤 모두 동일한 데이터 컨텍스트를 공유하므로 ListBox에서 선택하는 항목에 대한 설명에 지금 데이터 바인딩된 TextBlock 개체에는 해당 설명이 표시됩니다.

    TextBlock 개체가 추가되고 Description 데이터 항목에 바인딩된 후의 아트보드 (아트보드 모양은 다를 수 있음)

    

14. F5 키를 눌러 응용 프로그램을 실행한 다음 응용 프로그램에서 ListBox를 클릭하여 다른 뉴스 설명을 읽도록 선택을 변경합니다.

    [!참고]

    일부 항목에 HTML 텍스트가 있을 수 있습니다. Description 문자열에서 HTML 요소를 제거하는 값 변환기를 만든 다음 데이터 바인딩 만들기 대화 상자에서 이 값 변환기를 적용할 수 있습니다. 값 변환기 만들기에 대한 자세한 내용은 실습 정보: 값 변환기 만들기 및 적용을 참조하십시오.

맨 위로 이동