Como desenvolver Web Parts avançadas para o SharePoint 2010 com o Visual Studio 2010

Transcrição

1 Como desenvolver Web Parts avançadas para o SharePoint 2010 com o Visual Studio 2010 Laboratório prático Manual do laboratório SPCHOL301 SPCHOL301 Web Parts avançadas VB

2 Este documento é fornecido "no estado em que se encontra". As informações e exibições expressas neste documento, incluindo URLs e outras referências a sites da Internet, podem ser alteradas sem aviso prévio. Você assume o risco de usá-lo. Este documento não oferece a você quaisquer direitos legais sobre propriedade intelectual em qualquer produto da Microsoft. Este documento pode ser copiado e usado para fins internos e de referência Microsoft. Todos os direitos reservados.

3 Sumário Objetivo do laboratório... 2 Recursos adicionais... 2 Guia de Introdução... 2 Como fazer logon na máquina virtual... 2 Locais... 2 Pré-requisitos para o laboratório... 3 Como copiar os exemplos de código do documento do Word... 3 Trechos de código... 4 Exercício 1 Construir uma Web Part visual usando controles SharePoint... 5 Tarefa 1 Criar um projeto do SharePoint do tipo Web Part visual... 5 Tarefa 2 Criar uma Web Part de listagem de projetos... 7 Tarefa 3 Implantar e testar... 8 Exercício 2 Web Part de exibição de lista XSLT Tarefa 1 Abrir o SharePoint Designer Tarefa 2 Adicionar Web Part de exibição de lista XSLT Tarefa 3 Modificar a Web Part de exibição de lista XSLT Tarefa 4 Implantar e testar Resumo do laboratório Página 1

4 Como desenvolver Web Parts avançadas para o SharePoint 2010 com o Visual Studio 2010 Tempo estimado para conclusão deste laboratório: 30 minutos Objetivo do laboratório Uma das principais tecnologias ASP.NET usadas pelo SharePoint para apresentar informações dinâmicas aos usuários é a Web Part. Web Parts são as personalizações mais comuns criadas para SharePoint. Uma Web Part é um componente reutilizável que existe em uma Página de Web Part e pode apresentar qualquer tipo de informação com base na web. O objetivo deste laboratório é aprender sobre algumas das funcionalidades mais avançadas das Web Parts, específicas ao sistema do SharePoint. Criar uma Web Part básica do SharePoint que usa Controles do SharePoint para exibir informações do site do SharePoint. Criar e personalizar uma XsltListViewWebPart no SharePoint Designer Recursos adicionais Este laboratório inclui os seguintes recursos adicionais: Este manual do laboratório SPCHOL301_Manual_VB.docx Este documento Código-fonte Completed\VB\Ex1 Código-fonte completo do laboratório. Recursos Resources\VB Diversos recursos usados em todo este laboratório. Guia de Introdução Como fazer logon na máquina virtual Faça logon na máquina virtual como o seguinte usuário: Nome de usuário:administrador Senha: pass@word1 Locais Este Laboratório prático contém diversos recursos em locais fixos. Por padrão, supõe-se que o diretório HOL base seja C:\Content Packs\Packs\SharePoint 2010 Developer Labs 1.0\SUPPORTING FILES\\SPCHOL301\Resources. A pasta de trabalho padrão para este laboratório é C:\SPHOLS\SPCHOL301. Página 2

5 Pré-requisitos para o laboratório Navegue até o diretório HOL base Supporting Files\SPCHOL301\Resources e execute o script do PowerShell optimize.ps1 (isso pode demorar alguns minutos): 1. Clique com o botão direito do mouse em optimize.ps1 e selecione Executar com o PowerShell: Figura 1 - Executar o script do PowerShell 2. Isso abrirá uma janela do PowerShell para executar o script. Aguarde até a conclusão do script do PowerShell e o fechamento da janela do PowerShell: Figura 2 - Janela do PowerShell executando o script Como copiar os exemplos de código do documento do Word Copiar e colar o código desse documento do Word para o Visual Studio é seguro apenas para as seções de código formatado, por exemplo: Console.WriteLine("Este é um código seguro!") Página 3

6 O código que não estiver nessas seções poderá conter Unicode ou outros caracteres invisíveis que não são códigos XML ou C#/VB válidos, por exemplo: Console.WriteLine( Este código NÃO é seguro!! ) Trechos de código Também é possível usar os Trechos de código para inserir o código apropriado no laboratório. Para usar o trecho de código necessário para este laboratório: Clique com o botão direito do mouse no arquivo de código no qual você deseja inserir o trecho de código. Selecione Inserir Trecho: Figura 3 - Menu de contexto do código do Visual Studio. Selecione os trechos de código da galeria Meus Trechos de Código. Página 4

7 Exercício 1 Construir uma Web Part visual usando controles SharePoint Duração do exercício: 15 minutos Visão geral do exercício Este exemplo ilustra como criar uma Web Part visual e como usar os controles do SharePoint no Visual Studio Tarefa 1 Criar um projeto do SharePoint do tipo Web Part visual Nesta tarefa, você criará uma solução de Web Part visual e usará os controles de usuário do SharePoint. 1. Abra o Visual Studio 2010 em Menu Iniciar Todos os Programas Microsoft Visual Studio 2010 Microsoft Visual Studio No menu, selecione Arquivo Novo Projeto. 3. Selecione o modelo de projeto Visual Basic SharePoint 2010 Web Part Visual. 4. Na caixa de texto Nome, insira ProjectsListWebPart. 5. Na caixa de texto Localização, insira C:\SPHOLS\SPCHOL301\VB\Ex1. Figura 4 - Caixa de diálogo Novo Projeto Página 5

8 6. Pressione OK para criar o projeto. 7. Uma caixa de diálogo do SharePoint Customization Wizard será exibida. 8. Na caixa What local site do you want to use for debugging?, digite 9. Nos botões de opção What is the trust level for this SharePoint solution?, escolha Deploy as a farm solution. Figura 5 - Caixa de diálogo SharePoint Customization Wizard 10. Pressione Concluir para concluir o assistente de personalização. 11. O Visual Studio adicionará os arquivos necessários. Página 6

9 Tarefa 2 Criar uma Web Part de listagem de projetos 1. No Gerenciador de Soluções, clique duas vezes em VisualWebPart1.webpart. 2. Mude a propriedade Título no arquivo VisualWebPart1.webpart para Projects List Web Part. Figura 6 - VisualWebPart1.webpart após a alteração no título 3. No Gerenciador de Soluções, clique duas vezes em VisualWebPart1. 4. Adicione o seguinte código ao final de VisualWebPart1UserControl.ascx. Este código adiciona um controle ListViewByQuery do SharePoint, um controle Label de asp e um controle DateTime do SharePoint. O mesmo pode ser conseguido arrastando o controle da Caixa de ferramentas para as telas dos arquivos VisualWebPart1UserControl.ascx. Verifique se as IDs correspondem àquelas no código abaixo. <SharePoint:ListViewByQuery runat="server" ID="ProjectsListView" /> <br /> <asp:label ID="Label1" runat="server" Text="Items due by:" /> <SharePoint:DateTimeControl ID="DueDate" AutoPostBack="true" OnDateChanged="OnDate_Changed" DateOnly="true" runat="server"> </SharePoint:DateTimeControl> Trecho de código: Meus Trechos de HTML spchol301_ex1_usercontrol 5. No Gerenciador de Soluções, clique com o botão direito do mouse em VisualWebPart1UserControl.ascx e selecione Exibir Código. 6. Adicione as seguintes instruções de importações. Imports Microsoft.SharePoint Imports Microsoft.SharePoint.Utilities Imports System.Web Trecho de código: Meus Trechos de Código spchol301_ex1_namespaces Página 7

10 7. Adicione o seguinte código ao corpo do método Page_Load. Dim duedate As DateTime = DateTime.Now If Not String.IsNullOrEmpty(Request.QueryString("date")) Then duedate = DateTime.Parse(Request.QueryString("date")) End If Me.DueDate.SelectedDate = duedate Dim home As SPWeb = SPContext.Current.Web ProjectsListView.List = home.lists("projects") Dim query As New SPQuery(ProjectsListView.List.DefaultView) query.viewfields = _ "<FieldRef Name=""Title"" /><FieldRef Name=""Due_x0020_Date"" />" query.query = String.Format _ ("<Where><Leq><FieldRef Name=""Due_x0020_Date"" /><Value Type=""DateTime"">{0}</Value></Leq></Where>", duedate.tostring("s")) ProjectsListView.DisableFilter = True ProjectsListView.DisableSort = True ProjectsListView.Query = query Trecho de código: Meus Trechos de Código spchol301_ex1_pageload 8. Adicione o seguinte código após o método Page_Load. Protected Sub OnDate_Changed(ByVal sender As Object, ByVal e As EventArgs) SPUtility.Redirect(SPContext.Current.ListItem.Name _, SPRedirectFlags.Default _, HttpContext.Current _, String.Format("date={0}", DueDate.SelectedDate.ToString("d"))) End Sub Trecho de código: Meus Trechos de Código spchol301_ex1_ondatechanged Tarefa 3 Implantar e testar 1. Você está pronto para implantar a Web Part. Clique com o botão direito do mouse em Projeto no Gerenciador de Soluções. Selecione Implantar. Página 8

11 2. Se você exibir a janela Saída, verá que a implantação teve êxito. Figura 7 - Compilar a janela de saída 3. Abra um navegador da web em Agora, você adicionará a Web Part à página inicial. 4. Clique no ícone Editar na faixa de opções. Figura 8 - Ícone Editar na página de aterrissagem Página 9

12 5. Clique na guia Inserir em Ferramentas de Edição na Faixa de Opções Figura 9 - Guia Inserir na faixa de opções de edição 6. Clique no botão Web Part. Em Categorias, selecione Custom. Projects List Web Part deve aparecer na lista de Web Parts. Coloque seu cursor na área da página onde deseja exibir a Web Part. Precisa ser uma zona que aceita Web Parts. Nesse caso, coloque seu cursor na zona abaixo da Web Part de Boas-Vindas e antes do controle de Documentos Compartilhados e selecione Adicionar no lado superior direito da página Figura 10 - Formulário de inserção de Webpart Página 10

13 Clique no botão Salvar e Fechar na faixa de opções. Selecione Sim se a caixa de diálogo Salvar alterações for exibida. Figura 11 - Faixa de opções de edição destacando o botão Parar a Edição Página 11

14 7. Agora, você tem seus novos projetos de listagem de Web Parts na home page. Figura 12 - Web Part adicionada a home page Nos últimos minutos você demonstrou a compilação de uma Web Part visual com os controles SharePoint. Você pode fechar seu navegador após revisar as alterações. Página 12

15 Exercício 2 Web Part de exibição de lista XSLT A Web Part de exibição de lista XSLT é uma nova Web Part no SharePoint Foundation Essa web é usada no lugar da Web Part de exibição de dados no Windows SharePoint Services v3.0 (A Web Part de exibição de dados ainda está disponível no SharePoint Foundation 2010). A Web Part de exibição de lista XSLT é muito fácil de criar no SharePoint Designer Para este exercício, você criará uma Web Part de exibição de lista XSLT no SharePoint Designer 2010 que mostrará uma lista de funcionários na Home Page da Contoso Intranet. A lista de funcionários será obtida da lista Funcionários que existe no site do Contoso. A Web Part será criada completamente no SharePoint Designer Isso nos dará uma compreensão da marcação criada pela Web Part de exibição de lista XSLT. Tarefa 1 Abrir o SharePoint Designer 1. Abra o SharePoint Designer 2010 no menu Iniciar Todos os Programas SharePoint Microsoft SharePoint Designer Clique no botão Abrir Site. Na janela da caixa de diálogo Abrir Site, digite na caixa de texto Nome do Site. Figura 13 - Menu do site SharePoint Designer 2010 Página 13

16 Figura 14 - Janela da caixa de diálogo Abrir Site 3. Caso receba uma solicitação de autenticação, insira os seguintes detalhes: Nome de usuário: administrador Senha: pass@word1 Página 14

17 4. No painel de navegação esquerdo do Site do SharePoint, selecione Páginas do Site e Página Inicial.aspx. Figura 15 - Páginas de Site - Home Page 5. No menu Faixa de Opções, selecione Editar Arquivo Editar Arquivo no Modo Avançado. Ignore quaisquer erros que apareçam nessa tela, que abre na guia Procurar do painel Designer. Você poderá continuar rapidamente. Figura 16 - Botão Editar Página no Modo Avançado na faixa de opções Página 15

18 Tarefa 2 Adicionar Web Part de exibição de lista XSLT 1. Clique na guia Código na parte inferior do painel de designer para mostrar a exibição Código. Figura 17 - Guia Exibição do código Página 16

19 2. Na exibição Código, role até a parte inferior da página e coloque seu cursor antes da marca de fim </ContentTemplate> (logo após a marca de fechamento WebPartPages:WebPartZone) Figura 18 - Como selecionar o primeiro div na zona de Web Part inferior 3. Selecione a guia Inserir na faixa de opções. 4. Clique no item suspenso Exibição de Dados. Figura 19 - Botão Exibição de dados destacado 5. Selecione a lista Funcionários. 6. O SharePoint designer adicionará o novo XsltListViewWebPart ao HomePage.aspx. Página 17

20 7. Clique no ícone Salvar na parte superior da página. Figura 20 - Botão Salvar destacado na faixa de opções 8. Se receber uma solicitação de confirmação, clique em Sim. 9. Abra um navegador da web em Ignore quaisquer avisos, se aparecer algum. 11. Você deverá ver o novo XsltListViewWebPart. Tarefa 3 Modificar a Web Part de exibição de lista XSLT 1. Volte ao SharePoint Designer Agora, você fará algumas modificações ao XsltListViewWebPart. 2. A coluna Fullname da lista Funcionários precisa se destacar. 3. Na Exibição do Designer, selecione a célula da tabela que contém a palavra Fullname. Figura 21 - Célula da tabela Fullname Página 18

21 4. Usando a janela Aplicar Estilos na parte inferior direita (se a janela Aplicar Estilos não estiver visível vá até a guia Exibição e selecione Aplicar Estilos sob o botão Painéis de Tarefas), role a tela até ms-bodyareaagemargin e selecione o estilo CSS a ser aplicado. Clique com o botão direito do mouse em Aplicar Estilo. Figura 22 - Aplicar Estilo 5. Na exibição Código do Designer, role a tela até Limite de Linhas e mude o valor de 30 para 5. Figura 22 - Alteração do Limite de linhas Página 19

22 6. Na exibição do código do Designer, role até WebPartPages:XsltListViewWebPart e adicione a propriedade ChromeType e escolha TitleAndBorder como o tipo de cromado Figura 23 - Adição da propriedade ChromeType 7. Clique no ícone Salvar na parte superior da página. Figura 23 - Botão Salvar destacado na faixa de opções Tarefa 4 Implantar e testar 1. Abra um navegador da web em Você deverá ver a XsltListViewWebPart modificada listando apenas 5 funcionários por página. Figura 24 - XsltListViewWebPart modificada Página 20

23 Resumo do laboratório Neste laboratório, você realizou os seguintes exercícios. Criou uma Web Part visual usando o Visual Studio Usou um Controle SharePoint da caixa de ferramentas. Usou o controle ListViewByQuery do SharePoint. Usou a implantação integrada no Visual Studio 2010 para implantar o projeto Web Part visual do SharePoint. Usou o SharePoint Designer para criar uma XsltListViewWebPart. Personalizou a XsltListViewWebPart. Manipulou um site do SharePoint para hospedar uma Web Part. Neste laboratório, você aprendeu como criar uma Web Part visual do SharePoint desde o início. Aprendeu como usar os controles da Caixa de ferramentas e os controles do SharePoint como o ListViewByQuery e implantou a solução da Web Part. Realizou ações na interface da web do SharePoint como a adição de uma Web Part a uma página existente e a modificação dessa Web Part adequadamente. Também usou a XsltListViewWebPart, e a personalizou usando o SharePoint Designer. Página 21