다음을 통해 공유

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

  • 아티클

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

이 웹 파트는 월별 달력 보기와 사이트의 각 달력 목록에 대한 확인란을 표시합니다.사용자는 확인란을 선택하여 월별 달력 보기에 포함할 달력 목록을 선택할 수 있습니다.

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

  • 비주얼 웹 파트 프로젝트 템플릿을 사용하여 웹 파트 만들기

  • Visual Studio의 Visual Web Developer 디자이너를 사용하여 웹 파트 디자인

  • 웹 파트에 있는 컨트롤의 이벤트를 처리하기 위한 코드 추가

  • SharePoint에서 웹 파트 테스트

    [!참고]

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

사전 요구 사항

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

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

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

웹 파트 프로젝트 만들기

먼저 비주얼 웹 파트 프로젝트 템플릿을 사용하여 웹 파트 프로젝트를 만듭니다.

비주얼 웹 파트 프로젝트를 만들려면

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

  2. 메뉴 표시줄에서 선택 파일, New, 프로젝트.IDE의 메뉴 표시줄에 Visual Basic 개발 설정을 사용 하도록 설정 되어 있으면 선택 파일, 새 프로젝트.

    새 프로젝트 대화 상자가 나타납니다.

  3. 에 새 프로젝트 대화 상자에서 C# 또는 Visual Basic, 확장의 SharePoint 노드를 다음 선택은 2010 노드.

  4. 에 Visual Studio 설치 된 서식 파일 창에서 선택의 SharePoint 2010 Visual 웹 파트 서식 파일을 다음 선택의 확인 단추.

    SharePoint 사용자 지정 마법사가 나타납니다.이 마법사를 사용 하 여 프로젝트 및 솔루션의 신뢰 수준 디버깅에 사용할 사이트를 지정할 수 있습니다.

  5. 에 이 SharePoint 솔루션에 대 한 신뢰 수준은 무엇입니까? 섹션에서 선택 된 팜 솔루션으로 배포 옵션 단추.

  6. 선택 된 완료 단추 기본 로컬 SharePoint 사이트에 적용 합니다.

웹 파트 디자인

웹 파트 컨트롤을 추가 하 여 디자인의 도구 는 사용자 정의 컨트롤의 표면.

웹 파트의 레이아웃을 디자인하려면

  1. Visual Web Developer 디자이너에서 선택 된 디자인 탭에서 디자인 보기로 전환 합니다.

  2. 메뉴 표시줄에서 선택 보기, 도구.

  3. 에 표준 의 노드는 도구 상자, 선택은 CheckBoxLIst 제어 하 고 다음 단계 중 하나를 수행:

    • 바로 가기 메뉴 열기는 CheckBoxList 제어 및 선택 복사, 디자이너에서 첫 번째 줄을 선택, 줄의 바로 가기 메뉴를 엽니다 및 다음 선택 붙여넣기.

    • 드래그는 CheckBoxList 에서 제어는 도구 상자 및 디자이너의 첫 번째 줄으로 연결 합니다.

  4. 이전 단계를 반복 하지만 단추를 디자이너의 다음 줄으로 이동 합니다.

  5. 디자이너에서 선택 된 Button1 단추.

  6. 메뉴 모음에서 보기, 속성 창을 선택합니다.

    속성 창이 열립니다.

  7. 에 텍스트 단추의 속성 업데이트를 입력 합니다.

웹 파트에 있는 컨트롤의 이벤트 처리

사용자가 마스터 달력 보기에 달력을 추가할 수 있게 해 주는 코드를 추가합니다.

웹 파트에 있는 컨트롤의 이벤트를 처리하려면

  1. 다음 단계 중 하나를 수행합니다.

    • 디자이너를 두 번 클릭 하 여 업데이트 단추.

    • 에 속성 창에는 업데이트 단추를 선택은 이벤트 단추.에 클릭 속성을 입력 Button1_Click, 다음 Enter 키를 선택 합니다.

    코드 편집기에서 사용자 정의 컨트롤 코드 파일이 열리고 Button1_Click 이벤트 처리기가 나타납니다.나중에이 이벤트 처리기에 코드를 추가 합니다.

  2. 사용자 정의 컨트롤 코드 파일의 맨 위에 다음 문을 추가합니다.

    Imports Microsoft.SharePoint
Imports Microsoft.SharePoint.WebControls

    using Microsoft.SharePoint;
using Microsoft.SharePoint.WebControls;

  3. 다음 코드 줄을 VisualWebPart1 클래스에 추가합니다.이 코드는 월별 달력 보기 컨트롤을 선언합니다.

    Private MonthlyCalendarView1 As MonthlyCalendarView

    private MonthlyCalendarView MonthlyCalendarView1;

  4. VisualWebPart1 클래스의 Page_Load 메서드를 다음 코드로 바꿉니다.이 코드는 다음 작업을 수행합니다.

    • 월별 달력 보기를 사용자 정의 컨트롤에 추가합니다.

    • 사이트의 각 달력 목록에 대한 확인란을 추가합니다.

    • 달력 보기에 표시되는 각 항목 형식에 대한 템플릿을 지정합니다.

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
    MonthlyCalendarView1 = New MonthlyCalendarView()
    Me.Controls.Add(MonthlyCalendarView1)
    Dim items As New SPCalendarItemCollection()
    Dim thisWeb As SPWeb = SPControl.GetContextWeb(Context)

    If CheckBoxList1.Items.Count = 0 Then
        Dim listItem As SPList
        For Each listItem In thisWeb.Lists
            If listItem.BaseTemplate = SPListTemplateType.Events Then
                CheckBoxList1.Items.Add(New ListItem(listItem.Title))
            End If
        Next listItem
    End If
    MonthlyCalendarView1.ItemTemplateName = "CalendarViewMonthItemTemplate"
    MonthlyCalendarView1.ItemAllDayTemplateName = "CalendarViewMonthItemAllDayTemplate"
    MonthlyCalendarView1.ItemMultiDayTemplateName = "CalendarViewMonthItemMultiDayTemplate"
End Sub

    protected void Page_Load(object sender, EventArgs e)
{
    MonthlyCalendarView1 = new MonthlyCalendarView();
    this.Controls.Add(MonthlyCalendarView1);
    SPCalendarItemCollection items = new SPCalendarItemCollection();
    SPWeb thisWeb = SPControl.GetContextWeb(Context);

    if (CheckBoxList1.Items.Count == 0)
    {
        foreach (SPList listItem in thisWeb.Lists)
        {
            if (listItem.BaseTemplate == SPListTemplateType.Events)
            {
                CheckBoxList1.Items.Add(new ListItem(listItem.Title));
            }
        }
    }
    MonthlyCalendarView1.ItemTemplateName =
        "CalendarViewMonthItemTemplate";
    MonthlyCalendarView1.ItemAllDayTemplateName =
        "CalendarViewMonthItemAllDayTemplate";
    MonthlyCalendarView1.ItemMultiDayTemplateName =
        "CalendarViewMonthItemMultiDayTemplate";
}

  5. VisualWebPart1 클래스의 Button1_Click 메서드를 다음 코드로 바꿉니다.이 코드는 선택한 각 달력의 항목을 마스터 달력 보기에 추가합니다.

    Protected Sub Button1_Click(ByVal sender As Object, ByVal e As EventArgs) Handles Button1.Click
    Dim items As New SPCalendarItemCollection()
    Dim thisWeb As SPWeb = SPControl.GetContextWeb(Context)

    Dim item As ListItem
    For Each item In CheckBoxList1.Items
        If item.Selected = True Then
            Dim calendarList As SPList = thisWeb.Lists(item.Text)
            Dim dtStart As DateTime = DateTime.Now.AddDays(-7)
            Dim dtEnd As DateTime = dtStart.AddMonths(1).AddDays(7)
            Dim query As New SPQuery()
            query.Query = [String].Format("<Query>" + "<Where><And>" + _
                                          "<Geq><FieldRef Name=""{0}"" />" + _
                                          "<Value Type=""DateTime"">{1}</Value></Geq>" + _
                                          "<Leq><FieldRef Name=""{0}"" />" + _
                                          "<Value Type=""DateTime"">{2}</Value></Leq>" + _
                                          "</And></Where><OrderBy><FieldRef Name=""{0}"" /></OrderBy>" + _
                                          "</Query>", "Start Time", dtStart.ToShortDateString(), dtEnd.ToShortDateString())

            Dim listItem As SPListItem
            For Each listItem In calendarList.GetItems(query)
                Dim calItem As New SPCalendarItem()
                With calItem
                    .ItemID = listItem("ID").ToString()
                    .Title = listItem("Title").ToString()
                    .CalendarType = Convert.ToInt32(SPCalendarType.Gregorian)
                    .StartDate = CType(listItem("Start Time"), DateTime)
                    .ItemID = listItem.ID.ToString()
                    .WorkSpaceLink = [String].Format("/Lists/{0}/DispForm.aspx", calendarList.Title)
                    .DisplayFormUrl = [String].Format("/Lists/{0}/DispForm.aspx", calendarList.Title)
                    .EndDate = CType(listItem("End Time"), DateTime)
                    .Description = listItem("Description").ToString()
                End With

                If Not (listItem("Location") Is Nothing) Then
                    calItem.Location = listItem("Location").ToString()
                End If
                items.Add(calItem)
            Next listItem
            MonthlyCalendarView1.DataSource = items
        End If
    Next item

End Sub

    protected void Button1_Click(object sender, EventArgs e)
{
    SPCalendarItemCollection items = new SPCalendarItemCollection();
    SPWeb thisWeb = SPControl.GetContextWeb(Context);

    foreach (ListItem item in CheckBoxList1.Items)
    {
        if (item.Selected == true)
        {
            SPList calendarList = thisWeb.Lists[item.Text];
            DateTime dtStart = DateTime.Now.AddDays(-7);
            DateTime dtEnd = dtStart.AddMonths(1).AddDays(7);
            SPQuery query = new SPQuery();
            query.Query = String.Format(
                "<Query>" +
                "<Where><And>" +
                "<Geq><FieldRef Name=\"{0}\" />" +
                "<Value Type=\"DateTime\">{1}</Value></Geq>" +
                "<Leq><FieldRef Name=\"{0}\" />" +
                "<Value Type=\"DateTime\">{2}</Value></Leq>" +
                "</And></Where><OrderBy><FieldRef Name=\"{0}\" /></OrderBy>" +
                "</Query>",
                "Start Time",
                dtStart.ToShortDateString(),
                dtEnd.ToShortDateString());

            foreach (SPListItem listItem in calendarList.GetItems(query))
            {
                SPCalendarItem calItem = new SPCalendarItem();
                calItem.ItemID = listItem["ID"].ToString();
                calItem.Title = listItem["Title"].ToString();
                calItem.CalendarType = Convert.ToInt32(SPCalendarType.Gregorian);
                calItem.StartDate = (DateTime)listItem["Start Time"];
                calItem.ItemID = listItem.ID.ToString();
                calItem.WorkSpaceLink = String.Format(
                    "/Lists/{0}/DispForm.aspx", calendarList.Title);
                calItem.DisplayFormUrl = String.Format(
                    "/Lists/{0}/DispForm.aspx", calendarList.Title);
                calItem.EndDate = (DateTime)listItem["End Time"];
                calItem.Description = listItem["Description"].ToString();
                if (listItem["Location"] != null)
                {
                    calItem.Location = listItem["Location"].ToString();
                }
                items.Add(calItem);
            }
            MonthlyCalendarView1.DataSource = items;
        }

    }

}

웹 파트 테스트

프로젝트를 실행하면 SharePoint 사이트가 열립니다.웹 파트는 SharePoint의 웹 파트 갤러리에 자동으로 추가됩니다.이 프로젝트를 테스트 하려면 다음 작업을 수행 합니다.

  • 별개의 두 달력 목록에 각각 이벤트를 추가합니다.

  • 웹 파트 페이지에 웹 파트를 추가합니다.

  • 월별 달력 보기에 포함할 목록을 지정 합니다.

사이트의 달력 목록에 이벤트를 추가하려면

  1. Visual Studio F5 키를 선택 합니다.

    SharePoint 사이트를 엽니다 및 Microsoft SharePoint Foundation 2010 빠른 실행 표시줄에는 페이지에 나타납니다.

  2. 빠른 실행 표시줄에서에서 나열, 선택은 일정 링크.

    달력 페이지가 나타납니다.

  3. 선택 된 이벤트 탭을 클릭 한 다음 선택 새 이벤트 리본 메뉴.

  4. 에 제목 상자에서 기본 달력에 이벤트를 입력 한 다음 선택 된 저장 단추.

  5. 에 사이트 작업 메뉴, 선택은 기타 옵션 명령.

  6. 에 만들기 페이지에서 선택의 일정 입력, 달력, 이름 지정 및 다음 선택은 만들기 단추.

    Custom Calendar 페이지가 나타납니다.

  7. 사용자 지정 일정에 이벤트를 추가, 사용자 지정 일정에 이벤트를 이벤트 이름 지정 및 다음 선택은 저장 단추.

웹 파트 페이지에 웹 파트를 추가하려면

  1. 에 사이트 작업 메뉴, 선택은 기타 옵션 명령.

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

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

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

  4. 모든 웹 파트 페이지의 영역을 선택 합니다.

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

  6. 선택의 사용자 지정 폴더를 선택의 VisualWebPart1 웹 파트 다음 선택은 추가 단추.

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

    • 월별 달력 보기

    • Update 단추

    • Calendar 확인란

    • Custom Calendar 확인란

월별 달력 보기에 포함할 목록을 지정 하려면

  • 월별 달력 보기에서 포함 하 고 선택 하려는 일정 웹 파트에 지정 된 업데이트 단추.

    이벤트에서 지정한 모든 달력 월별 달력 보기에 표시 됩니다.

참고 항목

작업

방법: SharePoint 웹 파트 만들기

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

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

기타 리소스

SharePoint를 위한 웹 파트 만들기