Partilhar via


Passo a passo: Criando uma Web Part do SharePoint usando um Designer

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

Web parts exibe uma visualização de calendário mensal e uma caixa de seleção para cada lista de calendário no site.Os usuários podem escolher o calendário lista para incluir no modo de calendário mensal selecionando as caixas de seleção.

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

  • Criando Web parts usando Visual Web parts projeta o modelo.

  • Criando Web parts utilizando o designer do Visual Web Developer no Visual Studio.

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

  • Testando Web parts no SharePoint.

    ObservaçãoObservação

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

Pré-requisitos

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

Criando um projeto de Web parts

Primeiro, crie um projeto de Web parts usando o modelo de projeto de Visual Web parts .

Para criar um projeto visual Web parts

  1. Início Visual Studio usando a opção de execução como o administrador .

  2. Em a barra de menu, escolha Arquivo, Novo, Projeto.Se o seu IDE é configurado para usar configurações de desenvolvimento do Visual Basic, na barra de menu, escolha Arquivo, Novo Projeto.

    A caixa de diálogo Novo Projeto será exibida.

  3. Em a caixa de diálogo de Novo Projeto , em Visual C# ou Visual Basic, expanda o nó de SharePoint , e então escolha o nó de 2010 .

  4. Em o painel de Modelos instalados do Visual Studio , escolha o modelo de Visual Web parts do SharePoint 2010 , e então escolha o botão OK .

    Assistente de personalização do SharePoint Aparece.Usando o assistente, você pode especificar o site que você usará para depurar o projeto e o nível de confiança de solução.

  5. Em a seção de Que é o nível de confiança para esta solução do SharePoint? , escolha o botão de opção de Implantar como uma solução de farm .

  6. Escolha o botão Concluir para aceitar o site da web do SharePoint local padrão.

Criando Web parts

Criar Web parts adicionando controles de Caixa de Ferramentas para a superfície do controle de usuário.

Para criar o layout de Web parts

  1. Em o designer do Visual Web Developer, escolha a guia de Design para alternar para o modo design.

  2. Em a barra de menu, escolha Modo de Visualização, Caixa de Ferramentas.

  3. Em o nó de Padrão de Caixa de Ferramentas, escolha o controle de CheckBoxLIst e então execute uma das seguintes etapas:

    • Abra o menu de atalho para o controle de CheckBoxList e escolha Copiar, escolha a primeira linha no designer, abra o menu de atalho para a linha, e então escolha Colar.

    • Arraste o controle de CheckBoxList de Caixa de Ferramentas e conectá-lo a primeira linha no designer.

  4. Repita a etapa anterior, mas mover um botão para a próxima linha de designer.

  5. Em o designer, escolha o botão Botão1 .

  6. Em a barra de menu, escolha Modo de Visualização, Janela de propriedades.

    a janela de Propriedades abre.

  7. A propriedade de Texto do botão, digite a atualização.

Manipulando os eventos de controles de Web parts

Adicione código que permite que o usuário para adicionar calendários para modo de calendário mestra.

Para manipular eventos de controles de Web parts

  1. Execute um dos seguintes conjuntos de etapas:

    • Em o designer, clique duas vezes no botão Atualizar .

    • Em a janela de Propriedades para o botão Atualizar , escolha o botão Eventos .A propriedade de Clicar , entre em Button1_Click, e escolha a tecla ENTER.

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

  2. Adicione as instruções a seguir à 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 a classe de VisualWebPart1 .Esse código declara um controle de calendário mensal de exibição.

    Private MonthlyCalendarView1 As MonthlyCalendarView
    
    private MonthlyCalendarView MonthlyCalendarView1;
    
  4. Substituir o método de Page_Load da classe de VisualWebPart1 com o código a seguir.Esse código executa as seguintes tarefas:

    • Adiciona um modo de exibição de calendário mensal ao 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 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 método de Button1_Click da classe de VisualWebPart1 com o código a seguir.Este código adiciona itens de cada calendário selecionado para modo de calendário mestra.

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

Testando Web parts

Quando você executar o projeto, abra o site da web do SharePoint.Web parts é adicionado automaticamente à galeria de Web parts no SharePoint.Para testar o projeto, você executará as seguintes tarefas:

  • Adicionar um evento a cada uma das duas listas separadas do calendário.

  • Adicione Web parts a uma Página de Web Parts.

  • Especificar listas para incluir no modo de calendário mensal.

Para adicionar eventos a lista de calendário no site

  1. Em o Visual Studio, escolha a tecla F5.

    O site da web do SharePoint abre, e a barra rápida de lançamento de Microsoft SharePoint Foundation 2010 aparece na página.

  2. Em a barra rápida de inicialização, em listas, escolha o link de Calendário .

    A página de Calendário aparece.

  3. Escolha a guia de Eventos , e então escolha novo evento em fita.

  4. Em a caixa de Título , insira o evento no calendário padrão, e então escolha o botão Salvar .

  5. Em o menu de Localize ações , escolha o comando de mais opções .

  6. Em a página de Criar , escolha o tipo de Calendário , nomeie o calendário, e então escolha o botão Criar .

    A página de calendário personalizado aparece.

  7. Adicionar um evento ao calendário personalizado, nomeie o evento do evento personalizado no calendário, e então escolha o botão Salvar .

Para adicionar Web parts a uma Página de Web Parts

  1. Em o menu de Localize ações , escolha o comando de mais opções .

  2. Em a página de Criar , escolha o tipo de Página de Web Parts , e então escolha o botão Criar .

  3. Em a página de Nova Página de Web Parts , nomeie a página SampleWebPartPage.aspx, e então escolha o botão Criar .

    A página da Web parts aparece.

  4. Escolha qualquer zona na página da Web parts.

  5. Em a parte superior da página, escolha a guia de Inserir , e então escolha o botão Web parts .

  6. Escolha a pasta de Personalizar , escolha VisualWebPart1 Web parts, e então escolha o botão Adicionar .

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

    • Uma visualização de calendário mensal.

    • Um botão Atualizar .

    • Uma caixa de seleção de Calendário .

    • Uma caixa de seleção de calendário personalizado .

Para especificar listas para incluir no modo de calendário mensal

  • Em a Web parts, especifique os calendários que você deseja incluir no modo de calendário mensal, e então escolha o botão Atualizar .

    Os eventos de todos os calendários que você especificou aparecem no modo 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.

Passo a passo: Criando uma Web Part do SharePoint

Outros recursos

Criação de Web Parts para o SharePoint