SharePoint 2010: Visual WebParts
por Wagner Amorim

Overview

Com o lançamento do SharePoint 2010 muita coisa boa veio para os IT Pros e para as equipes de Desenvolvedores que trabalham com as tecnologias e produtos SharePoint.

Hoje quero explorar um recurso que é considerado o modelo mais comum de extensibilidade do SharePoint, vamos explorar como ficaram as WebParts na nova versão do SharePoint .

A Microsoft já lançou muito material para os times de IT Pros e Desenvolvedores de SharePoint, abaixo listo alguns links que tenho utilizado:

Sharepoint 2010 Beta Developer Training Kit
http://www.microsoft.com/downloads/details.aspx?displaylang=en&FamilyID=bfd1603b-7550-4b8e-be85-4215a5069b90

SharePoint 2010 Developer Center
http://msdn.microsoft.com/en-us/sharepoint/ee514561.aspx

Microsoft SharePoint Developer Documentation Team Blog
http://blogs.msdn.com/sharepointdeveloperdocs/archive/2009/10/19/SharePoint2010BetaDevDocsLive.aspx

Get Started Developing on SharePoint 2010
http://msdn.microsoft.com/en-us/sharepoint/ee513147.aspx

Office 2010 Beta Developer Training Kit
http://www.microsoft.com/downloads/details.aspx?familyid=F1599288-A99F-410F-A219-F4375DBE310C&displaylang=en

Visual Studio 2010 – Série de posts em Português.
http://reverb.leandrodaniel.com/reverb/post/Visual-Studio-2010-e28093-Serie-de-posts-chega-ao-fim.aspx

Instalando o SharePoint 2010 no Windows 7
http://www.canalsharepoint.com.br/tutoriais/Tutoriais/Instalando%20o%20SharePoint%202010%20no%20Windows%207.aspx

Solução

Para essa solução vou trabalhar com as seguintes tecnologias:

- Windows SharePoint Foundation 2010 Beta
- Microsoft® SQL Server® 2008
- Windows 7 x64
- Visual Studio 2010 Beta 2

NOTA: Eu utilizei uma instalação do SharePoint Foundation 2010, mas o artigo também se aplica ao SharePoint Server 2010.

Vou desenvolver a solução utilizando o Windows 7 como sistema operacional. Para maiores informações de instalação e configuração do SharePoint 2010 no Windows 7, veja o artigo citado acima:

Antes de iniciarmos nossa solução na prática, gostaria de apresentar um overview das WebParts.

v WebParts no SharePoint 2010

As WebParts são o meio mais comum de se customizar projetos em SharePoint, é um dever para qualquer Desenvolvedor SharePoint entender o funcionamento de uma WebPart no SharePoint, para uma apresentação do funcionamento de WebParts no SharePoint 2007 veja: http://msdn.microsoft.com/en-us/sharepoint/ee513148.aspx e http://www.canalsharepoint.com.br/tutoriais/Tutoriais/Desenvolvendo%20WebParts%20no%20SharePoint%202007.aspx.

O modelo de desenvolvimento de WebParts no SharePoint já era dividido em dois tipos desde sua versão 2007, que eram Visual WebParts (utilizando UserControls) e as WebParts conhecidas como Standard WebParts, que eram desenvolvidas e “construídas” em runtime, ou seja, sem nenhuma interação visual durante o desenvolvimento.

A Visual Webpart é na verdade uma classe que herda a classe base de WebParts ASP.NET: System.Web.UI.WebControls.WebParts.WebPart e com o método LoadControl carrega um controle ASP.NET do tipo UserControl.

NOTA: Na versão 2007 os desenvolvedores tinham um pouco de trabalho manual para utilizar controles UserControls como WebPart, o que já não é mais necessário na versão 2010.

O Visual Studio implantou um novo item no template de projeto SharePoint, essse novo item traz um modelo mais organizado e produtivo para nós desenvolvedores quando formos utilizar esse tipo de WebPart.

Após o overview desse recurso, vamos entender como implantar e utilizá-lo na prática, esse artigo é um pouco extenso, mas faz tempo que estou devendo um artigo mais completo falando sobre WebParts no SharePoint, vou tentar explorar necessidades comuns sobre esse modelo de trabalho.

1. Criando uma Visual WebPart no SharePoint 2010.

Vamos utilizar o template do Visual Studio 2010, Visual WebPart, porque esse foi o modelo com maiores mudanças na nova versão do SharePoint.

1.1. Abra o Visual Studio 2010 e clique em “File/New/Project”.

1.2. Na janela “New Project”, clique em “Visual C#/SharePoint/2010/Empty SharePoint Project”, renomeie o projeto para “SharePoint2010.DEV” e clique em OK.

1.3. Em seguida o Visual Studio abre a janela “SharePoint Customization Wizard”, onde podemos definir para qual site será feito o Debug e Deploy, além de definirmos os níveis de segurança da solução.

Defina o site e o nível de segurança da aplicação como “Deploy as a farm solution” e clique em “Finish”.

NOTA: Para maiores informações do funcionamento das SandBox Solutions no SharePoint 2010, veja o artigo: http://community.bamboosolutions.com/blogs/sharepoint-2010/archive/2009/10/29/sharepoint-2010-sandbox-solution-an-overview.aspx

1.4. Adicionando uma Visual Web Part na solução.

a. Na janela “Solution Explorer”, clique com o botão direito no projeto, depois em “Add/New Item”.

b. Na janela “Add New Item”, selecione o item template “Visual Web Part”.

c. No campo name digite “VisualWP”

d. Clique em “Add”.

NOTA: Note na Janela “Solution Explorer” (Ctrl+W,S) que o SharePoint adicionou três arquivos (VisualWP.cs, VisualWP.webpart e Elements.xml) relacionados com a WebPart e mais três arquivos relacionados com o UserControl (VisualWPUserControl.ascx, VisualWPUserControl.ascx.cs e VisualWPUserControl.ascx.designer.cs).

Além da WebPart com o User Control, foi adicionado também uma feature (Feature1) em uma nova pasta chamada Features, essa pasta faz parte de um novo pacote de recursos disponíveis no Visual Studio 2010 para melhorar o desenvolvimento e deploy do SharePoint 2010 no Visual Studio. Bem legal!

Vamos rapidamente explorar esse novo item Feature1 adicionado ao projeto entender de forma simples seu funcionamento.

1.5. Alterando informações da Feature.

a. Clique com botão direito na Feature1 e a renomeie para “Canal SharePoint 2010”.

b. Dê um duplo clique no item “Canal SharePoint 2010”.

c. No campo “Title”, digite “Canal SharePoint – Desenvolvendo no SharePoint 2010”.

d. No campo “Description”, digite “Feature criada para ativar a Visual WebPart Demo”.

1.6. Alterando o título, a descrição e o Grupo da WebPart.

a. Clique 2 vezes no arquivo VisualWP.webpart e altere as seguintes linhas:

<property name="Title" type="string">VisualWP</property>

<property name="Description" type="string"> My Visual WebPart </property>

Para:

<property name="Title" type="string">SharePoint 2010 – Visual WebPart</property>

<property name="Description" type="string">Canal SharePoint – Primeira Visual WebPart utilizando o SharePoint 2010</property>

b. Salve e feche o arquivo “VisualWP.webpart”.

c. Dê um duplo clique no arquivo “Elements.xml“ e altere a seguinte linha:

<Property Name="Group" Value="Custom" />

Para:

Property Name="Group" Value="CanalSharePoint" />

d. Salve e feche o arquivo Elements.xml.

Após explorar de forma breve as Features no Visual Studio 2010, vamos continuar com o desenvolvimento da “Visual WebPart”.

1.7. Abra o UserControl “VisualWPUserControl.ascx”.

1.8. Certifique-se de que o modo de exibição do UserControl está como “Design”.

Para simular um exemplo mais prático, vamos criar uma WebPart “demo” de Comentários que vai inserir um registro em uma lista determinada.

1.9. Adicionando controles ao UserControl.

Adicione através da janela Toolbox do Visual Studio os seguintes controles do tipo Standard:

a. Label

ID: lblTitulo

TEXT: Canal SharePoint - Visual WebPart

b. Label

i. ID: lblNome

ii. Text: Digite seu nome:

c. TextBox

ID: txtNome

d. Label

i. ID: lblComentario

ii. Text: Comentário:

e. TextBox

ID: txtComentario

TextMode: MultiLine

f. Button

i. ID: btnComentar

ii. Text: Comentar!

Seu código HTML, no modelo Source deve ser parecido com esse:

<asp:Label ID="lblTitulo" runat="server"

Text="Canal SharePoint - Visual WebPart" style="font-family: Arial"></asp:Label>

<br /><br />

<asp:Label ID="lblNome" runat="server" Text="Digite seu nome:"

style="font-family: Arial, Helvetica, sans-serif; font-size: small"></asp:Label>

&nbsp;

<asp:TextBox ID="txtNome" runat="server" Width="161px"></asp:TextBox>

<br /><br />

<asp:Label ID="lblComentario" runat="server" Text="Comentário:"

style="font-family: Arial, Helvetica, sans-serif; font-size: small"></asp:Label>

<br />

<asp:TextBox ID="txtComentario" runat="server" TextMode="MultiLine"

Width="274px"></asp:TextBox>

<br />

<br />

<asp:Button ID="btnComentar" runat="server" Text="Comentar!" />

E sua exibição no modo Design deve ser semelhante a imagem abaixo:

1.10. Salve o UserControl.

1.11. Adicionando propriedades para sua WebPart.

Vamos criar uma propriedade na WebPart para que o usuário possa definir em qual lista serão armazenados os comentários.

a. Abra o arquivo VisualWPUserControl.ascx.cs e logo acima do método “Page_Load”, insira o código abaixo:

public string NomeLista {get; set;}

b. Salve e feche o arquivo.

c. Dê um duplo no arquivo VisualWP.cs para abrir a classe da WebPart.

d. Logo acima do método “CreateChildControls”, adicione o seguinte código:

string nomeLista = string.Empty;

[System.Web.UI.WebControls.WebParts.WebBrowsable(true),

System.Web.UI.WebControls.WebParts.WebDisplayName("Nome da Lista"),

System.Web.UI.WebControls.WebParts.WebDescription(""),

System.Web.UI.WebControls.WebParts.Personalizable(

System.Web.UI.WebControls.WebParts.PersonalizationScope.Shared),

System.ComponentModel.Category("Configurações"),

System.ComponentModel.DefaultValue("")

]

public string NomeLista

{

get { return nomeLista; }

set { nomeLista = value; }

}

e. Altere o método CreateChildControls para o seguinte código:

protected override void CreateChildControls()

{

//Carregando o UserControl pela WebPart

VisualWPUserControl userControl = (VisualWPUserControl)this.Page.LoadControl(_ascxPath);

userControl.NomeLista = NomeLista;

Controls.Add(userControl);

base.CreateChildControls();

}

Seu arquivo VisualWP.cs deve ficar parecido com o abaixo:

using System;

using System.ComponentModel;

using System.Runtime.InteropServices;

using System.Web;

using System.Web.UI;

using System.Web.UI.WebControls;

using System.Web.UI.WebControls.WebParts;

using Microsoft.SharePoint;

using Microsoft.SharePoint.WebControls;

namespace SharePoint2010.DEV.VisualWP

{

[ToolboxItemAttribute(false)]

public class VisualWP : WebPart

{

// Visual Studio might automatically update this path when you change the Visual Web Part project item.

private const string _ascxPath = @"~/_CONTROLTEMPLATES/SharePoint2010.DEV/VisualWP/VisualWPUserControl.ascx";

public VisualWP()

{

}

string nomeLista = string.Empty;

[System.Web.UI.WebControls.WebParts.WebBrowsable(true),

System.Web.UI.WebControls.WebParts.WebDisplayName("Nome da Lista"),

System.Web.UI.WebControls.WebParts.WebDescription(""),

System.Web.UI.WebControls.WebParts.Personalizable(

System.Web.UI.WebControls.WebParts.PersonalizationScope.Shared),

System.ComponentModel.Category("Configurações"),

System.ComponentModel.DefaultValue("")

]

public string NomeLista

{

get { return nomeLista; }

set { nomeLista = value; }

}

protected override void CreateChildControls()

{

//Carregando o UserControl pela WebPart

VisualWPUserControl userControl = (VisualWPUserControl)this.Page.LoadControl(_ascxPath);

userControl.NomeLista = NomeLista;

Controls.Add(userControl);

base.CreateChildControls();

}

protected override void RenderContents(HtmlTextWriter writer)

{

base.RenderContents(writer);

}

}

}

f. Salve o arquivo VisualWP.cs.

1.12. Inserindo programaticamente itens na lista de Comentários.

a. Abra o UserControl VisualWPUserControl.ascx.

b. Dê um duplo clique no botão Comentar (btnComentar).

NOTA: O Visual Studio vai gerar automaticamente o método “btnComentar_Click” que será acionado no evento “OnClick” do botão.

c. Insira o código abaixo no método criado no passo anterior:

NOTA: No código abaixo eu utilizo o Object Model do SharePoint para inserir programaticamente os itens do UserControl na minha lista do SharePoint, portanto deve ser importado o namespace Microsoft.SharePoint;

protected void btnComentar_Click(object sender, EventArgs e)

{

using (SPSite sitec = new SPSite(SPContext.Current.Web.Url))

{

using (SPWeb site = sitec.OpenWeb())

{

//Adicionando o item na lista

SPList Lista = site.Lists[NomeLista];

SPListItem item = Lista.AddItem();

item["Nome"] = txtNome.Text;

item["Comentario"] = txtComentario.Text;

item.Update();

//Redirecionando para a lista onde o item foi criado

Response.Redirect(String.Format("{0}/Lists/{1}", SPContext.Current.Web.Url, NomeLista));

}

}

}

NOTA: Vale a pena informar que nesse exemplo não exploramos nenhum dos recursos de validações de dados para manter integridade que são necessárias em nossas aplicações.

1.13. Realizando o Deploy

Nesse ponto o desenvolvimento da aplicação está concluído e podemos iniciar o deploy, antes disso, compile a aplicação (Ctrl+Shift+B) e resolva qualquer erro ou conflito que possa ocorrer.

a. Execute o Deploy via Visual Studio (Build/Deploy Solution).

NOTA: Repare que o Visual Studio executa os seguintes passos de forma automática:

1. Compila a aplicação.

2. Recycle no App Pool da aplicação.

3. Retract da Solution, caso exista no farm.

4. Adiciona Solution.

5. Deploy Solution.

6. Ativa Features.

b. Verificando se a Solution e as Features foram instaladas corretamente.

i. Acesse a “Central Administration” do SharePoint 2010.

ii. Clique no item “System Settings” do menu vertical da esquerda.

iii. Na seção “Farm Management”, clique em “Manage farm solutions”.

iv. Na página de “Solution Management” deve aparecer sua solution, como mostra a imagem abaixo:

v. No caso das features, feche a Central Administration e abra o site que escolheu fazer o deploy no passo 1.3.

vi. Com o site aberto, clique no item de menu “Site Actions”, depois em “Site Settings”.

vii. Na página “Site Settings”, na seção “Site Collection Administration” clique no item “Site collection features”.

viii. Nessa página deve aparecer a feature que criamos acima, conforme imagem abaixo.

1.14. Adicionando a Visual WebPart para o site.

a. Volte para a home do site.

b. Utilizando as Ribbons, clique no item “Page”, depois em “Edit Page” da página principal do site.

c. Com a página aberta em modo de edição, clique em “Add WebPart”.

d. Note que a Ribbons vai adicionar uma nova caixa com as propriedades da WebPart.

NOTA: Veja que a WebPart que adicionamos já veio com as propriedades que configuramos no passo 1.6.

e. Clique em Add.

f. Após o SharePoint ter adicionado a WebPart na página, clique selecionando a WebPart que acabou de ser adicionada e note que o Ribbons mudou, foi adicionado um novo item “Web Part Tools”.

g. Clique em “Options” nesse novo item do Ribbons e veja as novas opções disponíveis no Ribbons para WebParts.

h. Clique em “Web Part Properties”.

i. Na nova janela de propriedades que vai abrir, defina os seguintes campos:

Appearance

i. Title : Envie-nos seus comentários

Configurações

ii. Nome da Lista : Digite o nome de uma lista que você irá utilizar como lista dos comentários (ex: Comentarios)

IMPORTANTE: A lista informada no passo acima já deve existir no site atual da WebPart, lembrando que essa lista também deve conter os campos citados no passo 1.13.C.

j. Clique em OK.

k. Saia do modo de edição da página.

1.15. Finalizando e Testando

a. Para finalizar e testar sua WebPart, basta inserir informações nos campos apresentados e clicar no botão “Comentar”.

b. Você será redirecionado para a lista, verifique se o item foi inserido corretamente:

Lembrando que o foco desse artigo não é se profundar nas regras de negócio, facilmente um desenvolvedor consegue customizar esse exemplo com regras de negócio interessantes.

Conclusão

Nesse artigo exploramos de uma forma mais ampla o funcionamento das Visual WebParts no SharePoint, além de conseguirmos até apresentar uma boa experiência de navegação pelo produto, passando um pouco pelas Ribbons e pela nova Central Administration.