다음을 통해 공유

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

  • 아티클

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

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

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

  • Visual Studio 웹 파트 항목 템플릿을 사용하여 웹 파트 만들기

  • 웹 파트 사용자가 설정할 수 있는 속성 만들기.이 속성은 직원 데이터 파일의 위치를 지정합니다.

  • 웹 파트 컨트롤 컬렉션에 컨트롤을 추가하여 웹 파트에서 콘텐츠 렌더링

  • 렌더링된 웹 파트의 동사 메뉴에 나타나는 새 동사 메뉴 항목 만들기.사용자는 동사를 사용하여 웹 파트에 나타나는 데이터를 수정할 수 있습니다.

  • SharePoint에서 웹 파트 테스트

    [!참고]

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

사전 요구 사항

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

  • 지원되는 Microsoft Windows 및 SharePoint 버전.자세한 내용은 SharePoint 솔루션 개발 요구 사항을 참조하십시오.

  • Visual Studio Professional 또는 Visual Studio ALM(Application Lifecycle Management)의 버전

빈 SharePoint 프로젝트 만들기

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

빈 SharePoint 프로젝트를 만들려면

  1. 관리자 권한으로 실행 옵션을 사용하여 Visual Studio를 시작합니다.

  2. 메뉴 모음에서 선택 파일, New, 프로젝트.

  3. 에 새 프로젝트 대화 상자에서 확장 된 SharePoint 노드를 사용 하 고 다음을 선택 하 고 원하는 언어는 2010 노드.

  4. 에 템플릿 창에서 선택 SharePoint 2010 프로젝트, 다음 선택은 확인 단추.

    SharePoint 사용자 지정 마법사가 나타납니다.이 마법사를 사용하면 프로젝트를 디버깅하는 데 사용할 사이트와 솔루션의 신뢰 수준을 선택할 수 있습니다.

  5. 선택의 팜 솔루션으로 배포 옵션 단추를 선택한 다음 선택은 완료 단추 기본 로컬 SharePoint 사이트에 적용 합니다.

프로젝트에 웹 파트 추가

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

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

  1. 메뉴 표시줄에서 선택 프로젝트, 새 항목 추가.

  2. 에 새 항목 추가 대화 상자에 템플릿 설치 창에서 확장의 SharePoint 노드를 다음 선택의 2010 노드.

  3. SharePoint 서식 파일 목록에서 선택의 웹 파트 서식 파일을 다음 선택은 추가 단추.

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

웹 파트에서 콘텐츠 렌더링

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

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

  1. 솔루션 탐색기, WebPart1.cs (에서 C#) 또는 WebPart1.vb (Visual Basic)에서 엽니다.

    코드 편집기에서 웹 파트 코드 파일이 열립니다.

  2. 웹 파트 코드 파일의 맨 위에 다음 문을 추가합니다.

    Imports System.Data

    using System.Data;

  3. 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;

  4. 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;
    }
}

  5. 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();
}

  6. 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의 웹 파트 갤러리에 자동으로 추가됩니다.모든 웹 파트 페이지에 웹 파트를 추가할 수 있습니다.

웹 파트를 테스트하려면

  1. 다음 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>

  2. 메모장의 메뉴 표시줄에서 선택 파일, 으로 저장.

  3. 에 으로 저장 대화 상자에 형식 목록에서 선택 모든 파일.

  4. 에 파일 이름 상자에서 data.xml를 입력 합니다.

  5. 폴더를 사용 하 여 선택의 폴더 찾아보기 단추를 클릭 한 다음 선택은 저장 단추.

  6. 선택 Visual Studio는 F5 키.

    SharePoint 사이트가 열립니다.

  7. 에 사이트 작업 메뉴를 선택 기타 옵션.

  8. 에 만들기 페이지에서 선택의 웹 파트 페이지 입력 한 다음 선택은 만들기 단추.

  9. 에 새 웹 파트 페이지 페이지에서 페이지 이름을 SampleWebPartPage.aspx, 다음 선택은 만들기 단추.

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

  10. 웹 파트 페이지의 아무 영역이나 선택합니다.

  11. 페이지의 맨 위에 있는 선택은 삽입 탭을 클릭 한 다음 선택은 웹 파트 단추.

  12. 에 범주 창에서 선택의 사용자 지정 폴더를 선택는 WebPart1 웹 파트 다음 선택은 추가 단추.

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

사용자 지정 속성 테스트

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

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

  1. 웹 파트의 오른쪽에 나타나는 화살표를 선택 하 고 선택 편집 웹 파트 나타나는 메뉴에서.

    웹 파트의 속성이 포함된 창이 페이지 오른쪽에 표시됩니다.

  2. 창에 기타 노드를 이전에 만든 XML 파일의 경로 입력 하 고 선택한는 적용 단추를 클릭 한 다음 선택 된 확인 단추.

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

웹 파트 동사 테스트

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

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

  1. 웹 파트의 오른쪽에 나타나는 화살표를 선택 하 고 선택 관리자만 표시 나타나는 메뉴에서.

    관리자에 해당하는 직원만 웹 파트에 표시됩니다.

  2. 화살표를 다시 선택 하 고 선택 모든 직원 표시 나타나는 메뉴에서.

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

참고 항목

작업

방법: SharePoint 웹 파트 만들기

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

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

기타 리소스

SharePoint를 위한 웹 파트 만들기