exercícios - web viewpara editar as propriedades deste . workspace. ... após...

Treinamento em Gestão do Ciclo de Vida de Aplicações

Perfil: Time de Desenvolvedores, Arquitetos

Desenvolvido por:

A SERVIÇO DE MICROSOFT BRASIL

2

Laboratório 1:

Introdução ao Source Control

Visão geral

Neste laboratório você será apresentado ao Team Foundation Server Source Control, responsável pelo versionamento do código fonte. Você aprenderá sobre seus principais conceitos e recursos como workspace, changeset, check in, history e outros.

Exercícios

Este laboratório contém os seguintes exrcícios:

1. Criando e configurando um novo workspace

2. Analisando changesets e comparando versões

60 minutos

3

Exercício 1: Criando e configurando um novo workspace

Neste exercício você irá aprender sobre como criar um novo workspace, mapeá-lo para sua pasta local e como encobrir (cloak) uma determinada pasta ou arquivo do Source Control.

1. Realize o login com o usuário Christine Koch (Tester), caso você ainda não o tenha feito. A senha é P2ssw0rd (P maiúsculo, o número dois, duas letras s, a letra w, o número zero, a letra r e a letra d).

2. Abra o Microsoft Visual Studio utilizando o seguinte caminho Start | All Programs | Microsoft Visual Studio 2010 | Microsoft Visual Studio 2010.

Figura 1Abrindo o Microsoft Visual Studio 2010

4

3. Como é a primeira vez que este usuário abre o Visual Studio 2010, será apresentada a tela Choose Default Environment Settings. Nesta tela o usuário tem a opção de escolher dentre os perfis previamente definidos para configuração de seu ambiente de trabalho. Selecione General Development Settings e clique no botão Start Visual Studio.

Figura 2Escolha do ambiente de desenvolvimento

5

4. Abra a janela do Team Explorer utilizando o item de menu View |Team Explorer.

Figura 3Menu view com opção de abertura do Team Explorer

5. A janela do Team Explorer deve ser aberta do lado direito da IDE do Visual Studio 2010. Clique no botão Connect to Team Project.

Figura 4Localização do botão Connect to Team Project

6. Após clicar no botão Connect to Team Project, será exibida a janela Connect to Team Project. É com a ajuda desta janela que você se conecta a um servidor do Team Foundation Server, bem como tem acesso aos Team Project Collections e Team Projects aos quais você possui acesso.

6

Figura 5Visualização da janela Connect to Team Project

7. Note que não existe qualquer opção de seleção, nem mesmo para seleção do servidor do Team Foundation Server. Nosso próximo passo então será adicionar nosso servidor do Team Foundation Server.

8. Clique no botão Servers...

9. Neste momento a janela Add/Remove Team Foundation Server é exibida, sem qualquer servidor do Team Foundation Server adicionado.

Figura 6Visualização da janela Add/Remove Team Foundation Server

7

10. Clique no botão Add...

11. Será exibida a janela Add Team Foundation Server. Preencha o campo Name or URL of Team Foundation Server com o nome do servidor “WIN-GS9GMUJITS8”, conforme tela abaixo.

Figura 7Visualiazação da janela Add Team Foundation Server

12. Note que você pode especificar detalhes da conexão com o seu servidor do Team Foundation Server, como o path, o número da porta e o protocolo utilizado. No nosso caso, vamos utilizar as opções já disponíveis na tela. Não altere quaisquer destas informações. A caixa de textos Preview nos mostra o caminho completo que será utilizado pelo Visual Studio 2010 para se conectar ao servidor do Team Foundation Server. Clique no botão OK para continuar.

13. A janela Add Team Foundation Server será fechada e você retornará a janela Connect to Team Project. Note que o servidor que você acabou de cadastrar já está selecionado e as listas Team Project Collections (à esquerda) e Team Projects (à direita) possuem alguns itens.

8

Figura 8Janela Connect to Team Project com servidor selecionado

14. Assegure-se que o projeto Tailspin Toys na lista Team Projects esteja marcado. Clique no botão Connect para se conectar a este projeto.

15. A janela Connect to Team Project será fechada. Note que agora, a aba do Team Explorer, localizada do lado direito do Visual Studio 2010, será preenchida com os itens do projeto. Este processo pode levar alguns segundos para concluir.

16. Neste passo o Visual Studio 2010 está se conectando a todos os servidores envolvidos no provimento do projeto Tailspin Toys, como o próprio servidor do Team Foundation Server, o servidor de SharePoint e o servidor do SQL Server Reporting Services.

17. Após o carregamento de todos os itens, clique duas vezes sobre o nó Source Control, na janela do Team Explorer.

9

Figura 9Localização do nó Source Control

18. Será aberta a aba do Source Control Explorer.

Figura 10Visualização da janela do Source Control Explorer

19. Note que esta janela é dividida em duas partes. Na parte da esquerda estão listados os nós Folders enquanto o lado direito exibe o conteúdo do nó selecionado em Folders. Note também que os itens apresentados estão em cinza, indicando que você ainda não possui uma cópia local destes arquivos.

10

20. Na barra superior desta janela existe a indicação de onde o Source Control está armazenando localmente este arquivos (Local Path). Perceba que o valor de Local Path é Not mapped, indicando que você não possui um workspace mapeado.

21. A maneira mais simples de se mapear um workspace nestas condições é clicar no link Not mapped. Isto abrirá a janela Map que serve para realizar o mapeamento entre a pasta no servidor e a pasta na máquina local.

Figura 11Janela Map para mapeamento entre pastas do servidor e da máquina local

22. Clique no botão contendo as reticências “...” ao lado da caixa de texto Local Folder.

23. Será aberta a janela Browse For Folder. Esta tela é padrão dos sistemas que executam sobre o Windows e permite a você selecionar uma pasta para o mapeamento local.

11

Figura 12Visualização da janela Browse For Folder

24. Selecione o drive C e verifique se existe uma pasta chamada Workspaces. Caso negativo, clique no botão Make New Folder e crie uma pasta com este nome.

25. Certifique-se que a pasta Workspace está selecionada e clique no botão OK.

26. Você retornará para a janela Map contendo a caixa de texto Local folder preenchida com o caminho completo da pasta local que você acabou de selecionar. Clique no botão OK para confirmar.

27. O Visual Studio 2010 exibirá uma caixa de alerta informando que os novos itens mapeados não serão carregados para a pasta local até que você realize uma operação de Get. Porém o Visual Studio 2010 lhe dá a opção de realizar o Get imediatamente. Clique no botão Yes. Esta operação pode levar alguns segundos para completar.

12

Figura 13Alerta do Visual Studio para Get de novo mapeamento

28. Após realizar a operação de Get, note algumas mudanças na aba do Source Control Explorer. Primeiramente, o label LocalPath agora exibe o mapeamento local correspondente ao nó que você está visualizando. Note que este caminho é um link e, caso queira navegar rapidamente para a pasta local, basta clicar no mesmo.

29. Note também que os itens apresentados não estão com sua fonte em cinza e com a coluna Latest preenchida com Yes.

Figura 14Aba do Source Code Explorer após mapeamento e Get

30. O que você acabou de executar é a maneira mais rápida e fácil de criar e mapear um workspace quando não existe qualquer mapeamento. Além deste recurso, você também pode gerenciar seus workspaces e mapeamentos a partir da caixa de seleção Workspace no topo da aba do Source Control Explorer.

31. Abra a caixa de seleção Workspace e selecione Workspaces...

13

Figura 15Caixa de seleção Workspace

32. A janela Manage Workspaces será exibida. Selecione o único workspace que é exibido e clique no botão Edit... para editar as propriedades deste workspace.

Figura 16Visualização da janela Manage Workspaces

14

33. É exibida a janela Edit Workspace WIN-GS9GMUJITS8. Note alguns dos campos desta tela. Nela são exibidos o nome do workspace, o nome do servidor com sua collection, o dono deste workspace, qual o computador local e as permissões de acesso.

34. Na parte de baixo da janela existe uma tabela chamada Working folder com três colunas, sendo: Status, Source Control Folder e Local Folder.

Figura 17Janela de edição de workspace

35. Note que o mapeamento que nós acabamos de criar já está mapeado na grade Working folders. Vamos adicionar mais um item nesta tabela para ocultar a pasta “$/Tailspin Toys/Releases” para que a mesma não seja baixada quando do processo de Get.

36. Clique na primeira linha vazia da tabela, no campo Status e escolha a opção Cloacked. Na coluna Source Control Folder clique no botão de reticências e escolha a pasta “$/Tailspin Toys/Releases”. Por fim, clique no botão OK.

15

Figura 18Janela Edit Workspace após adição de mapeamento cloaked

37. O Visual Studio 2010 exibirá uma caixa de alerta informando que os novos itens mapeados não serão carregados para a pasta local até que você realize uma operação de Get. Porém o Visual Studio 2010 lhe dá a opção de realizar o Get imediatamente. Clique no botão Yes. Esta operação pode levar alguns segundos para completar.

38. Note agora que a aba do Source Control Explorer foi ligeiramente alterada. Note que a pasta Releases neste momento está com a fonte cinza e que a coluna Latest possui agora a informação Cloaked.

16

Exercício 2: Analisando Changesets e Comparando Versões

Neste exercício você irá aprender como visualizar e rastrear changesets, como visualizar o histórico de um determinado arquivo e como comparar as versões com os recursos de View History e Annotate.

1. No Source Control Explorer (View | Other Windows | Source Control Explorer), navegue para Tailspin Toys | Development | Iteration 2 e clique duas vezes no arquivo TailspinToys.sln para abrir a solução Tailspin Toys.

Figura 19Abrindo a solução Tailspin Toys

2. Recompile a solução (Build | Rebuild Solution a partir do menu principal). Este passo pode levar alguns minutos para completar.

3. No Source Control Explorer, localize o arquivo Detail.aspx localizado abaixo do nó Tailspin.Web. Clique com o botão direito do mouse no arquivo Detail.aspx e selecione a opção View History.

17

Figura 20Visualização da opção View History

4. Após clicar em View History a aba History – Detail.aspx é exibida. Nesta tela, observe algumas informações como a caixa de Source location que exibe o caminho local do arquivo para o seu workspace e as abas Changesets e Labels.

Figura 21Visualização da aba View History

18

5. Na aba Changesets, note que existem dois Changesets de códigos 56 e 44. Perceba que o segundo é resultado de um branch e que ambos foram realizados pelo usuário abuobe. Note também as datas e os comentários.

Nota: O número de seu changeset pode ser diferente do exibido nas figuras deste manual.

Nota: O recurso de branch é analisado em detalhes em outro laboratório, posterior a este.

6. Selecione o primeiro changeset e clique como botão direito do mouse. No menu de contexto que se abre, clique em Changeset Details...

Figura 22Menu de contexto

7. A janela Details for Changeset é exibida contendo todos os detalhes do changeset selecionado, incluindo os comentários, os work items vinculados, notas de check in, alertas de políticas de check in, além de uma lista completa de todos os arquivos que foram afetados por este mesmo changeset.

19

Figura 23Visualização da janela Details for Changeset

8. Feche a janela Details for Changeset clicando no botão Cancel.

9. Ao retornar para a aba History – Detail.aspx, selecione os dois primeiros changesets com o botão esquerdo do mouse enquanto pressiona a tecla Ctrl.

10. Após selecionar os dois changesets, clique com o botão direito do mouse e clique em Compare no menu de contexto que se abre.

Figura 24Menu de contexto com a opção Compare

20

11. Será aberta então a janela de comparação das duas versões do arquivo Detail.aspx. Lado a lado são exibidos os códigos fontes de cada versão.

Nota: As alterações realizadas são exibidas nas cores vermelhas para trechos de código excluídos, azuis para trechos de códigos alterados e verdes para trechos de códigos incluídos.

12. Note que na linha 21 há uma diferença entre as versões referente a uma alteração realizada entre os changesets.

Figura 25Janela de comparação de versões diferentes de um mesmo arquivo

13. Feche a janela de comparação de versões e retorne para a aba History – Detail.aspx.

14. Selecione o changeset de número maior, clique com o botão direito do mouse e selecione a opção Annotate a partir do menu de contexto.

21

Figura 26Menu de contexto com a opção Annotate

15. Na coluna annotation, à esquerda, posicione o mouse sobre o ultimo changeset. Note os detalhes exibidos.

Figura 27Aba do annotate

22

Laboratório 2:

Branch e Merge com Team Foundation Server 2010

Visão geral

Neste laboratório você será apresentado aos recursos de branching e merging suportados pelo Team Foundation Server 2010. Os avanços feitos no TFS 2010 tornam muito mais simples entender a hierarquia de branches e propagar mudanças durante o processo de merge.

Exercícios


1. Trabalhando com TFS 2010 Code Branches

2. Visualizando branches e merges

60 minutos

23

Exercício 1: Trabalhando com TFS 2010 Code Branches

Neste exercício você irá aprender sobre alguns dos novos recursos de branch do Team Foundation Server 2010 e como abrir uma solução que corresponde a um branch de código específico. Adicionalmente, este exercício servirá como uma preparação para um cenário onde o código em produção necessita ser atualizado e as mudanças realizadas devem ser mescladas e propagadas por todos os branches ativos no sistema.

1. Realize o login com o usuário Abu Obeida Bakhach (Dev), caso você ainda não o tenha feito. A senha é P2ssw0rd (P maiúsculo, o número dois, duas letras s, a letra w, o número zero, a letra r e a letra d).


3. Abra a janela do Source Control Explorer utilizando o item de menu View | Other Windows | Source Control Explorer.

4. Note que a solução Tailspin Toys contém o código base “Main”, bem como os branches abaixo das pastas “Development” e “Releases”. No Team Foundation Server 2010, branches são objetos de primeira classe e são representados por um ícone próprio no Source Control Explorer.

Figura 28Source Code Explorer exibindo pastas e branches

24

5. Clique com o botão direito do mouse no nó do branch Production 1.0. A partir do menu de contexto que se abre, selecione Properties. A janela Properties fornece detalhes como a versão e descrição, relacionamentos hierárquicos com outros branches e permissões.

Figura 29Janela de propriedades de um branch

6. Selecione o botão Cancel para retornar ao Source Code Explorer.

7. Selecione o nó do branch Production 1.0 na pasta Releases e clique duas vezes no arquivo TailspinToys.sln para abrir a solução.

8. Realize um build completo da solução (Build | Rebuild Solution no menu principal). Este passo pode levar alguns minutos para completar.

9. Assegure-se de que o projeto Tailspin.Web está configurado para ser o projeto inicial da solução (clique com o botão direito do mouse e selecione Set as StartUp Project).

10. Pressione Ctrl+F5 para executar o website Tailspin Toys.

25

Figura 30Página padrão do website Tailspin Toys

11. Imagine um cenário onde o branch Production 1.0 representa o código que está atualmente rodando no servidor web de produção. O gerente decidu que o links não-funcionais que estão no rodapé da página sejam removidos o mais rápido possível. Nós decidimos alterar diretamente o branch Production 1.0 a fim de atender rapidamente a solicitação. Posteriormente, você verá que nós podemos propagar a mudança de volta para o branch da iteração atual (Iteration 2) logo esta mudança se tornará parte das demais mudanças que estamos trabalhando para o próximo release. Você verá agora como os novos recursos de branching e merging do Team Foundation Server 2010 facilitam um cenário como este. Feche a janela do Internet Explorer e retorne ao Visual Studio.

12. Nossa primeira tarefa é atualizar o branch de produçao, realizando o deploy desta mudança no servidor web de produção. A partir do Solution Explorer, abra a master page Template.Master que está sob o projeto Tailspin.Web, no branch Production 2.0.

13. Vá até o final da página Template.Master e localize uma lista de itens HTML para os links do rodapé. Comente desde o link Careers até o link Shipping Options & Charges, conforme figura abaixo.

26

Figura 31Página Template.Master modificada

14. Pressione Ctrl+F5 para rodar o website e verifique que os links não-funcionais não são mais exibidos. Para efeitos desta demonstração, assuma que neste ponto nós já realizamos o deploy desta atualização para o servidor de produção.

15. Feche a janela do Internet Explorer e retorne ao Visual Studio.

16. Abra a janela Pending Changes em View | Other Windows | Pending Changes.

17. No campo Comment, digite “removed non-functional links from footer”, marque a checkbox ao lado do arquivo Template.Master, e clique no botão Check In.

Figura 32Realizando check in da mudança no branch Production 1.0

18. No próximo exercício nós iremos mesclar(merge) esta mudança aos outros branches do sistema.

27

Exercício 2: Visualização de Branching e Merging

Neste exercício você irá aprender como visualizar e rastrear changesets enquanto mescla as mudanças realizadas no exercício anterior.

1. No Source Control Explorer, clique com o botão direito do mouse no branch Production 1.0 e selecione View History a partir do menu de contexto que é exibido.

Figura 33Visualização do Changeset history para o branch Production 1.0

2. Clique com o botão direito no changeset que você acabou de fazer o chek in e selecione Track Changeset a partir do menu de contexto que é exibido.

3. Na janela Select Branches, o item Production 1.0 já estará selecionado. Selecione o checkbox para a Iteration 2 e então clique no botão Visualize para vizualizar o estado atual do changeset bem como seu relacionamento com outros branches.

28

Figura 34Selecionando branches para visualização

4. Esta visualização nos mostra que o changeset em questão foi aplicado ao branch Production 1.0 mas não ao branch Iteration 2. Ela também deixa claro que para realizar o merge para a Iteration 2 nós precisamos realizar primeiramente um merge com o branch Main.

Figura 35Visualização do recurso Tracking Changeset no modo Hierarchy Tracking mode

29

Nota: O número de seu changeset pode ser diferente do exibido nas figuras deste manual.

5. Para realizar um merge entre este changeset e o branch Main, clique na área verde correspondente ao nó Production 1.0, arraste e solte sobre o nó Main. Isto irá carregar o Source Control Merge Wizard.

Figura 36Visualização da primeira tela do Source Control Merge Wizard

6. Assegure-se que o branch de origem (source) termine com Production 1.0 e que o branch de destino (target) termine com Main. Clique no botão Next para continuar.

7. A próxima tela do assistente de merge especifica a versão para mesclar. Por padrão, você deve ver o changeset que você realizou check in. Clique no botão Finish para executar o merge.

8. Depois que o merge estiver completo, abra a janela Pending Changes e note que o estado da página Template.Master no branch Main é agora merge, edit. O processo de merge está completo, porém nós ainda precisamos realizar o check in das alterações.

30

9. Adicione o sequinte comentário em Comment: “Merging fast-tracked changes from Production to Main”.

Figura 37Inserindo o comentário

10. Clique no botão Check In para concluir o merge com o branch Main.

11. Na janela Tracking Changeset, clique no botão Rerun para provocar uma atualização na visualização. Você deverá clicar no botão Visualize novamente quando a janela Select Branches aparecer.

Figure 38Changeset tracking view demonstrando que o merge com Main está completo

12. Agora, realize o merge do changeset do branch Main para o branch Iteration 2 da mesma maneira que fizemos antes, arrastando e soltando, carregando assim o Source Control Merge Wizard.

13. Clique em Next e em seguida em Finish para executar o processo de merge.

31

14. Na janela Pending Changes, entre com o seguinte comentário em Comment: “Merged fast-tracked changes from Main to Iteration 2”.

15. Clique no botão Check In para finalizar o merge com o branch Iteration 2.

16. Na janela Tracking Changeset, clique no botão Rerun para autalizar a visualização.

Figura 39Rastreando o changeset original no modo Hierarchy Tracking

17. Outra visualização útil é a Timeline Tracking. Clique no botão Timeline Tracking a esquerda do botão Hierarchy Tracking para alternar a visualização. Esta visualização mostra a ordem no qual o changeset original foi mesclado com os outros branches.

Figura 40Restreando o changeset original no modo Timeline Tracking

32

18. No Source Control Explorer, localize o arquivo Template.Master que está no branch Iteration 2. Clique com o botão direito e selecione Annotate no menu de contexto que é exibido.

Figura 41Localização da opção Annotate

19. Vá até o final do arquivo aberto (annotated) Template.Master e localize o HTML que você comentou previamente.

20. Na coluna annotation, à esquerda, posicione o mouse sobre o ultimo changeset (ele deve possuir a data de hoje). Note que o caminho do changeset e seu comentário fazem referência ao branch de Production onde a mudança foi originalmente realizada apesar de estarmos visualizando o arquivo no branch Iteration 2.

Figura 42Informação do changeset do arquivoTemplate.Master

33

Laboratório 3:

Customização de Workflow de Build

Visão geral

Neste laboratório você será apresentado ao workflow de processos de build e aprenderá como customizá-lo para atender a necessidades específicas do seu projeto. O exemplo utilizado será a inserção de novas atividades no workflow para a deleção de arquivos .pdb ao final do build.

Exercícios


1. Criando um Novo Workflow de Build

2. Criando uma Definição de Build com Workflow Customizado

60 minutos

34

Exercício 1: Criando um Novo Workflow de Build

Neste exercício você irá aprender sobre como criar um novo workspace, mapeá-lo para sua pasta local e como encobrir (cloak) uma determinada pasta ou arquivo do Source Control.

1. Faça o login com o usuário Abu Obeida Bakhach (Dev) se você ainda não o fez. A senha é P2ssw0rd (P maiúsculo, número dois, letra s, letra s, letra w, número zero, letra r, letra d).


Figura 2Abrindo o Microsoft Visual Studio 2010

35

3. Selecione o Team Explorer que deve estar na lateral direita no Visual Studio

Figura 44Localização da aba Team Explorer

4. Efetue um duplo-clique no item Source Control. Uma aba com o título Source Control Explorer será aberta no Visual Studio.

Figura 45Abrindo a aba Source Control Explorer

36

5. No Source Control Explorer, selecione a pasta BuildProcessTemplates. Note que são exibidos a direita 3 arquivos .xaml que representam workflows de build. Estes arquivos são criados automaticamente pelo TFS quando um novo Team Project é criado.

Figura 46Visualização de Templates de Workflows de Build para o Team Project Tailspin Toys

6. Clique no link que aparece ao lado de Local Path. Isto nos levará a pasta do workspace local onde estão os arquivos .xaml

Figura 47Localização do link para pasta no workspace local

7. Clique no arquivo DefaultTemplate.xaml e pressione Ctrl+C, Ctrl+V para criarmos uma cópia do arquivo. Renomeie o novo arquivo DefaultTemplate.xaml - copy para CustomTemplate.xaml

37

Figura 48Novo arquivo CustomTemplate.xaml criado a partir do DefaultTemplate.xaml

8. Abra o bloco de notas utilizando o menu Start | All Programs |Acessories | Notepad. Copie o cole o conteúdo abaixo no notepad:

@echo offcd\cd %~1del /F *.pdbecho end

38

9. Este arquivo será chamado pelo processo de build customizado. Pressione Ctrl+S para salvar o arquivo. Digite o nome “c:\delete.bat” para o arquivo e clique no botão em Save

Figura 49Salvando o arquivo delete.bat

10. Retorne ao Visual Studio. Na janela do Source Control Explorer clique com o botão direito onde na área onde aparecem os arquivos .xaml e selecione a opção Add Items to Folder...

Figura 50Localização da opção Add Items to Folder...

39

11. No diálogo Add to Source Control selecione o arquivo CustomTemplate.xaml e clique no botão Finish.

Figura 51Adicionado o novo template de build no source control

12. No Source Control Explorer efetue um duplo-clique no arquivo CustomTemplate.xaml para editarmos o Workflow.

Figura 52

40

Editando o novo workflow de build

13. No editor do workflow clique no link Expand All.

Figura 53Localização do link Expand All

14. Role até o final do workflow para localizar a atividade Copy Files to Drop Location, dentro do grupo If DropBuild And DropLocation is Set.

Figura 54Localizando a atividade Copy Files to Drop Location

41

15. Clique no Toolbox à direita para visualizar as atividades disponíveis para o Workflow. Localize a atividade InvokeProcess e arraste-a com o mouse até a posição abaixo do grupo If DropBuild And DropLocation is Set.

Figura 55Inserindo uma nova atividade do tipo InvokeProcess

16. No rodapé do workflow clique na opção Arguments. Será exibida a aba de configuração de argumentos do workflow. Esta opção permite que passemos parâmetros para o processo de build através da definição de build.

42

Figura 56Visualização da aba Arguments

17. Clique na linha que exibe Create Argument e preenchas as colunas conforme abaixo:

- Name: BatchFileLocation - Direction: In- Argument Type: String- Default value: “c:\delete.bat”

43

Figura 57Criando novo argumento para o workflow

18. Certifique-se de que a nova atividade está selecionada e pressione F4 para visualizar a janela de propriedades da atividade. Preencha as propriedades conforme abaixo (as demais propriedades não devem ser alteradas):

- DisplayName: Delete Debug Files- Arguments: """" & "drops\" & BuildDetail.BuildDefinition.Name & "\" &

BuildDetail.BuildNumber & """"- Filename: BatchFileLocation- WorkingDirectory: BuildDetail.DropLocation

Figura 58Preenchimento das propriedades da atividade InvokeProcess

44

19. Pressione Ctrl+S para salvar as alterações no Workflow. Na janela que solicita o salvamento do arquivo Solution1.sln clique em Cancel.

20. Retorne ao Source Control Explorer. Clique com o botão direito no arquivo CustomTemplate.xaml e selecione a opção Check In Pending Changes...

Figura 59Subindo as alterações no workflow para o controle de versão

21. No diálogo Check In – Source Files... clique no botão Check In

45

Figura 60Localização do botão Check In

46

Exercício 2: Criando uma Definição de Build com Workflow Customizado

Neste exercício você irá aprender sobre como criar uma definição de build para utilizar o workflow customizado que criamos no exercício anterior.

22. No Team Explorer, dentro do nó do projeto Tailspin Toys, clique com o botão direito em Builds e selecione a opção New Build Definition...

Figura 61Criando nova definição de build

47

23. No campo Build Definition Name digite “Build and Drop with no Debug Files”.

Figura 62Informando o nome da definição de build

24. Clique no passo Build Defaults à esquerda e preencha o campo Copy build output to the following drop folder (UNC path, como \\server\share) com o valor “\\localhost\drops”. Este campo indica a pasta onde os arquivos resultantes do build serão copiados ao final do processo.

Figura 63Informando local para cópia dos arquivos resultantes do build

48

25. Clique no passo Process à esquerda e clique no campo Items to Build. Clique no botão browse (…) para selecionar os projetos a serem compilados.

Figura 64Localização do botão (...)

26. No diálogo Items to Build clique no botão Add...

Figura 65Localização do botão Add...

49

27. No diálogo Browse navegue para o arquivo Development | Iteration 2 e selecione o arquivo TailspinToys.sln. Clique em OK para prosseguir.

Figura 66Seleção do arquivo TailspinToys.sln

28. De volta ao diálogo Items To Build clique em OK.

29. Ainda no passo Process da configuração da definição de build, clique no botão Show Details para exibir o conteúdo adicional do grupo Build process template.

Figura 67Localização do botão Show details

50

30. Clique no botão New... ao lado do combo Build Process file (Windows Workflow XAML). Neste passo iremos selecionar o arquivo com o workflow customizado no exercício anterior.

Figura 68Localização do botão New...

31. No diálogo New Build Process Template selecione a opção Select an existing XAML file e clique no botão Browse...

Figura 69Localização do botão Browse...

51

32. No diálogo Browse certifique-se de que o arquivo CustomTemplate.xaml está selecionado e clique no botão OK.

Figura 70Selecionando o arquivo CustomTemplate.xaml

33. De volta ao diálogo New Build Process Template clique em OK.

34. Note que o argumento BatchFileLocation que criamos está disponível para edição através da definição de build na seção Misc.

Figura 71Edição de argumentos customizados para o workflow de build

52

35. Clique no botão Save para salvar a definição de build.

Figura 72Localização do botão Save

36. Agora que temos a definição de build configurada com o nosso workflow customizado vamos disparar o build. No Team Explorer clique com o botão direito na definição de build Build and Drop with no Debug Files e selecione a opção Queue New Build...

Figura 73Localização da opção Queue New Build...

53

37. No diálogo Queue Build “Tailspin Toys” clique no botão Queue. Aguarde a conclusão do build.

Figura 74Localização da opção Queue New Build...

54

38. Após a conclusão do build, clique com o botão direito na linha que mostra o resultado do build e selecione o item Open Drop Folder.

Figura 75Localização da opção Open Drop Folder

55

39. Verifique na pasta que os arquivos .pdb foram deletados com sucesso.

Figura 76Pasta onde o build foi gerado demonstrando a deleção dos arquivos .pdb

56

Laboratório 4:

Depurando código com IntelliTrace

Visão geral

Neste laboratório você irá conhecer o novo recurso de depuração do Visual Studio 2010 Ultimate, o IntelliTrace. Antes do advento do IntelliTrace, a depuração acontecia a partir de um determinado ponto no tempo. Se você quisesse mais informações sobre as chamadas anteriores, você deveria configurar um novo breakpoint e executar novamente a aplicação. Agora, o IntelliTrace permite a você buscar por um grande número de pontos de execução, que ocorreram no passado, e aprofundar em qualquer um deles, comparando variáveis, pilhas de chamadas, etc. ajudando assim a identificar a causa de um problema sem a necessidade de reproduzi-lo.

Exercícios

Este laboratório contém os seguintes exercícios:

1. Introdução ao IntelliTrace

2. Utilizando IntelliTrace com Call Information

60 minutos

57

Exercício 1: Introdução ao IntelliTrace

Neste exercício você irá aprender como as configurações padrão do IntelliTrace podem ajuda-lo a depurar uma falha em um dado XML de um website ASP.NET.

Aplicações suportadas e cenários de depuração:

IntelliTrace suporta depuração em aplicações Visual Basic e C# que utilizem as versões do framework .Net 2.0, 3.0, 3.5 ou 4 (ASP.NET, Windows Forms, WPF, Windows Workflow, and WCF). IntelliTrace não suporta depuração de C++, script, ou linguagens não gerenciadas. Para mais informações sobre o IntelliTrace, acesse a documentação do Visual Studio 2010 na Microsoft Developer Network (http://msdn.microsoft.com).



3. No Source Control Explorer (View | Other Windows | Source Control Explorer), navega para Tailspin Toys | Development | Iteration 2 e clique duas vezes no arquivo TailspinToys.sln para abrir a solução Tailspin Toys.


5. Abra a janela Options a partir de Tools | Options... e clique no nó IntelliTrace.

6. Certifique que o checkbox Enable IntelliTrace está selecionado e que está configurado para “IntelliTrace events only”. Este é a configuração padrão uma vez que é a que implica em menor impacto em desempenho.

http://msdn.microsoft.com/

58

Figura 77Opções do IntelliTrace

Nota: O IntelliTrace grava os seus eventos em um arquivo com a extenção .iTrace. Estes arquivos podem ser salvos e usados posteriormente para executar uma depuração com o IntelliTrace, permitindo aos testadores anexar esta informação detalhada de depuração diretamente aos relatórios de bugs.

7. Inicie uma sessão de depuração pressionando F5. Esta ação irá carregar a página inicial da companhia fictícia Tailspin Toys.

Nota: Caso o projeto Tailspin.Web não esteja configurado como projeto de inicialização, clique com o botão direito no nó Tailspin.Web na caixa do Solution Explorer e selecione a opção Set as StartUp Project.

59

Figura 78Página inicial da Tailspin Toys

8. Clique no link About Us no rodapé da página. Isto irá gerar uma exceção e exibir uma página de erro customizada ASP.NET para a aplicação Tailspin.

Figura 79Página de erro exibida quando corregando About Us

60

9. Volte ao Visual Studio e selecione Debug | Break All para que possamos iniciar o processo de depuração. Caso a janela do IntelliTrace não esteja visível, abra-a selecionando Debug | Windows | IntelliTrace Events a partir do menu principal. A janela do IntelliTrace Events exibe uma lista sequencial de eventos que foram coletados desde que você iniciou a sessão de depuração, com mais recente ao final.

Figura 80Janela do IntelliTrace exibindo os eventos registrados

Nota: O IntelliTrace é configurado por padrão para coletar certos eventos quando depurando, alguns dos quais você pode ver agora na janela IntelliTrace Events. Você pode configurar quais categorias ou mesmo eventos específicos que são coletados a partir do IntelliTrace Options (Tools | Options).

10. Na janela IntelliTrace Events, localize e selecione o evento “Exception Thrown” que ocorre depois que a página “/Views/Home/About” for carregada. Serão exibidos detalhes sobre a exceção ocorrida, bem como links para as janelas Locals e Call Stack. Esta exceção nos mostra que existe um problema com o arquivo XML na linha 10, coluna 49, mas não nos diz a qual arquivo XML ele se refere.

61

Figura 81Exceção lançada quando processando o arquivo XML

Figura 82Estado das janelas Locals e Call Stack durante a exceção selecionada

11. Selecione o evento XML Loading imediatamente antes da exceção para visualizar qual arquivo foi acessado logo antes que a exceção ocorreu.

Figura 83Evento de carregamento do XML

12. Abra o arquivo Ads.xml clicando no link disponibilizado e navegue para Tailspin.Web\Content\XML\Ads.xml. Então clique no botão Open.

Nota: Você precisará navegar para a pasta da Iteration 2 em c:\ws\abuobe\Tailspin Toys\Development\Iteration 2.

62

13. Observar que existe uma linha vermelhar sublinhando os caracteres “&b=1” que são inválidos neste contexto. Note que o erros está localizado extamente na linha 10, coluna 49, conforme relatado pela exceção XML.

Figura 84Arquivo Ads.xml exibindo caracteres inválidos

14. Remova os caracteres inválidos e salve o arquivo. A URL final deve ser http://localhost/test.aspx?a=2.

Nota: Quando solicitado pela janela Edit and Continue, clique no botão Edit.

15. Pressione F5 duas vezes para continuar executando a aplicação.

16. Volte para o Internet Explorer e clique no link About Us novamente para verificar que o problema foi resolvido. O rodapé da página About exibe um dos anúncios especificados no arquivo Ads.xml.

63

Figure 85Página About com os anúncios funcionando

17. Pare a sessão de depuração atual (Debug | Stop Debugging).

64

Exercício 2: Usando IntelliTrace com Call Information

Neste exercício, você irá aprender como usar o IntelliTrace para coletar informações adicionais de chamada a fim de resolver um erro de usuário mais complicado.

1. Por padrão, apenas os eventos do IntelliTrace são coletados quando depurando, mas nós podemos também, opcionalmente, coletar dados de cada entrada/saída de método e chamada de site. Para ativar esta opção, selecione Tools | Options a partir do menu principal do Visual Studio, localize o nó IntelliTrace, e selecione a opção IntelliTrace events and call information.

Figura 86Opções do IntelliTrace ajustadas para gravar informações de chamada

2. Clique no botão OK para continuar.

3. Inicie uma sessão de depuração pressionando F5.

4. Vamos testar a funcionalidade de carrinho de compras adicionando alguns dos produtos ao carrinho. No cabeçalho da página, selecione Paper Airplanes para ver o catálogo de aeromodelos.

65

Figura 87Catálogo de aviões

5. A seguir, clique no botão View Plane do modelo Contoso Cloud Explorer.

Figura 88Página do produto Contoso Cloud Explorer

6. Clique no botão Add To Cart e verifique que a quantidade de itens no carrinho é 1.

66

Figura 88Carrinho de compras exibindo 1 aeromodelo

7. Adicione outro Cotoso Cloud Explorer ao carrinho de compras clicando no link Contoso Cloud Explorer e clicando a seguir no botão Add To Cart mais uma vez. Note que a quantidade continua em 1, onde na verdade deveria ser 2 pois adicionamos 2 produtos.

8. Volte ao Visual Studio e selecione Debug | Break All. Por padrão, nós vemos a janela do IntelliTrace Events exibindo a sequencia de eventos gravados que antecederam a parada da depuração. Neste caso, todavia, os eventos não serão muito úteis na depuração da lógica do carrinho de compras da Tailspin Toys uma vez que o seu código não é parte do .NET framework.

9. Na caixa de busca (search box), localiza no topo da janela do IntelliTrace, digite “post” e pressione Enter para executar a busca. Serão retornados dois eventos Post, um para cada item adicionado ao carrinho de compras.

10. Selecione o segundo evento “Post /Cart/AddItem/”. Nós iremos usar este evento como ponto de referencia para ajudar na navegação para o ponto na sessão de depuração onde a lógica de adição do item inicia.

Figura 89Segundo evento ASP.NET post selecionado

67

11. Retorne à lista completa dos eventos gravados, clicando no “X” azul da caixa de busca.

12. Clique no link Calls View no rodapé do evento selecionado para exibir a hierarquia completa das chamadas da sessão de depuração. A visualização das chamadas exibe a pilha para o a chamada selecionada.

Nota: Você também pode usar o botão Show Calls View no topo da janela do IntelliTrace.

Figura 90Localização do link Calls View

68

Figura 91Visualização da IntelliTrace calls view

13. Na janela IntelliTrace calls view, clique duas vezes na chamada “Tailspin.Web.App.Controllers.CartController.AddItem(string sku = “papcce”)”. Cada vez que você clica duas vezes em uma chamada, esta chamada é colocada no final do frame do topo e o ponteiro do código é sincronizado com o editor para a entrada do método assim como acontece quando você está navegando na pilha de chamadas de um debug comum.

14. Novamente, no IntelliTrace calls view, clique duas vezes na chamada “Tailspin.Model.ShoppingCart.AddItem(Tailspin.Model.Product produt = {Tailspin.Model.Product})”.

69

15. Mais uma vez, no IntelliTrace calls view, clique duas vezes na chamada AddItem que exibe “Tailspin.Model.Product product = {Tailspin.Model.Product}, int quantity = 1)” como parâmetro.

16. No IntelliTrace calls view, clique duas vezes na chamada AddItem que exibe “Tailspin.Model.Product product = {Tailspin.Model.Product}, int quantity = 1, System.DateTime dateAdded = …)” como parâmetro. Navegar pela calls view é um modo rápido de obter uma visão geral sobre a hierarquia de chamadas e realizar saltos através desta hierarquia sem ter que navegar linha a linha, como no debug comum.

Figura 92IntelliTrace calls view exibindo a chamada ao método AddItem

17. Na janela Locals, expanda a chamada a função AddItem para validar se o produto foi corretamente adicionado ao carrinho de compras e a quantidade adicionada é 1. Em qualquer ponto do IntelliTrace você pode olhar para as variáveis coletadas nas janelas Autos/Locals/Watch ou usando datatips no editor de código.

Figura 93Janela Locals exibindo parâmetros durante a chamada ao AddItem

70

18. Caminhe dois passos para frente pressionando F10 duas vezes. Mantenha em mente que uma vez que nós estamos no modo de depuração do IntelliTrace, nós vamos caminhar através dos eventos gravados e não linha a linha pelo código.

Figura 94Localização no método AddItem onde AdjustQuantity é chamado

Nota: Você pode também usar o novo conjunto de controles no estilo VCR que são exibidos a esquerda da janela do editor de códigos.

19. Na janela Locals, expanda a chamada a função AdjustQuantity para ver qual quantidade o carrinho de compras está configurado depois que o segundo produto é adicionado. Uma vez que nós esperamos que ele esteja com a quantidade 2, nós encontramos o local do bug.

20. Pare a sessão atual de depuração (Debug | Stop Debugging).

21. Mude a chamada a AdjustQuantity para que ela adicione a nova quantidade passada para o método AddItem.

71

Figura 95Corrigindo a chamada ao método AdjustQuantity

22. Verifique a correção adicionando um mesmo produto duas vezes ao carrinho de compras para assegurar que a quantidade exibida é 2.

Figura 96Carrinho de compras exibindo a quantidade correta de itens

Nota: Você pode limpar o carrinho de compras manualmente removendo os itens ou selecionando Safety | Delete Browsing History a partir do menu principal do Internet Explorer.

72

Laboratório 5:

Utilizando Code Analysis para Melhoria da Qualidade de Código

Visão geral

O recurso do Visual Studio Code Analysis executa uma análise estática do código a fim de ajudar os desenvolvedores a identificar problemas potenciais de design, globalização, interoperabilidade, performance, segurança e várias outras categorias. No Visual Studio 2010, foram feitos aprimoramentos no mecanismo do Code Analysis, bem como a habilidade de configurar conjunto de regras ao invés de selecionar a partir de uma lista plana de regras. O Code Analysis pode ser executado manualmente a qualquer momento de dentro da IDE do Visual Studio, ou mesmo configurada para executar automaticamente como parte de um Team Build ou uma política de check-in do TFS.

Neste laboratório você será introduzido ao Code Analysis, como configurar um conjunto de regras para uso e, finalmente, como suprimir regras específicas para um projeto ou nível de código fonte.

Nota: O Code Analysis pode ser encontrado nas edições Premium e Ultimate do Visual Studio 2010.

Exercícios


1. Introdução ao Code Analysis

2. Suprimindo alertas do Code Analysis

60 minutos

73

Exercício 1: Introdução ao Code Analysis

Neste exercício você irá aprender sobre os novos recursos do Code Analysis do Visual Studio 2010 configurando um conjunto de regras, executando uma análise de código em um projeto de exemplo e entender alguns dos alertas que são disparados.



3. No Source Control Explorer (View | Other Windows | Source Control Explorer), navega para Tailspin Toys | Development | Iteration 2 e clique duas vezes no arquivo TailspinToys.sln para abrir a solução Tailspin Toys.


5. No Solution Explorer, clique com o botão esquerdo do mouse no nó do projeto Tailspin.Model e selecione Analyze | Configure Code Analysis for Tailspin.Model a partir do menu principal, o qual irá carregar o as propriedades do projeto e exibirá a aba do Code Analysis.

Figura 97Configurando o Code Analysis para um projeto

74

Nota: A aba do Code Analysis é nova no Visual Studio 2010, e ela permite a você escolher quais os conjuntos de regras a partir de uma lista plana de regras, assim como nas versões anteriores.

6. Selecione a opção Microsoft All Rules no combo Rule Set.

Figura 3Configurando o Code Analysis para o uso de um conjunto de regras

7. No Solution Explorer, clique com o botão direito no nó do projeto Tailspin.Model e selecione Run Code Analysis a partir do menu de contexto que aparece.

Figura 98Localização do comando Run Code Analysis a partir do menu de contexto

75

8. O recurso Code Analysis roda sobre o código estático com as regras definidas pela Microsoft e exibe os resultados como alertas. Navegue na lista de alertas e leia alguns deles.

Figura 99Visualização dos alertas do Code Analysis

Nota: Dependendo da versão do Tailspin Toys que você estiver executando, você deverá ver mais ou menos alertas.

Nota: As regras do Code Analysis também podem ser configuradas para exibir como erros, caso desejado.

9. Os alertas produzidos pelo Code Analysis fornecem uma riqueza de informações incluindo um código único de catedoria (como CA1062 na tela acima), um nome de grupo (Microsoft.Design na tela acima), e uma breve descrição do problema ou uma sugestão de solução, além da localização do arquivo ao qual se refere o código.

Nota: Pressionando F1 enquanto selecionando um dos alertas irá levar você a uma ajuda online mais descritiva. Isto pode não ser possível se você estiver dentro do ambiente virtual.

10. Encontre um alerta que pareça ser fácil e rápido de resolver, como o alerta para CA1062 da tela acima, e clique duas vezes nele para carregar o código.

76

Figura 100Erros do Code Analysis vinculados ao código fonte

11. Execute o reparo necessário para solucionar o alerta. Para CA1062, nos foi dito que deveríamos validar o parâmetro ‘item’ antes de usá-lo. Uma sugestão de reparo seria o da tela a seguir:

Figura 101Validando um parâmetro de entrada para solucionar o CA1062

12. Selecione Analyze | Run Code Analysis on Tailspin.Model a partir do menu principal e verifique que o alerta desapareceu.

77

Exercício 2: Suprimindo Alertas do Code Analysis

Neste exercício, você irá aprender como suprimir alertas do Code Analysis no nível de projeto ou de código fonte.

1. Na janela Error List, selecione os três primeiros alertas que são exibidos no projeto associado. Note que eles não estão associados a um arquivo (olhe a coluna File). Imagine que nós não queremos ser notificados quando o Code Analysis executa.

2. Clique com o botão direito do mouse nos alertas selecionados e escolha Supress Message(s) | In Project Suppression File a partir do menu de contexto que aparece. Isto irá adicionar ao metadata do assembly no arquivo GlobalSuppressions.cs.

Figura 102Suprimindo regras específicas do Code Analysis no nível de projeto

3. Abra o arquivo GlobalSuppressions.cs para visualizar o código adicionado.

78

Figura 103Regras suprimidas pelo arquivo GlobalSuppressions.cs

4. Dê uma olhada no próximo alerta do Code Analysis que é listado, CA1726, que sugere a mudança no nome do tipo Cancelled que deve ser renomeado para Canceled. Clique duas vezes neste alerta para ir ao código fonte e reparar.

5. Clique com o botão direito no nome da classe Cancelled e selecione Refactor | Rename… a partir do menu de contexto que aparece.

Figura 104Renomeando uma classe para corrigir a grafia

6. Na janela Rename, mude Cancelled para Canceled e clique no botão OK para continuar.

7. Na janela Preview Changes – Rename, revise as mudanças propostas e clique no botão Apply para completar o processo de refactoring.

8. Selecione o próximo alerta do Code Analysis. Imagine que nós queiramos suprimir esta regra em específico, mas desta vez nós apenas gostaríamos de aplicar a um código fonte em específico. Clique com o botão direito do mouse no alerta e selecione Suppress Message(s) |

79

In Source a partir do menu de contexto que aparece. Isto aplica um atributo SuppressMessage para o delegate para o qual o Code Analysis foi identificado.

Figura 105Suprimindo uma regra do Code Analysis

9. Selecione Analyze | Run Code Analysis on Tailspin.Model a partir do menu principal e verifique que mais alertas foram apresentados.

10. Neste ponto, existem alertas adicionais do Code Analysis que nós podemos averiguar, mas imagine que nós simplesmente queiramos ignorar o restante dos itens por agora. Retorne a sessão Code Analysis das propriedades do projeto e selecione a opção Microsoft Minimum Recommended Rules.

11. Selecione Analyze | Run Code Analysis on Tailspin.Model a partir do menu principal e verifique que o número de alertas foi dramaticamente reduzido. Os alertas que aparecem como resultado do uso deste conjunto de regras são em sua maioria problemáticos em tempo de execução.

80

Laboratório 6:

Code Discovery utilizando Architecture Tools

Visão geral

Neste laboratório você irá aprender como gerar e navegar pelos gráficos de dependência do Visual Studio 2010 Ultimate a fim de obter um melhor entendimento e melhorar a comunicação sobre a arquitetura do sistema.

Exercícios


1. Geração e navegação pelo gráfico de dependências

2. Trabalhando com Graph Nodes e Grouping

60 minutos

81

Exercício 1: Geração e navegação pelo gráfico de dependências

Neste exercício você irá aprender como gerar um gráfico de dependência que exibe os relacionamentos entre os tipos do assembly da aplicação (como as chamadas, heranças, retornos e mais), tipos genéricos gerados e tipos de assemby externos. Você também tomará contato com a navegação pelos relacionamentos e recursos de zoom.





5. A partir do menu principal, navegue para Architecture | Generate Dependency Graph para exibir as opções disponíveis (By Assembly, By Namespace, By Class, Custom e outras).

Figura 106Visualização das opções do Dependency Graph

6. Selecione Custom… e observe os vários níveis de detalhamento que podem ser incluídos no gráfico de dependências gerado. Note que uma pré-visualização é gerada exibindo a estrutura geral da opção selecionada atualmente.

82

Figura 107Incluindo assemblies para o gráfico de dependências

83

Figure 108Incluindo assemblies,namespaces, types, e methods ao gráfico de dependências

Nota: Também é possível incluir/excluir tipos e métodos pelo modificador de acesso (public, protected, private). Clique na seta abaixo próxima ao cabeçalho do Access Filter caso você queira ver estas opções.

7. Clique no botão Cancel para fechar a janela Generate Dependency Graph.

8. Gere o gráfico de dependências por assembly (Architecture | Generate Dependency Graph | By Assembly).

84

Figura 109Gerando o gráfico de dependências por assembly

9. O resultado da geração é um document DGML (Directed Graph Markup Language) que você pode editar usando o Visual Studio 2010 ou outras ferramentas. Observer a janela Output para ter uma ideia dos passos executados para gerar o gráfico de dependências.

Figura 110Saída do processo de geração do gráfico de dependências

10. Feche a janela Output para ganhar mais espaço na exibição do gráfico de dependências. O gráfico está atualmente no estado completamente recolhido, logo você pode ver todos os assemblies de uma só vez. As linhas cinza, de espessuras variadas, representam a magnitude

85

da interdependência do relacionamento entre os assemblies, sendo que as linhas mais grossas indicam maiores relacionamentos.

Figura 111Gráfico de dependências gerado exibindo os assemblies de saída e suas dependências

Nota: Em adição aos assemblies de saída, grupos chamados Externals e Generics são criados. O grupo Externals inclui todos os assemblies referenciados externamente enquanto o grupo Generics inclui os tipos genéricos gerados.

11. Expanda o grupo Generics clicando na seta dupla para baixo.

Figura 112Localização da seta dupla

86

12. Utilize a caixa de zoom da barra Directed Graph para ajustar o zoom em 100%. Isto nos permitirá ver mais detalhes dos tipos genéricos.

Figura 113Localização da caixa de zoom

Nota: O processo de zoom também pode ser feito com + e – dos ícones de lupa próximos a caixa de zoom, ou também usando Ctrl + botão de rolagem do mouse.

13. Clique com o botão direito do mouse na caixa ICollection<Image> para exibir as linhas de relacionamento (em azul).

14. Expanda o nó ICollection<Image>.

Figura 114Expandindo o nó

15. A seguir, passe o cursor do mouse sobre as linhas de relacionamento até encontrar uma com o Target Node do tipo Image.

Figura 115Linha de relacionamento exibindo que o nó alvo é to tipo Image

87

Nota: O gráfico de dependências gerado que você vê pode ser diferente dos screenshots exibidos neste manual de laboratório. Você pode precisar utilizar mais ou menos zoom, rolagem procurando visualmente pelos objetos especificados em cada passo deste laboratório.

16. Clique na seta para navegar para o nó de destino (Image).

Nota: O controle de navegação que aparece quando você posiciona ou ponteiro do mouse sobre uma linha de relacionamento azul exibe três ações. As duas setas navegam cada uma para a origem ou para o destino do relacionamento (dependendo do contexto). O botão + ajuda a gerar um novo gráfico contendo apenas os nós de origem e destino.

17. Depois que o gráfico é reconstruido e exibido, a classe Image será exibida com todas as suas linhas de relacionamento.

Figura 116Zoom na classe Image

18. Na caixa de zoom, selecione Zoom to fit para que todo o gráfico de dependência seja exibido na mesma tela.

88

Figura 117Relacionamento entre a classe Image que está no namespace Tailspin Model (veja o círculo vermelho na parte de baixo) e a interface genérica ICollection<Image> (ao topo circulada em vermelho)

89

19. Volte para a visualização recolhida (original) do gráfico de dependências clicando com o botão direito do mouse e selecionando Group | Collapse All.

Figura 118Menu de contexto exibindo a opção Collapse All

20. Expanda o nó Externals a partir do gráfico de dependências e exponha os assemblies externos usados pela aplicação Tailspin.

21. Realize um zoom e expanda o nó System.Web.dll dentro do grupo Externals a fim de visualizar todos os namespaces usados pela aplicação Tailspin.

Figura 119Visualização do nó System.Web.dll apara o gráfico de dependências

22. Encontre expanda o nó System.Web.Rounting para visualizar os tipos contidos neste.

90

Figura 120Nó System.Web.Routing expandido

23. Selecione a classe Route Table para exibir suas linhas de relacionamento.

24. Encontre a linha de relacionamento que tenha como origem o nó Application_Start e como destino o nó get_Routes. Use o controle de navegação para navegar para o nó de origem Application_Start. Esta ação irá expandir a Tailspin.Web.dll e selecionar nó da classe MvcApplication.

Figura 121Localização do botão de navegação que liga ao Application_Start

91

Nota: As linhas de relacionamento, algumas vezes, são exibidas umas sobre as outras, tornando a seleção de uma linha em específico. Para contornar isto, amplie o zoom até que as linhas fiquem distantes umas das outras ou use os botões gráficos de layout ao lado da caixa de zoom na caixa de ferramentas Directed Graph.

25. Navegar para o nó Application_Start leva você para uma visualização aprofundada do assembly Tailspin.Web.dll pela expansão do namespace Tailspin.Web, da classe MvcApplication e, finalmente, do método Application_Start.

Figura 122Resultado da navegação para o nó Application_Start

26. Retorne a visualização original do gráfico de dependências clicando com o botão direito do mouse e selecionando Group | Collapse All.

27. Na caixa de zoom, selecione Zoom to fit para exibir todo o gráfico de dependências.

28. Expanda o nó Externals do gráfico de dependências para exibir os assemblies externos utilizados pela aplicação Tailspin.

29. Aumente o zoom e expanda o nó System.Web.dll dentro do grupo Externals, assim você poderá ver todos os tipos contidos nos namespaces usados pela aplicação Tailspin.

30. Expanda o nó do namespace System.Web.UI para ver todos os tipos usados pela aplicação Tailspin.

92

Figura 123Tipos do namespace System.Web.UI usados pela aplicação Tailspin

31. Expanda a classe Page para ver todos os métodos usados pela aplicação Tailspin.

Figura 124Métodos da classe Page usados pela aplicação Tailspin

32. Selecione o nó get_Request na classe Page e localize a linha de relacionamento com o nó de origem Page_Load. Esta linha de relacionamento nos mostra exatamente como nós estamos usando a classe externa Page a partir da aplicação Tailspin.

93

Exercício 2: Trabalhando com Graph Nodes e Grouping

Neste exercício você irá aprender como reduzir a complexidade do gráfico de dependências removendo nós desnecessários, ajustando os nós em grupos e modificando as propriedades dos nós no gráfico.

1. Retorne a visualização original do gráfico de dependências clicando com o botão direito do mouse e selecionando Group | Collapse All.

2. Na caixa de zoom clique em Zoom to fit.

3. Expando o nó Externals a partir do gráfico de dependências para exibir os assemblies externos usados pela aplicação Tailspin.

4. Selecione o nó do assembly mscorlib.dll e pressione a tela Delete para remove-lo do gráfico. A lógica por traz da remoção deste nó, assim como de outros assemblies e tipos externos, é que estes causam muita poluição no gráfico, tornando a navegação pelo gráfico difícil.

Figura 125Localização da mscorlib.dll

Nota: Muitos nós com o nome mscorlib.dll existem porque a aplicação faz referência a duas versões diferentes deste assembly.

5. Apague os dois nós System.dll a partir do grupo Externals.

94

Nota: A linha de relacionamento cinza conectando o grupo Externals termina na fronteira do grupo. O propósito disto é reduzir a complexidade visual do gráfico de dependências. Se você remover o grupo Externals, você estará apto a ver todos os relacionamentos diretos entre os assemblies externos e internos, bem como mais detalhes entre os assemblies atualmente agrupados dentro de Externals.

6. Selecione o grupo Externals, clique com o botão direito em Group | Remove Group. Isto irá remover o agrupamento mas não os nós contidos nele.

Figura 126Removendo o grupo Externals

7. Utilizando a caixa de zoom, selecione Zoom to fit.

8. Apague o nó Tailspin.Test.Model.dll do gráfico. Nós devemos remover este nó para ter uma ideia melhor sobre como a aplicação desenvolvida trabalha.

95

Figura 127Gráfico de dependências de assemblies simplificado

9. Apesar da remoção do grupo Externals nos ter dado uma melhor ideia sobre o que está acontecendo, isto torna difícil distinguir entre os assemblies da aplicação e aqueles que nós previamente agrupamos como Externals. Isto pode ser contornado adicionando uma propriedade ao nó dando aos assemblies externos uma cor diferente. Clique em Add no painel Legend exibido no canto superior direito do gráfico e selecione Node Property | IsExternal.

Figura 128Criando uma propriedade de nó que pronta para IsExternal

96

10. A propriedade IsExternal do nó é adicionada ao painel de legenda. Localize o combo do IsExternal e selecione a opção Background... para carregar a janela de seleção de cores (Color Set Picker).

Figura 129Mudando a cor de fundo de nós dependendo do estado da propriedade IsExternal

11. Na janela Color Set Picker, selecione True e a cor vermelha (), ou qualquer outra cor que você prefira, desde que não seja a azul.

12. Clique no botão OK para confirmar sua seleção.

Figura 130Gráfico de dependências exibindo os assemblies externos na cor vermelha

97

Laboratório 7:

Entendendo Acoplamento de Classes

Visão geral

Entender o relacionamento entre classes em um código de um projeto pode ser uma tarefa difícil. Neste laboratório você irá aprender a usar os novos diagramas DGML do Visual Studio 2010 Ultimate para aprofundar em uma base de código existente e perceber como os tipos estão relacionados.

Exercícios


13. Introdução ao Gráfico de Dependências de Classes

14. Descobrindo Referencias Circulares

Pré-requisitos

É recomendado que você completasse o laboratório “Lab 6 - Code Discovery utilizando Architecture Tools” antes de explorar este laboratório.

60 minutos

98

Exercício 1: Introdução ao Gráfico de Dependência de Classes

Neste exercício você irá aprender a gerar e navegar pelo gráfico de dependência de classes.





5. Feche a janela Output depois que o processo de compilação estiver completo.

6. Crie um novo gráfico de dependência de classes (Architecture | Generate Dependency Graph | By Class). O gráfico gerado é armazenado no formato Directed Graph Markup Language (chamado acima de DGML), que permite a você trabalher com ele visualmente com o Visual Studio 2010 e outras ferramentas.

Nota: Gerar o gráfico de dependência de classes para todos os projetos de uma solução pode levar alguns minutos para completar.

7. Selecione o botão Quick Clusters a partir da barra de ferramentas Directed Graph para visualizer todas as classes e seus relacionamentos e uma só vez.

Figura 131Loalização do botão Quick Clusters

99

Figura 132Visualização com o Quick Clusters do gráfico de dependência de classes gerado

Nota: A visualização do gráfico de dependências gerado pode ser diferente das screeenshots exibidas neste manual. Você deve precisar executar ação adicionais de zoom, rolagem e, visualmente procurar pelos objetos especificados nos passos deste laboratório.

8. A visualização Quick Clusters do gráfico de dependências apenas nos dá uma ideia do número de classes no projeto TailspinToys e seu grau de dependência entre cada uma das classes. Esta visualização tem uma utilidade limitada para nós, portanto aumente o zoom em

100

direção ao centro do gráfico pressionando a tecla Ctrl e usando o botão de rolagem do mouse até que você possa ver claramente a classe Product.

Nota: O zoom também pode ser realizado pela caixa de zoom localizada na barra de ferramenteas Directed Graph ou ainda pelo uso das lupas contendo os simbolos de + e -, próximas a caixa de zoom.

Figura 133Visão do gráfico de dependência de classes mostrando a classe Product

Nota: A espessura das linhas cinzas representam a magnitude da interdependência do relacionamento entre as classes, com as linhas mais grossas representando mais relacionamentos.

9. Selecione a classe Product clicando com o botão esquerdo do mouse para destacar apenas os relacionamentos diretos (cor roxa) entre a classe Product e outras classes representadas no gráfico.

101

Figura 134Classe Product selecionada, exibindo as linhas de relacionamento diretos

10. Selecionar o nó da classe Product a partir do gráfico, nos ajuda a destacar os relacionamentos diretos entre as outras classes, mas ainda é difícil distinguir entre as dependências dos relacionamentos de entrada e saída. Para que possamos visualizar esta distinção, mude o leiaute do gráfico selecionando o botão Top to Bottom a partir da barra de ferramentas Directed Graph.

Figura 135Localização do botão Top to Bottom

Figura 136Resultado do leiaute Top to Bottom

11. Este leiaute nos exibe as linhas de relacionamento de dependência de entrada no topo e as linhas de relacionamento de dependência de saída no rodapé. Isto é um avanço mas ainda existe uma grande poluição visual dos relacionamentos de dependência entre outras classes

102

(exibidas em cinza). Selecione o botão Butterfly Mode para esconder as linhas de relacionamento que não fazem parte do relacionamento com o nó Product selecionado.

Figura 137Localização do botão Butterfly Mode

Figura 138Visualizaçao do leiaute Butterfly Mode

12. Nós podemos simplificar a visualizaçaão dos relacionamentos de dependências e das classes escolhendo a profundidade do detalhamento da ramificação. Selecione o botão Neighborhood Browse Mode a partir da barra de ferramentas Directed Graph e selecione a opção 1 Link.

Figura 139Localização do botão Neighborhood Browse Mode

103

Figura 140Resultado da visualização Neighborhood Browse Mode com1 Link

13. Selecione o botão Quick Clusters para retornar a visualização de layout clusters.

Figura 141Localização do botão Quick Clusters

14. Caso necessário, utilizae o zoom out para visualizer completamente o gráfico.

104

Figura 142Visualização Quick Clusters exibindo a relações diretas entre Product e outras classes

15. Localize o nó da classe OrderLine e passe o cursor do mouse sobre a linha de relacionamento roxo que conecta o nó da classe Product. Quando o controle de navegação aparecer, clique no botão + para ver os detalhes do relacionamento. Isto iniciará o processo de geração de um novo gráfico de dependência.

105

Figura 143Localização do botão + para criação de um novo gráfico

Nota: O controle de navegação que aparece quando você posiciona ou ponteiro do mouse sobre uma linha de relacionamento azul exibe três ações. As duas setas navegam cada uma para a origem ou para o destino do relacionamento (dependendo do contexto). O botão + te ajuda a gerar um novo gráfico contendo apenas os nós de origem e destino.

16. Na janela Generate Dependency Graph, inclua apenas Types e Methods. Nós iremos deixar Assemblies, Namespaces e Externals fora deste novo gráfico. Selecione a opção Show Containment as group e clique no botão OK para gerar o novo gráfico.

106

Figura 144Visualização das opções do Generate Dependency Graph

Figura 145Visualização inicial do gráfico de dependências gerado

107

17. Vamos expander a visualizaçõa inicial clicando como botão direito do mouse e selecionando Group | Expand All.

18. Selecione o botão de leiaute Top to Bottom.

Figura 146Gráfico de dependências expandido

19. Até agora, nós aprendemos apenas algumas coisas adicionais ao relacionamento entre duas classes e seus métodos envolvidos. Para ver mais detalhes sobre o relacionamento entre os métodos, selecione o botão Dependency Matrix View.

Figura 147Localização do botão Dependency Matrix View

108

Figura 148Visualização da matriz de dependências

20. A visualização da matriz de dependências nos permite ordenar as linhas e colunas pelo nome. Selecione o botão Rows by Display Name ao lado direito do botão Dependency Matrix View.

21. A visualização da matriz de dependência deve agora exibir os relacionamentos saindo da classe OrderLine para a classe Product, como você pode ver na direção da flecha na Figura 15.

22. Outra opção que você possui é usar a visualização Reflexive a fim de visualizar os relacionamentos independentemente da direção. Selecione o botão Show Reflexive View.

Figura 149Localização do botão Show Reflexive View

109

Figura 150Matriz de dependendica Reflexive

110

Exercício 2: Descobrindo Referências Circulares

Neste exercício, você irá aprender como usar o analisador de referências circulares para descobrir classes que estão fortemente acopladas umas as outras.

1. Retorne ao gráfico de dependências original (ClassDependencies1.dgml) e assegure-se que o nó da classe Product está selecionado.

Figura 151Gráfico de dependência com a classe Product selecionada

2. Clique com o botão direito do mouse dentro do gráfico de dependências e selecione Analyzers | Circular References para identificar quais tipos estão fortemente acoplados.

3. Retire a seleção do nó Product clicanco com o botão do mouse em alguma area branca do gráfico. Note que existem linhas circulando os tipos que estão fortemente acoplados a classe Product.

111

Figura 152Gráfico de dependência de classes mostrando referências circulares entre a classes Product e outros tipos

Nota: Linhas de relacionamento vermelhas indicam referências circulares diretas enquanto as linhas cinzas indicam referências circulares indiretas (existe pelo menos um outro tipo entre elas).

112

Laboratório 8:

Utilizando o Architecture Explorer

Visão geral

O Visual Studio 2010 Ultimate Architecture Explorer fornece um modo fácil de navegar pelo seu código e analisar os relacionamentos entre os projetos, tipos, seus assemblies e referências. Neste laboratório você verá como ode usar o Architecture Explorer para examinar uma solução existente e criar diagramas DGML dinâmicos.

Exercícios


4. Introdução ao Architecture Explorer

5. Analisando a Estrutura de um Projeto usando o Architecture Explorer e DGML

6. Analisando Assemblies Externos usando o Architecture Explorer

Pré-requisitos

É recomendado que você completasse os laboratórios “Lab 6 - Code Discovery utilizando Architecture Tools” e “Lab 7 - Entendendo Acoplamento de Classes” antes de explorar este laboratório.

60 minutos

113

Exercício 1: Introdução ao Architecture Explorer

Neste exercício você irá aprender como usar a ferramenta Architecture Explorer para navegar pela estrutura do código fonte do projeto e gerar diagramas DGML que ajudam a elucidar subconjuntos desta estrutura.





5. Feche a janela Output depois que o processo de compilação estiver completo.

6. Carregue o Architechture Explorer (View | Architecture Explorer). O Architecture Explorer permite a você navegar pelos tipos e métodos a partir de uma visualização de classe ou de solução.

Figura 153Visão inicial do Architecture Explorer

114

7. Selecione a opção Class View a partir do Architecture Explorer para visualizar todos os namespaces que são parte da solução Tailspin. A partir deste ponto, clique em um item na extrema direita do painel, isto permitira aprofundar mais nos tipos e membros.

Figura 154Visualização do Class view exibindo os namespaces da solução TailspinToys

8. Role para encontrar o namespace Tailspin.Admin.App e selecione-o para carregar seus tipos.

Figura 155Visualizando os tipos para o namespace Tailspin.Admin.App

115

9. Selecione a classe ProductRelationship para carregar seus membros.

Figura 156Visualizando os membros da classe ProductRelationship

10. Selecione a propriedade Product para ver que ela contém dois métodos.

Figura 157Visualizando os métodos que implementam a propriedade Product

116

Note: Este passo ilustra que o Architecture Explorer está operando sobre o código compilado através de reflection. Como você verá a seguir neste laboratório, você pode explorar código .NET compilado diretamente a partir de assemblies compilados.

11. Selecione o método get_Product.

Figura 158Selecionando o método get_Product expondo a barra vertical Calls

12. Cada nível que aprofundamos dentro dos tipos possui uma barra vertical que expõe filtros, grupos e outros comandos. Selecione a barra vertical Calls para exibir estas opções.

117

Figura 159Opções disponíveis quando trabalhando com nós de tipos e membros

Nota: A figura acima não é uma representação exata sobre o que você deve estar visualizando. Você deverá usar a rolagem para conseguir ver estas opções.

13. Selecione a opção Return Types que está em Outbound Navigation para exibir o retorno do tipo de get_Product.

Figura 160Procurando pelo tipo de retorno de get_Product

14. Selecione o tipo de retorno Product para exibir seus membros. Note que nós estamos agora navegando pelo tipo Product, mas nós ainda temos os passos históricos de nossa navegação.

118

Figura 161Visualizando os membros do tipo Product

15. Selecione a barra vertical Members logo a esquerda da lista de membros de Product e role para baixo para a sessão Inbound Navigation.

Figura 162Visualizando opções dos membros de Product

16. Selecione a opção All Inbound para ver todas as chamadas que referenciam o tipo Product.

Figura 163Visualizando referências de entrada para o tipo Product

119

17. Apesar disto parecer redundante, selecione a classe Product a partir da lista de referências de entradas. Mais uma vez você verá get_Product e set_Product listados.

18. Selecione o botão Create New Graph localizado do lado esquerdo do Architecture Explorer. Isto irá criar um novo diagrama DGML exibindo o caminho completo de navegação que você tomou até este ponto.

Figura 164Localização do botão Create New Graph

Figura 165Representação DBML na navegação manual realizada no Architecture Explorer

120

19. Uma vez que isto é um diagrama DGML, nós podemos usar todas as ferramentas padrão para visualizá-lo e adicionar e remover nós. Selecione o nó TailspinToys e pressione a tecla Delete para remove-lo do diagrama.

20. Retorne ao Architecture Explorer e encontre o método set_Product que está contido dentro da classe Product. Arraste e solte set_Product no diagrama DGML.

Figura 166Adicionando set_Product ao diagrama DGML

Nota: Você pode visualizar a fonte para um tipo clicando com o botão direito do mouse neste e selecionando View Content.

21. Limpe as colunas selecionadas no Architecture Explorer selecionando o botão Clear Columns.

121

Figura 167Localização do botão Clear Columns

122

Exercício 2: Analisando a Estrutura de um Projeto usando o Architecture Explorer e DGML

Neste exercício, você irá aprender mais sobre os recursos do Architecture Explorer a partir do Solution View. Isto inclui mais exposição a navegação de nós, suporte a filtro e um cenário de exemplo que demonstra o poder da combinação do Architecture Explorer e dos diagramas DGML para apoiar nas análises de arquitetura.

1. Selecione a opção Solution View a partir do Architecture Explorer para visualizar todos os projetos que fazem parte da solução TailspinToys.

Figura 168Exibindo o Solution View para os projetos da solução TailspinToys

2. Selecione o projeto Tailspin.Web para obter uma visualização plana dos arquivos.

123

Figura 169Visualizando todos os arquivos do projeto Tailspin.Web

3. No topo da lista de arquivos existe uma caixa de filtro. Digite “.cs” na caixa de filtro e pressione Enter para restringir a exibição dos arquivos àqueles que possuem a extenção .cs.

Figura 170Filtrando os arquivos

4. Pressione Ctrl + A para selecionar todos os arquivos .cs e selecione o botão Create New Graph.

124

Figura 171Diagrama DGML exibindo os arquivos fonte do projeto Tailspin.Web

Nota: Caso Ctrl + A não funcionar, assegure-se que a lista onde você está digitando possui o foco e um item selecionado.

5. Feche o novo gráfico e retorne ao Architecture Explorer.

6. Selecione o projeto Tailspin.Web novamente para retornar a visualização sem filtro dos arquivos.

7. Selecione a barra vertical de arquivos e a opção de navegação Classes para visualizar todas as classes do projeto Tailspin.Web.

Figura 172Visualizando as classes de Tailspin.Web

125

8. Pressione Ctrl + A para selecinar todas as classes e clique no botão Create New Graph.

Figura 173Diagrama DGML exibindo todas as classes do projeto Tailspin.Web

9. Feche o novo gráfico e retorne ao Architecture Explorer.

10. Limpe a coluna selecionada no Architecture Explorer clicando no botão Clear Columns.

11. Selecione Solution View, navegue para o projeto Tailspin.Web mais uma vez e selecione a opção References na barra vertical de arquivos. Isto irá exibir todos os assemblies referenciados usados pelo projeto.

Figura 174Selecionando todos os assemblies para um projeto

12. Clique no botão Filter no topo da lista de assemblies referenciados e selecione a checkbox Project. Isto irá filtrar todas as referencias que são externas a solução TailspinToys.

126

Figura 175Localização do botão de filtro e da opção Project

13. Selecione o botão OK para aceitar as mudanças de filtro.

14. Selecione todos as refereências de projetos filtradas e clique no botão Create New Graph.

15. Apague o nó TailspinToys do diagrama.

Figura 176Diagrama DGML exibindo as referências de Tailspin.Web

16. Agora nós podemos explorar os relacionamentos entre Tailspin.SimpleSqlRepository e outros projetos no diagrama. No Architecture Explorer, selecione apenas o item Tailspin.SimpleSqlRepository e mude a visualização dos arquivos para References.

127

Figura 177Lista de referências para o projeto Tailspin.SimpleSqlRepository

17. Selecione os itens Tailspin.Infrastructure e Tailspin.Model e então arraste e solte dentro do diagrama existente.

Figura 178Diagrama DGML exibindo as referencias ao projeto Tailspin.SimpleSqlRepository

128

18. Agora nós podemos criar uma visualização melhor sobre como as classes relacionadas a Product destes projetos se encaixam nesta figura. Retorne ao Architecture Explorer e selecione três referências de projeto.

19. Selecione a barra vertical de arquivos e a opção Classes para visualizar todas as classes a partir dos projetos selecionados.

20. Na caixa de filtro, digite “Product” e pressione Enter para ver as classes que contém.

21. Selecione todas as classes e arraste e solte no diagrama DGML existente.

Figura 179Diagrama DGML atualizado exibindo como a classe Product se relaciona com os projetos existentes

22. Selecione a classe ProductList a partir do diagram DGML e clique no botão Butterfly Mode a partir da barra de ferramentas Directed Graph. Isto remove os nós que não se referenciam diretamente a ProductList.

Figura 180O botão Butterfly Mode

Figura 181Visualização Butterfly Mode para ProductList

129

23. Clique no botão Butterfly Mode mais uma vez para desligar.

24. Selecione o botão Quick Clusters e coloque o gráfico no espaço total da tela usando o recurso zoom fit. Note que agora está fácil visualizar que o projeto Tailspin.SimpleSqlRepository e suas classes Product são responsáveis pelo acesso a dados.

Figura 182A visualização do botão Quick Clusters

Figura 183Visualização Quick Clusters do gráfico atual de dependências

25. Agora nós podemos ver como o administrador da Tailspin se encaixa na arquitetura como um todo. Limpe os botões selecionados no Architecture Explorer clicando no botão Clear Columns.

26. Selecione Solution View e a seguir Tailspin.Admin.App.

27. Selecione a barra vertical de arquivos e selecione a opção References. Note que não há referências a qualquer dos projetos Tailspin. Existem referências para System.Data.dll e

130

System.Data.Linq.dll, logo talvez o a administração da aplicação esteja acessando diretamente o banco de dados.

28. Selecione a barra vertical atualmente exibindo as referências (References) e selecione a opção Classes.

29. Selecione todas as classes que começam com Product.

Figura 184Selecionando as classes de produtos relacionadas para a aplicação administrativa de Tailspin

30. Clique no botão Create New Graph.

Figura 185Diagrama DGML exibindo a aplicação Tailspin admin e as classes Product

131

31. Apague o nó da solução TailspinToys do diagrama.

32. Noque que aqui não há chamadas ao código de acesso a dados Tailspin.SimpleSqlRepository. Clique com o botão direito em algum lugar dentro do gráfico DGML e seleciona Save As XPS... Nós agora vamos criar um work item e atribuir isto para uma investigação futura.

Figura 186Salvando o diagrama DGML como XPS

33. Nomeie o arquivo XPS como “AdminAppReview” e clique no botão Save.

34. No Team Explorer, clique com o botão direito no nó Work Items para o projeto TailspinToys e selecione a opção New Work Item | Task.

35. Preencha os seguintes campos como exibidos na tabela abaixo:

Work Item Field Value

Title Review why Admin app is not using the Data Access Layer project

Assigned To Michael Affronti (PM)

Stack Rank 1

Details Description Take a look at the attached diagram. Notice how we’re using Product data but not getting it via the Tailspin data access project.

36. Selecione a aba Attachments e clique no botão Add.

132

Figura 187Localização da aba Attachments e do botão Add

37. Selecione o botão Browse e o arquivo XPS que você salvou.

38. No campo Comment, digite “Snapshot of current Admin app.”

39. Selecione o botão OK para adicionar o arquivo ao novo work item.

40. Clique no botão Save Work Item para finalizar o processo de criação do novo work item.

Figura 188Localização do botão Save Work Item

41. Feche todas as janelas abertas no Visual Studio, inclusive a do novo work item e dos gráficos existentes. Você não precisa salvar os gráficos existentes.

42. Apague as colunas selecionadas do Architecture Explorer selecionando o botão Clear Columns.

133

Exercício 3: Analisando Assemblies Externos usando o Architecture Explorer

Neste exercício, você irá aprender como carregar e navegar pelos assemblies .NET externos. Isto pode lhe ajudar a ganhar conhecimento sobre a arquitetura dos frameworks ou aplicações dos quais você não possui o projeto ou códigos fonte.

43. Selecione a opção Select Files a partir do Architecture Explorer. Isto irá permiter a você carregar assemblies .NET compilados e analisá-los como você fez com os Class e Solution Views.

Figura 189Select Files permite a você carregar e navegar por qualquer assembly .NET

44. Na caixa File Name, digite “c:\windows\microsoft.net\framework\v4.0.30319” e pressione a tecla Enter.

Nota: Se o diretório v4.0.30319 não estiver disponível, selecione o mais recente.

45. Na caixa de texto File Name, digite “System.Data.dll” e clique no botão Open para continuar.

46. Selecione o arquivo System.Data.dll para ver seus tipos.

134

Figura 190Visualizando os tipos de System.Data.dll

47. Selecione o botão de filtro no topo da lista de tipos e selecione a checkbox Class e a checkbox IsPublic.

Figura 191Criando um filtro para as classes públicas

48. Pressione o botão OK para ver a lista de classes públicas do assembly System.Data.dll.

49. Digite “sql” na caixa de texto de filtro no topo da lista e pressione Enter. Então você verá os tipos que contem o texto.

135

Figura 192Filtrando por um texto

50. Selecione todos os tipos listados e clique no botão Create New Graph.

Figura 193Diagrama DGML exibindo System.Data.dll e suas classes

Para questões sobre este material envie um e-mail para [email protected]

Copyright © 2011 por Allmatech TI e Microsoft Corporation. Todos os direitos reservados.

exercícios - web viewpara editar as propriedades deste . workspace. ... após...

Documents