Uma introdução ao desenvolvedor do SharePoint. Laboratório prático

Transcrição

1 Uma introdução ao desenvolvedor do SharePoint Laboratório prático Manual do laboratório SPCHOL308 Como desenvolver a personalizações da faixa de opções e da interface do usuário do SharePoint 2010 C#

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 SPCHOL308 COMO DESENVOLVER A PERSONALIZAÇÕES DA FAIXA DE OPÇÕES E DA INTERFACE DO USUÁRIO DO SHAREPOINT 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 Como adicionar um botão personalizado à faixa de opções... 5 Tarefa 1 Exibir o site... 5 Tarefa 2 Criar um Projeto Vazio do SharePoint Tarefa 3 Adicionar um código de botão ao projeto... 8 Tarefa 4 Implantar a solução Exercício 2 Como acessar os Dados da Lista usando o JavaScript Client OM e exibindo-os em uma caixa de diálogo Tarefa 1 Criar um novo projeto e adicionar uma Web Part Tarefa 2 - Adicionar código de script para acessar e renderizar os dados da lista do SharePoint Tarefa 3 - Implantar e testar a Web Part Resumo do laboratório Página 1

4 SPCHOL308 Como desenvolver a personalizações da faixa de opções e da interface do usuário do SharePoint 2010 Tempo estimado para conclusão deste laboratório: 30 minutos O Visual Studio 2010 e o SharePoint Foundation 2010 são necessários para estes exercícios Eles estão instalados na máquina virtual usada nesse laboratório. Objetivo do laboratório O objetivo deste laboratório é aprender a modificar o novo menu Faixa de Opções do SharePoint e a interagir com o Client OM e o Dialog Framework. Estender a Faixa de Opções do SharePoint adicionando um novo botão. Criar uma Web Part que usa o código do lado do cliente por meio do novo Client OM que exibirá uma caixa de diálogo para que os usuários insiram dados usando o novo Dialog Framework. Recursos adicionais Este laboratório inclui os seguintes recursos adicionais: Este manual do laboratório Código-fonte SPCHOL308_Manual_CS.docx Completed\CS\Ex1 Completed\CS\Ex2 Este documento Código-fonte do laboratório concluído em C#. Recursos Resource\CS 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: Administrator Senha: pass@word1 Locais Este Laboratório prático contém diversos recursos em locais fixos. Por padrão, pressupõe-se que o diretório HOL de base é o diretório C:\Content Packs\Packs\SharePoint 2010 Developer Labs 1.0\Supporting Files\SPCHOL308. A pasta de trabalho padrão deste laboratório é \SPHOLS\SPCHOL308. Página 2

5 Pré-requisitos para o laboratório Navegue até o diretório HOL de base Supporting Files\SPCHOL308\Resourcese execute o script do PowerShell optimize.ps1: 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 fechamento da janela do PowerShell (isso pode demorar um pouco): 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 deste documento do Word para o Visual Studio só é possível para as seções que contêm o código formatado, por exemplo: Console.WriteLine("This is safe code!"); 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:: Página 3 Console.WriteLine( Este código NÃO é seguro! );

6 Trechos de código Você também usará trechos de código para inserir código durante o laboratório. Para usar o trecho de código necessá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 - Inserir Trecho Selecione um trecho de código na galeria Meus Trechos de Código. Página 4

7 Exercício 1 Como adicionar um botão personalizado à faixa de opções Neste exercício, estenderemos a faixa de opções adicionando nosso próprio botão personalizado que executa o código do servidor. Podemos usar essa abordagem para adicionar ou substituir botões, grupos, guias ou até mesmo a faixa toda. Usaremos uma solução do Visual Studio 2010 e vamos implantá-la no servidor local do SharePoint. O botão exibirá uma caixa de diálogo do JavaScript exibindo a mensagem Olá Mundo. Tarefa 1 Exibir o site Exibiremos o site antes de adicionar um botão à Faixa de Opções para que possamos saber o que a Faixa de Opções exibe como OOTB. 1. Abra o Internet Explorer e navegue até 2. Selecione a biblioteca Documentos Compartilhados no menu Documentos da seção de navegação esquerda (início rápido). Figura 4 - Documentos Compartilhados Página 5

8 3. Na guia Ferramentas de Biblioteca da Faixa de Opções exibida, selecione a guia Documentos. Figura 5 - Guia Documentos 4. Esta Faixa de Opções exibe o novo botão que está sendo criado neste exercício. Tarefa 2 Criar um Projeto Vazio do SharePoint 2010 Nesta tarefa, serão criados uma solução e o projeto. Ela conterá o resto do trabalho de desenvolvimento neste exercício. 1. Abra o Visual Studio 2010 por meio do Menu Iniciar Todos os Programas Microsoft Visual Studio 2010 Microsoft Visual Studio No menu, selecione Arquivo Novo Projeto. 3. Na caixa de diálogo Novo Projeto, expanda o menu esquerdo Modelos Instalados até Visual C# SharePoint 2010 e escolha o tipo de projeto Projeto Vazio do SharePoint na lista de tipos de projeto na seção central da tela. 4. Insira RibbonDemo na caixa de texto Nome. 5. Insira C:\SPHOLS\SPCHOL308\CS\Ex1 na caixa de texto Localização. 6. Clique em OK. Página 6

9 7. Uma caixa de diálogo SharePoint Customization Wizard será exibida. 8. Na caixa de texto Que site local você deseja usar para depuração?, digite 9. Para os botões de opções What is the trust level for this SharePoint solution?, escolha Deploy as a farm solution. Figura 6 - Assistente de personalização do SharePoint 10. Pressione Concluir para concluir o assistente de personalização. 11. O Visual Studio 2010 irá gerar pastas e arquivos de projeto necessários. Página 7

10 12. Agora o Gerenciador de Soluções deve ficar parecido com a imagem a seguir. Figura 7 - Gerenciador de Soluções do RibbonDemo Tarefa 3 Adicionar um código de botão ao projeto 1. Clique com o botão direito do mouse no nó do projeto RibbonDemo no Gerenciador de Soluções e escolha Adicionar Novo Item 2. Na caixa de diálogo Adicionar Novo Item, expanda o menu esquerdo Modelos Instalados até Visual C# SharePoint 2010 e escolha o tipo de item Empty Element na seção central da tela. Página 8

11 3. Deixe o Nome como EmptyElement1. Figura 8 - Adicionar Novo Item - Demonstração da Faixa de Opções Página 9

12 4. Clique em Adicionar para adicionar o elemento ao seu projeto. Figura 9 - Elements.xml 5. Exclua o conteúdo do arquivo Elements.xml. 6. Adicione o código a seguir ao arquivo Elements.xml. Você pode encontrar uma cópia desse arquivo na pasta Supporting Files\SPCHOL308\Resources\CS. <?xmlversion="1.0" encoding="utf-8"?> <Elementsxmlns=" <CustomAction Id="DemoHelloWorldButton" RegistrationId="101" RegistrationType="List" Location="CommandUI.Ribbon" Sequence="5" Title="Hello World"> <CommandUIExtension> <CommandUIDefinitions> <CommandUIDefinition Location="Ribbon.Documents.Manage.Controls._children"> <Button Id="Ribbon.Documents.New.Controls.DemoHelloWorldButton" Alt="Hello World Ribbon Button" Sequence="10" Command="Demo_HelloWorld" Image32by32="/_layouts/images/ribbondemo/demobutton.png" LabelText="Hello World Demo" TemplateAlias="o1"/> </CommandUIDefinition> </CommandUIDefinitions> Página 10

13 <CommandUIHandlers> <CommandUIHandler Command="Demo_HelloWorld" CommandAction="javascript:alert('Hello World!');" /> </CommandUIHandlers> </CommandUIExtension> </CustomAction> </Elements> Trecho de código: Meus trechos Xml spchol308_ex1_xml Figura 10 - Elements.xml atualizado 7. Observe a referência de Imagem, esta é a imagem que será exibida na Faixa de Opções, adicionaremos esta imagem em seguida. 8. Observe também o CommandScript, este é o JavaScript que será executado ao pressionar o botão que estamos adicionando à faixa de opções. Página 11

14 9. Adicione uma pasta à solução que mapeia para a pasta Images no diretório de layouts do SharePoint, onde podemos colocar nossa imagem de botão. Clique com o botão direito do mouse no nó do projeto RibbonDemo e escolha Adicionar SharePoint Images Mapped Folder. Figura 11 - Adicionar Pasta mapeada Página 12

15 10. A pasta Images é exibida com uma subpasta para o botão. Figura 12 - Pasta Imagens 11. Adicione o arquivo DemoButton.png clicando com o botão direito do mouse na nova pasta RibbonDemo e escolhendo Adicionar Item Existente 12. Quando a caixa de diálogo for exibida, navegue até C:\Content Packs\Packs\SharePoint 2010 Developer Labs 1.0\SUPPORTING FILES\SPCHOL308\Resources\ e selecione o arquivo DemoButton.png. Figura 13 - Imagem DemoButton Página 13

16 Tarefa 4 Implantar a solução 1. No Gerenciador de Soluções, clique com o botão direito do mouse em RibbonDemo e selecione Implantar. Figura 14 - Implantar Solução 2. A solução serão implantada no site do SharePoint. 3. Abra um navegador da Web e navegue até o site local do SharePoint: 4. Caso receba uma solicitação de autenticação, insira os seguintes detalhes: Nome de usuário: administrador Senha: pass@word1 Página 14

17 5. No painel de navegação à esquerda, clique no link Documentos Compartilhados para abrir a biblioteca Documentos Compartilhados. Figura 15 - Link Documentos compartilhados 6. Clique na guia Documentos na Faixa de Opções do SharePoint. Figura 16 - Guia Documentos 7. Você deverá ver o novo botão Hello World adicionado à Faixa de Opções do SharePoint. Figura 17 - Botão Hello World Página 15

18 8. Clique no botão Hello World Demo na Faixa de Opções para visualizar a caixa de diálogo JavaScript do Hello World. Figura 18 - Demonstração do Olá Mundo Nos últimos minutos, temos demonstrado como adicionar o novo botão personalizado e estender o botão do SharePoint. Exercício 2 Como acessar os Dados da Lista usando o JavaScript Client OM e exibindo-os em uma caixa de diálogo No SharePoint 2010, há uma série de modelos de objeto que podem ser usados por desenvolvedores para acessar o servidor. O Client OM é um modelo unificado que usa conceitos iguais ou semelhantes no servidor, por meio de serviços Web e serviços WCF, através de uma API (JavaScript) de cliente e REST. Isso abre caminho para aplicativos mais avançados simplificando muito o acesso a dados do SharePoint a partir de computadores de cliente e outros na infraestrutura. Neste exercício, usaremos o modelo de objeto do cliente EcmaScript para atualizar e ler dinamicamente os dados da lista. Também é mostrada a nova API de Caixa de Diálogo do script do cliente. Página 16

19 O modelo de objeto do lado do cliente JavaScript permite que os desenvolvedores do JavaScript acessem objetos, como Site, Web e List (e mais) do JavaScript do lado do cliente. Tarefa 1 Criar um novo projeto e adicionar uma Web Part Nesta tarefa, serão criados uma solução e o projeto. Ela conterá o resto do trabalho de desenvolvimento neste exercício. 1. Abra o Visual Studio 2010 no Menu Iniciar Programas Microsoft Visual Studio 2010 Microsoft Visual Studio No menu, selecione Arquivo Novo Projeto. 3. Na caixa de diálogo Novo Projeto, expanda o menu esquerdo Modelos Instalados até Visual C# SharePoint 2010 e escolha o tipo de projeto Visual Web Part na lista de tipos de projeto na seção central da tela. 4. Insira ScriptOMandDialog na caixa de texto Nome. 5. Insira C:\SPHOLS\SPCHOL308\CS\Ex2 na caixa de texto Localização. Figura 19 - Caixa de diálogo Novo Projeto 6. Clique em OK. Página 17

20 7. Uma caixa de diálogo SharePoint Customization Wizard será exibida. 8. Na caixa Que site local você deseja usar para depuração?, digite 9. Nos botões de opções What is the trust level for this SharePoint solution?, escolha Deploy as a farm solution. Figura 20 - Assistente de personalização do SharePoint 10. Pressione Concluir para concluir o assistente de personalização. Página 18

21 11. O Visual Studio criará a solução ScriptOMandDialog e adicionará os arquivos necessários. Figura 21 - Gerenciador de Soluções com o Projeto de Web Part visual 12. No Gerenciador de Soluções, clique duas vezes no arquivo VisualWebPart1.webpart. 13. Defina a propriedade Título como ScriptOMandDialog 14. Defina a propriedade Descrição como Descrição de ScriptOMandDialog Figura 22 - Arquivo webpart da Web Part visual 15. Salve e feche o arquivo. Tarefa 2 - Adicionar código de script para acessar e renderizar os dados da lista do SharePoint. 1. No Gerenciador de Soluções, clique duas vezes em VisualWebPart1UserControl.ascx. 2. Adicione o código de marcação a seguir no final do arquivo. <SharePoint:ScriptLinkID="ScriptLink1"runat="server"Name="sp.js"Localizable="fals e"loadafterui="true"/> <scriptlanguage="ecmascript"type="text/ecmascript"> </script> Trecho de código: Meus trechos HTML spchol308_ex2_scripttags Página 19

22 3. Adicione o código JavaScript a seguir ao bloco de Script. Você pode copiar e colar todos os códigos de bloco a seguir ou usar um trecho de código. Esse código declara variáveis importantes que nosso código usará mais tarde e adiciona a função Inicializar() a ser chamada depois de todos os objetos do cliente SharePoint serem carregados. /* SharePoint list names */ varprojectlistname = "Projects"; /* SharePoint list field names */ varprojectnamefield = "Title"; varprojectdescriptionfield = "Description"; /* List objects */ var projectslist; /* variable to hold list items from the projects list */ var projects; /* client context object - used to access SharePoint data */ var context; /* web (SPWeb) that our page is running on */ var web; /* variable to hold modaldialog to close later */ var modaldialog; /* used when creating a new project ListItem. */ var projectlistitem; var copyofaddprojectform; /* our startup method when the page loads */ _spbodyonloadfunctionnames.push("initialize()"); Trecho de código: Meus trechos de JScript spchol308_ex2_jscript Página 20

23 4. Nossa função Inicializar() recupera o objeto SharePoint ClientContext, carrega a lista de projetos e inicializa os projetos (itens de lista de projetos). /* Initialize useful variables and retrieve ClientContext */ function Initialize() { /* Retrieves the current ClientContext object */ context = SP.ClientContext.get_current(); web = context.get_web(); // Get references to the lists we will use projectslist = web.get_lists().getbytitle(projectlistname); var camlquery = new SP.CamlQuery(); camlquery.set_viewxml('<view><query/></view>'); } projects = projectslist.getitems(camlquery); context.load(projects, 'Include(Title, Description)'); context.executequeryasync(onlistsloaded, OnError); Página 21

24 5. O evento onlistsloaded() é chamado de forma assíncrona a partir da função Inicializar(). /* Event handler called loading the projects list This method dynamically renders an HTML table to display the list data */ function onlistsloaded() { // Get the list items for the contacts list var projecttable = document.getelementbyid("tblprojectlist"); // clear out the table while (projecttable.rows.length > 0) projecttable.deleterow(projecttable.rows.length - 1); var content; var cell; var tbo = document.createelement('tbody'); // Loop for each project var listitemenumerator = projects.getenumerator(); while (listitemenumerator.movenext()) { // For each project create a row in the table var newtr = document.createelement('tr'); var projectli = listitemenumerator.get_current(); // get_item() retrieves the listitem value var projectname = projectli.get_item(projectnamefield); var projectdesc = projectli.get_item(projectdescriptionfield); // add the cells for the row cell = document.createelement('td'); content = document.createtextnode(projectname); cell.appendchild(content); newtr.appendchild(cell); cell = document.createelement('td'); content = document.createtextnode(projectdesc); cell.appendchild(content); newtr.appendchild(cell); // Add the row to the table body tbo.appendchild(newtr); } // add the table body to the table projecttable.appendchild(tbo); } Página 22

25 6. A função ShowAddProject() encontra divaddprojectelement (que adicionaremos mais tarde) e o exibirá usando o método ModalDialog.showModalDialog(). /* Hide the modal dialog and display the updated UI */ function onprojectadded() { HideAddProject(); } /* Show a modaldialog with the contents of divaddproject */ function ShowAddProject() { var divaddproject = document.getelementbyid("divaddproject"); // showmodaldialog removes the element passed in from the DOM // so we save a copy and add it back later copyofaddprojectform = divaddproject.clonenode(true); divaddproject.style.display = "block"; var options = { html: divaddproject, width: 200, height: 350, dialogreturnvaluecallback: ReAddClonedForm }; modaldialog = SP.UI.ModalDialog.showModalDialog(options); } /* Close the modaldialog */ function HideAddProject() { modaldialog.close(); Initialize(); } function ReAddClonedForm() { document.body.appendchild(copyofaddprojectform); } 7. A função AddProject() cria um novo item de lista na Lista de Projetos. /* Called from the Add Project modal dialog Creates a list item in the Project list */ function AddProject() { var lici1 = new SP.ListItemCreationInformation(); projectlistitem = projectslist.additem(lici1); projectlistitem.set_item(projectnamefield, gettbvalue("txtprojectname")); projectlistitem.set_item(projectdescriptionfield, gettbvalue("txtdescription")); projectlistitem.update(); context.load(projectlistitem); // Execute the query to create the project list // onprojectadded is our call back method called when the call to the server has completed context.executequeryaysnc(onprojectadded, OnError); } Página 23

26 8. Funções do auxiliar/manipulador de erros /* Error handler */ function OnError(sender, args) { var spnerror = document.getelementbyid("spnerror"); spnerror.innerhtml = args.get_message(); } /* Helper function - shortcut to the value property of a textbox */ function gettbvalue(elid) { var el = document.getelementbyid(elid); return el.value; } 9. Adicione o código HTML a seguir abaixo da tag bloco de scripts final (</script>). tblprojectlist é uma tabela vazia à qual nosso script adiciona dinamicamente linhas/colunas para cada projeto. Também há um link para invocar ShowAddProject(), que iniciará uma caixa de diálogo modal. A marcação em divaddproject será exibida em uma caixa de diálogo modal que permite ao usuário inserir dados para criar um novo projeto. <divstyle="font-weight: bold">project List</div> <br /> <tableid="tblprojectlist" style="border: solid 1px silver"> </table> <br /> <ahref="javascript:showaddproject()">add a project</a> <br /> <divid="divaddproject" style="display: none; padding: 5px"> <b>project Information</b><br /><br /> Name <br /> <inputtype="text" id="txtprojectname" /><br /> Description<br /> <inputtype="text" id="txtdescription" /><br /> <spanid="spnerror" style="color: Red" /><br /> <inputtype="button" value="add New Project" onclick="addproject()" /> </div> Trecho de código: Meus trechos de HTML spchol308_ex2_html Página 24

27 Tarefa 3 - Implantar e testar a Web Part 1. Clique com o botão direito do mouse no nó de projeto ScriptOMandDialog e selecione Implantar. Figura 23 - Implantar 2. Quando a implantação estiver completa (você pode ver o andamento na janela de Saída e visualizar o status atualizado na barra de status), adicione o Web Part a uma página Web Part: 3. Abra o Internet Explorer e navegue até 4. Clique no ícone Editar para exibir a faixa de opções Editar. Figura 24 Ícone Editar Página 25

28 5. Selecione Inserir na guia Ferramentas de Edição na faixa de opções Editar Figura 24 - Guia Formatar Texto 6. Clique no botão Web Part na faixa de opções Inserir 7. Escolha Personalizado na coluna Categorias 8. Escolha ScriptOMandDialog na coluna Web Parts Figura 25 - Inserir Web Part Página 26

29 9. Clique no botão Adicionar no canto inferior direito da área Adicionar Web Part Figura 26 - Web Part ScriptOMandDialog 10. Clique em Página na faixa de opções. 11. Clique na seta para baixo no botão Salvar e Fechar na faixa de opções e selecione Parar a Edição. 12. Clique em Sim quando for exibida a caixa de diálogo Salvar Alterações. Agora a Web Part ScriptOMandDialog deverá ser exibida na página. Página 27

30 13. Clique no link Adicionar um projeto (diretamente na nova Web Part), preencha os campos Nome e Descrição como desejar e clique no botão Add New Project. Figura de Exemplo 27 - Adicionar um projeto 14. Você deverá ver o novo projeto com os detalhes especificados na Lista de Projetos. Nos últimos minutos, você demonstrou como usar o Modelo de Objeto de Cliente JavaScript e criar e implantar um Web Part visual. Página 28

31 Resumo do laboratório Neste laboratório, você realizou os seguintes exercícios. Criou o novo projeto de tipo Vazio do SharePoint 2010 Adicionou um arquivo Element.xml a um projeto do SharePoint que contém uma Ação Personalizada para estender o menu Faixa de Opções Adicionou uma pasta mapeada Images do SharePoint que mapeia para a pasta Images no diretório do SharePoint 2010 Implantou o tipo de projeto Vazio que contém um recurso para seu site do SharePoint Criou o novo tipo de projeto do SharePoint 2011 de um Web Part visual Adicionou script do cliente à Web Part para renderizar os dados da lista Adicionou o script do cliente e HTML à Web Part para usar o Dialog Framework Implantou uma solução de Web Part visual do SharePoint Página 29