다음을 통해 공유

연습: SharePoint용 OData를 표시하는 Silverlight 웹 파트 만들기

  • 아티클

SharePoint 2010는 OData를 통해 목록 데이터를 노출합니다. SharePoint에서 OData 서비스는 RESTful 서비스 ListData.svc에 의해 구현됩니다. 이 연습에서는 Silverlight 애플리케이션을 호스트하는 SharePoint 웹 파트를 만드는 방법을 보여 줍니다. Silverlight 애플리케이션은 ListData.svc를 사용하여 SharePoint 공지 사항 목록 정보를 표시합니다. 자세한 내용은 SharePoint Foundation REST 인터페이스 및 Open Data Protocol을 참조하세요.

참고 항목

일부 Visual Studio 사용자 인터페이스 요소의 경우 다음 지침에 설명된 것과 다른 이름 또는 위치가 시스템에 표시될 수 있습니다. 이러한 요소는 사용하는 Visual Studio 버전 및 설정에 따라 결정됩니다. 자세한 내용은 IDE 개인 설정을 참조하세요.

필수 조건

이 연습을 완료하려면 다음과 같은 구성 요소가 필요합니다.

  • 지원되는 Microsoft Windows 및 SharePoint 버전.

  • Visual Studio 2012.

Silverlight 애플리케이션 및 Silverlight 웹 파트 만들기

먼저 Visual Studio에서 Silverlight 애플리케이션을 만듭니다. Silverlight 애플리케이션은 ListData.svc 서비스를 사용하여 SharePoint 공지 사항 목록에서 데이터를 검색합니다.

참고 항목

4.0 이전 버전의 Silverlight는 SharePoint 목록 데이터를 참조하는 데 필요한 인터페이스를 지원하지 않습니다.

Silverlight 애플리케이션 및 Silverlight 웹 파트를 만들려면

  1. 메뉴 모음에서 파일>새로 만들기>프로젝트를 선택하여 새 프로젝트 대화 상자를 표시합니다.

  2. Visual C# 또는 Visual Basic 아래의 SharePoint 노드를 확장한 다음 2010 노드를 선택합니다.

  3. 템플릿 창에서 SharePoint 2010 Silverlight 웹 파트 템플릿을 선택합니다.

  4. 이름 상자에 SLWebPartTest를 입력한 다음 확인 단추를 선택합니다.

    SharePoint 사용자 지정 마법사 대화 상자가 나타납니다.

  5. 디버깅에 사용할 사이트 및 보안 수준 지정 페이지에서 사이트 정의를 디버깅할 SharePoint 서버 사이트의 URL을 입력하거나 기본 위치(http://system name/)를 사용합니다.

  6. 이 SharePoint 솔루션의 신뢰 수준을 선택하세요. 섹션에서 팜 솔루션으로 배포 옵션 단추를 선택합니다.

    이 예에서는 팜 솔루션을 사용하지만 Silverlight 웹 파트 프로젝트는 팜 솔루션이나 샌드박스 솔루션으로 배포할 수 있습니다. 샌드박스 솔루션과 팜 솔루션에 대한 자세한 내용은 샌드박스 솔루션 고려 사항을 참조하세요.

  7. Silverlight 구성 정보 지정 페이지의 Silverlight 웹 파트를 연결하는 방법 섹션에서 새 Silverlight 프로젝트 만들기 및 웹 파트에 연결 옵션 단추를 선택합니다.

  8. 이름을 SLApplication으로 변경하고, 언어를 Visual Basic 또는 Visual C#로 설정한 다음 Silverlight 버전을 Silverlight 4.0으로 설정합니다.

  9. 끝내기버튼을 선택합니다. 프로젝트가 솔루션 탐색기에 나타납니다.

    이 솔루션에는 2개의 프로젝트(Silverlight 애플리케이션 및 Silverlight 웹 파트)가 포함되어 있습니다. Silverlight 애플리케이션은 SharePoint에서 목록 데이터를 검색 및 표시하고, Silverlight 웹 파트는 Silverlight 애플리케이션을 호스트하여 SharePoint에서 볼 수 있도록 합니다.

Silverlight 애플리케이션 사용자 지정

Silverlight 애플리케이션에 코드 및 디자인 요소를 추가합니다.

Silverlight 애플리케이션을 사용자 지정하려면

  1. Silverlight 애플리케이션에서 System.Windows.Data에 대한 어셈블리 참조를 추가합니다. 자세한 내용은 방법: 참조 추가 대화 상자를 사용하여 참조 추가 또는 제거를 참조하세요.

  2. 솔루션 탐색기에서 참조의 바로 가기 메뉴를 열고 서비스 참조 추가를 선택합니다.

    참고 항목

    Visual Basic을 사용하는 경우 솔루션 탐색기 맨 위에 있는 모든 파일 표시 아이콘을 선택하여 참조 노드를 표시해야 합니다.

  3. 서비스 참조 추가 대화 상자의 주소 상자에 SharePoint 사이트의 URL(예: http://MySPSite)을 입력한 다음 이동 단추를 선택합니다.

    Silverlight는 SharePoint OData 서비스 ListData.svc를 찾으면 주소를 전체 서비스 URL로 바꿉니다. 이 예제의 경우 http://myserver가 http://myserver/_vti_bin/ListData.svc.가 됩니다.

  4. 확인 단추를 선택하여 프로젝트에 서비스 참조를 추가하고, 기본 서비스 이름인 ServiceReference1을 사용합니다.

  5. 메뉴 모음에서 빌드>솔루션 빌드를 선택합니다.

  6. SharePoint 서비스를 기반으로 프로젝트에 새 데이터 원본을 추가합니다. 그러려면 메뉴 모음에서 보기>다른 창>데이터 원본을 선택합니다.

    데이터 원본 창에는 작업, 공지 사항, 일정 등 사용 가능한 SharePoint 목록 데이터가 모두 표시됩니다.

  7. Silverlight 애플리케이션에 공지 사항 목록 데이터를 추가합니다. 데이터 원본 창에서 “공지 사항”을 Silverlight Designer로 끌어 놓을 수 있습니다.

    그러면 SharePoint 사이트의 공지 사항 목록에 바인딩된 그리드 컨트롤이 만들어집니다.

  8. Silverlight 페이지에 맞게 그리드 컨트롤의 크기를 조정합니다.

  9. MainPage.xaml 코드 파일(Visual C#의 경우 MainPage.xaml.cs, Visual Basic의 경우 MainPage.xaml.vb)에서 다음 네임스페이스 참조를 추가합니다.

    // Add the following three using directives.
using SLApplication.ServiceReference1;
using System.Windows.Data;
using System.Data.Services.Client;

  10. 클래스의 맨 위에 다음 변수 선언을 추가합니다.

    private TeamSiteDataContext context;
private CollectionViewSource myCollectionViewSource;
DataServiceCollection<AnnouncementsItem> announcements = new DataServiceCollection<AnnouncementsItem>();

  11. UserControl_Loaded 프로시저를 다음으로 바꿉니다.

    private void UserControl_Loaded_1(object sender, RoutedEventArgs e)
{
    // The URL for the OData service.
    // Replace <server name> in the next line with the name of your
    // SharePoint server.
    context = new TeamSiteDataContext(new Uri("http://ServerName>/_vti_bin/ListData.svc"));

    // Do not load your data at design time.
    if (!System.ComponentModel.DesignerProperties.GetIsInDesignMode(this))
    {
        //Load your data here and assign the results to the CollectionViewSource.
        myCollectionViewSource = (System.Windows.Data.CollectionViewSource)this.Resources["announcementsViewSource"];
        announcements.LoadCompleted += new EventHandler<LoadCompletedEventArgs>(announcements_LoadCompleted);
        announcements.LoadAsync(context.Announcements);
    }
}

    ServerName 자리 표시자를 SharePoint를 실행하는 서버의 이름으로 바꿔야 합니다.

  12. 다음 오류 처리 프로시저를 추가합니다.

    void announcements_LoadCompleted(object sender, LoadCompletedEventArgs e)
{
    // Handle any errors.
    if (e.Error == null)
    {
        myCollectionViewSource.Source = announcements;
    }
    else
    {
        MessageBox.Show(string.Format("ERROR: {0}", e.Error.Message));
    }
}

Silverlight 웹 파트 수정

Silverlight 디버깅을 사용하도록 설정하려면 Silverlight 웹 파트 프로젝트에서 속성을 변경합니다.

Silverlight 웹 파트를 수정하려면

  1. Silverlight 웹 파트 프로젝트의 바로 가기 메뉴(SLWebPartTest)를 연 다음 속성을 선택합니다.

  2. 속성 창에서 SharePoint 탭을 선택합니다.

  3. 아직 선택하지 않았다면 스크립트 디버깅 대신 Silverlight 디버깅 사용 확인란을 선택합니다.

  4. 프로젝트를 저장합니다.

Silverlight 웹 파트 테스트

SharePoint에서 새 Silverlight 웹 파트를 테스트하여 SharePoint 목록 데이터를 제대로 표시하는지 확인합니다.

Silverlight 웹 파트를 테스트하려면

  1. F5 키를 선택하여 SharePoint 솔루션을 빌드하고 실행합니다.

  2. SharePoint의 사이트 작업 메뉴에서 새 페이지를 선택합니다.

  3. 새 페이지 대화 상자에서 SL 웹 파트 테스트와 같은 제목을 입력한 다음 만들기 단추를 선택합니다.

  4. 페이지 디자이너의 편집 도구 탭에서 삽입을 선택합니다.

  5. 탭 스트립에서 웹 파트를 선택합니다.

  6. 범주 상자에서 사용자 지정 폴더를 선택합니다.

  7. 웹 파트 목록에서 Silverlight 웹 파트를 선택한 다음 추가 단추를 선택하여 디자이너에 웹 파트를 추가합니다.

  8. 원하는 웹 페이지를 모두 추가한 후 페이지 탭을 선택한 다음 도구 모음에서 저장 및 닫기 단추를 선택합니다.

    이제 Silverlight 웹 파트에 SharePoint 사이트의 공지 사항 데이터가 표시되어야 합니다. 기본적으로 이 페이지는 SharePoint의 사이트 페이지 목록에 저장됩니다.

    참고 항목

    여러 도메인에 걸쳐 있는 Silverlight의 데이터에 액세스하는 경우 Silverlight는 웹 애플리케이션을 악용하는 데 사용될 수 있는 보안 취약성을 방지합니다. Silverlight의 원격 데이터에 액세스할 때 문제가 발생하면 도메인 경계를 넘어 서비스를 사용할 수 있도록 설정을 참조하세요.

관련 콘텐츠