Uma introdução ao desenvolvedor do SharePoint Laboratório prático Manual do laboratório SPCHOL306 Como usar o Silverlight com o Modelo de Objeto Cliente C#
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. 2010 Microsoft. Todos os direitos reservados.
Sumário SPCHOL306 COMO USAR O SILVERLIGHT COM O MODELO DE OBJETO CLIENTE... 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 Criar um aplicativo do Silverlight para o Modelo de Objeto Cliente do SharePoint... 5 Tarefa 1 Criar um projeto de aplicativo do Silverlight... 5 Tarefa 2 Escrever um código para acessar e processar Dados de lista do SharePoint... 8 Tarefa 3 Implantar e testar usando a Web Part do SharePoint Silverlight... 12 Exercício 2 Como criar um gráfico usando o Modelo de Objeto do SharePoint e os controles de geração de gráfico do Silverlight... 14 Tarefa 1 Criar um projeto de aplicativo do Silverlight... 14 Tarefa 2 Escrever o código para acessar os Dados da lista do SharePoint do funcionário e exibi-los em um controle de gráfico do Silverlight... 18 Tarefa 3 Implantar e testar usando a Web Part de geração de gráficos do SharePoint Silverlight... 22 Resumo do laboratório... 24 Página 1
SPCHOL306 Como usar o Silverlight com o Modelo de Objeto Cliente Tempo estimado para conclusão deste laboratório: 30 minutos É necessário ter o Visual Studio 2010, o SharePoint Foundation 2010 e o Silverlight 3 Toolkit 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 sobre como criar e hospedar aplicativos do Silverlight no SharePoint 2010 e como usar o Modelo de Objeto Cliente do SharePoint para acessar dados do SharePoint a partir do Silverlight. Criar um aplicativo básico do Silverlight que exibe uma lista do SharePoint dentro de uma grade de dados e implantar o aplicativo do Silverlight no SharePoint. Criar um aplicativo do Silverlight que exibe dados da lista do SharePoint em um gráfico usando os controles de geração de gráficos do Silverlight. Recursos adicionais Este laboratório inclui os seguintes recursos adicionais: Este manual do laboratório Código-fonte SPCHOL306_Manual_CS.docx \Supporting Files\SPCHOL306\Completed\CS\Ex1\ \Supporting Files\SPCHOL306\Completed\CS\Ex2\ Este documento Código-fonte do laboratório concluído em C#. Recursos \Supporting Files\SPCHOL306\Resources\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: 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\SPCHOL306\Resources. A pasta de trabalho padrão para este laboratório é C:\SPHOLS\SPCHOL306. Página 2
Pré-requisitos para o laboratório Navegue até o diretório HOL base Supporting Files\SPCHOL306\ Resources e 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 desse documento do Word para o Visual Studio é seguro apenas para as seções de código formatado, por exemplo: Console.WriteLine("Este código é seguro!"); 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! );
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
Exercício 1 Criar um aplicativo do Silverlight para o Modelo de Objeto Cliente do SharePoint Neste exercício, criaremos um aplicativo básico do Silverlight que exibe uma lista do SharePoint dentro de uma grade de dados. Os dados da lista foram recuperados do servidor. Portanto, eles estão disponíveis no Silverlight usando o Modelo de Objeto Cliente do SharePoint. Usaremos uma solução do Visual Studio 2010 e vamos implantá-la no servidor local do SharePoint. Tarefa 1 Criar um projeto de aplicativo do Silverlight Começaremos criando um projeto de aplicativo Silverlight padrão. 1. Abra o Visual Studio 2010 em 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 para Outros Tipos de Projeto Soluções do Visual Studio Solução em Branco. 4. Selecione.NET Framework 3.5. 5. Nomeie a solução como Começar. 6. Insira C:\SPHOLS\SPCHOL306\CS\Ex1\ na caixa de texto Localização. Figura 4 - Caixa de diálogo Novo Projeto 7. Pressione OK para continuar. Página 5
8. No menu, selecione Arquivo Adicionar Novo Projeto. 9. Na caixa de diálogo Novo Projeto, expanda o menu esquerdo Modelos Instalados até Visual C# Silverlight e escolha o tipo de projeto Aplicativo de Silverlight na lista de tipos de projeto na seção central da tela. 10. Selecione.NET Framework 3.5. 11. Nomeie o projeto SPSilverlightExample. 12. Não mude a localização. Figura 5 - Caixa de diálogo Adicionar Novo Projeto 13. Pressione OK para continuar. Figura 6 - Caixa de diálogo Adicionar Aplicativo do Silverlight 14. Pressione OK para criar o projeto. Página 6
15. No projeto SPSilverlightExample, adicionaremos os assemblies de referência ao Modelo de Objeto Cliente do SharePoint Silverlight. Clique com o botão direito do mouse em Referências no projeto SPSilverlightExample e selecione Adicionar Referências. 16. Navegue até a pasta C:\Arquivos de Programas\Common Files\Microsoft Shared\Web Server Extensions\14\TEMPLATE\LAYOUTS\ClientBin. 17. Selecione Microsoft.SharePoint.ClientSilverlight.dll e Microsoft.SharePoint.Client.Silverlight.Runtime.dll (mantenha a tecla CTRL pressionada para selecionar vários arquivos) 18. Pressione OK para adicionar as referências de dll selecionadas. Figura 7 - Adicionar Referências Página 7
Tarefa 2 Escrever um código para acessar e processar Dados de lista do SharePoint 1. No Visual Studio, abra a Caixa de ferramentas e expanda Controles do Silverlight. 2. Arraste um controle DataGrid até a Grade existente no Designer do Silverlight, Page.xaml. Figura 8 - Caixa de ferramentas de controle do Silverlight Página 8
3. Expanda o DataGrid até que ocupe toda a página por meio das propriedades da grade e definindo sua propriedade Width e Height como Auto, e suas propriedades HorizontalAlignment e VerticalAlignment como Top e sua Margin como 0. Figura 9 - Propriedades do DataGrid 4. Além disso, marque AutoGenerateColumns (ou defina seu valor como true no XAML). Figura 10 - Propriedade de geração automática de colunas 5. Abra o App.xaml.cs e adicione as seguintes instruções de uso na parte superior do arquivo: using Microsoft.SharePoint.Client; using System.Threading; Trecho de código: Meus Trechos de Código spchol306_ex1_app_namespaces 6. Adicione o seguinte código ao início do método Application_Startup. ApplicationContext.Init(e.InitParams, SynchronizationContext.Current); Trecho de código: Meus Trechos de Código spchol306_ex1_application_startup Página 9
7. Abra o MainPage.xaml.cs e adicione a seguinte instrução de uso na parte superior do arquivo: using Microsoft.SharePoint.Client; Trecho de código: Meus Trechos de Código spchol306_ex1_page_namespaces 8. Adicione a seguinte classe antes da classe MainPage: public class Project { public string Title { get; set; } public DateTime DueDate { get; set; } public string Description { get; set; } } Trecho de código: Meus Trechos de Código spchol306_ex1_classes 9. Adicione as seguintes variáveis à classe MainPage: private ListItemCollection _projects; Trecho de código: Meus Trechos de Código spchol306_ex1_property 10. Adicione o seguinte código ao construtor Page abaixo da chamada para InitializeComponent: ClientContext context = new ClientContext(ApplicationContext.Current.Url); context.load(context.web); List Projects = context.web.lists.getbytitle("projects"); context.load(projects); CamlQuery query = new Microsoft.SharePoint.Client.CamlQuery(); string camlqueryxml = "<View><Query><Where><Gt>" + "<FieldRef Name='Due_x0020_Date' />" + "<Value Type='DateTime'>2008-01-1T00:00:00Z</Value>" + "</Gt></Where></Query><ViewFields>" + "<FieldRef Name=\"Title\" /><FieldRef Name=\"Description\" />" + "<FieldRef Name=\"Due_x0020_Date\" />" + "</ViewFields></View>"; query.viewxml = camlqueryxml; _projects = Projects.GetItems(query); context.load(_projects); context.executequeryasync(new ClientRequestSucceededEventHandler(OnRequestSucceeded), null); Trecho de código: Meus Trechos de Código spchol306_ex1_initializecomponent Página 10
11. Adicione o seguinte código após o construtor: private void OnRequestSucceeded(Object sender, ClientRequestSucceededEventArgs args) { // this is not called on the UI thread Dispatcher.BeginInvoke(BindData); } private void BindData() { List<Project> projects = new List<Project>(); foreach (ListItem li in _projects) { projects.add(new Project() { Title = li["title"].tostring(), DueDate = Convert.ToDateTime(li["Due_x0020_Date"].ToString()), Description = li["description"].tostring() }); } datagrid1.itemssource = projects; // must be on UI thread } Trecho de código: Meus Trechos de Código spchol306_ex1_methods Esse código inicializa o contexto do modelo de objeto cliente do SharePoint Silverlight (ClientContext). Em seguida, obtém uma referência à lista Projetos e executa um consulta simples de CAML com base na lista a fim de obter todos os projetos com uma data de vencimento superior a 1/1/2008. Os resultados são convertidos em uma lista de Projetos e associados ao controle de DataGrid do Silverlight. Página 11
Tarefa 3 Implantar e testar usando a Web Part do SharePoint Silverlight Para implantar a solução no SharePoint, o arquivo.xap resultante criado pelo projeto do Silverlight precisa estar na pasta C:\Arquivos de Programas\Common Files\Microsoft Shared\Web Server Extensions\14\TEMPLATE\LAYOUTS\ClientBin. 1. Clique com o botão direito do mouse no projeto SPSilverlightExample, selecione Propriedades e a guia Compilar. 2. Mude o caminho de saída para C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\14\TEMPLATE\LAYOUTS\ClientBin. Figura 11 - Propriedades do projeto 3. Compile a solução. O arquivo.xap foi copiado no diretório do SharePoint solicitado e você está pronto para adicionar a web part do Silverlight ao site do SharePoint. 4. Abra o Internet Explorer e navegue até http://intranet.contoso.com. 5. Selecione o ícone Editar na parte superior da página. 6. Selecione a guia Inserir e clique em Web Part. 7. Na lista Categorias, selecione Mídia e Conteúdo, escolha Web Part do Silverlight na lista de Web Parts e clique em Adicionar. Página 12
8. Na caixa de diálogo Web Part do Silverlight que aparece, insira /_layouts/clientbin/spsilverlightexample.xap como o URL. Figura 12 - Caixa de diálogo Url da Web Part do Silverlight 9. Clique em OK para salvar a Web Part do Silverlight. 10. Saia do modo de edição. 11. A Web Part final parecerá com o seguinte na página do SharePoint: Figura 13 - Web Part concluída do Silverlight Neste exercício, você criou um aplicativo básico do Silverlight que exibe uma lista do SharePoint dentro de uma grade de dados. Os dados da lista foram recuperados do servidor. Portanto, eles estão disponíveis no Silverlight usando o Modelo de Objeto Cliente do SharePoint. Página 13
Exercício 2 Como criar um gráfico usando o Modelo de Objeto do SharePoint e os controles de geração de gráfico do Silverlight No exercício dois usaremos novamente o Modelo de Objeto do SharePoint para acessar os dados da lista do SharePoint, mas, desta vez, usaremos o LINQ e os controles de geração de gráfico do Silverlight para exibir os dados em um gráfico. Tarefa 1 Criar um projeto de aplicativo do Silverlight 1. Abra o Visual Studio 2010 em 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 para Outros Tipos de Projeto Soluções do Visual Studio Solução em Branco. 4. Nomeie a solução como Começar. 5. Mude a localização para C:\SPHOLS\SPCHOL306\CS\Ex2\ Figura 14 - Caixa de diálogo Novo Projeto 6. Pressione OK para continuar. Página 14
7. No menu, selecione Arquivo Adicionar Novo Projeto. 8. Na caixa de diálogo Novo Projeto, expanda o menu esquerdo Modelos Instalados até Visual C# Silverlight e escolha o tipo de projeto Aplicativo Silverlight na lista de tipos de projeto na seção central da tela. 9. Nomeie o projeto SilverlightEmployeeContributionsGraph. 10. Não mude a localização. Figura 15 - Caixa de diálogo Adicionar Novo Projeto 11. Clique em OK. Página 15
Figura 16 - Caixa de diálogo Adicionar Aplicativo do Silverlight 12. Pressione OK para criar o projeto. 13. No projeto SPSilverlightExample, adicionaremos os assemblies de referência ao Modelo de Objeto Cliente do SharePoint Silverlight. Clique com o botão direito do mouse em Referências no projeto SilverlightEmployeeContributionsGraph e selecione Adicionar Referências. 14. Navegue até a pasta C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\14\TEMPLATE\LAYOUTS\ClientBin. 15. Selecione Microsoft.SharePoint.ClientSilverlight.dll e Microsoft.SharePoint.Client.Silverlight.Runtime.dll (mantenha a tecla CTRL pressionada para selecionar vários arquivos) Página 16
16. Pressione OK para adicionar as referências de dll selecionadas. Figura 17 - Adicionar Referências 17. Adicione uma referência ao assembly de Controles de geração de gráfico do Silverlight. Ele está disponível na guia.net e é chamado System.Windows.Controls.DataVisualization.Toolkit. Figura 18 - Adicionar referência de visualização de dados Página 17
Tarefa 2 Escrever o código para acessar os Dados da lista do SharePoint do funcionário e exibi-los em um controle de gráfico do Silverlight 1. No Gerenciador de Soluções, clique com o botão direito do mouse no arquivo App.xaml e selecione Exibir Código. Abra o App.xaml.cs e adicione as seguintes instruções de uso na parte superior do arquivo: using Microsoft.SharePoint.Client; using System.Threading; Trecho de código: Meus Trechos de Código spchol306_ex2_app_namespaces 2. Adicione o seguinte código ao início do método Application_Startup. ApplicationContext.Init(e.InitParams, SynchronizationContext.Current); Trecho de código: Meus Trechos de Código spchol306_ex2_application_startup 3. No XAML, exiba o arquivo MainPage.xaml e adicione o seguinte namespace XML ao elemento UserControl: xmlns:chartingtoolkit="clrnamespace:system.windows.controls.datavisualization.charting;assembly=system.wind ows.controls.datavisualization.toolkit" Página 18
4. Adicione o seguinte controle de geração de gráfico do Silverlight dentro do elemento Grid: <chartingtoolkit:chart x:name="chart" Width="350" Height="250" Title="Team Contributions"> <chartingtoolkit:chart.series> <chartingtoolkit:columnseries ItemsSource="{Binding}" DependentValuePath="Contributions" IndependentValuePath="Name" AnimationSequence="FirstToLast" Title="Contributions" IsSelectionEnabled="True" /> </chartingtoolkit:chart.series> </chartingtoolkit:chart> Figura 19 - XAML de gráfico do Silverlight 5. Abra o MainPage.xaml.cs e adicione a seguinte instrução de uso na parte superior do arquivo: using Microsoft.SharePoint.Client; Trecho de código: Meus Trechos de Código spchol306_ex2_page_namespaces Página 19
6. Adicione as seguintes classes antes da classe MainPage: public class EmployeeContributions { publicstring Name { get; set; } publicstring TeamName { get; set; } publicdecimal Contributions { get; set; } } public class TeamContributions { publicstring Name { get; set; } publicdecimal Contributions { get; set; } } Trecho de código: Meus Trechos de Código spchol306_ex2_classes 7. Adicione as seguintes variáveis à classe MainPage: privatelistitemcollection _employees; Trecho de código: Meus Trechos de Código spchol306_ex2_property 8. Adicione o seguinte código ao construtor Page abaixo da chamada para InitializeComponent: ClientContext context = new ClientContext(ApplicationContext.Current.Url); context.load(context.web); List employees = context.web.lists.getbytitle("employees"); context.load(employees); CamlQuery query = newcamlquery(); string camlqueryxml = null; query.viewxml = camlqueryxml; _employees = employees.getitems(query); context.load(_employees); context.executequeryasync(newclientrequestsucceededeventhandler(onrequestsucceede d), null); Trecho de código: Meus Trechos de Código spchol306_ex2_initializecomponent Página 20
9. Adicione o seguinte código após o construtor: private void OnRequestSucceeded(Object sender, ClientRequestSucceededEventArgs args) { // this is not called on the UI thread Dispatcher.BeginInvoke(BindData); } private void BindData() { List<EmployeeContributions> employees = new List<EmployeeContributions>(); // get list item values into a strongly typed class foreach (ListItem li in _employees) { employees.add(new EmployeeContributions { Name = li["title"].tostring(), TeamName = li["team"].tostring(), Contributions = Convert.ToDecimal(li["Contribution_x0020 x0028_in_x00"]) }); } // use linq to group employees on team name and then total team contributions List<TeamContributions> teams = employees.groupby(e => e.teamname).select(t => new TeamContributions { Name = t.key, Contributions = t.sum(e => e.contributions) }).ToList(); } chart.datacontext = teams; // must be on UI thread Trecho de código: Meus Trechos de Código spchol306_ex2_methods 10. Assim como o exercício anterior, o modelo de objeto cliente do SharePoint Silverlight é usado para recuperar dados de uma lista do SharePoint. Após o preenchimento dos itens de contribuição do funcionário em uma lista, o LINQ será usado para agrupar os funcionários em equipes e reunir suas contribuições. Em seguida, as contribuições da equipe serão definidas como a fonte de dados do gráfico. Página 21
Tarefa 3 Implantar e testar usando a Web Part de geração de gráficos do SharePoint Silverlight Para implantar a solução no SharePoint, o arquivo.xap resultante criado pelo projeto do Silverlight precisa estar na pasta C:\Arquivos de Programas\Common Files\Microsoft Shared\Web Server Extensions\14\TEMPLATE\LAYOUTS\ClientBin. 1. Clique com o botão direito do mouse no projeto SilverlightEmployeeContributionsGraph, selecione Propriedades e a guia Compilar. 2. Mude o caminho de saída para C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\14\TEMPLATE\LAYOUTS\ClientBin. Figura 20 - Propriedades do projeto do Silverlight 3. Compile a solução. O arquivo.xap foi copiado no diretório do SharePoint solicitado e você está pronto para adicionar a web part do Silverlight ao site do SharePoint. 4. Abra o Internet Explorer e navegue até http://intranet.contoso.com. 5. Atualizaremos a Web Part do Silverlight adicionada no exercício anterior para apontar para o novo controle de geração de gráfico do Silverlight que acabamos de criar. Clique no ícone suspenso no canto superior direito da Web Part do Silverlight e selecione Editar Web Part. Página 22
Figura 21 - Propriedades da Web Part do Silverlight 6. Clique no botão Configurar (talvez seja necessário rolar a janela para a direita para ver o botão Configurar) e insira /_layouts/clientbin/silverlightemployeecontributionsgraph.xap na caixa de diálogo Web Part do Silverlight. Figura 22 - URL da Web Part do Silverlight 7. Clique em OK. 8. Clique em OK na parte inferior da barra lateral da Web Part do Silverlight. Página 23
9. A Web Part final parecerá com a seguinte: Figura 23 - Web Part de gráfico do Silverlight concluída Resumo do laboratório Neste laboratório, você realizou os seguintes exercícios. Criou um novo projeto de aplicativo do Silverlight Adicionou referências às dlls do modelo de objeto do SharePoint Silverlight. Escreveu um código para obter dados do SharePoint usando um modelo de objeto do SharePoint Implantou um aplicativo do Silverlight no SharePoint e o exibiu na nova web part do SharePoint Silverlight. Exibiu dados da lista do SharePoint em uma grande de dados do Silverlight. Usou o LINQ para manipular itens de uma lista do SharePoint. Exibiu dados da lista do SharePoint em um gráfico de barras de geração de gráficos do Silverlight. Página 24