Compartilhar via


Passo a passo: Criando uma Web Part do SharePoint

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 Web parts usando o modelo de item de Web parts no Visual Studio 2010.

Web parts exibe funcionários em uma grade de dados.O usuário especifica o local do arquivo que contém dados de funcionários.O usuário também pode filtrar a grade de dados para que os funcionários que são gerentes apareçam na lista somente.

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

  • Criando Web parts usando o modelo de item do Visual Studio Web parts .

  • Criando uma propriedade que pode ser definida pelo usuário da Web parts.Esta propriedade especifica o local do arquivo de dados de funcionários.

  • Processar conteúdo de Web parts adicionando controles Web parts a coleção de controles.

  • Criando um novo item de menu, conhecido como um verbo, que apareça no menu de verbos da parte Web processada.Os verbos permitem ao usuário modificar os dados que aparecem na 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 vazio do SharePoint

Primeiro, crie um projeto vazio do SharePoint.Posteriormente, você adicionará Web parts para o projeto usando o modelo de item de Web parts .

Para criar um projeto vazio do SharePoint

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

  2. Em homens barre, escolha Arquivo, Novo, Projeto.

  3. Em a caixa de diálogo de Novo Projeto , expanda o nó de SharePoint no idioma que você deseja usar, e então escolha o nó de 2010 .

  4. Em o painel de Modelos , escolha, e escolha Projeto do SharePoint 2010no botão de OK .

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

  5. Escolha o botão de opção de Implantar como uma solução de farm , e então escolha o botão de Concluir para aceitar o site da web do SharePoint local padrão.

Adicionando Web parts ao projeto

Adicionar um item de Web parts ao projeto.O item de Web parts adicionar o arquivo de código de Web parts.Posteriormente, você adicionará código para o arquivo de código de Web parts para renderizar o conteúdo de Web parts.

Para adicionar Web parts ao projeto

  1. Em a barra de menu, escolha Projeto, Adicionar novo item.

  2. Em a caixa de diálogo de Adicionar novo item , no painel de modelos instalados , expanda o nó de SharePoint , e então escolha o nó de 2010 .

  3. Em a lista de modelos do SharePoint, escolha o modelo de Web parts , e então escolha o botão de Adicionar .

    o item de Web parts aparece em Gerenciador de Soluções.

Processando conteúdo na Web parts

Você pode especificar os controles que você deseja que apareça na Web parts adicionando-os à coleção de controles da classe de Web parts.

Para renderizar o conteúdo de Web parts

  1. Em Gerenciador de Soluções, abra WebPart1.vb (no Visual Basic) ou WebPart1.cs (em C#).

    O arquivo de código de Web parts abre na editor de códigos.

  2. Adicione as instruções a seguir à parte superior do arquivo de código de Web parts.

    Imports System.Data
    
    using System.Data;
    
  3. Adicione o seguinte código à classe WebPart1:Esse código declara os seguintes valores:

    • Uma grade para exibir dados dos funcionários na Web parts.

    • O texto que aparece no controle que é usado para filtrar a grade de dados.

    • Um rótulo que exibe um erro se a grade de dados não é capaz de exibir dados.

    • Uma cadeia de caracteres que contém o caminho do arquivo de dados de funcionários.

    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. Adicione o seguinte código à classe WebPart1:Este código adiciona uma propriedade personalizada chamada DataFilePath a Web parts.Uma propriedade personalizada é uma propriedade que pode ser definida no SharePoint pelo usuário.Esta propriedade obter e definir o local de um arquivo de dados XML que é usado para preencher a grade de dados.

    <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. Substituir o método de CreateChildControls com o código a seguir.Esse código executa as seguintes tarefas:

    • Adiciona a grade e o rótulo de dados que você declarado na etapa anterior.

    • Associa a grade de dados a um arquivo XML que contém dados de funcionários.

    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. Adicione o seguinte método à classe de WebPart1 .Esse código executa as seguintes tarefas:

    • Cria um verbo que apareça no menu de verbos de Web parts processada da parte Web.

    • Manipula o evento que é gerado quando o usuário escolher o comando no menu de verbos.Esse código filtrar a lista de funcionários que aparece na grade de dados.

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

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.Você pode adicionar Web parts para qualquer página de Web parts.

Para testar a Web parts

  1. Cole o seguinte XML em um arquivo do Bloco De Notas.Esse arquivo XML contém os dados de exemplo que aparecerá na Web parts.

    <?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. Em o Bloco De Notas, na barra de menu, escolha Arquivo, Salvar como.

  3. Em a caixa de diálogo de Salvar como , na lista de Salvar como tipo , escolha Todos os Arquivos.

  4. Em a caixa de Nome do arquivo , digite data.xml.

  5. Escolha qualquer pasta usando o botão de Procurar nas pastas , e então escolha o botão de Salvar .

  6. Em o Visual Studio, escolha a chave de F5 .

    O site da web do SharePoint aparece.

  7. Em o menu de Ações do site , escolha Mais opções.

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

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

    A página da Web parts aparece.

  10. Selecione qualquer zona na página da Web parts.

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

  12. Em o painel de Categorias , escolha a pasta de Personalizar , escolha WebPart1 Web parts, e então escolha o botão de Adicionar .

    Web parts aparece na página.

Testando a propriedade personalizada

Para preencher a grade de dados que aparece na Web parts, especifique o caminho do arquivo XML que contém dados sobre cada funcionário.

Para testar a propriedade personalizada

  1. Escolha a seta que aparece no lado direito da Web parts, e então escolha Edição de Web parts de menu que aparece.

    Um painel que contém propriedades para Web parts aparece no lado direito da página.

  2. Em o painel, expanda o nó de Diversos , digite o caminho do arquivo XML que você criou anteriormente, clique no botão de Aplicar , e escolha o botão de OK .

    Verifique se uma lista de funcionários aparece na Web parts.

Testando o verbo de Web parts

Exibir e ocultar os funcionários que não são gerentes clicando em um item que apareça no menu de verbos de Web parts.

Para testar o verbo de Web parts

  1. Escolha a seta que aparece no lado direito da Web parts, e então escolha Gerentes de apresentação apenas de menu que aparece.

    Somente os funcionários que são gerentes aparecem na Web parts.

  2. Escolha a seta novamente, e então escolha Mostrar todos os empregados de menu que aparece.

    Todos os empregados aparecem na Web parts.

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 usando um Designer

Outros recursos

Criação de Web Parts para o SharePoint