Partilhar via

Demonstra Passo a passo: Criar uma Web Part do SharePoint, usando um Designer.

  • Artigo

Web Parts permite aos usuários modificar diretamente o conteúdo, a aparência e o comportamento das páginas de site do SharePoint usando um navegador. Esta explicação passo a passo mostra como criar uma Web Part visualmente, usando o SharePoint Parte do Visual Web o modelo de projeto em 2010 de Visual Studio.

A Web Part exibe um modo de exibição de calendário mensal e uma caixa de seleção para cada lista de calendário no site. Os usuários podem escolher qual calendário lista incluir no modo de exibição de calendário mensal, selecionando as caixas de seleção.

Essa explicação passo a passo ilustra as seguintes tarefas:

  • Criar uma Web Part usando o Parte do Visual Web o modelo de projeto.

  • Projetando a Web Part usando o designer Visual Web Developer, no Visual Studio.

  • Adicionando código para manipular os eventos de controles na Web Part.

  • Testar a Web Part no SharePoint.

    ObservaçãoObservação

    Seu computador pode mostrar diferentes nomes ou localizações para alguns dos elementos de interface do usuário do Visual Studio nas instruções a seguir. A edição do Visual Studio que você possui e as configurações que você usa determinam esses elementos. Para obter mais informações, consulte Trabalhando com configurações.

Pré-requisitos

Para completar este passo a passo, são necessários os seguintes componentes:

Criando um projeto de Web Part

Primeiro, crie um projeto de Web Part usando o Parte do Visual Web o modelo de projeto.

Para criar um projeto do Visual Web Part

  1. Iniciar 2010 de Visual Studio usando o Executar como administrador opção.

  2. No menu File, aponte para New, e em seguida, clique em Project. Se seu IDE é definida para usar configurações de desenvolvimento da Visual Basic a arquivo menu, clique em Novo projeto.

    A caixa de diálogo New Project será exibida.

  3. Abrir o Novo projeto caixa de diálogo caixa, expanda o SharePoint nó sob o idioma que você deseja usar e, em seguida, selecione o 2010 nó.

  4. No Visual Studio Installed Templates painel, selecione Parte do Visual Webe em seguida, clique em OK.

    O O Assistente para personalização do SharePoint aparece. Este assistente permite que você selecione o site que você usará para depurar o projeto e o nível de confiança da solução.

  5. Clique em Concluir para aceitar o site local padrão do SharePoint e o nível de confiança padrão para a solução.

    Por padrão, o Visual Web Developer exibe o controle de usuário do projeto no fonte onde você pode ver os elementos da página HTML de modo de exibição.

Criando a Web Part

A Web Part de design arrastando controles a partir de caixa de ferramentas para a superfície do controle de usuário.

Para criar o layout da Web Part

  1. No designer Visual Web Developer, clique no Design tab para alternar para modo Design.

  2. No menu Exibir, clique em Caixa de Ferramentas.

  3. No Toolbox, da padrão de grupo, arraste um CheckBoxList e um botão para o designer.

  4. No designer, clique em botão.

  5. Sobre o Exibir menu, clique em Janela Propriedades.

  6. No Propriedades janela, defina a texto a propriedade do botão de atualização.

Manipulando os eventos de controles na Web Part

Adicione o código que permite ao usuário adicionar calendários para o modo de exibição do calendário principal.

Para manipular eventos de controles de Web Part

  1. No designer, clique duas vezes o atualização botão.

    O arquivo de código de controle de usuário abre no Editor de código e o Button1_Click aparece de manipulador de eventos. Posteriormente, você irá adicionar código para o manipulador de eventos.

  2. Adicione as seguintes instruções para a parte superior do arquivo de código de controle de usuário.

    Imports Microsoft.SharePoint
Imports Microsoft.SharePoint.WebControls

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

  3. Adicione a seguinte linha de código para o VisualWebPart1userControl classe. Esse código declara um controle de exibição de calendário mensal.

    Private MonthlyCalendarView1 As MonthlyCalendarView

    private MonthlyCalendarView MonthlyCalendarView1;

  4. Substituir o Page_Load método de VisualWebPart1UserControl classe com o código a seguir. Esse código realiza as seguintes tarefas:

    • Adiciona um modo de exibição de calendário mensal para o controle de usuário.

    • Adiciona uma caixa de seleção para cada lista de calendário no site.

    • Especifica um modelo para cada tipo de item que aparece no modo de exibição de calendário.

    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. Substituir o Button1_Click método de VisualWebPart1UserControl classe com o código a seguir. Este código adiciona itens de cada calendário selecionado no modo de exibição do calendário principal.

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

    }

}

Testar a Web Part

Quando você executar o projeto, abre o site do SharePoint. A Web Part é automaticamente adicionada à Galeria de Web Parts do SharePoint. Para testar esse projeto, você executará as seguintes tarefas:

  • Adicione um evento a cada uma das duas listas de calendário separado.

  • Adicione a Web Part para uma página de Web Parts.

  • Selecione as listas para incluir no modo de exibição de calendário mensal.

Para adicionar eventos ao calendário de listas no site

  1. No Visual Studio, pressione F5.

    O site do SharePoint é aberto e o Microsoft SharePoint Foundation 2010 barra Inicialização rápida é exibido na página.

  2. Na barra Inicialização rápida, em lista, clique em calendário.

    O calendário página é exibida.

  3. Clique em eventose em seguida, clique em Novo evento de.

  4. No título caixa, digite o evento no calendário padrão e, em seguida, clique em Salvar.

  5. Clique em Ações do Sitee em seguida, clique em Mais opções.

  6. No criar página, clique em calendário, nomeie o calendário e, em seguida, clique em criar.

    O Calendário personalizado página é exibida.

  7. Adicione um novo evento no calendário personalizado chamado de evento no calendário personalizado.

Para adicionar a Web Part para uma página de Web Parts

  1. Clique em Ações do Sitee em seguida, clique em Mais opções.

  2. No criar página, clique em Página de Web Partse em seguida, clique em criar.

  3. No Nova página de Web Parts de página, nomeie a página SampleWebPartPage.aspxe em seguida, clique em criar.

    A página de Web Parts é exibida.

  4. Selecione qualquer zona na página de Web Parts.

  5. Na parte superior da página, clique na Inserir guia e clique Web Part.

  6. Clique o personalizado pasta, clique no VisualWebPart1 Web Part e clique Add.

    A Web Part aparece na página. Os seguintes controles aparecem na Web Part:

    • Um modo de exibição de calendário mensal.

    • Um atualização botão.

    • A calendário caixa de seleção.

    • A Calendário personalizado caixa de seleção.

Selecione as listas de incluir no modo de exibição de calendário mensal

  • Na Web Part, selecione os calendários que você deseja incluir no modo de exibição de calendário mensal e, em seguida, clique em atualização.

    Eventos de todos os calendários selecionados aparecem no modo de exibição de calendário mensal.

Consulte também

Tarefas

Como: Criar uma parte da Web do SharePoint

Como: Criar uma parte da Web do SharePoint, usando um Designer.

Demonstra Passo a passo: Criar uma Web Part do SharePoint

Outros recursos

Criando Web Parts for SharePoint