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.
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
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
SPCHOL306_Manual_CS.docx Este documento
Código-fonte \Supporting Files\SPCHOL306\Completed\CS\Ex1\ \Supporting Files\SPCHOL306\Completed\CS\Ex2\
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.
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::
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.
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.
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.
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.
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.
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
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
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.
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.
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.
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.
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.
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)
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.
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="clr-namespace:System.Windows.Controls.DataVisualization.Charting;assembly=System.Wind ows.Controls.DataVisualization.Toolkit"
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;
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);
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.
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.
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.
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.
