연습: SharePoint를 위한 웹 파트 만들기

아티클
08/09/2011

웹 파트를 추가하면 사용자가 SharePoint 사이트 페이지의 콘텐츠, 모양 및 동작을 브라우저에서 직접 수정할 수 있습니다. 이 연습에서는 Visual Studio 2010에서 웹 파트 항목 템플릿을 사용하여 웹 파트를 만드는 방법을 보여 줍니다.

이 웹 파트는 직원을 데이터 표에 표시합니다. 사용자는 직원 데이터가 들어 있는 파일의 위치를 지정할 수 있으며 직원 중 관리자만 목록에 나타나도록 데이터 표를 필터링할 수도 있습니다.

이 연습에서는 다음 작업을 수행합니다.

Visual Studio 웹 파트 항목 템플릿을 사용하여 웹 파트 만들기
웹 파트 사용자가 설정할 수 있는 속성 만들기. 이 속성은 직원 데이터 파일의 위치를 지정합니다.
웹 파트 컨트롤 컬렉션에 컨트롤을 추가하여 웹 파트에서 콘텐츠 렌더링
렌더링된 웹 파트의 동사 메뉴에 나타나는 새 동사 메뉴 항목 만들기. 사용자는 동사를 사용하여 웹 파트에 나타나는 데이터를 수정할 수 있습니다.
SharePoint에서 웹 파트 테스트

참고

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

사전 요구 사항

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

지원되는 Microsoft Windows 및 SharePoint 버전. 자세한 내용은 SharePoint 솔루션 개발 요구 사항을 참조하십시오.
Visual Studio 2010 Professional 또는 Visual Studio ALM(Application Lifecycle Management)의 버전

빈 SharePoint 프로젝트 만들기

먼저 빈 SharePoint 프로젝트를 만듭니다. 나중에 웹 파트 항목 템플릿을 사용하여 이 프로젝트에 웹 파트를 추가합니다.

빈 SharePoint 프로젝트를 만들려면

관리자 권한으로 실행 옵션을 사용하여 Visual Studio 2010을 시작합니다.
파일 메뉴에서 새로 만들기를 가리킨 다음 프로젝트를 클릭합니다.

새 프로젝트 대화 상자가 나타납니다.
새 프로젝트 대화 상자를 열고 사용할 언어 아래의 SharePoint 노드를 확장한 다음 2010 노드를 선택합니다.
템플릿 창에서 빈 SharePoint 프로젝트를 선택한 다음 확인을 클릭합니다.

SharePoint 사용자 지정 마법사가 나타납니다. 이 마법사를 사용하면 프로젝트를 디버깅하는 데 사용할 사이트와 솔루션의 신뢰 수준을 선택할 수 있습니다.
팜 솔루션으로 배포를 선택한 다음 마침을 클릭하여 기본 로컬 SharePoint 사이트를 그대로 사용합니다.

프로젝트에 웹 파트 추가

프로젝트에 웹 파트 항목을 추가합니다. 웹 파트 항목을 추가하면 웹 파트 코드 파일도 추가됩니다. 나중에 웹 파트의 콘텐츠를 렌더링하는 코드를 이 웹 파트 코드 파일에 추가합니다.

프로젝트에 웹 파트를 추가하려면

프로젝트 메뉴에서 새 항목 추가를 클릭합니다.
새 항목 추가 대화 상자의 설치된 템플릿 창에서 SharePoint 노드를 확장한 다음 2010을 클릭합니다.
SharePoint 템플릿 목록에서 웹 파트를 선택한 다음 추가를 클릭합니다.

솔루션 탐색기에 해당 웹 파트 항목이 표시됩니다.

웹 파트에서 콘텐츠 렌더링

웹 파트에 표시할 컨트롤을 웹 파트 클래스의 컨트롤 컬렉션에 추가하는 방법으로 컨트롤을 지정할 수 있습니다.

웹 파트에서 콘텐츠를 렌더링하려면

솔루션 탐색기에서 WebPart1.vb(Visual Basic) 또는 WebPart1.cs(C#)를 두 번 클릭합니다.

코드 편집기에서 웹 파트 코드 파일이 열립니다.
웹 파트 코드 파일의 맨 위에 다음 문을 추가합니다.
```
Imports System.Data
```
```
using System.Data;
```
WebPart1 클래스에 다음 코드를 추가합니다. 이 코드는 다음 필드를 선언합니다.
- 웹 파트에서 직원을 표시하기 위한 데이터 표
- 데이터 표를 필터링하는 데 사용되는 컨트롤에 표시되는 텍스트
- 데이터 표에 데이터를 표시할 수 없는 경우 오류를 보여 주는 레이블
- 직원 데이터 파일의 경로가 들어 있는 문자열
```
Private grid As DataGrid
Private Shared verbText As String = "Show Managers Only"
Private errorMessage As New Label()
Protected xmlFilePath As String
```
```
private DataGrid grid;
private static string verbText = "Show Managers Only";
private Label errorMessage = new Label();
protected string xmlFilePath;
```

WebPart1 클래스에 다음 코드를 추가합니다. 이 코드는 웹 파트에 DataFilePath라는 사용자 지정 속성을 추가합니다. 사용자 지정 속성은 사용자가 SharePoint에서 설정할 수 있는 속성입니다. 이 속성은 데이터 표를 채우는 데 사용되는 XML 데이터 파일의 위치를 가져오거나 설정합니다.

<Personalizable(PersonalizationScope.[Shared]), _
    WebBrowsable(True), WebDisplayName("Path to Employee Data File"), _
    WebDescription("Location of the XML file that contains employee data")> _
Public Property DataFilePath() As String
    Get
        Return xmlFilePath
    End Get
    Set(ByVal value As String)
        xmlFilePath = value
    End Set
End Property

[Personalizable(PersonalizationScope.Shared), WebBrowsable(true),
WebDisplayName("Path to Employee Data File"),
WebDescription("Location of the XML file that contains employee data")]
public string DataFilePath
{
    get
    {
        return xmlFilePath;
    }
    set
    {
        xmlFilePath = value;
    }
}

CreateChildControls 메서드를 다음 코드로 바꿉니다. 이 코드는 다음 작업을 수행합니다.

이전 단계에서 선언한 데이터 표와 레이블을 추가합니다.
데이터 표를 직원 데이터가 들어 있는 XML 파일에 바인딩합니다.

Protected Overloads Overrides Sub CreateChildControls()

    'Define the grid control that displays employee data in the Web Part.
    grid = New DataGrid()
    With grid
        .Width = Unit.Percentage(100)
        .GridLines = GridLines.Horizontal
        .HeaderStyle.CssClass = "ms-vh2"
        .CellPadding = 2
        .BorderWidth = Unit.Pixel(5)
        .HeaderStyle.Font.Bold = True
        .HeaderStyle.HorizontalAlign = HorizontalAlign.Center
    End With



    'Populate the grid control with data in the employee data file.
    Try
        Dim dataset As New DataSet()
        dataset.ReadXml(xmlFilePath, XmlReadMode.InferSchema)
        grid.DataSource = dataset
        grid.DataBind()
    Catch x As Exception
        errorMessage.Text += x.Message
    End Try

    'Add control to the controls collection of the Web Part.
    Controls.Add(grid)
    Controls.Add(errorMessage)
    MyBase.CreateChildControls()

End Sub

protected override void CreateChildControls()
{
    // Define the grid control that displays employee data in the Web Part.
    grid = new DataGrid();
    grid.Width = Unit.Percentage(100);
    grid.GridLines = GridLines.Horizontal;
    grid.HeaderStyle.CssClass = "ms-vh2";
    grid.CellPadding = 2;
    grid.BorderWidth = Unit.Pixel(5);
    grid.HeaderStyle.Font.Bold = true;
    grid.HeaderStyle.HorizontalAlign = HorizontalAlign.Center;

    // Populate the grid control with data in the employee data file.
    try
    {
        DataSet dataset = new DataSet();
        dataset.ReadXml(xmlFilePath, XmlReadMode.InferSchema);
        grid.DataSource = dataset;
        grid.DataBind();
    }
    catch (Exception x)
    {
        errorMessage.Text += x.Message;
    }

    // Add control to the controls collection of the Web Part.
    Controls.Add(grid);
    Controls.Add(errorMessage);
    base.CreateChildControls();
}

WebPart1 클래스에 다음 메서드를 추가합니다. 이 코드는 다음 작업을 수행합니다.

렌더링된 웹 파트의 웹 파트 동사 메뉴에 표시되는 동사를 만듭니다.
사용자가 동사 메뉴의 동사를 클릭할 때 발생하는 이벤트를 처리합니다. 이 코드는 데이터 표에 표시되는 직원 목록을 필터링합니다.

Public Overrides ReadOnly Property Verbs() As WebPartVerbCollection
    Get
        Dim customVerb As New WebPartVerb("Manager_Filter_Verb", _
            New WebPartEventHandler(AddressOf CustomVerbEventHandler))

        customVerb.Text = verbText
        customVerb.Description = "Shows only employees that are managers"

        Dim newVerbs() As WebPartVerb = {customVerb}

        Return New WebPartVerbCollection(MyBase.Verbs, newVerbs)
    End Get
End Property

Protected Sub CustomVerbEventHandler(ByVal sender As Object, ByVal args As WebPartEventArgs)
    Dim titleColumn As Integer = 2

    Dim item As DataGridItem
    For Each item In grid.Items
        If item.Cells(titleColumn).Text <> "Manager" Then
            If item.Visible = True Then
                item.Visible = False
            Else
                item.Visible = True
            End If
        End If
    Next item
    If verbText = "Show Managers Only" Then
        verbText = "Show All Employees"
    Else
        verbText = "Show Managers Only"
    End If
End Sub

public override WebPartVerbCollection Verbs
{
    get
    {
        WebPartVerb customVerb = new WebPartVerb("Manager_Filter_Verb",
            new WebPartEventHandler(CustomVerbEventHandler));

        customVerb.Text = verbText;
        customVerb.Description = "Shows only employees that are managers";

        WebPartVerb[] newVerbs = new WebPartVerb[] { customVerb };

        return new WebPartVerbCollection(base.Verbs, newVerbs);
    }
}

protected void CustomVerbEventHandler(object sender, WebPartEventArgs args)
{
    int titleColumn = 2;

    foreach (DataGridItem item in grid.Items)
    {
        if (item.Cells[titleColumn].Text != "Manager")
        {
            if (item.Visible == true)
            {
                item.Visible = false;
            }
            else
            {
                item.Visible = true;
            }
        }

    }
    if (verbText == "Show Managers Only")
    {
        verbText = "Show All Employees";
    }
    else
    {
        verbText = "Show Managers Only";
    }
}

웹 파트 테스트

프로젝트를 실행하면 SharePoint 사이트가 열립니다. 웹 파트는 SharePoint의 웹 파트 갤러리에 자동으로 추가됩니다. 모든 웹 파트 페이지에 웹 파트를 추가할 수 있습니다.

웹 파트를 테스트하려면

다음 XML을 메모장 파일에 붙여넣습니다. 이 XML 파일에는 웹 파트에 표시되는 샘플 데이터가 들어 있습니다.

<?xml version="1.0" encoding="utf-8" ?>
    <employees xmlns="https://schemas.microsoft.com/vsto/samples">
       <employee>
           <name>David Hamilton</name>
           <hireDate>2001-05-11</hireDate>
           <title>Sales Associate</title>
       </employee>
       <employee>
           <name>Karina Leal</name>
           <hireDate>1999-04-01</hireDate>
           <title>Manager</title>
       </employee>
       <employee>
           <name>Nancy Davolio</name>
           <hireDate>1992-05-01</hireDate>
           <title>Sales Associate</title>
       </employee>
       <employee>
           <name>Steven Buchanan</name>
           <hireDate>1955-03-04</hireDate>
           <title>Manager</title>
       </employee>
       <employee>
           <name>Suyama Michael</name>
           <hireDate>1963-07-02</hireDate>
           <title>Sales Associate</title>
       </employee>
    </employees>

메모장에서 파일을 클릭한 다음 다른 이름으로 저장을 클릭합니다.
다른 이름으로 저장 대화 상자의 파일 형식 드롭다운 목록에서 모든 파일을 선택합니다.
파일 이름 상자에 data.xml을 입력합니다.
폴더 찾아보기 단추를 사용하여 폴더를 선택한 다음 저장을 클릭합니다.
Visual Studio에서 F5 키를 누릅니다.

SharePoint 사이트가 열립니다.
사이트 작업을 클릭한 다음 기타 옵션을 클릭합니다.
만들기 페이지에서 웹 파트 페이지를 선택한 다음 만들기를 클릭합니다.
새 웹 파트 페이지 페이지에서 페이지 이름으로 SampleWebPartPage.aspx를 지정한 다음 만들기를 클릭합니다.

웹 파트 페이지가 표시됩니다.
웹 파트 페이지의 아무 영역이나 선택합니다.
페이지 위쪽에서 삽입을 클릭한 다음 웹 파트를 클릭합니다.
범주 창에서 사용자 지정 폴더를 클릭하고 WebPart1 웹 파트를 클릭한 다음 추가를 클릭합니다.

페이지에 웹 파트 페이지가 표시됩니다.

사용자 지정 속성 테스트

웹 파트에 표시되는 데이터 표를 채우려면 각 직원에 대한 정보가 들어 있는 XML 파일의 경로를 지정합니다.

사용자 지정 속성을 테스트하려면

웹 파트 모퉁이에 표시되는 화살표를 클릭한 다음 웹 파트 편집을 클릭합니다.

웹 파트의 속성이 포함된 창이 페이지 오른쪽에 표시됩니다.
창에서 기타 노드를 확장하고 이전에 만든 XML 파일의 경로를 입력한 다음 적용, 확인을 차례로 클릭합니다.

직원 목록이 웹 파트에 표시되는지 확인합니다.

웹 파트 동사 테스트

웹 파트 동사 메뉴에 표시되는 항목을 클릭하여 관리자가 아닌 직원을 표시하고 숨깁니다.

웹 파트 동사를 테스트하려면

웹 파트 모퉁이에 표시되는 화살표를 클릭한 다음 Show Managers Only를 클릭합니다.

관리자에 해당하는 직원만 웹 파트에 표시됩니다.
화살표를 다시 클릭한 다음 Show All Employees를 클릭합니다.

모든 직원이 웹 파트에 표시됩니다.

참고 항목

작업

방법: SharePoint 웹 파트 만들기

방법: 디자이너를 사용하여 SharePoint 웹 파트 만들기

연습: 디자이너를 사용하여 SharePoint를 위한 웹 파트 만들기

기타 리소스

SharePoint를 위한 웹 파트 만들기

다음을 통해 공유