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
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.
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::
Console.WriteLine(“Este código NÃO é seguro!”);
Página 3
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