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

(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

(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.

(3)

Sumário

SPCHOL308 – COMO DESENVOLVER A PERSONALIZAÇÕES DA FAIXA DE OPÇÕES E DA INTERFACE

DO USUÁRIO DO SHAREPOINT 2010... 2

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 2010 ... 6

Tarefa 3 – Adicionar um código de botão ao projeto ... 8

Tarefa 4 – Implantar a solução ... 14

Exercício 2 – Como acessar os Dados da Lista usando o JavaScript Client OM e exibindo-os em uma caixa de diálogo ... 16

Tarefa 1 – Criar um novo projeto e adicionar uma Web Part ... 17

Tarefa 2 - Adicionar código de script para acessar e renderizar os dados da lista do SharePoint. ... 19

Tarefa 3 - Implantar e testar a Web Part ... 25

(4)

Página 2

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

SPCHOL308_Manual_CS.docx Este documento

Código-fonte Completed\CS\Ex1 Completed\CS\Ex2

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.

(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

(6)

Página 4

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

(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é http://intranet.contoso.com

2. Selecione a biblioteca Documentos Compartilhados no menu Documentos da seção de navegação esquerda (início rápido).

(8)

Página 6

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 2010.

2. 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.

(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

http://intranet.contoso.com

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.

(10)

Página 8

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é

(11)

3. Deixe o Nome como EmptyElement1.

(12)

Página 10

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="http://schemas.microsoft.com/sharepoint/"> <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>

(13)

<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.

(14)

Página 12

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

(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.

(16)

Página 14

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: http://intranet.contoso.com

4. Caso receba uma solicitação de autenticação, insira os seguintes detalhes:

Nome de usuário: administrador Senha: pass@word1

(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

(18)

Página 16

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.

(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 2010.

2. 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.

(20)

Página 18

7. Uma caixa de diálogo SharePoint Customization Wizard será exibida.

8. Na caixa Que site local você deseja usar para depuração?, digite http://intranet.contoso.com 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

(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.

(22)

Página 20

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()");

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

(24)

Página 22

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

(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

(26)

Página 24

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>

(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é http://intranet.contoso.com

(28)

Página 26

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

(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.

(30)

Página 28

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.

(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