Share via

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

  • 아티클

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

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

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

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

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

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

  • SharePoint에서 웹 파트 테스트

    참고

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

사전 요구 사항

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

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

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

웹 파트 프로젝트 만들기

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

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

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

  2. 파일 메뉴에서 새로 만들기를 가리킨 다음 프로젝트를 클릭합니다. IDE가 Visual Basic 개발 설정을 사용하도록 설정된 경우 파일 메뉴에서 새 프로젝트를 클릭합니다.

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

  3. 새 프로젝트 대화 상자를 열고 사용할 언어 아래의 SharePoint 노드를 확장한 다음 2010 노드를 선택합니다.

  4. Visual Studio에 설치되어 있는 템플릿 창에서 비주얼 웹 파트를 선택한 다음 확인을 클릭합니다.

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

  5. 마침을 클릭하여 기본 로컬 SharePoint 사이트와 솔루션의 기본 신뢰 수준을 그대로 사용합니다.

    기본적으로 Visual Web Developer의 소스 뷰에 프로젝트의 사용자 정의 컨트롤이 표시되며 여기서 페이지의 HTML 요소를 볼 수 있습니다.

웹 파트 디자인

도구 상자의 컨트롤을 사용자 정의 컨트롤의 화면으로 끌어 놓아 웹 파트를 디자인합니다.

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

  1. Visual Web Developer 디자이너에서 디자인 탭을 클릭하여 디자인 뷰로 전환합니다.

  2. 보기 메뉴에서 도구 상자를 클릭합니다.

  3. 도구 상자의 표준 그룹에서 CheckBoxList 및 Button을 디자이너로 끌어 옵니다.

  4. 디자이너에서 Button을 클릭합니다.

  5. 보기 메뉴에서 속성 창을 클릭합니다.

  6. 속성 창에서 단추의 Text 속성을 Update로 설정합니다.

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

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

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

  1. 디자이너에서 Update 단추를 두 번 클릭합니다.

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

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

    Imports Microsoft.SharePoint
Imports Microsoft.SharePoint.WebControls

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

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

    Private MonthlyCalendarView1 As MonthlyCalendarView

    private MonthlyCalendarView MonthlyCalendarView1;

  4. VisualWebPart1UserControl 클래스의 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. VisualWebPart1UserControl 클래스의 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. 제목 상자에 Event in the default calendar를 입력한 다음 저장을 클릭합니다.

  5. 사이트 작업을 클릭한 다음 기타 옵션을 클릭합니다.

  6. 만들기 페이지에서 달력을 클릭하고 달력의 이름을 지정한 다음 만들기를 클릭합니다.

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

  7. 사용자 지정 달력에서 Event라는 새 이벤트를 사용자 지정 달력에 추가합니다.

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

  1. 사이트 작업을 클릭한 다음 기타 옵션을 클릭합니다.

  2. 만들기 페이지에서 웹 파트 페이지를 클릭한 다음 만들기를 클릭합니다.

  3. 새 웹 파트 페이지 페이지에서 페이지 이름으로 SampleWebPartPage.aspx를 지정한 다음 만들기를 클릭합니다.

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

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

  5. 페이지 위쪽에서 삽입 탭을 클릭한 다음 웹 파트를 클릭합니다.

  6. 사용자 지정 폴더를 클릭하고 VisualWebPart1 웹 파트를 클릭한 다음 추가를 클릭합니다.

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

    • 월별 달력 보기

    • Update 단추

    • Calendar 확인란

    • Custom Calendar 확인란

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

  • 웹 파트에서 월별 달력 보기에 포함할 달력을 선택한 다음 업데이트를 클릭합니다.

    선택한 모든 달력의 이벤트가 월별 달력 보기에 표시됩니다.

참고 항목

작업

방법: SharePoint 웹 파트 만들기

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

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

기타 리소스

SharePoint를 위한 웹 파트 만들기