Sunteți pe pagina 1din 68

tipo d o artigo

Edio 42 - .NET Magazine

Ano 4 - 42 Edio 2007 - ISSN 1980-3931 - Impresso no Brasil

Corpo Editorial
Diretor Editorial e Administrativo

Atendimento ao Leitor
A DevMedia conta com um departamento

Gladstone Matos
gladstone@neoficio.com.br

exclusivo para o atendimento ao leitor. Se voc

Direo de Arte

exemplar ou precisar de algum esclarecimento

Vinicius O. Andrade
viniciusoandrade@gmail.com

sobre assinaturas, exemplares anteriores,

tiver algum problema no recebimento do seu

endereo de bancas de jornal, entre outros,


Capa
Antonio Xavier
jaxs_design@yahoo.com.br

Reviso
Rafael de Castro
fael.cast@gmail.com

entre em contato com:


Carmelita Mullin Atendimento ao Leitor
www.devmedia.com.br/central/default.asp
(21) 2220-5375

www.devmedia.com.br/.NET

Kaline Dolabella
Gerente de Marketing e Atendimento
kalined@terra.com.br
(21) 2220-5375

Articulistas desta edio

Publicidade

Na Web

Rodrigo Sendin, Guilherme A Vieira, Ciniro Nametala, Nilton Pinheiro,


Luiz Gonzaga Filho, Eduardo Carvalho, Jos Antonio Thomaz

Editor Geral
Guinther Pauli
guinther@devmedia.com.br

Editor Tcnico
Luciano Pimenta
lucianopimenta@clubedelphi.net

Para informaes sobre veiculao de


anncio na revista ou no site entre em
contato com:
Kaline Dolabella
publicidade@devmedia.com.br

Para fechar parcerias ou aes especficas


de marketing com a DevMedia, entre em

Distribuio
Fernando Chinaglia Dist. S/A
Rua Teodoro da Silva, 907
Graja - RJ - 206563-900

contato com:
Jeff Wendell
jeff@devmedia.com.br

Fale com o Editor!

de artigo voc gostaria de ler, que artigo voc

entre em contato com os editores, informando


o ttulo e mini-resumo do tema que voc
gostaria de publicar:

mais gostou e qual artigo voc menos gostou.

Guinther Pauli - Editor da Revista

Fique a vontade para entrar em contato com

guinther@devmedia.com.br

muito importante para a equipe saber o


que voc est achando da revista: que tipo

os editores e dar a sua sugesto!


Se voc estiver interessado em publicar um

Luciano Pimenta - Editor do Site

artigo na revista ou no site .NET Magazine,

lucianopimenta@clubedelphi.net

Na DevMedia, o leitor de banca tambm ganha!


Na compra dessa edio, ganhe essas 10 aulas do curso de C#:
http://www.devmedia.com.br/articles/listcomp.asp?keyword=net42video
s&codigobanca=sylar

Apoio

A revista .net Magazine parte integrante da assinatura .NET


PLUS. Para mais informaes sobre o pacote .NET PLUS, acesse:
http://www.devmedia.com.br/dotnet

Edio 42 - .NET Magazine

EDITORIAL
O AJAX representa a segunda gerao dos aplicativos para Web, focados na
colaborao entre pessoas, um dos pilares da Web 2.0. No falamos apenas
de uma evoluo na plataforma Web, mas de uma mudana profunda em
como os aplicativos so escritos. Tecnicamente falando, o AJAX permite a
comunicao assncrona de pginas com o servidor Web, permitindo ainda
a atualizao parcial de pequenas pores da tela, ao invs do refresh total.
Aliado a uma srie de novos recursos baseados em AJAX (como por exemplo
o AJAX Control Tool Kit para ASP.NET), suas aplicaes vo ser semelhantes
a aplicaes Desktop e agora sim, cada vez mais veremos sistemas sendo
escritos para Web e no mais para Desktop. A partir desta edio, entre nesse
novo mundo e faa seu conceito de desenvolvimento tambm mudar de
verso, porque o AJAX no s veio para ficar, mas para revolucionar, como vai
comprovar o Rogrio em sua srie de artigos.
Outra tecnologia que veio para revolucionar, presente no .NET 3.0, o que
chamamos de LINQ (Language Integrated Query).Trata-se de uma linguagem,
que voc pode usar no C# 3.0 (ou VB.NET) e permite de uma nica forma
consultar dados vindos de diferentes tipos de fontes: banco de dados, XML
e at mesmo objetos! Exato, voc pode tratar suas colees como tabelas e
usar o LINQ (que age como uma espcie de SQL) para obter dados, fazendo
selects com from, where, join e ainda mais. Conhea esse projeto no artigo
do Diego e construa suas primeiras aplicaes com essa revolucionria
linguagem, criada por Anders Hejlsberg (o mesmo personagem que criou o
Turbo Pascal, Delphi e C#).
Falando em melhorias, o ASP.NET contm uma variedade muito grande
de componentes. Mas algumas vezes sentimos falta de um controle
personalizado, que realize uma tarefa especfica no suprida pelo framework.
O Sendin mostra em seu artigo alguns excelentes componentes para
incrementar suas pginas ASP.NET: FreeTextBox, ASPNetVideo e um super
grid da DevExpress.
Ainda sobre Web, vamos falar em integrao. muito fcil usar SOAP para
trocar dados em XML ou usar servios de sistemas rodando em diferentes
plataformas. Mas e quando o XML e SOAP ficam de fora, como voc faria
para obter informaes e trocar dados com um sistema baseado somente em
pginas? No artigo que preparei para esta edio, mostro uma interessante
tcnica para permitir a obteno de dados a partir de pginas Web, fazendo
requisies HTTP programaticamente.
Ainda nesta edio, o Thiago mostra como aumentar a produtividade da
equipe de desenvolvimento criando templates de projeto e StarterKits.
Com esses recursos, possvel definir um projeto (ou mesmo soluo) que
funciona como modelo para todas as aplicaes da empresa, de forma que
quando um desenvolvedor inicie um novo projeto, ele no comece do zero,
mas do cdigo e design j implementados no template.
Falando em facilidades do Visual Studio, que tal fazer um check-up no seu
cdigo-fonte para ver como ele anda? Voc usa corretamente os padres
definidos pela Microsoft para o estilo de cdigo? O Code Analysis do
Visual Studio permite fazer uma auditoria completa no seu cdigo-fonte,
observando no s o item que comentei anteriormente, mas fazendo uma
verificao nas mais diversas reas. Para finalizar a edio, Luciano Pimenta
mostra super dicas para turbinar o seu GridView. Para finalizar, confira um
artigo sobre Microsoft Solutions Framework, por Fbio Cmara.
Boa leitura e muito sucesso com o ASP.NET AJAX!

NDICE

10 - Mini-curso de AJAX Parte 1


Rogrio Moraes de Carvalho

22 - LINQ - A revoluo do .NET 3.0


Diego Dias

28 - Componentes de terceiros para ASP.NET


Rodrigo Sendin

36 - Preenchendo formulrios Web programaticamente


Guinther Pauli

42 - Criando Templates e StarterKit de projetos


Thiago Miranda

50 - Utilizando o Code Analysis do Visual Studio


Penihel Roosewelt

56 - Microsoft Solutions Framework


Fbio Camara

Guinther Pauli
guinther@devmedia.com.br
Editor Geral
Microsoft Certified: MCP, MCAD, MCSD.NET
Borland Certified: Delphi 6, 7, 2005, 2006, Web, Kylix

.NET Magazine

60 - Dicas de GridView
Luciano Pimenta

Novidade

s do port

al .net PL
US
om.b

www.de
vmedia.c

r/dotnet

+330 vd
eo aulas!
6 cursos
online

Cursos Online

Caro Leitor,
Temos uma novidade: Agora, o assinante da revista .net Magazine
possui uma assinatura de contedo .net PLUS.

o portal .net pLus conta com 6 cursos online, confira:

O pacote .net PLUS inclui:


1) Recebimento da revista .net Magazine;

Crie uma loja virtual completa com ASP.NET [Autor: Fbio Galante]

2) Acesso, durante 1 ano, ao portal .net PLUS, contendo artigos,


mini-cursos e vdeo aulas;

Tudo sobre a linguagem C# (em andamento) [Autor: Pedro Filho]

O portal .net PLUS recebe um contedo novo todo dia e hoje conta
com: I) mais de 300 vdeo-aulas; II) 6 cursos online gratuitos; III)
artigos exclusivos (que no foram publicados na revista)!;
Acesse o portal .net PLUS e receba muito mais contedo sobre
tecnologias Microsoft!

Aprenda a criar um Blog com ASP.NET [Autor: Fbio Galante]


Criando uma aplicao client/server [Autor: Luciano Pimenta]
Criando uma aplicao Web completa [Autor: Luciano Pimenta]
Construindo relatrios com Crystal Reports [Autor: Luciano Pimenta]

Basta utilizar o seu login e senha pessoais. Confira a seguir as


ltimas novidades .net PLUS!
Boa leitura e sucesso!

Na DevMedia, o leitor de banca tambm ganha!

Equipe DevMedia

Na compra dessa edio, ganhe essas 10 aulas do curso de C#:


Introduo a linguagem C#;

ltimas Vdeo-Aulas

(Somente para assinantes)

Crie um site de Notcias Partes I a VIII


Fabio Galante apresenta mais um excelente mini curso onde mostra como
criar um site de notcias em ASP.NET.

Utilizando AJAX no ASP.NET Parte I a IX

Funes bsicas da linguagem;


Rotinas de condio (if );
Trabalhar com rotinas Switch;
Tratamento de excees (Exception);
Uso de arrays e ArrayList;

Euclides Chuma apresenta vrios controles AJAX para utilizao em


aplicao ASP.NET.

Uso de Listas (List<>);

Criando Master/Detail com dataGridView

Criao de classes;

Veja nessa vdeo aula de Luciano Pimenta, como criar um relacionamento


master/detail no dataGridView.

Conceitos bsicos de Orientao a Objetos.

AJAX Popups
Veja nessa vdeo aula de Guinther Pauli, como exibir popups em aplicao
ASP.NET com AJAX.

Cast e Boxing;

Acesse agora mesmo o link:


http://www.devmedia.com.br/articles/listcomp.asp?keyword=net42video
s&codigobanca=sylar

No perca o mini curso de C#


Pedro Bajotto Filho continua com a srie de aulas sobre a linguagem C#.

Edio 42 - .NET Magazine

.NET Brasil

Visual Studio Orcas

o ltimo ms de maio foi lanada a primeira verso Beta


do Orcas. Para quem ainda no
sabe, Orcas o codinome da nova verso
do Visual Studio, que est em desenvolvimento. Caso tenha interesse em testar
essa verso Beta, d uma olhada no seguinte link: msdn2.microsoft.com/en-us/
vstudio/aa700831.aspx.
Voc encontrar os downloads necessrios para instalao ou o download de
uma mquina virtual com ele instalado.
Independente da sua escolha, sugiro
utilizar o Orcas em uma mquina virtual.
Lembre-se que essa a verso Beta 1!
Resumidamente as novidades que o
Orcas trar so as seguintes:

Windows Vista

A nova verso do Visual Studio dever


estar totalmente integrada nova plataforma de desenvolvimento, que hoje
conhecemos como .NET Framework 3.0.
Principalmente as features que atendem
s necessidades de desenvolvimento
para o Windows Vista. Ou seja, o WPF
(Windows Presentation Foundation) estar
totalmente incorporado ao Orcas, onde
tambm teremos uma nova verso do
.NET Framework, a 3.5.

VSTO e Office 2007

O VSTO (Visual Studio Tools for Office)


ser totalmente integrado ao Orcas Professional Edition. Alm disso, o mote principal nesse quesito ser o desenvolvimento
para o Office 2007 e SharePoint 2007.
Uma novidade bem interessante para
quem trabalha com o VSTO, ser o novo

.NET Magazine - .NET Brasil

recurso de distribuio de aplicaes


Office, que promete ser compatvel com
o conceito Click Once.

LINQ

Essa talvez seja a novidade mais significativa que vir. Para quem no conhece,
o LINQ (Language Integrated Query) um
projeto da Microsoft que estende as linguagens C# e VB.NET, para simplificar o
modo como escrevemos queries de acesso
a dados (banco de dados ou XML).
Liderado por Anders Hejlsberg (criador
do Turbo Pascal, Delphi e C#), o LINQ
um projeto que deve revolucionar o
modo como escrevemos queries em nosso
cdigo. bvio que h muito mais sobre
o projeto LINQ, portanto sugiro que
voc d uma boa olhada no site oficial:
msdn2.microsoft.com/en-us/netframework/
aa904594.aspx.

Novidades para Web

Apesar de no ser novidade h um bom


tempo, o ASP.NET AJAX dever estar
incorporado ao Orcas, e no ser mais um
pacote a parte. Alm disso, deveremos ter
novidades como: Novas features XHTML
e CSS para o design surface dos WebForms,
JScript IntelliSense para o ASP.NET AJAX
e Multi-Targeting para .NET Framework
2.0, 3.0 e 3.5.

Melhorias no Gerenciamento do
Ciclo de Vida da Aplicao (ALM)

Basicamente teremos melhorias nos


recursos do Visual Studio Team System,
como: Integrao do banco no ciclo de
vida do software, melhorias nas capaci-

dades do Unit Testing do Visual Studio e


diversas melhorias de performance.
Segundo a Microsoft, as novidades do
Orcas esto concentradas para atender
as necessidades dos desenvolvedores
em trs grandes pilares: Produtividade,
Gerenciamento do Ciclo de Vida da
Aplicao e Integrao das Novas Tecnologias.
De forma prtica, esse ltimo pilar
o mais significativo, haja vista a quantidade de tecnologias de desenvolvimento
que surgiram no ltimo ano (AJAX, WPF,
WF, WCF etc.), e que finalmente precisam
estar integradas em nico pacote.
Se voc quiser saber mais detalhes
sobre essas e outras novidades do Orcas, d uma olhada no White Paper:
www.microsoft.com/downloads/details.
aspx?familyid=17319EB4 -299C- 43B8A360-A1C2BD6A421B&displaylang=en .
Nele voc vai encontrar um apndice com
uma lista enorme de funcionalidades que
devero estar incorporadas ao Orcas.
Mas claro que estamos falando de
uma verso Beta, e muita coisa ainda
pode mudar.

Rodrigo Sendin
(rodrigo.sendin@terra.com.br)

tecnlogo formado pela FATEC de Americana,


mas Piracicabano e torcedor do XV de Piracicaba! Recomenda que voc visite Piracicaba
e no deixe de conhecer a Rua do Porto, onde
pode desfrutar do maravilhoso filhote (peixe)
assado no Tambor.

Encarando o Desenvolvedor

Eu vejo a Luz

Eu mesmo sugeri para vrias pessoas


da Microsoft idias de aplicativos que
mostrassem as vantagens do Smart Client,
como por exemplo, um cliente alternativo
para o Hotmail ou ento uma melhor
interface de busca no site MSDN.
Onde estava Bill Gates para fazer essas
coisas acontecerem? Ser que ele no se
importava mais? Teramos que nos contentar com o Flash da Adobe ou com o
Java Script turbinado / AJAX?
Em 2005, Bill Gates anunciou sua aposentadoria e em 2006 nomeou Ray Ozzie
como seu sucessor. Ozzie seria a pessoa
responsvel pela viso tecnolgica em
uma empresa cada vez mais dominada
por executivos de vendas extremamente
preocupados com os nmeros de curto
prazo.
Eu j estava convencido que teria que
me conformar com uma mistura de AJAX

m 2001 durante sua palestra de


abertura no PDC, o principal
evento para desenvolvedores da
Microsoft, Bill Gates citou a reunificao
das interfaces com usurio como uma
das principais razes por trs do desenvolvimento da plataforma .NET, depois
da ciso causada pelo aparecimento da
Web.
Efetivamente, a Web oferece enormes
vantagens de alcance, distribuio e atualizao, mas custa de uma experincia
com o usurio pobre. J os aplicativos grficos tinham boa interface com usurio,
mas traziam problemas de distribuio e
atualizao. A idia de unir as vantagens
das duas plataformas na tecnologia ento
batizada de Smart Client sempre me pareceu uma tima idia.
No s eu, mas tambm o Gartner
Group ficou entusiasmado com a novidade e previu que em 2006 a maioria
dos novos aplicativos na plataforma
Microsoft seria Smart Client e no Web.
Lgico que o apoio do Bill Gates tornaria
a tecnologia imbatvel!
No incio, por volta de 2002, Smart Client
significava colocar em pginas Web controles .NET e tags href referenciando
executveis. Essa tecnologia evoluiu para
o Click Once no .NET 2.0 em 2005. Infelizmente nenhuma das duas teve grande repercusso. Elas sofreram dois problemas,
um tcnico e outro de marketing.
Tecnicamente, o modelo de segurana
chamado CAS (Code Access Security)
difcil de entender e implantar. Do
ponto de vista de divulgao, ningum
de fora do grupo que cuidava da prpria
tecnologia jamais deu a menor bola para
o Smart Client. Por exemplo, a Microsoft
jamais criou um aplicativo de uso amplo
para funcionar como demonstrao da
nova tecnologia.

o Silverlight teve uma divulgao


excelente, dentro e fora da Microsoft.

e Flash quando Ray Ozzie anunciou, com


bandas e fanfarras no evento MIX, o
SilverLight 1.1, uma nova implementao da tecnologia Smart Client sem seus
tradicionais problemas.
Em termos de marketing, o Silverlight
teve uma divulgao excelente, incluindo
um bom tempo nas principais home pages dos sites Microsoft. Em todo mundo,
Silverlight considerado algo quente.
Do ponto de vista tcnico ele tambm
no decepciona. O beta que est no ar
desde fevereiro e corresponde ao Silverlight 1.0 permite a criao de interfaces
com usurio mais bonitas atravs do uso

.NET Magazine - Encarando o Desenvolvedor

do WPF (Windows Presentation Foundation)


misturado com Java Script.
Mas o alfa da verso 1.1, colocado
no ar depois do MIX, que traz a grande
novidade: uma verso lightdo .NET
Framework. Essa verso pequena,
estar disponvel para plataformas noMicrosoft como MacOS e traz um modelo
de segurana bastante simplificado.
Ou seja: o SilverLight 1.1 promete entregar as promessas do Smart Client, unindo
a distribuio e alcance da Web com uma
interface com usurio bem mais rica e
semelhante aos aplicativos GUI.
claro que o diabo est nos detalhes.
Embora seja uma verso simplificada, o
Silverlight deve ser capaz de atender a
maioria das necessidades de negcio de
seus usurios. A verso atual tem limitaes, por exemplo, falta um mecanismo
declarativo de controles vinculados, o
que facilita bastante o desenvolvimento
de aplicativos de negcios que lidam com
bancos de dados.
Mas ainda cedo para emitir um parecer completo. Tecnicamente no acredito
ser difcil para a Microsoft produzir um
produto ao mesmo tempo simples e poderoso em um curto espao de tempo.
O mais importante que com o apoio
do Ray Ozzie, o novo homem de viso
da Microsoft, o Silverlight deve ter um
futuro brilhante sua frente.

O
Mauro SantAnna
(mas_mauro@hotmail.com)
um crente de primeira hora na tecnologia
SmartClient, mas que foi repetidamente trado
por ela.

Cursos Online
Assinatura

Mais contedo .NET por muito menos!

A revista .net Magazine oferece para seus


assinantes uma srie de Cursos Online de
alto padro de qualidade .
Conhea abaixo os cursos j disponveis.

Curso em destaque

Crie uma loja virtual


completa
Confira neste curso Online como
construir uma loja virtual completa no
Visual studio 2005. Aprenda como criar o
banco de dados, carrinho de compras,
profile, pgina de erros e muito mais .

Confira o plano de aula completo:


www.devmedia.com.br/lojavirtual

Assine a .net Magazine e comece j seu treinamento!


www.devmedia.com.br/assine

Outros cursos disponveis: www.devmedia.com.br/curso


Construindo relatrios
com Crystal Reports e
Visual Studio 2005

Criando uma aplicao


Web Completa

Aprenda a criar um
blog com ASP.NET

Criando uma aplicao client/server


no Visual Studio 2005

Curso de C#
* Curso em andamento

Mais Informaes: www.devmedia.com.br/central - Tel.: 2220-5375 / 2220-5435

Mini-curso de AJAX Parte 1


Conhecendo os bastidores

ste o primeiro de uma srie de


artigos sobre ASP.NET AJAX. O
objetivo deste primeiro artigo
apresentar os bastidores do AJAX, independente do framework ASP.NET AJAX
da Microsoft.
A idia fornecer uma base consistente
de como trabalhar com vrias das tecnologias usadas no AJAX para desenvolver
uma infra-estrutura que permita criar
aplicaes Web mais interativas.
Nota: Para um bom entendimento
deste artigo, ideal que o leitor tenha
um nvel de conhecimento de bsico
a intermedirio em HTML/XHTML, CSS,
XML, ASP.NET 2.0 e C# 2.0 (ou Visual Basic 2005) e um nvel de intermedirio a
avanado em JavaScript e DOM.

Rogrio Moraes de Carvalho


(rogeriom@gmx.net)

Consultor e Instrutor de Tecnologia da Informao. Trabalha com consultorias e treinamentos nas plataformas .NET e Java.

10

Os artigos posteriores estaro focados


nas funcionalidades do framework
gratuito ASP.NET AJAX, que foi disponibilizado pela Microsoft como uma

.NET Magazine - Mini-curso de AJAX Parte 1

extenso ao ASP.NET 2.0. Os leitores que


entenderem os conceitos apresentados
neste artigo, tero um domnio maior
sobre o que acontece nos bastidores do
framework ASP.NET AJAX, como em
qualquer outro framework AJAX.
Esse conhecimento muito importante
para um maior domnio do assunto, principalmente para aqueles desenvolvedores
Web que pretendem criar componentes
no visuais do lado do cliente ou controles ASP.NET AJAX personalizados.

O que AJAX?

AJAX, acrnimo de Asynchronous Java


Script and XML, uma tcnica de desenvolvimento Web que permite a criao
de aplicaes mais interativas. Um dos
principais objetivos tornar as respostas
das pginas Web mais rpidas pela troca
de pequenas quantidades de informaes
com o servidor Web, nos bastidores.
Alm disso, evita-se que a pgina Web
inteira tenha que ser recarregada cada vez

mini- c urso AJA X


que alguma nova informao precisa ser
consultada no servidor. Em geral, isso significa que pginas Web com recursos AJAX
permitem maior interatividade, velocidade
de processamento e usabilidade.

Tecnologias usadas no AJAX

AJAX utiliza uma combinao de vrias


tecnologias padronizadas e no padronizadas de desenvolvimento para Web,
conforme apresentado a seguir:
HTML (HyperText Markup Language)/
XHTML (Extensible HyperText Markup
Language): linguagem para criao de
documentos Web;
CSS (Cascade Style Sheets): mecanismo
para adicionar estilos aos documentos
Web;
XML (Extensible Markup Language): formato que permite a criao de documentos estruturados com dados hierrquicos,
sendo muito usado para troca de dados
na Web;
ECMAScript: padro de linguagem de
script, cujas principais implementaes
so o JavaScript e o JScript;
XMLHttpRequest: objeto que define
uma API com funcionalidades para
scripts do lado do cliente para comunicao entre um cliente e um servidor
usando o protocolo HTTP;
DOM (Document Object Model) para
manipular a estrutura e o estilo de documentos Web dinamicamente;
JSON (JavaScript Object Notation): formato leve para intercmbio de dados;
XSLT (Extensible Stylesheet Language for
Transformation): linguagem para transformao de documentos XML;
dentre outras tecnologias possveis de
serem utilizadas.
Todas as tecnologias citadas anteriormente, com exceo de XSLT, sero descritas em maiores detalhes e utilizadas para
construir um exemplo prtico completo.
Ser apresentado um breve histrico do
AJAX, uma explicao do termo Web 2.0,
que tem sido muito utilizado atualmente
e uma descrio da aplicao Web de
exemplo a ser desenvolvida.

Um breve histrico do AJAX

Assim como DHTML (Dynamic HyperText Markup Language) e SPA (Single Page
Application), o AJAX no uma tecnologia, mas sim um termo que representa

o uso de um grupo de tecnologias de


desenvolvimento para Web.
Antes da introduo do termo AJAX,
um grande nmero de pginas j utilizava recursos do DHTML. O DHTML
corresponde a um grupo de tecnologias
usadas em conjunto para a criao de sites
interativos e animados pela combinao
de HTML, JavaScript, CSS e DOM.
Apesar de usar um subconjunto das tecnologias utilizadas pelo AJAX, o DHTML
afeta dinamicamente a aparncia de uma
pgina com contedo HTML depois que
ela foi completamente carregada e est
sendo visualizada. Porm, sempre que
h a necessidade de comunicao com o
servidor Web, a pgina deve ser recarregada como um todo.
Uma das principais tecnologias nos bastidores do AJAX o objeto XMLHttpRequest, que torna possvel a caracterstica
mais atraente do AJAX: a sua natureza assncrona. Esse objeto pode ser usado pelo
JavaScript para transferir XML e outros
dados textuais de um servidor Web para
uma pgina Web, usando o protocolo
HTTP por meio do estabelecimento de
um canal de comunicao independente
entre pginas Web do lado do cliente e
do lado do servidor.
Apesar de, anteriormente, alguns desenvolvedores terem utilizado frames
ocultos ou elementos IFRAME para comunicar com o servidor nos bastidores de
forma assncrona, atualmente o XMLHttpRequest mais amplamente utilizado
por ser suportado pelos browsers mais
modernos do mercado e por permitir um
maior controle na comunicao entre o
cliente e o servidor.
O termo AJAX foi introduzido recentemente para designar um conjunto de
tecnologias que permitem tornar a interao de usurios com a interface de uma
aplicao Web mais rica e produtiva.
Conforme foi citado anteriormente, o
acrnimo AJAX significa Assyncronous
JavaScript and XML. Ele foi introduzido
por Jesse James Garrett, presidente e
fundador da empresa Adaptive Path, no
artigo Ajax: A New Approach to Web Applications, que foi publicado h pouco mais
de 2 anos, em 18 de fevereiro de 2005.
O artigo no apresentou nenhuma tcnica revolucionria de desenvolvimento
para Web, mas introduziu um novo

termo simples e representativo para um


conjunto de tecnologias que j estavam
sendo utilizadas.
Alm disto, Garret explicou de forma
clara e sucinta como essas tecnologias
melhoravam a experincia dos usurios
com aplicaes Web, inclusive citando
as seguintes aplicaes pioneiras como
exemplo: Google Suggest e Google Maps.
No final deste artigo so apresentados
links para essas aplicaes e para o texto
que introduziu o termo AJAX.

Web 2.0

O termo Web 2.0 no possui uma definio formal, mas comumente usado para
se referir a aplicaes Web que encorajam
interao social e contribuio coletiva
para o bem comum. O termo tambm
usado para se referir a tcnicas de programao Web que tm como principal
objetivo fornecer uma interface rica e
amigvel. Atualmente, o conjunto dessas
tcnicas de programao Web tem sido
comumente denominado AJAX.

Descrio da aplicao Web de


demonstrao

Durante a apresentao terica do artigo, uma aplicao Web de demonstrao


ser desenvolvida para ilustrar vrias das
tecnologias usadas no AJAX. A interface
ser desenvolvida com XHTML 1.1 e uso
de CSS 2 para sua formatao.
ASP.NET 2.0 e ADO.NET 2.0, com a linguagem C# 2.0 (uma verso com a linguagem Visual Basic 2005 estar disponvel
para download), e outros recursos do
.NET Framework 2.0 sero usados para
consultar o SQL Server 2005 e construir
respostas dinmicas para o cliente.
A comunicao entre o browser e o
servidor Web ser estabelecida com uso
do objeto XMLHttpRequest, sendo que os
dados sero transportados nos formatos:
XML e JSON. O JavaScript 1.5 ser usado do lado do cliente nos bastidores, de
modo a funcionar nos principais browsers
atuais, com a funo de estabelecer a
comunicao com o servidor Web e atualizar a interface com os dados recebidos
como resposta. A tecnologia DOM ser
usada nos cdigos JavaScript do lado
do cliente.
Com o objetivo de tornar o artigo
acessvel a um maior nmero de de-

Edio 42 - .NET Magazine

11

senvolvedores da plataforma .NET, na


elaborao do exemplo sero utilizados
somente softwares e recursos disponveis
gratuitamente.
Porm, as verses comerciais tambm
podem ser usadas.
Browsers: Internet Explorer 5.0 ou superior, Firefox 1.0 ou superior, Opera 8.0
ou superior, Netscape 7.0 ou superior;
Servidor de banco de dados: SQL Server
2005 Express Edition SP2;
Banco de dados: AdventureWorks;
IDE para desenvolvimento: Visual Web
Developer 2005 Express Edition SP1.
Os endereos para baixar os softwares
e o banco de dados esto colocados no
final do artigo.

Criando o exemplo

No Visual Web Developer 2005 Express


Edition SP1, crie um novo Web Site ASP.
NET selecionado o menu (File>New Web
Site). No quadro de dilogo New Web Site,
em Template selecione ASP.NET Web Site,
em Location selecione File System e uma
localizao para os arquivos do Web Site
e em Language selecione Visual C#.
Apague o arquivo Default.aspx, juntamente com o arquivo Default.aspx.cs.

Por uma questo de espao, o artigo


apresenta todo o cdigo do lado do
servidor somente na linguagem C# 2.0.
Porm, a verso em Visual Basic 2005
ficar disponvel para download, sendo
que o Web Site desenvolvido em C# 2.0
estar na pasta AdvWorksAjaxWebCS e
o desenvolvido em Visual Basic 2005 na
pasta AdvWorksAjaxWebVB.
Antes de continuarmos o exemplo, vamos examinar mais alguns fundamentos
importantes.

O que o W3C?

O World Wide Web Consortium (W3C),


que foi fundado em 1994, um consrcio
internacional em que membros de organizaes, equipes com dedicao em tempo
integral e o pblico trabalham juntos para
desenvolver padres para a Web.
Atualmente, o W3C composto por,
aproximadamente, 450 membros. O consrcio conta com membros de algumas
das principais empresas e organizaes
de TI do mundo, incluindo as desenvolvedoras dos principais browsers do
mercado, empresas de telecomunicaes,
universidades etc.
Segue uma breve relao com alguns

Listagem 1. Cdigo XHTML 1.1 da pgina Pedidos.htm


<?xml version=1.0 encoding=ISO-8859-1?>
<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.1//EN
http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd>
<html xmlns=http://www.w3.org/1999/xhtml xml:lang=pt-BR >
<head>
<title>Adventure Works - Pedidos por empregado</title>
</head>
<body>
<div class=quadroPrincipal>
<div class=tituloPrincipal>
Adventure Works - Pedidos por empregado
</div>
<div class=conteudoPrincipal>
<div class=quadro>
<div class=titulo>Filtragem dos pedidos</div>
<div class=conteudo>
<div style=margin-bottom:10px;>
Selecione o empregado responsvel pelos pedidos:<br />
<select id=selectEmpregados class=larguraTotal></select>
</div>
<div>
Selecione o ms e ano dos pedidos:
<span id=spanEmpregadoPedidos class=info></span><br />
<select id=selectMesesAnosPedidos class=larguraTotal></select>
</div>
</div>
</div>
<div class=quadro>
<div class=titulo>
Pedidos do ms <span id=spanMesAnoPedidos class=info></span>
</div>
<div class=conteudo id=divMesAnoPedidos>
</div>
</div>
</div>
</div>
<div id=divMensagem>
</div>
</body>
</html>

12

.NET Magazine - Mini-curso de AJAX Parte 1

dos mais notrios membros: Adobe, AOL,


Apple, Canon, Cisco, Fujitsu, Google, HP,
IBM, Intel, Lexmark, Microsoft, Motorola,
Mozilla, Nokia, Nortel, Oracle, RealNetworks, Samsung, Sun, Symbian, Toshiba,
VeriSign, Xerox e Yahoo, dentre outros.

HTML 4.01 e XHTML 1.0/1.1

A especificao HTML (HyperText Markup Language) 4.01, recomendada pelo


W3C assim como a maioria das demais
vistas neste artigo, define a linguagem de
marcao de hipertexto para publicao
na rede de alcance mundial, a World Wide
Web (WWW).
A especificao XHTML (Extensible
HyperText Markup Language) 1.0 - Second
Edition, corresponde a uma reformulao
do HTML 4 como XML 1.0.
A especificao XHTML 1.1 corresponde a uma reformulao do XHTML
1.0 para dividir o XHTML em mdulos.
Atualmente, o W3C est trabalhando
nas especificaes XHTML 1.1 (Second
Edition) e XHTML 2.0.
A interface da aplicao de demonstrao ser feita com XHTML 1.1. O layout
da pgina ser definido com recursos de
CSS para posicionamento e formatao
dos elementos, ao invs de utilizar tabelas HTML para esse fim. Essa tcnica
denominada Tableless Layout.
Adicione uma pgina HTML ao Web Site
nomeando-a Pedidos.htm. A Listagem
1 apresenta o cdigo XHTML 1.1 da pgina Pedidos.htm.
A Figura 1 mostra o documento Pedidos.
htm visualizado no browser Opera 9.10
sem a aplicao de CSS.

Figura 1. Documento XHTML sem CSS


apresentado no browser Opera 9.10

M iNi- c urso aJa X


CSS 2

A especificao CSS (Cascade Style Sheet)


2 uma linguagem de folha de estilo que
permite anexar estilos a documentos
estruturados, como HTML e XML. CSS
2 simplifica a autoria e a manuteno
de Web Sites pela separao dos estilos
de apresentao do contedo dos documentos.
Atualmente, o W3C est trabalhando
nas especificaes CSS 2.1 e CSS 3. A
interface da aplicao Web de demonstrao, elaborada com XHTML 1.1, ser
formatada com CSS 2 utilizando a tcnica
Tableless Layout, descrita anteriormente.
Adicione uma folha de estilo CSS ao Web
Site nomeando-a Estilos.css (item StyleSheet). A Listagem 2 apresenta o cdigo
CSS 2 do arquivo Estilos.css. O arquivo
CSS contm estilos para formatao de
elementos presentes na pgina XHTML
Pedidos.htm e de outros que sero gerados
dinamicamente, como tabelas de dados.
A Listagem 3 apresenta a sintaxe do elemento <link> que deve ser acrescentado
ao cabealho da pgina Pedidos.htm para
vincul-la aos estilos definidos na folha
de estilo CSS 2 do arquivo Estilos.css.
A Figura 2 mostra o documento XHTML
1.1 Pedidos.htm visualizado no Firefox 2.0
com a aplicao da folha de estilo CSS 2
Estilos.css.
Comparando as Figuras 1 e 2, pode-se
notar o poder dos estilos CSS para formatar pginas Web.

XML 1.0

A especificao XML (Extensible Markup


Language) 1.0 corresponde a um subconjunto da SGML (Standard Generalized
Markup Language) usado para descrever
uma classe de objetos de dados chamados
documentos XML e descrever parcialmente o comportamento de programas
de computador que os processa.
A especificao XML 1.0 (Fourth Edition) substitui a especificao XML 1.0,
descrita anteriormente. A especificao
XML 1.1 (Second Edition) corresponde a
uma atualizao da especificao XML
1.0 para no depender de verses especficas do Unicode, alm de adicionar
verificaes de normalizao e seguir
regras Unicode de finalizao de linha
mais rigidamente.
A relao de empregados responsveis
por pedidos da empresa Adventure Works
ser montada a partir de uma consulta
no banco de dados AdventureWorks num
servidor SQL Server 2005. Sendo que o
resultado da consulta ser construdo em
formato XML 1.0 com os seguintes dados:
cdigo, primeiro nome, sobrenome do
meio, sobrenome final e quantidade de pedidos atendidos por todos os empregados
ativos que atenderam a pelo menos um
pedido de cliente at a sua concluso.
Adicione um arquivo de configurao
Web.config ao Web Site e configure a string
de conexo com o banco de dados, como
apresentado na Listagem 4.

Listagem 2. Cdigo CSS 2 do arquivo Estilos.css


body, select {
background-color: White;
font-family: Verdana, Arial, Helvetica,
Sans-Serif;
font-size: 9pt;
}
select {
border: solid 1px #00460A;
}
div#divMensagem {
position: absolute;
visibility: hidden;
top: 100px;
left: 50%;
width: 500px;
margin-left: -260px;
z-index: 1;
font-size: 11pt;
text-align: center;
padding: 20px 10px 20px 10px;
border: solid 1px #8A6F28;
background-color: #F9D52C;
color: #8A6F28;
}
span.info {
font-style: italic;
}
div.quadroPrincipal {
border: solid 2px #00460A;
background-color: #77B75D;
padding: 1px;
width: 560px;
margin: auto;
}
div.tituloPrincipal {
background-color: #00460A;
color: White;
font-size: 16pt;
font-weight: bold;
text-align: center;
padding: 3px;
}
div.quadro {
border: solid 1px #00460A;
background-color: #D4E5CB;
margin: 5px;
}
div.titulo {
background-color: #00460A;
color: White;
font-size: 12pt;
padding: 3px;
}
div.conteudo {
padding: 10px;
}
.larguraTotal {
width: 100%;
}
table.dados {
border: solid 1px #00460A;
border-collapse: collapse;
width: 100%;
}
table.dados tr th
, table.dados tr td {
border: solid 1px #00460A;
padding: 3px;
}
table.dados tr th {
background-color: #228A11;
color: White;
}
table.dados tr.alt td {
background-color: #B7D5AB;
}

Figura 2. Documento XHTML formatado com CSS apresentado no Firefox 2.0

Edio 42 - .NET Magazine

13

A string de conexo considera que o


servidor de banco de dados SQL Server
2005 Express Edition esteja instalado na
instncia SQLExpress da mquina local
e que o banco de dados AdventureWorks
esteja instalado nesse servidor. Se necessrio, modifique a string de conexo para
refletir a sua configurao.
Adicione um Web Form nomeando-o
Empregados.aspx e selecionando a opo Place code in separate file. Apague todo
o cdigo HTML do arquivo Empregados.
aspx, deixando somente a diretiva @Page.
Codifique o arquivo Empregados.aspx.cs
como apresentado na Listagem 5.
Observe na Listagem 5, que um objeto
da classe SqlDataReader utilizado para
navegar pelos registros do resultado de
uma consulta SQL para obter dados de
empregados em atividade e a quantidade
de pedidos por eles atendidos no banco
de dados AdventureWorks num servidor
SQL Server 2005.
Durante a navegao, um objeto do
tipo XmlTextWriter usado para montar
o documento XML dinamicamente. A
Listagem 6 apresenta um fragmento de
documento XML gerado dinamicamente
pela pgina Empregados.aspx.
Ainda na Listagem 5, pode-se verificar
que se ocorrer algum erro durante o
processamento, ento a exceo lanada
ser capturada e a mensagem de erro ser
enviada em uma estrutura XML para o
browser cliente.
A Listagem 7 apresenta um documento
XML com uma mensagem de erro gerada
quando o servio do servidor de banco
de dados do SQL Server 2005 est parado durante o processamento da pgina
Empregados.aspx.

JavaScript 1.5, 1.6 e 1.7

JavaScript uma linguagem de script


fundamentada no conceito de programao baseada em prottipos que foi desenvolvida pela Netscape Communications
Corporation e introduzida em 1995.
A linguagem JavaScript foi padronizada
pela Ecma International em 1997, sendo
denominada ECMAScript e, atualmente,
seu desenvolvimento conduzido pela
Mozilla Foundation. A implementao
do ECMAScript no Internet Explorer
denominada JScript.
Porm, atualmente comum utilizar o

14

Listagem 3. <Link> para vincular Pedidos.htm a Estilos.css


...
<head>
<title>Adventure Works - Pedidos por empregado</title>
<link href=Estilos.css rel=stylesheet type=text/css />
</head>
...

Listagem 4. Arquivo de configurao Web.config


<?xml version=1.0?>
<configuration>
<connectionStrings>
<add name=cnAdventureWorks connectionString=Data Source=localhost\SQLExpress;
Initial Catalog=AdventureWorks; Integrated Security=True
providerName=System.Data.SqlClient/>
</connectionStrings>
</configuration>

Listagem 5. Arquivo code-behind Empregados.aspx.cs


...
using System.Data.SqlClient;
using System.Text;
using System.Xml;
public partial class Empregados : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
Response.ContentType = text/xml;
XmlWriter xwEmpregadosPedidos = null;
SqlConnection cnAdventureWorks = null;
SqlDataReader drEmpregadosPedidos = null;
try
{
xwEmpregadosPedidos = new XmlTextWriter(Response.OutputStream,
Encoding.GetEncoding(ISO-8859-1));
cnAdventureWorks = new SqlConnection();
cnAdventureWorks.ConnectionString = ConfigurationManager. ConnectionStrings[
cnAdventureWorks].ConnectionString;
SqlCommand cmEmpregadosPedidos = new SqlCommand();
cmEmpregadosPedidos.Connection = cnAdventureWorks;
cmEmpregadosPedidos.CommandText = @SELECT E.EmployeeID AS Codigo
, C.FirstName AS PrimeiroNome
, C.MiddleName AS SobrenomeMeio
, C.LastName AS SobrenomeFinal
, COUNT(*) AS QuantidadePedidos
FROM Purchasing.PurchaseOrderHeader AS POH
INNER JOIN HumanResources.Employee AS E
ON POH.EmployeeID = E.EmployeeID
INNER JOIN HumanResources.EmployeeDepartmentHistory AS EDH
ON E.EmployeeID = EDH.EmployeeID AND EDH.EndDate IS NULL -- Empregado em atividade
INNER JOIN Person.Contact AS C
ON E.ContactID = C.ContactID
WHERE POH.Status = 4 -- Pedido finalizado (Complete)
GROUP BY E.EmployeeID, C.FirstName, C.MiddleName, C.LastName
ORDER BY C.FirstName, C.MiddleName, C.LastName;
cnAdventureWorks.Open();
drEmpregadosPedidos = cmEmpregadosPedidos.ExecuteReader();
xwEmpregadosPedidos.WriteStartDocument();
xwEmpregadosPedidos.WriteStartElement(Empregados);
while (drEmpregadosPedidos.Read())
{
xwEmpregadosPedidos.WriteStartElement(Empregado);
for (int campo = 0;
campo < drEmpregadosPedidos.FieldCount;
campo++)
{
xwEmpregadosPedidos.WriteElementString(drEmpregadosPedidos.GetName(campo),
drEmpregadosPedidos[campo].ToString());
}
xwEmpregadosPedidos.WriteEndElement();
}
xwEmpregadosPedidos.WriteEndElement();
}
catch (Exception ex)
{
Response.Clear();
Response.Write(string.Format(<Erro>{0}</Erro>, ex.Message));
}
finally
{
if (drEmpregadosPedidos != null) {
drEmpregadosPedidos.Close();
}
if (cnAdventureWorks != null) {
cnAdventureWorks.Close();
}
if (xwEmpregadosPedidos != null) {
xwEmpregadosPedidos.Close();
}
}
}
}

.NET Magazine - Mini-curso de AJAX Parte 1

mini- c urso AJA X


nome JavaScript de forma generalizada,
incluindo a implementao no browser
da Microsoft. A linguagem mais conhecida pelo seu uso extensivo em Web
Sites como JavaScript do lado do cliente,
mas tambm usada em scripts para
acesso a objetos incorporados em outras
aplicaes.
A linguagem JavaScript 1.5 segue o padro ECMA-262, 3a edio do ECMAScript
Language Specification de dezembro de
1999, criado pela comit tcnico TC39 do
Ecma International.
O JavaScript 1.6 introduz novas caractersticas ao JavaScript 1.5: E4X (ECMAScript for XML), novos mtodos do Array,
dentre outras novidades.
O JavaScript 1.7 introduz novas caractersticas ao JavaScript 1.6: iterators,
expresses let, dentre outras novidades.
Por uma questo de compatibilidade
com uma quantidade maior de browsers,
atualmente interessante se limitar aos
recursos da linguagem JavaScript 1.5.
O JavaScript 2.0 ser a prxima reviso
principal da linguagem JavaScript. Ela
est sendo padronizada pelo Ecma International como a 4a edio do ECMAScript
Language Specification.

Listagem 6. Fragmento do documento XML de empregados gerado dinamicamente


<?xml version=1.0 encoding=iso-8859-1?>
<Empregados>
<Empregado>
<Codigo>264</Codigo>
<PrimeiroNome>Annette</PrimeiroNome>
<SobrenomeMeio>L</SobrenomeMeio>
<SobrenomeFinal>Hill</SobrenomeFinal>
<QuantidadePedidos>340</QuantidadePedidos>
</Empregado>
...
</Empregados>

Listagem 7. Fragmento de documento XML com um erro de processamento


<Erro>
An error has occurred while establishing a
connection to the server. When connecting to SQL
Server 2005, this failure may be caused by the
fact that under the default settings SQL Server does
not allow remote connections. (provider: SQL Network
Interfaces, error: 26 - Error Locating
Server/Instance Specified)
</Erro>

Listagem 8. Arquivo JavaScript AJAX.js


var
var
var
var
var

var req = null;


function criarXMLHTTPRequest()
{
var xRequest = null;

Objeto XMLHttpRequest

O XMLHttpRequest define uma API


que fornece funcionalidades para scripts
do lado do cliente para transferncia de
dados entre o browser e o servidor Web.
O objeto suporta qualquer formato baseado em texto, incluindo XML e JSON. Ele
pode ser utilizado para fazer requisies
ao servidor Web usando os protocolos
HTTP e HTTPS e representa uma das
partes mais importantes do AJAX.
O conceito por trs do XMLHttpRequest
foi desenvolvido originalmente pela
Microsoft como parte do Outlook Web
Access 2000. A implementao inicial da
Microsoft era chamada XMLHTTP e foi
disponibilizada no Internet Explorer 5.0
como um ActiveX, sendo acessvel via
JScript, VBScript ou outra linguagem de
script cliente suportada pelo browser via
plug-ins.
Do Internet Explorer 5.0 ao 6.0, o XMLHTTP foi implementado como um
ActiveX fornecido pelo MSXML. Baseado
no objeto XMLHTTP da Microsoft, a Fundao Mozilla incorporou a primeira im-

READY_STATE_UNINITIALIZED = 0;
READY_STATE_LOADING = 1;
READY_STATE_LOADED = 2;
READY_STATE_INTERACTIVE = 3;
READY_STATE_COMPLETE = 4;

if (window.XMLHttpRequest)
{
//Mozilla 1.0+, Netscape 8.0+, Firefox 1.0+, Safari 1.2+, Internet Explorer 7.0+
xRequest = new XMLHttpRequest();
}
else if (window.ActiveXObject)
{
//Internet Explorer 5.0, 5.5, 6.0
var progIDs = [MSXML2.XMLHTTP.6.0, MSXML2.XMLHTTP.4.0, MSXML2.XMLHTTP.3.0,
MSXML2.XMLHTTP, Microsoft.XMLHTTP];
for (var i = 0; xRequest == null &&
i < progIDs.length; i++) {
xRequest = new ActiveXObject(progIDs[i]);
}
}
return xRequest;

function enviarRequisicaoHTTP(url, parametros, metodoHTTP, metodoCallback)


{
if (!metodoHTTP)
{
metodoHTTP = GET;
}
req = criarXMLHTTPRequest();

if (req)
{
req.onreadystatechange = metodoCallback;
req.open(metodoHTTP, url, true);
req.setRequestHeader(Content-Type, application/x-www-form-urlencoded);
req.send(parametros);
}
else
{
alert(Objeto XMLHttpRequest no suportado pelo +browser.);
}

Listagem 9. Script para vincular Pedidos.htm ao script AJAX.js


...
<head>
<title>Adventure Works - Pedidos por empregado</title>
<link href=Estilos.css rel=stylesheet type=text/css />
<script type=text/javascript src=Scripts/AJAX.js></script>
</head>
...

Edio 42 - .NET Magazine

15

Listagem 10. Arquivo JavaScript AvdWorks.js


var TIPO_INFO_SELECIONAR_EMPREGADO = 1;
var TIPO_INFO_SELECIONAR_MES_ANO_PEDIDOS = 2;
function apresentarMensagemProgresso(mensagem)
{
var divMensagem = document.getElementById(divMensagem);
with (divMensagem)
{
innerHTML = mensagem;
style.visibility = visible;
}
}
function esconderMensagemProgresso()
{
var divMensagem = document.getElementById(divMensagem);
with (divMensagem)
{
innerHTML = ;
style.visibility = hidden;
}
}
function apresentarInfo(tipoInfo)
{
var selectEmpregados = document.getElementById(selectEmpregados);
var selectMesesAnosPedidos = document.getElementById(selectMesesAnosPedidos);
var spanEmpregadoPedidos = document.getElementById(spanEmpregadoPedidos);
var spanMesAnoPedidos = document.getElementById(spanMesAnoPedidos);
var divMesAnoPedidos = document.getElementById(divMesAnoPedidos);
switch (tipoInfo)
{
case TIPO_INFO_SELECIONAR_EMPREGADO:
selectMesesAnosPedidos.options.length = 0;
selectMesesAnosPedidos.options[0] = new Option(
Selecione um empregado para obter os meses +e anos com pedidos..., );
spanEmpregadoPedidos.innerHTML = ;
spanMesAnoPedidos.innerHTML = ;
divMesAnoPedidos.innerHTML = Selecione um +
empregado e um ms e ano para obter os +pedidos do ms...;
break;
case TIPO_INFO_SELECIONAR_MES_ANO_PEDIDOS:
spanMesAnoPedidos.innerHTML = ;
divMesAnoPedidos.innerHTML = Selecione um ms +e ano para obter os pedidos do ms...;
}
}
function preencherListaEmpregados()
{
if (req.readyState == READY_STATE_COMPLETE)
{
var selectEmpregados = document.getElementById(selectEmpregados);
selectEmpregados.options.length = 0;
selectEmpregados.options[0] = new Option(, );
var docEmpregados = req.responseXML;
var eleRaiz = docEmpregados.documentElement;
switch (eleRaiz.nodeName)
{
case Empregados:
var nodeListEmpregados = eleRaiz.getElementsByTagName(Empregado);
for (var i = 0; i < nodeListEmpregados.length;
i++)
{
var nodeEmpregado = nodeListEmpregados.item(i);
var obterValor = function(elemento)
{
return nodeEmpregado.getElementsByTagName(
elemento).item(0).firstChild.nodeValue;
};
var codigo = obterValor(Codigo);
var primeiroNome = obterValor(PrimeiroNome);
var sobrenomeMeio = obterValor(SobrenomeMeio);
var sobrenomeFinal = obterValor(SobrenomeFinal);
var quantidadePedidos = parseInt(obterValor(QuantidadePedidos));
var textoOpcaoSelect = primeiroNome + + sobrenomeMeio + + sobrenomeFinal +
( + quantidadePedidos + pedido + (quantidadePedidos > 1 ? s : ) + );
var valorOpcaoSelect = codigo;
selectEmpregados.options[i + 1] = new Option(textoOpcaoSelect, valorOpcaoSelect);
}
break;
case Erro:
var erro = eleRaiz.firstChild.nodeValue;
alert(Ocorreu um erro no processo de carga +dos empregados.\n( + erro + ));
}
req = null;
esconderMensagemProgresso();
}
}
window.onload = function()
{
apresentarMensagemProgresso(Carregando os +empregados responsveis pelos pedidos...);
enviarRequisicaoHTTP(Empregados.aspx, null, null, preencherListaEmpregados);
apresentarInfo(TIPO_INFO_SELECIONAR_EMPREGADO);
};

16

.NET Magazine - Mini-curso de AJAX Parte 1

plementao nativa do XMLHttpRequest


no browser Mozilla 1.0 em 2002.
Posteriormente, o suporte nativo ao
XMLHttpRequest foi implementado em
outros browsers: Apple Safari desde a
verso 1.2, Opera desde a verso 8.0, Konqueror, dentre outros. A prpria Microsoft resolveu incluir o XMLHttpRequest
como um objeto nativo de script a partir
do Internet Explorer 7.0.
A linguagem JavaScript do lado do
cliente e o XMLHttpRequest sero utilizados para estabelecer uma comunicao
HTTP assncrona entre o browser e o
servidor Web.
No projeto do Web Site, crie uma pasta
com nome Scripts e dentro dela acrescente um arquivo JScript com o nome
AJAX.js.
A Listagem 8 apresenta um cdigo JavaScript para criar um XMLHttpRequest
de modo cross-browser e utiliz-lo para
fazer uma requisio HTTP assncrona
para o servidor Web a partir do browser.
No incio do script, cinco variveis auxiliares so definidas com os estados monitorados pelo XMLHttpRequest durante
uma comunicao HTTP assncrona entre
o browser e o servidor Web. A varivel req
definida para conter uma referncia a
um XMLHttpRequest. O mtodo criarXMLHTTPRequest responsvel por criar um
XMLHttpRequest de modo cross-browser,
funcionando em verses variadas de
diversos browsers.
Finalmente, o mtodo enviarRequisicaoHTTP recebe informaes sobre como
enviar uma requisio HTTP assncrona
do browser para o servidor Web. Observe que um argumento metodoCallback
permite definir um mtodo JavaScript
de retorno da chamada assncrona, que
ser responsvel pelo processamento da
resposta enviada pelo servidor Web.
A Listagem 9 apresenta o elemento
<script> que deve ser acrescentado ao
cabealho da pgina Pedidos.htm para
vincul-la ao cdigo JavaScript definido
no arquivo AJAX.js.

DOM Level 3

O DOM (Document Object Model) Level 3


Core Specification define um conjunto de
objetos e interfaces para acessar e manipular documentos HTML e XML.

mini- c urso AJA X


O DOM Level 3 Load and Save Specification define um conjunto de interfaces para
carregar e salvar documentos HTML e
XML.
Com o objetivo de tornar o cdigo JavaScript do lado do cliente compatvel
com um maior nmero de browsers,
somente sero usados recursos do DOM
Level 1. Acrescente um arquivo JScript
com o nome de AdvWorks.js dentro da
pasta Scripts.
A Listagem 10 apresenta cdigo JavaScript para, entre outras tarefas, enviar
uma requisio HTTP ao servidor Web
para receber a relao de empregados no
formato XML de forma assncrona.
Segue uma breve descrio das funcionalidades presentes no arquivo AdvWorks.js.
apresentarMensagemProgresso: mostra
uma mensagem de progresso de uma
chamada assncrona ao servidor Web
para o usurio;
esconderMensagemProgresso: oculta
uma mensagem de progresso aps a
finalizao de uma chamada assncrona
ao servidor Web;
apresentarInfo: apresenta informaes explicativas, de acordo com o tipo
escolhido, sobre como o usurio deve
proceder para consultar informaes de
pedidos atendidos por empregados da
empresa Adventure Works;
preencherListaEmpregados: mtodo
callback de uma chamada assncrona ao
servidor Web para receber a relao de
empregados em formato XML e preencher o quadro de listagem apropriado
com uso de DOM;
evento onload do objeto window: executa uma chamada assncrona ao servidor
Web para obter a relao de empregados
que atenderam a pedidos de clientes, deixando o usurio informado do progresso
e de como proceder.
A Listagem 11 apresenta o elemento
<script> que deve ser acrescentado ao
cabealho da pgina Pedidos.htm para
vincul-la ao cdigo JavaScript definido
no arquivo AdvWorks.js.

Listagem 11. Script para vincular Pedidos.htm ao script AdvWorks.js


...
<head>
<title>Adventure Works - Pedidos por empregado</title>
<link href=Estilos.css rel=stylesheet type=text/css />
<script type=text/javascript src=Scripts/AJAX.js></script>
<script type=text/javascript src=Scripts/AdvWorks.js></script>
</head>
...

Listagem 12. Arquivo code-behind PedidosPorEmpregado.aspx.cs


...
using
using
using
using

public partial class PedidosPorEmpregado : System.Web.UI.Page


{
protected void Page_Load(object sender, EventArgs e)
{
Response.ContentType = application/json;
string codigoEmpregado = Request.Form[CodigoEmpregado];
int employeeID = (codigoEmpregado == null)
? 0 : int.Parse(codigoEmpregado);
TextWriter twPedidosMesAno = null;
SqlConnection cnAdventureWorks = null;
SqlDataReader drPedidosMesAno = null;
try
{

cnAdventureWorks = new SqlConnection();


cnAdventureWorks.ConnectionString = ConfigurationManager.ConnectionStrings[
cnAdventureWorks].ConnectionString;
SqlCommand cmPedidosMesAno = new SqlCommand();
cmPedidosMesAno.Connection = cnAdventureWorks;
cmPedidosMesAno.CommandText = @
SELECT MONTH(OrderDate)
AS mesPedidos, YEAR(OrderDate) AS anoPedidos, COUNT(*) AS quantidade
FROM Purchasing.PurchaseOrderHeader
WHERE EmployeeID = @EmployeeID
GROUP BY MONTH(OrderDate), YEAR(OrderDate)
ORDER BY anoPedidos DESC, mesPedidos DESC;
cmPedidosMesAno.Parameters.Add(@EmployeeID, SqlDbType.Int).Value = employeeID;
cnAdventureWorks.Open();
drPedidosMesAno = cmPedidosMesAno.ExecuteReader();
List<string> arrayObjetosJson = new List<string>();
while (drPedidosMesAno.Read())
{
string[] objetoJson = new string[drPedidosMesAno.FieldCount];
for (int campo = 0;
campo < drPedidosMesAno.FieldCount; campo++)
{
objetoJson[campo] = string.Format(\{0}\:{1}, drPedidosMesAno.GetName(
campo), drPedidosMesAno[campo].ToString());
}
arrayObjetosJson.Add(string.Format({{{0}}}, string.Join(,, objetoJson)));
}
twPedidosMesAno =
new StreamWriter(Response.OutputStream, Encoding.GetEncoding(ISO-8859-1));

twPedidosMesAno.Write(string.Format([{0}],
string.Join(,\n, arrayObjetosJson.ToArray())));

catch (Exception ex)


{
Response.Clear();
Response.Write(string.Format({{\erro\:\{0}\}}, ex.Message));
}
finally
{
if (drPedidosMesAno != null) {
drPedidosMesAno.Close();
}
if (cnAdventureWorks != null) {
cnAdventureWorks.Close();
}

JSON

O JSON (JavaScript Object Notation) um


formato leve para troca de dados baseado
em um subconjunto da linguagem de
programao JavaScript, padro ECMA-

System.Collections.Generic;
System.Data.SqlClient;
System.IO;
System.Text;

if (twPedidosMesAno != null) {
twPedidosMesAno.Close();
}

Edio 42 - .NET Magazine

17

262 3a edio. Na notao JSON:


objetos so considerados um conjunto
no ordenado de pares nome/valor. Um
objeto delimitado por chaves. Cada nome
separado do valor por dois pontos e os pares
nome/valor so separados por vrgulas;

arrays so considerados uma coleo


ordenada de valores. Um array delimitado por colchetes. Os valores so
separados por vrgulas.
O uso do formato JSON como mecanismo de transporte de dados tem algumas

Listagem 13. Fragmento de texto no formato JSON gerado dinamicamente


[{mesPedidos:9,anoPedidos:2004,quantidade:4},
{mesPedidos:8,anoPedidos:2004,quantidade:39},
{mesPedidos:7,anoPedidos:2004,quantidade:35},
...
{mesPedidos:2,anoPedidos:2002,quantidade:5},
{mesPedidos:1,anoPedidos:2002,quantidade:1}]

Listagem 14. Fragmento de texto com um erro de processamento


{erro:An error has occurred while establishing a
connection to the server. When connecting to SQL
Server 2005, this failure may be caused by the fact
that under the default settings SQL Server does not
allow remote connections. (provider: SQL Network
Interfaces, error: 26 - Error Locating
Server/Instance Specified)}

Listagem 15. Acrescentando cdigo ao arquivo AvdWorks.js


window.onload = function()
{
... //cdigo anterior
var selectEmpregados = document.getElementById(selectEmpregados);
selectEmpregados.onchange = function()
{
if (selectEmpregados.selectedIndex == 0)
{
apresentarInfo(TIPO_INFO_SELECIONAR_EMPREGADO);
}
else
{
var spanEmpregadoPedidos = document.getElementById(spanEmpregadoPedidos);
var codigoEmpregado;
with (selectEmpregados)
{
spanEmpregadoPedidos.innerHTML = options[selectedIndex].text;
codigoEmpregado = options[selectedIndex].value;
}
var parametroEmpregado = CodigoEmpregado= + codigoEmpregado;
apresentarMensagemProgresso(Carregando os meses e os anos dos pedidos...);
enviarRequisicaoHTTP(PedidosPorEmpregado.aspx, parametroEmpregado, POST,
preencherListaMesesAnosPedidos);
apresentarInfo(TIPO_INFO_SELECIONAR_MES_ANO_PEDIDOS);
}
};
};
var meses = [Janeiro, Fevereiro, Maro, Abril, Maio, Junho, Julho, Agosto,
Setembro, Outubro, Novembro, Dezembro];
function preencherListaMesesAnosPedidos()
{
if (req.readyState == READY_STATE_COMPLETE)
{
var selectMesesAnosPedidos = document.getElementById(selectMesesAnosPedidos);
selectMesesAnosPedidos.options.length = 0;
selectMesesAnosPedidos.options[0] = new Option(, );
var arrJSONMesesAnosPedidos = eval(( + req.responseText + ));
if (arrJSONMesesAnosPedidos.constructor.toString().indexOf(function Array()) != -1)
{
for (var i = 0;
i < arrJSONMesesAnosPedidos.length; i++)
{
with (arrJSONMesesAnosPedidos[i])
{
var textoOpcaoSelect = meses[
mesPedidos - 1] + de + anoPedidos + ( + quantidade + pedido +
(quantidade > 1 ? s : ) + );
var valorOpcaoSelect = mesPedidos + , + anoPedidos;
selectMesesAnosPedidos.options[i + 1] = new Option(textoOpcaoSelect, valorOpcaoSelect);
}
}
}
else if (arrJSONMesesAnosPedidos.erro)
{
alert(Ocorreu um erro no processo de carga dos meses e anos dos pedidos.\n( +
arrJSONMesesAnosPedidos.erro + ));
}
req = null;
esconderMensagemProgresso();
}
}

18

.NET Magazine - Mini-curso de AJAX Parte 1

implicaes de segurana. Um mtodo


de ataque a aplicaes Web denominado JavaScript Hijacking permite o envio
de dados no autorizados para um site
remoto, iludindo a poltica de mesma
origem (Same Origin Policy) garantida
pelos browsers mais modernos.
Para obter informaes detalhadas
sobre esse tipo de ataque e tcnicas de
proteo, leia o artigo JavaScript Hijacking
publicado pela empresa Fortify Software,
cujo link pode ser encontrado no final
deste artigo.
O artigo cita a anlise de 12 frameworks
AJAX populares, incluindo o Microsoft
ASP.NET AJAX, concluindo que somente
o DWR 2.0 (Direct Web Remoting) implementa mecanismos para prevenir esse
tipo de ataque.
Porm, o artigo analisou uma verso
anterior verso 1.0 final do Microsoft
ASP.NET AJAX, quando o mesmo ainda
era conhecido pelo codinome Microsoft
Atlas. Em 4 de abril de 2007, o Scott Guthrie (um gerente geral da Diviso de Desenvolvimento da Microsoft) postou em
seu blog o artigo JSON Hijacking and How
ASP.NET AJAX 1.0 Avoids these Attacks
que contesta a informao de que o ASP.
NET AJAX no implementa mecanismos
para prevenir ataques JavaScript Hijacking.
Veja o endereo da postagem no blog do
Scott Guthrie no final deste artigo.
Adicione um Web Form nomeando-o
PedidosPorEmpregado.aspx e selecionando a opo Place code in separate file.
Apague todo o cdigo HTML da pgina
PedidosPorEmpregado.aspx, deixando somente a diretiva @Page. Codifique o arquivo PedidosPorEmpregado.aspx.cs como
apresentado na Listagem 12.
Observe na Listagem 12 que um objeto
da classe SqlDataReader utilizado para
navegar pelos registros do resultado de
uma consulta SQL, usada para obter a
quantidade de pedidos por ms e ano de
um determinando empregado no banco
de dados AdventureWorks no servidor
SQL Server 2005.
Durante a navegao, uma coleo
genrica List<string>, arrays de strings e
um objeto StreamWriter so usados para
montar um texto no formato JSON. A
Listagem 13 apresenta um fragmento de
texto no formato JSON gerado dinamicamente pela pgina PedidosPorEmpregado.

mini- c urso AJA X


aspx quando o parmetro CodigoEmpregado, passado pelo mtodo HTTP POST,
igual a 264.
Ainda na Listagem 12, pode-se verificar que se ocorrer algum erro durante o
processamento, ento a exceo lanada
ser capturada e a mensagem de erro
ser enviada no formato JSON para o
browser cliente.
A Listagem 14 apresenta um texto com
uma mensagem de erro gerada quando
o servio do servidor de banco de dados
do SQL Server 2005 est parado durante
o processamento da pgina Web PedidosPorEmpregado.aspx.
Acrescente mais JavaScript ao cdigo
de manipulao do evento onload do
objeto window no arquivo AdvWorkd.
js, um array nomeado meses e um outro
mtodo callback nomeado preencherListaMesesAnosPedidos, conforme apresentado
na Listagem 15.
Segue uma breve descrio das funcionalidades acrescentadas no arquivo
AdvWorks.js.
evento onload do objeto window: acrescenta cdigo para manipular o evento
onchange do objeto Select com id igual a
selectEmpregados. Se o usurio selecionar
um empregado diferente, ento executada uma chamada assncrona ao servidor Web para obter a relao de meses e
anos com as respectivas quantidades de
pedidos atendidos pelo empregado selecionado, deixando o usurio informado
do progresso e de como proceder;
array meses: armazena os nomes dos
meses do ano em idioma portugus brasileiro;
preencherListaMesesAnosPedidos: mtodo callback de uma chamada assncrona
ao servidor Web para receber a relao
de meses e anos com as respectivas
quantidades de pedidos atendidos pelo
empregado selecionado em formato
JSON e preencher o quadro de listagem
apropriado com uso de DOM.

Finalizao da aplicao de
demonstrao

Para finalizar a aplicao Web AJAX de


demonstrao, vamos criar uma pgina
Web ASP.NET para gerar o cdigo de
uma tabela HTML com os pedidos de
um dado empregado, num determinado
ms e ano.

Adicione um Web Form nomeando-o


PedidosPorEmpregadoMesAno.aspx
selecionando a opo Place code in separate
file. Apague todo o cdigo HTML da pgina PedidosPorEmpregado.aspx, deixando
somente a diretiva @Page e acrescentando
o elemento <form runat=server></form>,
pois Web Server Controls somente podem
ser hospedados em pginas ASPX que
so Web Forms.
Acrescente um GridView e um Label ao
Web Form ASPX e defina as propriedades
como apresentado na Listagem 16.
Codifique o arquivo PedidosPorEmpregadoMesAno.aspx.cs como apresentado
na Listagem 17.
O cdigo da Listagem 17 recebe os parmetros com o cdigo do empregado, o
ms e o ano dos pedidos enviados pelo
mtodo HTTP POST. Depois, executa
uma consulta no banco de dados AdventureWorks que retorna um SqlDataReader.
Esse objeto passado para a propriedade DataSource do GridView para gerar
o cdigo XHTML de uma tabela formatando os dados. Caso ocorra algum erro
de processamento, a exceo lanada
capturada e a mensagem de erro colocada no Label.
Com uso das tecnologias do AJAX,
parte deste cdigo XHTML ser embu-

tido numa parte da pgina Pedidos.htm,


conforme apresentado no cdigo da
Listagem 18 a seguir.
Segue uma breve descrio das funcionalidades acrescentadas no arquivo
AdvWorks.js.
evento onload do objeto window: acrescenta cdigo para manipular o evento
onchange do objeto Select com id igual a
selectMesesAnosPedidos. Se o usurio selecionar um par ms/ano diferente, ento
executada uma chamada assncrona
ao servidor Web para obter a relao
de pedidos do empregado no ms e ano
selecionados;
apresentarTabelaPedidosEmpregadoMesAno: mtodo callback de uma chamada
assncrona ao servidor Web para receber a relao de pedidos do empregado
no ms e ano selecionados em formato
XHTML e atualizar a interface com a
tabela gerada dinamicamente pelo GridView.
A Figura 3 apresenta a interface da
pgina Web Pedidos.htm visualizada no
Internet Explorer 7.0 aps o usurio selecionar opes disponveis nos quadros
de seleo.

O que o ASP.NET AJAX 1.0?

O ASP.NET AJAX 1.0 um framework

Listagem 16. Arquivo PedidosPorEmpregadoMesAno.aspx


<%@ Page Language=C# AutoEventWireup=true CodeFile=PedidosPorEmpregadoMesAno.aspx.cs
Inherits=PedidosPorEmpregadoMesAno
EnableViewState=false %>
<form runat=server>
<asp:gridview id=gvPedidosPorEmpregadoMesAno
runat=server autogeneratecolumns=False
CssClass=dados>
<Columns>
<asp:BoundField DataField=Codigo HeaderText=C&#243;digo>
<ItemStyle HorizontalAlign=Center />
</asp:BoundField>
<asp:BoundField HtmlEncode=False DataFormatString={0:d} DataField=DataPedido
HeaderText=Data do pedido>
<ItemStyle HorizontalAlign=Center />
</asp:BoundField>
<asp:BoundField HtmlEncode=False DataFormatString={0:C} DataField=Subtotal
HeaderText=Subtotal>
<ItemStyle HorizontalAlign=Right />
</asp:BoundField>
<asp:BoundField HtmlEncode=False DataFormatString={0:C} DataField=Taxa
HeaderText=Taxa>
<ItemStyle HorizontalAlign=Right />
</asp:BoundField>
<asp:BoundField HtmlEncode=False DataFormatString={0:C} DataField=Frete
HeaderText=Frete>
<ItemStyle HorizontalAlign=Right />
</asp:BoundField>
<asp:BoundField HtmlEncode=False DataFormatString={0:C} DataField=Total
HeaderText=Total>
<ItemStyle HorizontalAlign=Right />
</asp:BoundField>
</Columns>
<AlternatingRowStyle CssClass=alt />
</asp:gridview>
<asp:label id=lblErro runat=server></asp:label>
</form>

Edio 42 - .NET Magazine

19

Listagem 17. Arquivo code-behind PedidosPorEmpregadoMesAno.aspx.cs


...
using System.Data.SqlClient;
using System.Web.UI.WebControls;
public partial class PedidosPorEmpregadoMesAno : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
Response.ContentType = text/xml;
int employeeID = (Request.Form[CodigoEmpregado] == null) ? 0 :
int.Parse(Request.Form[CodigoEmpregado]);
int mesPedidos = (Request.Form[MesPedidos] == null) ? 0 :
int.Parse(Request.Form[MesPedidos]);
int anoPedidos = (Request.Form[AnoPedidos] == null) ? 0 :
int.Parse(Request.Form[AnoPedidos]);
SqlConnection cnAdventureWorks = null;
SqlDataReader drPedidosPorEmpregadoMesAno = null;
try
{
cnAdventureWorks = new SqlConnection();
cnAdventureWorks.ConnectionString = ConfigurationManager. ConnectionStrings[
cnAdventureWorks].ConnectionString;
SqlCommand cmPedidosPorEmpregadoMesAno = new SqlCommand();
cmPedidosPorEmpregadoMesAno.Connection = cnAdventureWorks;
cmPedidosPorEmpregadoMesAno.CommandText = @
SELECT PurchaseOrderID AS Codigo
, OrderDate AS DataPedido
, SubTotal AS Subtotal
, TaxAmt AS Taxa
, Freight AS Frete
, TotalDue AS Total
FROM Purchasing.PurchaseOrderHeader AS PedidoMesAno
WHERE EmployeeID = @EmployeeID
AND MONTH(OrderDate) = @MesPedidos
AND YEAR(OrderDate) = @AnoPedidos
ORDER BY OrderDate;
cmPedidosPorEmpregadoMesAno.Parameters.Add(
@EmployeeID, SqlDbType.Int).Value = employeeID;
cmPedidosPorEmpregadoMesAno.Parameters.Add(
@MesPedidos, SqlDbType.Int).Value = mesPedidos;
cmPedidosPorEmpregadoMesAno.Parameters.Add(
@AnoPedidos, SqlDbType.Int).Value = anoPedidos;

cnAdventureWorks.Open();
drPedidosPorEmpregadoMesAno = cmPedidosPorEmpregadoMesAno.ExecuteReader();
gvPedidosPorEmpregadoMesAno.DataSource = drPedidosPorEmpregadoMesAno;
gvPedidosPorEmpregadoMesAno.DataBind();

catch (Exception ex)


{
lblErro.Text = ex.Message;
}
finally
{

20

if (drPedidosPorEmpregadoMesAno != null) {
drPedidosPorEmpregadoMesAno.Close();
}
if (cnAdventureWorks != null) {
cnAdventureWorks.Close();
}

.NET Magazine - Mini-curso de AJAX Parte 1

gratuito, fornecido pela Microsoft, que


permite a criao rpida de uma nova gerao de aplicaes Web mais eficientes,
mais interativas e altamente personalizadas que funciona em todos os browsers
mais populares da atualidade.
Seguem algumas das caractersticas do
ASP.NET AJAX:
Corresponde a uma extenso do ASP.
NET 2.0, tendo integrao com o Visual
Studio 2005;
Permite a criao de interfaces Web ricas
com componentes AJAX reutilizveis;
Fornece recursos para sofisticar as
pginas ASP.NET 2.0 existentes usando
poderosos controles AJAX com suporte
para todos os principais browsers mais
modernos;
Possui recursos para acesso a servios
e dados remotos diretamente do browser
sem a necessidade de escrever uma grande quantidade de scripts;
Fornece os benefcios de um framework gratuito com suporte tcnico
fornecido pela Microsoft.

Concluso

O AJAX permite criar aplicaes Web


muito mais ricas, interativas e com respostas mais rpidas para os usurios. Os
recursos do AJAX e da Web 2.0 comearam a ser utilizados em diversos sites
e corresponde a uma tendncia real no
desenvolvimento Web atualmente.
O objetivo deste primeiro artigo do
mini-curso de ASP.NET AJAX foi apresentar e ilustrar as principais tecnologias
que compem o AJAX. A aplicao Web
de demonstrao mostrou como desenvolver toda a infra-estrutura de uma
aplicao AJAX a partir do zero.
Desse modo, os desenvolvedores Web
podem ter uma viso clara dos bastidores

M iNi- c urso aJa X


do AJAX e compreender melhor como
utilizar frameworks AJAX disponveis,
como o Microsoft ASP.NET AJAX.
Apesar de se ter utilizado o ASP.NET
2.0 para gerar os dados XML e JSON
dinamicamente do lado do servidor,
qualquer outra tecnologia do lado do
servidor poderia ter sido utilizada, como:
PHP, Servlets/JSP/JSF, ASP legado, CGI,
ISAPI, dentre outras.
Nos prximos artigos do mini-curso sero abordados os recursos do framework
Microsoft ASP.NET AJAX que tornam o desenvolvimento de aplicaes ASP.NET 2.0
com recursos de AJAX muito simples.
Links
AJAX: The Official Microsoft ASP.NET AJAX Site
ajax.asp.net
Artigo Ajax: A New Approach to Web Applications, escrito
por Jesse James Garrett
www.adaptivepath.com/publications/essays/archives/
000385.php
Artigo JavaScript Hijacking
www.net-security.org/dl/articles/JavaScript_Hijacking.pdf
Artigo JSON Hijacking and How ASP.NET AJAX 1.0 Avoids
these Attacks
weblogs.asp.net/scottgu/archive/2007/04/04/json-hijackingand-how-asp-net-ajax-1-0-mitigates-these-attacks.aspx
Artigo Tableless layout HOWTO
www.w3.org/2002/03/csslayout-howto
Ecma International
www.ecma-international.org
Firefox 2.x
www.mozilla.com
Internet Explorer 7
www.microsoft.com/windows/downloads/ie
Google Maps
maps.google.com
Google Suggest
www.google.com/webhp?complete=1
JSON (JavaScript Object Notation)
www.json.org
Netscape Browser 8.x (est em desenvolvimento a verso 9
para vrias plataformas)
browser.netscape.com
Opera 9.x
www.opera.com
SQL Server 2005 Express Edition SP2 e o banco de dados
AdventureWorks
msdn.microsoft.com/vstudio/express/sql/download
Visual Web Developer 2005 Express Edition SP1
msdn.microsoft.com/vstudio/express/downloads
World Wide Web Consortium (W3C)
www.w3.org

Listagem 18. Acrescentando cdigo ao arquivo AvdWorks.js


window.onload = function()
{
...
selectMesesAnosPedidos.onchange = function()
{
if (selectMesesAnosPedidos.selectedIndex == 0)
{
apresentarInfo(TIPO_INFO_SELECIONAR_MES_ANO_PEDIDOS);
}
else
{
var spanMesAnoPedidos = document.getElementById(spanMesAnoPedidos);
var mesAnoPedidos, mesPedidos, anoPedidos;
with (selectMesesAnosPedidos)
{
spanMesAnoPedidos.innerHTML = de + options[selectedIndex].text.toLowerCase();
mesAnoPedidos = options[selectedIndex].value.split(,);
}
mesPedidos = parseInt(mesAnoPedidos[0]);
anoPedidos = parseInt(mesAnoPedidos[1]);
var parametrosEmpregadoMesAno = CodigoEmpregado= + codigoEmpregado +
&MesPedidos= + mesPedidos + &AnoPedidos= + anoPedidos;
apresentarMensagemProgresso( Carregando os pedidos do empregado no ms e ano...);
enviarRequisicaoHTTP(PedidosPorEmpregadoMesAno.aspx,
parametrosEmpregadoMesAno, POST, apresentarTabelaPedidosEmpregadoMesAno);
}
}
}
};
};
function apresentarTabelaPedidosEmpregadoMesAno()
{
if (req.readyState == READY_STATE_COMPLETE)
{
var xhtml = req.responseText;
var indiceInicial = xhtml.indexOf(<table);
if (indiceInicial >= 0)
{
var indiceFinal = xhtml.lastIndexOf(</table>) + 8;
var xhtmlTabela = xhtml.substring(indiceInicial, indiceFinal);
var divMesAnoPedidos = document.getElementById(divMesAnoPedidos);
divMesAnoPedidos.innerHTML = xhtmlTabela;
}
else
{
var erro = req.responseXML.getElementsByTagName(span)[0].firstChild.nodeValue;
alert(Ocorreu um erro no processo de carga dos pedidos de um ms e ano.\n( + erro + ));
}
req = null;
esconderMensagemProgresso();
}
}

Figura 3. Resultado de uma consulta na pgina Pedidos.htm no IE 7.0

Edio 42 - .NET Magazine

21

LINQ - A revoluo do .NET 3.0

Diego Dias
(diego.dfsd@uol.com.br)

22 anos, desenvolvedor C# e Visual Basic .NET


desde 2002. Fundador do site 2dSolucoes.NET
(www.2dsolucoes.net) e atualmente analista de sistemas da Ciatech Solues Digitais
empresa do segmento de e-learning (www.
ciatech.com.br).

22

plataforma .NET passou por uma


grande evoluo, por exemplo na
verso 2.0 tivemos o conceito
de Generics, como mais uma alternativa
muito interessante diga-se de passagem,
para trabalhar com mais flexibilidade
na criao e na manipulao de objetos
e colees genricas.
Ento para os que achavam que no havia mais o que ser implementado no Framework, ao menos em um curto perodo
de tempo, estou aqui pra dizer que para
nossa felicidade, a verso 3.0 veio com
muitos outros recursos to interessantes
quanto o Generics:
Inferncia do tipo de variveis locais;
Tipos annimos;
Expresses Lambda;
Mtodos de extenso;
Propriedades automticas;
Expressions Trees;
LINQ (Language Integrated Query);
Inicializao de objetos e colees.
Apesar de tantos recursos novos e

.NET Magazine - LINQ - A revoluo do .NET 3.0

interessantes, este artigo vai focar principalmente na linguagem LINQ, que


particularmente considero uma das mais
interessantes inovaes criadas para a
plataforma .NET, assim como outros
conceitos que so necessrios para o seu
entendimento.

O que LINQ?

A linguagem LINQ basicamente uma


forma de unificar querys de consultas
a bancos de dados, a documentos XML
e consultas a colees utilizando uma
sintaxe nica e muito flexvel.
Isso com certeza facilita muito o dia a
dia do desenvolvedor, pois no difcil
encontrar pessoas que j tiveram problemas para manipular, por exemplo, um
documento XML no qual alguns nodes
especficos deveriam ser capturados,
por no conhecerem a XPATH. O mesmo
acontece com as consultas ao banco de
dados e a colees de objetos, devido no
haver uma sintaxe padro que possibilite

.NET 3.0
um resultado idntico em situaes bem
distintas, como nos casos mencionados.
Quando se fala da linguagem LINQ,
podemos subdividi-la em trs mdulos,
sendo:
DLinq: Permite que sejam feitas consultas em banco de dados (ADO.NET);
XLinq: Permite que sejam feitas consultas em XML (System.XML);
Standard Query Operators: Permite que
sejam feitas consultas a objetos.
Esse recurso at o momento s est
disponvel nas linguagens C# e VB e
na verso CTP do Visual Studio (Orcas)
lanada em maro desse ano e que pode
ser baixada em: www.microsoft.com/downloads/details.aspx?FamilyId=CF76FCBA-07AF-47AC-8822-4AD346210670&displaylan
g=en#Instructions.
A Figura 1 mostra a estrutura da
LINQ.

Sintaxe da LINQ

A sintaxe das query expressions (nome


dado s querys LINQ) muito similar s
querys SQL e XSQL, como podemos ver
na Listagem 1.
Para iniciar uma query expression usamos
a clusula from e para finaliz-la usamos
a clusula select ou group, ao contrrio das
querys tradicionais criadas em SQL, onde
a hierarquia o oposto e a clusula select
vem antes da clusula from, que por sua
vez vem antes da clusula group.
A clusula from funciona como um lao
e recupera em cada iterao um item da
coleo e o armazena no identificador
especificado na query. A let computa uma
expresso a cada iterao e armazena o
resultado no seu identificador.
A clusula where filtra, excluindo os
itens que no atendam s condies
especificadas na query. No final da query
temos a select ou group que especificam
como ser apresentado o resultado.
As clusulas select e group ainda podem
ser precedidas de uma clusula orderby
para ordenar o resultado. Alm disso,
podemos inserir o resultado em um
identificador para que possa ser criada
uma sub-query, o que possvel atravs
da clusula into.

Mais inovaes

Para que fique mais fcil o entendimento das query expressions acho interessante

Figura 1. Estrutura da Language Integrated Query (LINQ)

Listagem 1. Estrutura de uma query utilizando LINQ


clausula-from:
from [tipo] identificador in coleo
clausula-join:
join [tipo] identificador in coleo on item equals item
join [tipo] identificador in coleo on item equals item into identificador
clausula-let:
let identificador = expresso
clausula-orderby:
orderby item direo[ascending, descending]
clausula-select:
select item
clausula-group:
group item by expresso

comentar brevemente o que torna o


conceito da linguagem LINQ possvel,
ento quando falamos de LINQ falamos
tambm de:
Expresses Lambda - esse conceito similar ao conceito de mtodos annimos,
porm com uma sintaxe mais concisa;
Inferncia do tipo de variveis locais
- permite que o tipo de variveis possa
ser definido apenas quando for atribudo
um valor a ela, no confundam isso com
a antiga Variant existente no Visual Basic
e anteriores;
Tipos annimos - permite que um
novo tipo possa ser criado dinamicamente sem que uma classe seja especificada,
como comum;
Mtodos de extenso - permite que
seus mtodos sejam utilizados em qualquer objeto que seja do tipo do seu parmetro sem que o mesmo seja herdado;

Inicializao de objetos - permite que


os atributos de um objeto sejam inicializados durante sua inicializao, sem o
uso do seu construtor.
O cdigo a seguir traz um mtodo denominado Converte aparentemente sem
utilidade, que no deixa explcito qual o
tipo de retorno e quais so os tipos dos
seus parmetros, este mtodo foi criado
apenas para ilustrar o quo poderosos
so esses novos recursos do Framework
3.0 e quanta flexibilidade eles podem
oferecer:
public static B Converte<A,B>(A value,
Func<A, B> retorno)
{
return retorno(value);
}

Isso s possvel com o uso de um


conceito j comentado que a inferncia
de tipos. A Listagem 2 ilustra o uso do
mtodo criado.

Edio 42 - .NET Magazine

23

Podemos notar que os tipos esto sendo


definidos somente na chamada do mtodo, onde o primeiro parmetro, uma
string, no caso da primeira chamada,
vai ser convertido para o tipo definido
no segundo parmetro que nesse caso
um double.
Por isso, a segunda chamada vai gerar
um erro, pois no se pode atribuir um
objeto do tipo double a uma varivel do
tipo string.

por uma vrgula. Para que consigamos


selecionar dados especficos preciso
criar um objeto.
A listagem traz algumas possibilidades
interessantes, por exemplo, na segunda
query expression o filtro criado separadamente, o que dependendo da situao
deixa mais claro o que est sendo feito.
Para criar essa expresso capaz de filtrar
os dados da query expression foi preciso
criar uma expresso Lambda.

Agora que j sabemos como trabalhar


os dados contidos em nossas colees
utilizando as query expressions, vamos
ver se para trabalhar com banco de dados realmente a mesma coisa, como foi
comentado no incio do artigo.

LINQ com banco de dados (DLinq)

Para comear temos que criar um arquivo do tipo DBML, onde sero definidas as
hierarquias e as possveis relaes entre

Usando Query Expressions

Agora que j vimos o que a LINQ, vamos ver como criar nossas prprias query
expressions. No cdigo a seguir, podemos
ver o uso de uma query expression para
selecionar alguns itens de uma coleo:
List<int> numeros = new List<int>{ 1, 2, 3,
4, 5, 6, 7, 8, 9 };
var resultado = from n in numeros
where (n % 2) == 0
select n;

Alm do uso da query expression est


sendo utilizado o conceito de inicializao de objetos, que permite atribuir
valores a um objeto ou coleo no momento de sua inicializao, sem o uso do
construtor. Pode-se notar que o uso das
query expression deixa o cdigo um tanto
quanto mais legvel e mais declarativo
que um foreach, por exemplo.
Vamos a um exemplo um pouco mais
interessante, onde vamos selecionar
itens em uma coleo cujo um dos seus
atributos esteja abaixo de um limite. A
Listagem 3 ilustra o exemplo.
A listagem anterior traz alm das query
expressions um conceito interessante que
a inferncia de tipos de variveis locais, j
comentado anteriormente. Para fazer uso
desse recurso basta declarar as variveis
sem definir seu tipo e colocando no lugar
do tipo a palavra var.
O conceito de inicializao de objetos,
pode ser visualizado na Listagem 3, onde
foi criada uma coleo de pessoa e no
foi necessrio utilizar o Add tradicionalmente utilizado para adicionar itens a
uma coleo.
Analisando as query expression fica mais
clara a sua sintaxe. Na primeira query
expression foi criado um novo objeto,
usando o conceito de tipos annimos,
pois ao contrrio das querys SQL no
possvel simplesmente adicionar os
campos que queremos listar separados

24

Figura 2. Criao do arquivo DBML


Listagem 2. Mtodo Converte sendo consumido
//Correto
double retorno = Converte(123, i => Convert.ToDouble(i));
//Incorreto
string retorno = Converte(123, i => Convert.ToDouble(i));
//Correto
string retorno = Converte(123, i => i.ToString());

Listagem 3. Query expression para selecionar itens de uma coleo


class pessoa
{
public int idade;
public string nome;
}
var funcionarios =
new pessoa{idade
new pessoa{idade
new pessoa{idade
new pessoa{idade
new pessoa{idade
new pessoa{idade
new pessoa{idade
new pessoa{idade
new pessoa{idade
new pessoa{idade
new pessoa{idade

new List<pessoa>{
= 22, nome=Diego},
= 28, nome=Renata},
= 52, nome=Rogerio},
= 52, nome=Ricardo},
= 33, nome=Reginaldo},
= 22, nome=Fabiano},
= 20, nome=Edson},
= 19, nome=Edson},
= 33, nome=Eduardo},
= 33, nome=Eduardo},
= 22, nome=Eduardo}};

//Lista os nomes e a quantidade de vezes que o mesmo se repete


var resultado = from p in funcionarios
group p by p.nome into t
select(new { nome = t.Key, Total = t.Count() });
//Lista os nomes com mais de 5 caracteres
Func<string, bool> filter = n => n.Length > 5;
var resultado = from p in funcionarios where filter(p.nome) select p;

.NET Magazine - LINQ - A revoluo do .NET 3.0

.NET 3.0
as tabelas que foram selecionadas, esse
um conceito muito similar ao de um
DataSet tipado e at de um TableAdapter.
Depois que o arquivo DBML criado,
ele gera uma interface grfica, para onde
devem ser arrastadas as tabelas existentes
na conexo criada no Server Explorer e
mais dois arquivos, sendo que um deles
tem a extenso .CS.
Esse arquivo contm toda a definio
das colunas das tabelas, hierarquia e
relacionamentos. As Figuras 2 e 3 ilustram a criao e a seleo de uma tabela
do banco de dados, que nesse caso a
tabela Usuario.
Agora preciso definir um objeto como
mostrado a seguir para que possamos
manipular as tabelas existentes no objeto
DataClasse.

Listagem 4. Query expression que seleciona apenas os IDs pares


var users = from todos in db.usuarios where (todos.id % 2) == 0 select todos;
foreach (var u in users)
{
Console.WriteLine(string.Format(id: {0} nome: {1}, u.id, u.nome));
}

Listagem 5. Implementao das classes Cliente e Pedido


public class Cliente
{
public int ClienteId;
public string Nome;
public string Endereco;
public string Cidade;
public string Pais;
public string Telefone;
public List<Pedido> Pedidos;
public List<Cliente> getClientes()
{
return new List<Cliente> {
new Cliente {
ClienteId = 1, Nome = Diego, Endereco = No definido, Cidade = So Paulo,
Pais = Brasil, Telefone = 555-5555 },
new Cliente { ClienteId = 2, Nome = Fabiano, Endereco = No definido,
Cidade = So Paulo, Pais = Brasil, Telefone = 555-5555 },
new Cliente { ClienteId = 3, Nome = Harrison, Endereco = No definido,
Cidade = So Paulo, Pais = Brasil, Telefone = 555-5555 },

DataClasses1DataContext db =
new DataClasses1DataContext();

Com o objeto de manipulao criado


podemos dar incio as query expression,
por exemplo, em um cdigo anterior, foi
criada uma query expression que selecionava apenas os nmeros pares existentes
em uma coleo de inteiros.
Que tal selecionar apenas os usurios
que tm seus IDs pares e para ficar mais
legal vamos utilizar a mesma query expression para demonstrar a flexibilidade
que tanto foi citada neste artigo. A Listagem 4 mostra como ficaria a query expression se aplicada sobre os dados contidos
na tabela de usurios do banco de dados.
Veja o resultado na Figura 4.
At agora s foram criadas query expressions simples, que tal utilizarmos alguns
outros recursos comummente utilizados

new Cliente { ClienteId = 4, Nome = Leonardo, Endereco = No definido,


Cidade = So Paulo, Pais = Brasil, Telefone = 555-5555 },
new Cliente { ClienteId = 5, Nome = Rafael, Endereco = No definido,
Cidade = So Paulo, Pais = Brasil, Telefone = 555-5555 },
new Cliente { ClienteId = 6, Nome = Alex, Endereco = No definido,
Cidade = So Paulo, Pais = Brasil, Telefone = 555-5555 }
};

}
}
public class Pedido
{
public int PedidoId;
public Cliente Cliente;
public DateTime OrderDate;
public double Total;

Figura 3. Diagrama que criado depois que


uma tabela selecionada

public List<Pedido> getPedidos()


{
return new List<Pedido> { new Pedido { Cliente =
new Cliente { ClienteId = 1 }, PedidoId = 1, Total = 100 },
new Pedido { Cliente = new Cliente { ClienteId = 1 }, PedidoId = 2, Total = 1000.00 },
new Pedido { Cliente = new Cliente { ClienteId = 2 }, PedidoId = 3, Total = 10000.00 },
new Pedido { Cliente = new Cliente { ClienteId = 3 }, PedidoId = 4, Total = 10000.00 },
new Pedido { Cliente = new Cliente { ClienteId = 3 }, PedidoId = 5, Total = 3000.00 },
new Pedido { Cliente = new Cliente { ClienteId = 3 }, PedidoId = 6, Total = 4000.00 },
new Pedido { Cliente = new Cliente { ClienteId = 4 }, PedidoId = 7, Total = 7000.00 },
new Pedido { Cliente = new Cliente { ClienteId = 5 }, PedidoId = 8, Total = 9000.00 },
new Pedido { Cliente = new Cliente { ClienteId = 5 }, PedidoId = 8, Total = 11000.00 },
new Pedido { Cliente = new Cliente { ClienteId = 6 }, PedidoId = 8, Total = 100.00 },
new Pedido { Cliente = new Cliente { ClienteId = 6 }, PedidoId = 8, Total = 12000.00 },
new Pedido { Cliente = new Cliente { ClienteId = 2 }, PedidoId = 8, Total = 2000.00 }
};
}

Figura 4. Resultado da Query Expression

Edio 42 - .NET Magazine

25

em querys SQL, como por exemplo, o


relacionamento de dados entre tabelas
distintas.

Usando classes como tabelas

Pra abusar dos recursos agora disponveis no Framework foram implementadas


duas classes que vamos utilizar como
se fossem tabelas de banco de dados. A
Listagem 5 mostra a implementao das
classes Cliente e Pedido.
Agora que j temos duas supostas
tabelas com clientes e com pedidos,
vamos aprender a extrair a informao
utilizando query expression. O cdigo da
Listagem 6 mostra como utilizar o join
para recuperar os pedidos de cada cliente
e seus valores:
O cdigo no tem muitas novidades, a no
ser o uso da clusula join que possibilita que
sejam relacionados os dados de duas colees, desde que tenham algo em comum,
nesse caso o identificador do cliente.
O cdigo a seguir tambm no tem muitas novidades, alm da clusula join foi
utilizada a let, para que fosse computado
um dado especfico:

guidos pelo nome do objeto, por exemplo,


XMLDocument.
O cdigo da Listagem 7 ilustra mais
claramente as mudanas mencionadas.
Sero utilizadas como fonte de dados
para nossos testes com a XLinq as mesmas classes clientes e pedidos implementadas neste artigo:

A Figura 7 ilustra o resultado do cdigo


proposto para criao de um arquivo
XML com os dados de clientes.
Podemos notar que um recurso que
est evidente no cdigo anterior e foi
implementado com sucesso nesse novo
namespace para manipular arquivos XML
foi a inicializao de objetos, isso traz a

Listagem 6. Utilizando a clusula Join


List<Pedido> pedidos = new Pedido().getPedidos();
List<Cliente> clientes = new Cliente().getClientes();
var pe = from p in pedidos
join c in clientes on p.Cliente.ClienteId
equals c.ClienteId
select new { c.ClienteId, c.Nome, p.Total };

Listagem 7. Utilizando XLinq


XDocument doc = new XDocument(new XDeclaration(1.0, ISO-8859-1, null));
var pe = from p in pedidos
join c in clientes on p.Cliente.ClienteId
equals c.ClienteId
select new { c.ClienteId, c.Nome, p.PedidoId, p.Total };
var xdoc = new XDocument(new XDeclaration(1.0, ISO-8859-1, null),
new XElement(Clientes, clientes.Select(f =>
new XElement(Cliente, new XAttribute(Id, f.ClienteId),
new XAttribute(Nome, f.Nome), new XAttribute(Cidade, f.Cidade),
new XAttribute(Pais, f.Pais), new XAttribute(Telefone, f.Telefone)))));
Console.WriteLine(xdoc);

var pe = from c in clientes


join p in pedidos on c.ClienteId
equals p.Cliente.ClienteId into cp
let x = cp.Count()
select new { c.ClienteId, c.Nome,
QtdPedidos = x };

A Figura 5 ilustra o resultado obtido


aps a execuo da primeira query expression.
A Figura 6 ilustra o resultado obtido
aps a execuo da segunda query expression.

Linq com XML (XLinq)

Para utilizarmos os recursos da linguagem LINQ na manipulao de arquivos


XML, basta importar o namespace System.XML.Linq. Os objetos disponveis
nesse namespace so muito similares
aos objetos comumente utilizados para
manipulao de arquivos XML.
A principal diferena pode ser vista
na flexibilidade que os objetos fornecem
ao seu consumidor, alm claro da sua
nomenclatura que diferencia os objetos
XLinq dos objetos XML.
Os objetos XLinq iniciam sempre com
X seguidos pelo nome do objeto, por
exemplo, XDocument. J os objetos XML
tradicionais so iniciados com XML se-

26

Figura 5. Resultado da query expression com join

Figura 6. Resultado da query expression com join e let

.NET Magazine - LINQ - A revoluo do .NET 3.0

.NET 3.0
flexibilidade necessria para unir a manipulao de arquivos XML e a LINQ.
O cdigo anterior cria um arquivo XML
com todos os dados dos clientes de nossa
fonte de dados. Um ponto importante
nesse cdigo a forma descritiva e at
bvia do seu objetivo, o que facilita muito
uma possvel manuteno.
Agora eu vou complicar um pouco,
vamos supor que ser implamantado
um sistema de gesto na sua empresa e
o sistema precisa dos dados de clientes
e seus respectivos pedidos, porm esses
dados devem ser passados ao sistema
em formato XML. O cdigo da Listagem
8 traz uma possvel soluo para esse
problema utilizando XLinq.
A Figura 8 ilustra o resultado do cdigo
proposto para criao de um arquivo
XML com dados de clientes e seus respectivos pedidos.

Concluso

Listagem 8. Utilizando XLinq


var xdoc = new XDocument(new XDeclaration(1.0, ISO-8859-1, null),
new XElement(Clientes, clientes.Select(f => new XElement(Cliente,
new XAttribute(Nome, f.Nome), new XElement(Pedidos, pe.Select(p =>
new XElement(Pedido, new XAttribute(IdCliente, p.ClienteId),
new XAttribute(Id, p.PedidoId), new XAttribute(Valor, p.Total))).Where(x =>
x.Attribute(IdCliente).Value == f.ClienteId.ToString()))))));
Console.WriteLine(xdoc);

Figura 7. Arquivo XML criado com a utilizao de XLinq

Este artigo foi desenvolvido com a


inteno de levar ao leitor, de uma forma simples e objetiva, o conhecimento
necessrio para que o mesmo possa
utilizar os recursos disponveis a partir
da verso 3.0 do Framework .NET, mais
especificamente a LINQ.
As informaoes contidas neste artigo
so suficientes para que o leitor possa
de forma sensata introduzir na sua rotina diria de trabalho, os conceitos da
linguagem LINQ, buscando com isso
aumentar a produtividade e facilitar o
entendimento do cdigo escrito, j que
uma caracterstica marcante da LINQ a
sua sintaxe declarativa e concisa.

Referncias
Projeto LINQ
msdn2.microsoft.com/en-us/netframework/aa904594.aspx
Artigo de Anders Hejlsberg sobre a LINQ
msdn2.microsoft.com/en-us/library/aa479865.aspx
Download do Orcas
www.davidhayden.com/blog/dave/archive/2007/02/28/
VisualStudioOrcasMarch2007CTP.aspx
LINQ
w w w. m i c ro s o f t . co m / d o w n l o a d s / d e t a i l s . a s p x ?
FamilyID=1e902c21-340c-4d13-9f04-70eb5e3dceea&
DisplayLang=en

Figura 8. Arquivo XML com dados dos clientes criado com a utilizao de XLinq

Edio 42 - .NET Magazine

27

Componentes de terceiros para ASP.NET

Rodrigo Sendin
(rodrigo.sendin@terra.com.br)

tecnlogo formado pela FATEC de Americana


e MCP .NET. Trabalha com desenvolvimento de
software h mais de 10 anos, escreve artigos
para .NET Magazine, ClubeDelphi e WebMobile. Tambm desenvolve treinamentos em .net,
e atualmente desenvolvedor C# na TauNet
Consulting.

28

ma frase muito dita no meio do


desenvolvimento de software
No Reinventar a Roda. uma
mxima que prega essencialmente a
reutilizao. Ou seja: Se algum j fez isso
e eu posso reutilizar, por que vou perder meu
tempo fazendo de novo?
Neste artigo exploraremos alguns componentes ASP.NET oferecidos por outras
empresas (no Microsoft). Existem vrias
empresas que vendem (e at oferecem
gratuitamente) componentes para ASP.
NET. So componentes que obviamente
realizam funes que no temos nos componentes nativos da plataforma.
No farei propaganda dessas empresas
aqui. O objetivo conhecer alguns componentes que tratam de funcionalidades
muito teis para o nosso dia a dia. Veremos que muitas vezes compensa adquirir
um componente de terceiro ao invs de
investir tempo na criao de algo que j
existe pronto.
E principalmente, demonstraremos o

.NET Magazine - Componentes de terceiros para ASP.NET

que voc deve avaliar antes de optar pela


compra de um componente.

ASPNetVideo

Recentemente escrevi um artigo sobre


a criao de uma aplicao Web para publicao de vdeos, ao estilo do YouTube.
Na ocasio foi descrito como exibir vdeos
em pginas da Web. No uma tarefa
difcil, mas e se j tivssemos um componente pronto, que j fizesse isso?
Existe um muito til para realizar
essa tarefa, o ASPNetVideo. Mas antes
de optar por comprar um componente
de terceiro, essencial que voc possa
test-lo e a melhor forma de se fazer isso
atravs de uma verso trial.
O ASPNetVideo possui uma verso trial
e voc pode realizar o seu download no
seguinte link: www.aspnet-video.com. Vamos avaliar este componente? Faa o download para a verso 2.0 do ASP.NET, o
arquivo se chama ASPNetVideoSetup2_0.
zip. Descompacte-o e execute o arquivo

as p.NET
de setup. muito importante que o Visual
Studio esteja fechado nesse momento.
Uma outra caracterstica que voc tem
que observar sobre o componente, se
ele fcil de instalar. Veja que o setup do
ASPNetVideo tranqilo. Aps o trmino
da instalao abra o Visual Studio 2005 e
crie um novo projeto ASP.NET.
Na ToolBox temos os controles disponveis. essencial que a instalao dos componentes j disponibilize os controles na
ToolBox. Como mostra a Figura 1, temos
uma nova seo chamada ASPNetVideo,
e nela temos trs novos componentes,
chamados: QuickTime, WindowsMedia e
RealPlayer.
claro que cada um deles utilizar o
software de cada um dos respectivos
fabricantes. Vamos fazer um teste com
o WindowsMedia. Arraste-o para a pgina Default.aspx. Todo componente de
terceiro que se preza tem que permitir
configur-lo pela janela de propriedades,
ou melhor ainda, tem que disponibilizar
as principais configuraes na Smart Tag
do controle.
Do que adianta investirmos em um
componente de terceiro se vamos ter
trabalho com codificao? Esse um dos
pontos fundamentais que voc precisa
avaliar antes de decidir pela compra do
componente.
Veja na Figura 2 as opes disponveis
na Smart Tag do controle WindowsMedia.
Podemos definir o tamanho que o vdeo
ocupar na janela, podemos definir a
propriedade AutoPlay, Loop Count etc. E
principalmente, podemos definir aqui,
qual o vdeo que ser exibido, claro.
Para o nosso exemplo estou mudando
o tamanho do vdeo para Width = 450px
e Height = 400px. Em seguida clique no

Figura 1. Componentes ASPNetVideo

boto que temos na frente do campo Video


URL, e veja como mostra a Figura 3, que
podemos escolher um vdeo que esteja
dentro do projeto Web.
Estou selecionando um vdeo de exemplo e clicando em OK. Em seguida, salve
compile e execute sua aplicao. Veja
na Figura 4 que o vdeo exibido no
controle.
Veja que junto com o controle temos
um link indicando que esta uma verso
trial. Note que foi muito simples a utilizao do componente, e assim que tem que
ser. Um componente de terceiro precisa
facilitar o trabalho e no complicar.

Faa o teste com os outros componentes


de exibio de vdeos. Voc ver que essa
uma tima soluo para a exibio de
vdeos em suas aplicaes Web.

FreeTextBox

Voc j teve a necessidade de criar um


componente para a edio de textos na
Web? Sabe aquelas interfaces de Blogs,
onde podemos escrever e formatar o texto
que ser publicado? O FreeTextBox um
controle que faz exatamente isso.
Acesse o link: www.freetextbox.com. Se
voc der uma olhada no site, principalmente na seo que trata das licenas,

Figura 2. Tasks do componente WindowsMedia no design da pgina

Figura 3. Selecionando um vdeo para teste

Edio 42 - .NET Magazine

29

Figura 4. Testando o controle WindowsMedia

Figura 5. Incluindo o FreeTextBox na ToolBox

30

.NET Magazine - Componentes de terceiros para ASP.NET

voc ver que um grande diferencial


desse componente que voc tem uma
licena que lhe d direito a ter acesso aos
fontes do componente. Dependendo da
sua aplicao, isso pode ser fundamental,
uma vez que voc mesmo pode alterar o
componente.
V seo de downloads e faa o download da ltima verso. At o fechamento
deste artigo a ltima verso disponvel
era a 3.1.6, e o arquivo de download se
chamava FTBv3-1-6.zip. Descompacte o
arquivo e voc notar que no existe um
setup para o componente. O que temos
aqui a FreeTextBox.dll disponvel na
pasta ~/FTBv3-1-6\Framework-2.0.
Copie essa DLL para a pasta bin de um
projeto ASP.NET 2.0, que pode inclusive
ser o mesmo que fizemos anteriormente.
Abra o projeto no Visual Studio 2005 e v
na ToolBox. Como no temos um setup,
teremos que incluir o controle na ToolBox.
Clique com o boto direito em uma rea
vazia da ToolBox, escolha a opo Add Tab
e informe FreeTextBox no nome desta
nova Tab.
Em seguida clique com o boto direito
dentro da nova Tab e escolha a opo
Choose Items. Clique em Browse e aponte
para a DLL que copiamos para a pasta
bin. Veja como mostra a Figura 5, que o
componente j selecionado. Clique em
OK e veja agora na Figura 6 que o controle
aparece na ToolBox.
Em uma pgina vazia arraste o FreeTextBox. No design no temos muito o que
mexer. Talvez algumas formaes de
layout nas propriedades, mas nada que
venha ao caso no momento. Aps incluir
o controle na pgina, simplesmente salve,
compile e execute o seu projeto.
Veja na Figura 7 que o FreeTextBox disponibiliza uma interface muito parecida com

Figura 6. Componente FreeTextBox na ToolBox

as p.NET
a do Word, para a formatao de textos.
Veja que voc pode formatar o tipo da
fonte, trocar o tamanho, cor, pargrafo,
incluir figuras etc. Enfim, um timo
editor de texto para a Web. O resultado
dessa formatao um cdigo HTML,
que voc pode conferir na aba HTML na
parte inferior do controle.
E para utilizar esse cdigo HTML gerado pelo controle, basta acessar a propriedade Text do mesmo. Assim, em uma
aplicao como um Blog, esse controle
muito til. Imagine criar todas essas
funcionalidades do zero?
Nota: ao inserir texto HTML como entrada de dados, lembre-se de configurar
o atributo ValidateRequest da pgina
para False.

Banco de Dados com o FreeTextBox


Voc pode utilizar o FreeTextBox com banco de dados atravs
de DataBind. Por exemplo, em controles como o DetailsView
ou GridView, basta usar colunas templates para servirem de
container ao controle, e ento vincul-lo a uma coluna do
respectivo DataSource.

DevExpress: ASPxGrid

Aquele que nunca utilizou um Grid


de terceiro que atire o primeiro mouse!
Esse sem dvida o tipo de componente
mais utilizado. Ainda que o GridView do
ASP.NET 2.0 seja muito bom, e atenda a
maior parte das necessidades de um Grid,
sempre haver uma funcionalidade que
no conseguiremos com ele.
So vrias as empresas que disponibilizam Grids, eu vou demonstrar aqui
o Grid da DevExpress (www.devexpress.
com). Na seo de downloads desse site,
voc consegue baixar uma verso trial, do
pacote de controles da DevExpress.
E que pacote! No s o Grid que voc
vai encontrar, conjunto com diversos
componentes para ASP.NET e Windows
Forms. A dica dar uma olhada no Demo
que instalado junto com o produto. A
partir dela voc pode ter uma idia geral
do que faz cada um dos controles.
www.devmedia.com.br/msdn/portal.asp

Acesse agora o mesmo o Portal .net Plus e assista a uma vdeo aula
de Fabio Galante, que mostra como trabalhar com o FreeTextBox em
aplicaes ASP.NET.
www.devmedia.com.br/articles/viewcomp.asp?comp=3327

Outro diferencial que eu achei muito


interessante nesse pacote a documentao. Mesmo na verso trial, voc tem
uma opo chamada Documentation, que
traz uma enorme base de conhecimento
sobre os componentes.
bvio que eu no conseguiria demonstrar todos os componentes do pacote aqui, por isso vamos apenas fazer
um exemplo com o Grid, que se chama
ASPxGrid. Depois de fazer o download e
instalar o produto, crie um novo WebSite
no Visual Studio 2005.
Em seguida, com a pgina Default.aspx
aberta v na ToolBox (Figura 8). Veja que
temos duas sees s de componentes
da DevExpress. So 43 componentes
disponveis na ToolBox. Alm do Grid,
temos componentes para Tabs, Menus,
PivotTables, Relatrios, Grficos, e mais
uma infinidade de solues disponveis
para ASP.NET.
Quando voc for avaliar um Grid, veja
quais so os tipos de DataSources que ele
aceita. Eu por exemplo trabalho muito
com DataSets Tipados e TableAdapters, se o
Grid no for compatvel com esse tipo de
DataSource, para mim no funciona.
Vamos ento ver se o ASPxGrid compatvel com os DataSets e TableAdapters
do ADO.NET. Clique com o boto direito
sobre o projeto no Solution Explorer e
escolha a opo Add New Item. Escolha
o item DataSet, mude o seu nome para
Northwind.xsd e clique em Add.
Aparecer uma mensagem perguntando sobre a criao da pasta App_Code,
confirme clicando em Yes. Em seguida,
crie uma conexo com o Northwind no
Server Explorer (ou qualquer banco de
sua escolha).
Arraste a tabela Customers para o Design
Surface do DataSet. Seu DataSet dever se
parecer como o da Figura 9.

Onde encontrar o Database Northwind?


A Microsoft disponibiliza o download do Database
Northwind para SQLServer, neste link:
www.microsoft.com/downloads/details.aspx?FamilyID=
06616212-0356-46A0-8DA2-EEBC53A68034&
displaylang=en
Se voc utiliza o SQLServer 2000, o Northwind j vem instalado.
Figura 7. Testando o componente FreeTextBox

Edio 42 - .NET Magazine

31

Salve e faa um Build do seu projeto.


Em seguida v at a pgina Default.aspx
e arraste um ObjectDataSource da ToolBox para o design da pgina. Na Smart
Tag do ObjectDataSource clique na opo
Configure Data Source. Em Business Object,
selecione o NorthwindTableAdapters.CustomersTableAdapter, e clique em Next. Em
seguida clique em Finish.
Abaixo do ObjectDataSource, arraste o
ASPxGrid que voc encontra na seo
Developer Express: Web.Grid v7.1. E como
mostra a Figura 10, em Choose Data Source,
aponte para o ObjectDataSource1.
Nesse momento voc pode ver que as
colunas do Grid j esto apresentando os
atributos da tabela Customers. Isso indica
que o ASPxGrid compatvel com os DataSets do ADO.NET. Mas voc tambm
pode ver que esse Grid compatvel com
outros DataSources, como acesso direto ao
SQL Server, Access, XML e outros.
Se voc quiser j pode executar o projeto
e ver que o Grid j est funcionando.
Porm, antes de fazermos isso, vamos

explorar algumas opes que o ASPxGrid


oferece. Veja que na Smart Tag do controle
temos uma opo chamada Designer,
clique nela.
J deu pra ver no lado esquerdo desta
janela a quantidade de opes que temos
para configurar o Grid. Obviamente no
conseguiremos ver todas, mas vamos
s mais interessantes. Clique na opo
Columns do menu lateral. Veja que aqui
podemos definir e configurar as colunas

que aparecero no Grid.


Por padro o Grid est com o Auto Generate Columns ligado, e por isso nenhuma
coluna aparece aqui para configurao.
Mas temos um boto muito interessante
chamado Retrieve Columns, clique nele.
Veja, como mostra a Figura 11 que todas
as colunas da tabela aparecero aqui.
Observe que para cada coluna podemos
configurar uma enorme quantidade de
propriedades. Uma propriedade que eu

Figura 9. DataSet Northwind com DataTable Customers

Figura 8. Componentes da DevExpress na ToolBox

32

Figura 10. Escolhendo o DataSource do ASPxGrid

.NET Magazine - Componentes de terceiros para ASP.NET

as p.NET

Figura 11. Configurando as colunas do Grid

Figura 12. Opes da propriedade EditorType

Edio 42 - .NET Magazine

33

achei muito interessante est na seo


Editors, a Editor Type. Veja na Figura
12, que atravs dessa propriedade voc
pode escolher um controle diferente para
a edio do campo, como por exemplo:
DropDownList, Image, ListBox e at controles especiais do pacote DevExpress como
DateEdit, Lookup e SpinEdit.
Clique agora na opo AutoFormat que
est na seo View Settings do menu
lateral. Veja que voc tem uma enorme
quantidade de opes de formatao de
layout. Vamos escolher Office2003 Blue,
que lembra o padro do Office 2003.
De novo no menu lateral, clique na opo
Search que est na seo Functionality. Aqui
podemos habilitar a funo de pesquisa
nas colunas do Grid. Como nos mostra a
Figura 13, marque a opo Enable Search,
que por padro vem desabilitada.
J o suficiente para podermos testar
algumas funcionalidades do Grid. Clique
em OK, salve, compile e execute o seu
projeto. A primeira coisa que voc pode
observar a interatividade que voc tem
com as colunas e linhas do Grid.
Veja que voc consegue ordenar de
forma crescente ou decrescente qualquer
uma das colunas. Voc tambm pode
alterar o tamanho das colunas, apenas
clicando nas linhas de diviso e arrastando. Tambm pode mudar as colunas de
posio no Grid, clicando e arrastando o
seu cabealho.
Por padro, voc tambm pode selecionar
as linhas do Grid (sem postback), e mudar
essa seleo com a utilizao das teclas do
teclado. Se desejar, pelo Designer do Grid
voc tambm pode configurar mltipla seleo de linhas ou at seleo de clulas.
Veja como mostra a Figura 14, que para
cada coluna temos uma opo de Search.
Basta digitar o comeo da palavra que
queremos pesquisar e clicar na lupa.

Figura 13. Habilitando o Search no Grid

www.devmedia.com.br/msdn/portal.asp

Acesse agora o mesmo o Portal .net Plus e assista a uma vdeo aula de
Luciano Pimenta, que mostra uma srie de aulas sobre o componentes
DevExpress.
www.devmedia.com.br/articles/listcomp.asp?txtsearch=DevExpress

34

Figura 14. Exemplo de utilizao do Search, na coluna CompanyName

.NET Magazine - Componentes de terceiros para ASP.NET

as p.NET
As opes de Search tambm podem ser
configuradas no Designer.
E a minha funcionalidade preferida, o
agrupamento. Clique no cabealho da
coluna Country e arraste-a para a rea
superior do Grid, onde est escrito Drag a
column header here to group by that column.
Veja que os registros foram agrupados
pela coluna escolhida (Figura 15).
Essa, sem dvida, uma funcionalidade
muito interessante, e que ajuda muito o
usurio final. Voc pode agrupar o Grid por
qualquer uma das colunas e ainda realizar
agrupamentos mltiplos. O que eu pude
observar quando testei esse Grid e os outros
componentes da DevExpress a quantidade
de configuraes que temos disponveis.
Isso um grande diferencial, pois
permite personalizar o componente da
forma que precisamos, tornando-o bem
portvel para as nossas aplicaes.

Concluso

Como voc pde ver o mercado est


cheio de solues de terceiros quando
o assunto componentes do ASP.NET.
Vimos neste artigo, apenas trs exemplos
do que voc encontra por a. Tudo vai
depender da sua necessidade e do quanto
voc pode investir. Alguns componentes
so mais caros, mas em contrapartida vo
lhe trazer maior produtividade.
Outro ponto muito importante que voc

Figura 15. Exemplo de agrupamento no Grid

tem que avaliar verificar qual o comprometimento que a empresa tem com a
evoluo da tecnologia. Ou seja, quando
sair outra verso do .NET, sair outra
verso dos componentes? Tente conhecer
outras empresas que usam o componente
que voc quer comprar, oua a opinio
delas. Procure em fruns e comunidades

alguma referncia do componente.


Tome cuidado com componentes gratuitos, podem ser um problema, principalmente se no vierem acompanhados do
cdigo-fonte. E tenha sempre em mente
que os componentes tm que ajudar no
seu dia a dia e no atrapalhar.
Grande abrao e at a prxima!

Edio 42 - .NET Magazine

35

Preenchendo formulrios Web


programaticamente

Guinther Pauli
(guinther@devmedia.com.br)

Atua no ramo de tecnologia e programao h


mais de 17 anos, autor de mais de 100 artigos publicados e 200 vdeo-aulas e do livro
Delphi Programao para Banco de Dados
e Web.Trabalha com .NET desde a verso beta.
Bacharel em Sistemas de Informao, desenvolvedor 5 estrelas Microsoft, Microsoft Certified: MCP, MCAD, MCSD.NET, Borland Certified:
Delphi 6, 7, 2005, 2006, Web e Kylix. Editor Geral das Revistas .net Magazine, ClubeDelphi,
WebMobile (.NET) e Mr.Bool.

36

uso de arquivos texto (TXT) foi,


ou provavelmente ainda , uma
das formas mais conhecidas e
utilizadas para comunicar diferentes
tipos de aplicao. Imagine um cenrio,
por exemplo uma empresa A usando
um sistema em .NET, que precisa enviar
informaes sobre parcelas geradas para
um sistema B legado, escrito em Clipper
ou Cobol. O uso de TXT inevitvel.
Mas um personagem estava para surgir e mudar esse cenrio. Se o leitor j
est pensando no termo XML, acertou.
Podemos dizer que o XML estende o
formato TXT, j que tambm expresso
em forma textual, porm tem duas grandes diferenas: 1) Expe seus dados em
um formato mais lgico e hierrquico; 2)
Existem inmeros parsers prontos para
processar arquivos XML.
A tendncia que a comunicao entre
sistemas heterogneos seja feita atravs
de XML, j que esse um formato amplamente aceito e padronizado. E quando se

.NET Magazine - Preenchendo formulrios Web programaticamente

fala em comunicar aplicativos via XML


de forma on-line, ento entra outra nova
(e nem to nova assim) e importante tecnologia: Web Services (chamado a partir
daqui simplesmente de WS).
Por exemplo, imagine um cenrio onde
construmos um sistema para uma agncia de turismo. Poderamos integrar em
nosso WebSite uma consulta on-line via
WS aos sites das companhias reas que
oferecem as passagens mais baratas para
o horrio desejado pelo cliente.
Ao invs de entrarmos site por site de
cada companhia, nosso sistema faz isso
automaticamente via WS (ou usando
a tcnica que veremos neste artigo). E
poderia integrar com outro WS para
j disponibilizar ao cliente um hotel
prximo ao local de chegada que tenha
disponibilidade para um horrio X. Tudo
automtico!
Seria uma maravilha se tudo o que
precisssemos integrar em nosso sistema
pudesse ser obtido atravs da comunica-

Boa idia
o via WS. bem mais simples receber
dados em XML e process-los com um
parser (atravs das classes do .NET).
Mas a realidade mostra um cenrio
totalmente diferente. Quase tudo o que
vemos baseado em HTML (browser) e
no XML, o que significa que para usar
determinado servio de outra empresa,
voc precisa abrir um browser, preencher
informaes e consultar. Isso d um fim
ao processo que precisaria ser feito de
forma automtica. Ou pelo menos deveria, at voc ler este artigo.
Quando usamos um browser para utilizar um servio de uma empresa, estamos
usando o que chamamos de intercmbio
B2C (Businness to Consumer - pt.wikipedia.
org/wiki/B2C). O usurio final responsvel por obter a informao de um browser
que recebe HTML.
Quando a comunicao feita de forma
automtica por um sistema via WS e
XML, e o usurio final acessa o servio
via nossa aplicao e no diretamente o
servio, dizemos que a comunicao
feita atravs de B2B (Businness to Business
- pt.wikipedia.org/wiki/B2B).
Por exemplo, se voc acessa o site da DevMedia para comprar edies de revistas
anteriores que por ventura no tenha em
sua coleo, est usando o B2C. Se est,
por exemplo, usando o WS dos Correios
(veja edio 36) para exibir dados de
endereo do cliente em seu sistema, est
usando B2B.
Mas onde quero chegar com toda essa
introduo? O fato que precisamos cada
vez mais construir aplicaes B2B para
agregar funcionalidades as nossas aplicaes, porm, infelizmente, a maioria
das coisas que encontramos hoje na Web
no so disponibilizadas na forma de WS
(B2B), mas somente para usurios finais
atravs de um browser HTML (B2C).
O que nos resta criar um mecanismo
para usar servios B2C como se fossem
B2B.

Criando solicitaes HTTP

A soluo apresentada neste artigo


consiste em fazer via cdigo o que um
usurio faria normalmente via Web Browser. Ou seja, podemos usar em nossas
aplicaes servios disponibilizados no
como WS, mas em forma de Web Sites.
Como os dados trafegam sobre o HTTP

em formato HTML, e no XML, preciso


realizar um trabalho extra e braal.
Imagine um usurio preenchendo um
cadastro em um Web Site, onde ele informa os campos em um formulrio e clica
em um boto Gravar. Considere que voc
precisa transferir todos os registros da
sua base de clientes para esse Web Site.
O que fazemos , para cada registro,
preencher os dados do formulrio programaticamente e emitir um comando ao
Web Site para clicar no boto Gravar. Ou
seja, estamos fazendo tudo via cdigo.
Estamos simulando o papel de um
browser, criando uma requisio HTTP
no brao (atravs da classe WebRequest
do .NET, do namespace System.Net) e
obtendo o valor de retorno. Aplicaes
desse tipo tambm so conhecidas como
robots.
Como o valor de retorno HTML, e no
XML, normalmente o trfego de dados
ser bem mais intenso, visto que em
HTML trafegam no somente dados, mas
informaes de layout, banners, figuras,
que normalmente no so necessrias em
uma aplicao B2B. Alm disso, preciso
fazer o parse manual do arquivo HTML
de retorno, procurando linha a linha (ou
tag a tag) por um valor desejado.
Os exemplos demonstrados neste artigo
so bastante interessantes e vo deixar
mais clara a idia aqui proposta, que se
usada com sabedoria, poder agregar um
valor muito grande as suas aplicaes
Web ou mesmo Desktop.
As aplicaes aqui construdas sero
do tipo Windows Forms, mas podem facilmente serem feitas utilizando-se ASP.
NET Web Forms, caso queira.

Nota: Como aplicaes Web so totalmente dinmicas, e pelo fato dos exemplos fazerem parse manual do cdigo
HTML, possvel que deixem de funcionar caso o fornecedor do servio modifique por algum motivo o seu layout ou
simplesmente o endereo da pgina.
No entanto, no endereo para download deste artigo, voc sempre encontrar verses atualizadas e funcionais para
os exemplos aqui apresentados.

Obtendo dados da Web via cdigo

Neste primeiro exemplo, veremos


como obter (GET) os dados vindos de
uma pgina. Esse um aplicativo mais
simples, pois no ser necessrio passar nenhum parmetro em forma de
campo para o servidor. Como exemplo,
vamos obter a cotao on-line do dlar,
disponvel na pgina br.invertia.com do
site Terra.
Em uma nova aplicao Windows
Forms, desenhe o formulrio mostrado
na Figura 1. Nele temos um Button, um
TextBox chamado tbResponse e um
Label (lbResultado).
O lbResultado vai exibir a cotao atual
do dlar obtida a partir do site. O TextBox
no tem funcionalidade para o usurio
final, ele apenas ajudar a visualizar o
contedo de retorno (Response) retornado do servidor Web. No Click do boto
apenas chamamos o mtodo DoRequest
(Listagem 1).
Os cdigos esto todos comentados
para um melhor entendimento. Veja que
estamos criando uma requisio HTTP
no brao, como se fosse o usurio aces-

Advertncia
No o objetivo deste artigo demonstrar exemplos para
uso ilcito da tecnologia, como fazer mau uso de servios
oferecidos por empresas, sobrecarregar servidores - D.O.S,
preencher cadastros com dados falsos, burlar votaes online, fazer spam automtico etc.
O objetivo nico e principal aqui mostrar como voc
pode integrar suas aplicaes com Web Sites que forneam
servios teis.

Figura 1. Formulrio para exibir o valor do dlar

Edio 42 - .NET Magazine

37

sando a pgina. Isso feito atravs da


classe WebRequest.
Note que, contrariando o padro do
.NET, criamos um objeto WebRequest com
o mtodo Create e no com o operador new
do C#. A seguir, fazemos um GET para
obter o valor de retorno para a pgina
passada como parmetro no Create do
WebRequest.
O valor do Response (varivel rp), que
a resposta / retorno, nada mais que a
prpria pgina HTML que seria enviada
a um browser. Para fazer a leitura desse
Response, precisamos de um StreamReader,
que obter o contedo do Response e guardar na varivel ct (o Content). A seguir
fechamos os objetos utilizados.
Aps a requisio, exibimos o valor
do contedo retornado no TextBox, que
o cdigo HTML. O prximo passo
buscar no HTML puro o que estamos
procurando, um processo bastante braal
j que estamos trabalhando com HTML
e no XML.
O cdigo da funo ExtractDolar obtm
o valor do dlar a partir do HTML de
retorno. A tcnica simples, procuramos
por algo fixo no HTML e a posio relativa do que buscamos comparado a esse
valor fixo. Esse um procedimento que
voc deve fazer examinando o HTML
retornado.
Nesse caso, o valor do dlar est 16
posies aps o elemento DOLCM e tem
tamanho 6. No fique apavorado com o
nvel do hard-coded, essa uma das
formas mais utilizadas para fazer o parse
em um HTML (ou o DOM, dependendo
do formato HTML). A funo mostrada
na Listagem 2.
Executando a aplicao (no esquea de
colocar a chamada a DoRequest no boto),
j podemos ver a cotao on-line do dlar
(Figura 2).
Nota: Mesmo que exista na Web um
site que disponibilize os servios aqui
demonstrados via WS, no o objetivo
deste artigo usar esse mecanismo.

Preenchendo formulrios
automaticamente

Uma variao deste primeiro exemplo


obter dados da Web onde h a necessidade de primeiramente se preencher um

38

Listagem 1. Criando uma requisio HTTP no brao


using System.Net;
using System.IO;
...
private void DoRequest()
{
//cria uma requisio para a URL
WebRequest rq = WebRequest.Create(http://br.invertia.com/mercados/divisas);
//obtm a resposta
HttpWebResponse rp = (HttpWebResponse)rq.GetResponse();
//obtm um stream contendo a resposta retornada pelo servidor
Stream ds = rp.GetResponseStream();
//cria um StreamReader para leitura
StreamReader rd = new StreamReader(ds);
//l o contedo
string ct = rd.ReadToEnd();
//atribui o resultado ao textBox
tbResponse.Text = ct;
//fecha os objetos
rd.Close();
ds.Close();
rp.Close();
//exibe o resultado
lbResultado.Text = R$ + ExtractDolar(ct);
}

Listagem 2. Extraindo o dlar do Response


private string ExtractDolar(string text)
{
//procura por indexador fixo
int i = text.LastIndexOf(DOLCM);
//incrementa deslocamento
i += 16;
//captura o texto
return text.Substring(i, 6);
}

formulrio. O valor de retorno varivel,


e depende do que o usurio informou no
formulrio.
Como exemplo, vamos usar o servio
de traduo disponibilizado pelo site
Google, disponvel em www.google.com.br/
language_tools. Novamente, no importa
aqui se existe um WS para obter o mesmo
resultado, o que quero mostrar como
preencher forms automaticamente e fazer
o parse do valor de retorno.
Em uma nova aplicao Windows
Forms, desenhe o formulrio mostrado
na Figura 3. Nele temos um Button, dois
TextBoxes chamados tbTexto e tbResponse, um Label (lbResultado) e um
ComboBox (cmbTraduzir), alm dos
Labels apenas para indicarem a funo
de cada controle.
O usurio vai digitar no primeiro
TextBox o valor que deseja traduzir, no
ComboBox ele escolhe se deseja traduzir
de Portugus->Ingls ou Ingls>Portugus (coloque esses valores na
sua propriedade Items) e no Label de resultado mostramos o valor da traduo,
aps o clique no boto.
No vamos neste exemplo exibir o
HTML, caso queira, faa como no primeiro exemplo. O boto chama o DoRequest
(Listagem 3).

.NET Magazine - Preenchendo formulrios Web programaticamente

Figura 2. Cotao do dlar obtida on-line

Figura 3. Formulrio para traduo on-line

O final do cdigo o mesmo do primeiro exemplo, de forma que vou me


deter na explicao da primeira parte da
listagem. Tudo est comentado, para um
fcil entendimento.
Aps configurar o Request, testamos o
valor escolhido para traduo no ComboBox.
A seguir, no objeto WebRequest, configuramos seu mtodo (Method) para POST, pois
vamos postar dados em um formulrio.

Boa idia
Ainda no WebRequest, precisamos enviar os respectivos Fields, que nada mais
so que os campos do formulrio. No
caso da traduo do Google, o campo
que indica o tipo de traduo a ser feita
e o texto a ser traduzido. Note que para
isso usamos um array de bytes e passamos
como parmetro para o Write do objeto
Stream.
O mtodo ExtractTranslation extrai o
contedo da traduo a partir da string
de retorno, e mostrado na Listagem 4.
O resultado da aplicao em execuo
mostrado na Figura 4.
Voc pode facilmente adaptar este
exemplo para outros tipos de formulrios
que tenham campos diferentes. Nesse
caso, precisar apenas identificar, alm
da URL de postagem, que campos o form
precisa receber como parmetro.
Isso pode ser obtido verificando-se o
cdigo-fonte da pgina HTML, veja, por
exemplo, na Figura 5 como obtivemos
acesso aos campos do formulrio de
traduo.
Observe pela Figura 5 que podemos obter os detalhes do form, como a URL onde
precisamos dar o POST. Note tambm
que os campos ficam dentro do elemente
form, uma boa dica para voc procurar no
extenso HTML quais os campos precisa
fornecer, que nesse caso so dois, chamados de text e langpair.

Listagem 3. Processando a requisio de traduo


using System.Net;
using System.IO;
...
private void DoRequest()
{
//cria uma requisio para a URL
WebRequest rq = WebRequest.Create(http://translate.google.com/translate_t);
//verifica a seleo do usurio para a traduo
string Conversao;
if (cmbTraduzir.SelectedIndex == 0)
Conversao = pt|en;
else
Conversao = en|pt;
//preenche os campos do post
string fields = text= + tbTexto.Text + &langpair= + Conversao;
//vamos dar um POST ao invs de GET
rq.Method = POST;
//coloca os campos em um array de bytes
byte[] bytes = Encoding.ASCII.GetBytes(fields);
//configura o tamanho do content do request
rq.ContentLength = bytes.Length;
//obtm um stream usado para o request
Stream st = rq.GetRequestStream();
//escreve no stream os campos e fecha
st.Write(bytes, 0, bytes.Length);
st.Close();
//obtm o response a partir do request
HttpWebResponse rp = (HttpWebResponse)rq.GetResponse();
//obtm um stream contendo a resposta retornada pelo servidor
Stream ds = rp.GetResponseStream();
//cria um StreamReader para leitura
StreamReader rd = new StreamReader(ds);
//Faz a leitura
string responseFromServer = rd.ReadToEnd();
//fecha os objetos
rd.Close();
ds.Close();
rp.Close();
//exibe o resultado
lbResultado.Text = ExtractTranslation(responseFromServer);
}

Listagem 4. Cdigo do ExtractTranslation


private string ExtractTranslation(string text)
{
// procura por indexador fixo
int i = text.LastIndexOf(id=result_box);
// incrementa deslocamento
i += 22;
// captura o texto
int j = text.LastIndexOf(</div></td>);
return text.Substring(i, j-i);
}

Temperatura

Que tal exibir ao usurio as informaes


atualizadas sobre o tempo, na cidade
onde ele mora. o que vamos fazer neste
ltimo exemplo, um pouco semelhante
ao anterior. Dos diversos sites que disponibilizam informaes sobre o tempo
em cidades brasileiras, o que escolhi
para esta aplicao foi o br.weather.com
(Figura 6).
O primeiro passo para obtermos os
servios do site preenchermos seu
form e examinarmos os cdigos HTML
de envio e de retorno. O que nos interessa obter est circulado na Figura 6. As
informaes que precisamos passar ao
servidor esto no outro crculo, nesse
caso, um nico campo que o nome da
cidade que voc deseja obter informaes
sobre o tempo.
Examinando o cdigo HTML da pgina,
o primeiro passo procurar pela tag form,

Figura 4. Google dando uma mo na traduo

Figura 5. Detalhes do formulrio

Edio 42 - .NET Magazine

39

ela que indica os campos que devem ser


postados. Nesse caso, encontramos os
campos da Figura 7, um chamado Text e
outro oculto (hidden).
importante tambm detectar em que
local devemos postar os dados, nesse
caso consultamos o atributo Action do
elemento form.
Nota: Se a pgina possuir mltiplos elementos forms, tenha o cuidado de escolher aquele que posta os dados que
realmente deseja enviar, claro.

Estudado o comportamento da pgina,


passamos para aplicao. Ela semelhante as demais que criamos, de forma que
no vou entrar em todos os detalhes do
design do form. Voc pode facilmente
constru-lo baseando-se na Figura 8.
Os componentes que vo ser referenciados no cdigo tiveram seus nomes
padro modificados, como mostra a
figura. Alm disso, bem abaixo do form,
temos um PictureBox. O boto chama o
mtodo DoRequest, que pode ser visto na
Listagem 5.
O cdigo praticamente igual ao do
exemplo anterior, mudando somente o
nome dos campos que precisamos enviar
ao servidor. No final, exibimos as informaes nos Labels, sendo elas: a temperatura e uma descrio do tempo.
Os mtodos usados no final do cdigo,
que fazem o parse do HTML de retorno e
obtm as informaes desejadas, podem
ser vistos na Listagem 6.
Um mtodo aqui merece especial ateno, o ExtractImage. O site em questo
devolve um pequeno cone indicando as
condies do tempo na cidade pesquisada (tempo bom, nublado, chuva etc.).
O que obtemos como retorno a URL
para a imagem. Se estivssemos usando
ASP.NET para criar nossa aplicao, e
quisssemos exibir essa imagem, bastaria
passar essa URL para um Image.
Porm estamos usando Windows
Forms, e precisamos fazer uma nova
requisio somente para pegar a imagem
(o HTML no permite embutir imagens
no cdigo), ento precisamos de um novo
mtodo.
o que faz o ConfigPictureBox (Listagem
7). Basicamente criamos um Request e
guardamos o retorno em um Response,

40

Figura 6. Site br.weather.com

Figura 7. Estudando o comportamento da pgina


Listagem 5. Consultando o tempo
using System.Net;
using System.IO;
...
private void DoRequest()
{
//cria uma requisio para a URL
WebRequest rq = WebRequest.Create(http://br.weather.com/search/search/);
//preenche os campos do post
string fields = where= + tbTexto.Text + &what=;
//configura o ContentType
rq.ContentType = application/x-www-form-urlencoded;
//vamos dar um POST ao invs de GET
rq.Method = POST;
//coloca os campos em um array de bytes
byte[] bytes = Encoding.ASCII.GetBytes(fields);
//configura o tamanho do content do request
rq.ContentLength = bytes.Length;
//obtm um stream usado para o request
Stream st = rq.GetRequestStream();
//escreve no stream os campos e fecha
st.Write(bytes, 0, bytes.Length);
st.Close();
//obtm o response a partir do request
HttpWebResponse rp =
(HttpWebResponse)rq.GetResponse();
//obtm um stream contendo a resposta
//retornada pelo servidor
Stream ds = rp.GetResponseStream();
//cria um StreamReader para leitura
StreamReader rd = new StreamReader(ds);
//l os dados
string responseFromServer = rd.ReadToEnd();
//fecha os objetos
rd.Close();
ds.Close();
rp.Close();
//exibe os resultados
lblTemperatura.Text = ExtractTemperatura(responseFromServer);
lblStatus.Text = ExtractStatus(responseFromServer);
string URLImagem = ExtractImage(responseFromServer);
ConfigPictureBox(URLImagem);
}

.NET Magazine - Preenchendo formulrios Web programaticamente

Boa idia
que a imagem. Usando um FileStream,
salvamos a imagem no disco.
A aplicao final em execuo mostrada na Figura 9.

Concluso

Agora voc j pode integrar sua aplicao com os mais variados tipos de Web Sites, basta usar a imaginao. Por exemplo,
por aqui j criamos um aplicativo que se
comunica com o Orkut, enviando scraps e
obtendo informaes sobre contatos.
Tambm uma aplicao que a partir dos
dados do cliente, exibe um mapa com a localizao exata da quadra, rua e nmero.
Colocamos esse ltimo disponvel para
download. Tudo usando preenchimento
programtico de formulrios.
bem provvel que alguns dos servios
aqui demonstrados estejam disponveis
via WebServices, mas conforme comentei, o objetivo e propsito deste artigo
foi considerar esses sites como modelos,
como objetivo de estudo, para que agora
voc possa criar seus prprios aplicativos
que consomem servios baseados em
Web Sites. Quem sabe at mesmo a idia
exposta na introduo deste artigo.
Bom, eu no tenho dvida que precisaria de um outro artigo ou talvez a
revista inteira, sem exagerar s para
listar a imensido de possibilidades do
que pode ser feito com o que foi demonstrado nestes exemplos. Toda a Web est
nas mos do seu cdigo.
Agora use a imaginao, expresse-a no
cdigo e veja os resultados. Bom proveito
e at a prxima!

Listagem 6. Mtodos para o parse das informaes


private string ExtractTemperatura(string text)
{
//procura por indexador fixo
int i = text.IndexOf(obsTempText);
//incrementa deslocamento
i += 32;
//captura o texto
return text.Substring(i,2) + C;
}
private string ExtractStatus(string text)
{
//procura por indexador fixo
int i = text.IndexOf(obsText);
//incrementa deslocamento
i += 9;
//captura o texto
string Status = string.Empty;
while (!(text[i].ToString() == <))
{
Status += text[i];
i += 1;
}
return Status;
}
private string ExtractImage(string text)
{
//procura por indexador fixo
string URL = http://image.weather.com/web/common/intlwxicons/52/;
int i = text.IndexOf(URL) + URL.Length;
//captura a URL
while (!(text[i].ToString() == .))
{
URL += text[i];
i += 1;
}
return URL + .gif;
}

Listagem 7. Mtodo ConfigPictureBox


private void ConfigPictureBox(string URL)
{
//cria uma requisio para a imagem
WebRequest rq = WebRequest.Create(URL);
//cria um response
HttpWebResponse rp = (HttpWebResponse)rq.GetResponse();
//cria um stream a partir do response (imagem)
Stream ds = rp.GetResponseStream();
//cria um filestream para gravar a imagem no disco
FileStream fs = new FileStream(Img.gif, FileMode.Create);
//aloca um buffer
byte[] buffer = new byte[512];
int byteCount;
do
{
//escreve no buffer e salva
byteCount = ds.Read(buffer, 0, 512);
fs.Write(buffer, 0, byteCount);
}
while (byteCount > 0);
//fecha objetos
fs.Close();
ds.Close();
rp.Close();
//carrega a figura
pictureBox1.Load(Img.gif);
}

Figura 8. Form para obter informaes sobre


o tempo

Figura 9. Frio e tempo bom em Porto Alegre

Edio 42 - .NET Magazine

41

Criando Templates e StarterKit de projetos

s desenvolvedores de software
deparam-se frequentemente
com o termo produtividade.
A maioria das empresas, objetivando satisfazer bem seus clientes, busca agilizar
o desenvolvimento reduzindo sempre
que possvel o tempo de produo, sem
perder claro a qualidade.
Diante desse cenrio, venho demonstrar
como podemos criar nossos prprios
templates e StarterKits de projetos, usando
o Visual Studio 2005, favorecendo a rapidez, no que tange o desenvolvimento de
novas solues. Antes de comear nosso
exemplo, vou descrever os conceitos
sobre os objetos de trabalho que aprenderemos neste artigo.

Thiago Miranda
(thiago_silva_miranda@hotmail.com)

Bacharel em Sistemas de Informao pelo


Centro Universitrio do Leste de Minas Gerais - UnilesteMG. Atualmente trabalha como
Analista de Sistemas na Cientec - Consultoria e
Desenvolvimento de Sistemas. Possui 4 anos de
experncia na rea.

42

O que so Templates e Starterkits?

Bom, quando selecionamos um novo


projeto no Visual Studio, seja ele Windows ou Web, estamos na verdade escolhendo um template de projeto. Ele contm
informaes bsicas de um projeto em

.NET Magazine - Criando Templates e StarterKit de projetos

seu estado inicial. Por exemplo, um novo


projeto Web contm por padro um diretrio chamado App_Data e tambm uma
pgina chamada Default.aspx. Esses dois
objetos esto definidos em um template
que representa um projeto Web.
Agora, os StarterKits so instaladores
de projetos que permitem distribuir para
outras pessoas, uma implementao ou
uma tecnologia especfica desenvolvida.
Por exemplo, podemos ter um template
que contm vrios projetos pr-definidos
e a partir da, criar ento um instalador
para ele, facilitando sua distribuio ao
time de desenvolvimento.
Com essas definies, podemos dar incio
ao nosso exemplo que ser divido em duas
etapas, sendo a primeira, voltada para a criao de um template contendo trs projetos,
e a segunda, voltada para a criao de um
StarterKit para a instalao desse projeto.

Criando uma Solution

Vamos criar um projeto Web Site, por-

VisuaL s Tudio
tanto abra o Visual Studio 2005 e acesse
o menu File>New>Web Site. D nome ao
projeto de ProjetoStarterKit e salve-o
num diretrio chamado MultiplosProjetosTemp (Figura 1). A Figura 2 representa a estrutura bsica que usaremos como
template para a criao do Starterkit.
Adicione nessa soluo dois projetos
do tipo ClassLibrary. Clique com o boto
direito na Solution, depois selecione
Add>New Project>Class Library e salveos no diretrio criado anteriormente,
chamando-os de ClassLibrary1 e ClassLibrary2 (Figura 3).
Deixe no projeto ClassLibrary1 uma
nica definio de classe chamada Class1
e exclua a classe existente no projeto ClassLibrary2. Com o objetivo de demonstrar
que qualquer recurso existente na plataforma .NET pode ser adicionado a um

template, vamos a partir de agora inserir


um Web User Control.
Clique com o boto direito no projeto
Web, selecione Add New Item e escolha
o item Web User Control. Mantenha o
mesmo nome (Figura 4) e clique em OK
para adicion-lo.
Logo depois, adicione um arquivo de
configurao (web.config). Clique com o
boto direito no projeto Web, selecione
Add New Item e escolha o item Web Configuration File (Figura 5).
Em um projeto de template, todas as
referncias/dependncias dos projetos
ClassLibrary definidas no projeto Web
sero criadas automaticamente assim
que criarmos uma nova soluo a partir
desse template.
Portanto, vamos definir as referncias
do projeto Web. Clique com o boto di-

reito no projeto Web, selecione Property


Pages. Selecione a opo References e clique em Add Reference. Na nova janela que
se abre, clique na guia Projects e selecione
os dois projetos ClassLibrary. Finalize esse
processo clicando nos botes OK das
respectivas telas (Figura 6).
Finalizamos ento a criao de uma soluo contendo trs projetos, que sero a
base do nosso template de projeto. Vamos
comprovar se a soluo est 100% correta,
executando um Build Solution. Aps a
compilao, veremos que um novo diretrio chamado Bin foi criado, contendo as
DLLs dos projetos ClassLibrary que acabamos de referenciar (veja Figura 2).

Criando um template de projeto

A partir de agora, entraremos no processo de criao do template. O primeiro

Figura 1. Criando um projeto Web Site

Figura 3. Criando o projeto ClassLibrary

Figura 2. Estrutura da soluo para criao do template

Edio 42 - .NET Magazine

43

Figura 4. Adicionando um Web User Control ao projeto Web

Figura 5. Adicionando um arquivo web.config ao projeto Web

Figura 6. Adicionando referncias

44

.NET Magazine - Criando Templates e StarterKit de projetos

passo exportar cada projeto existente


em nossa soluo para um template especfico de cada projeto. Comecemos pelo
projeto Web e logo depois, faamos os
mesmos passos para os demais projetos.
Para exportar o projeto Web para template, acesse o menu File>Export Template
(Figura 7).
Uma nova janela ser aberta. Ela possui
duas opes, sendo uma para exportao
de apenas um Item (Item Template) e outra
para exportao de um projeto por completo (Project Template). Selecionaremos a
opo Project Template (Figura 8).
Na mesma janela, escolhemos que projeto ser exportado e tambm a categoria de
linguagem que o projeto ter quando um
novo for criado baseado nesse template. O
projeto Web se chama ProjetoStarterKit e a
categoria de linguagem Visual C#. Aps
configuradas essas opes, prossiga a
exportao clicando em Next.
Na janela seguinte, podemos definir
um cone, um nome e tambm uma
breve descrio para o template exportado. Vamos dar nome ao template de
ProjetoWebTemplate e como descrio,
digite: Exemplo de Projeto de Template.
O cone ser o default do Visual Studio
(Figura 9).
As duas opes Automatically import
the template into Visual Studio e Display an
explorer window on the output files folder,
correspondem respectivamente, importao automtica do template exportado
para dentro do Visual Studio e a exibio
do arquivo exportado em uma janela do
Windows Explorer.
Como o template que estamos gerando
ser composto por trs projetos, vamos
deixar a primeira opo desmarcada. Por
fim, clique em Finish para finalizar a exportao do projeto Web para template.
Veremos na janela do Windows Explorer que se abre, o arquivo que acabamos
de exportar. Repita os mesmos passos
de exportao para os demais projetos,
tendo como resultado final, trs arquivos
de template (com extenso ZIP), gerados
dentro do diretrio padro do Visual
Studio 2005.
Os nomes dos templates sero: ClassLibrary1Template e ClassLibrary2Template. J
a descrio, ser a mesma do primeiro
projeto exportado (Figura 10).
Aps exportados os templates, crie um

VisuaL s Tudio
diretrio temporrio, por exemplo (C:\
Temp). Nesse diretrio, descompactaremos todos os arquivos de template
que acabamos de exportar, sendo que
cada arquivo descompactado dever
ser armazenado dentro de seu diretrio
especfico.
Portanto, remova os trs arquivos de
template zipados para dentro do diretrio C:\Temp. Descompacte-os em seus
diretrios especficos e logo em seguida,
exclua os trs arquivos zipados, pois no
vamos mais precisar deles. Portanto, o
diretrio C:\Temp dever conter apenas
os trs diretrios (Figura 11).

Estrutura do template

O passo seguinte criar um arquivo


de configurao do template que estamos
criando, que possui extenso vstemplate.
Esse arquivo, que tem o formato em
XML, dividido em duas sees. A primeira, chamada <TemplateData>, contm
propriedades que permitem definir o
nome, descrio, tipo do projeto, cone,
entre outras.

Figura 8. Configurando as opes de exportao

Figura 9. Definindo cone, nome e descrio do template

Figura 7. Exportando um template no Visual Studio

Figura 10. Arquivos de templates exportados

Edio 42 - .NET Magazine

45

Propriedade

Descrio

Name

Nome de apresentao do template no box New Project do Visual Studio.

DefaultName

Nome default para um novo projeto criado a partir de um template (pode ser alterado pelo usurio
antes da criao).

Description

Uma pequena descrio.

ProjectType

Tipo de projeto.

SortOrder

Ordem de apresentao do template no box New Project do Visual Studio.

CreateNewFolder

Define se ser criada uma nova pasta para o projeto quando o mesmo for criado.

LocationField

Habilita/desabilita campo de localizao na janela New Project do Visual Studio.

EnableLocationBrowseButton

Habilita/desabilita boto Browse na janela New Project do Visual Studio.

Icon

Especifica um cone personalizado.

ProjectTemplateLink

Especifica o arquivo de configurao (vstemplate) dos projetos que faro parte do template.

Tabela 1. Propriedades do arquivo vstemplate

Figura 11. Arquivos de templates descompactados em seus respectivos diretrios

Figura 12. Arquivo de template final compactado

46

.NET Magazine - Criando Templates e StarterKit de projetos

Na segunda, chamada <TemplateContent>, devemos definir links no arquivo de


template que referenciaro os projetos que
sero criados automaticamente, quando
uma nova soluo for criada a partir
desse template.
Veja na Tabela 1 a descrio das propriedades desse arquivo de configurao.
Crie um arquivo de texto comum com
o Notepad e altere sua extenso para
vstemplate. D o nome de MultipleProjectTemplate.vstemplate. O contedo
final desse arquivo dever ficar conforme
a Listagem 1.
Como podemos ver, a tag <ProjectTemplateLink> contm o nome do projeto e
faz referncia tambm a um arquivo de
configurao desse projeto, onde contm
informaes relativas a todos os objetos
e componentes existentes nele.
Por exemplo, o arquivo vstemplate
especfico do projeto Web contm informaes que indicam que ele possui
um web.config, um WebUserControl, uma
pgina Default.aspx etc., assim como, o
arquivo vstemplate do projeto ClassLibrary1, contm informaes sobre as
classes que ele contm, bem como suas
referncias.
Com isso, podemos concluir que esse arquivo o que especifica todo o contedo
de seu respectivo projeto. Para ajud-lo
a compreender melhor o contedo desse
arquivo, basta abr-lo no Visual Studio e
posicionar o mouse sobre as tags, pois
assim um hint ser exibido com uma descrio sobre a funcionalidade especfica
de cada uma.
Vamos entrar agora na etapa final de
criao do template. muito simples, basta
compactar dentro de um mesmo arquivo
em formato ZIP, todos os trs diretrios
descompactados anteriormente mais o
arquivo vstemplate que acabamos de criar.
D a esse arquivo o nome de MultipleProjectTemplate.zip (Figura 12).
Pronto, est criado nosso template, contendo mltiplos projetos dentro. Vamos
test-lo, pois esse arquivo ser usado posteriormente na criao do StarterKit. Copie o
arquivo (MultipleProjectTemplate.zip) e cole-o
no diretrio padro do Visual Studio 2005
(C:\Documents and Settings\<usuario>\My
Documents\Visual Studio 2005\Templates\
ProjectTemplates\Visual C#).
Abra seu Visual Studio 2005 e acesse

VisuaL s Tudio
o menu File>New>Project. Na janela que
se abre, selecione a opo Visual C# no
Project types, selecione o template que
acabamos de criar, que est localizado na
seo My Templates (Figura 13).
Escolha um nome e um diretrio que
quiser e pressione OK pra criar uma nova
soluo. Veremos ento que a soluo
ser criada contendo trs projetos, sendo
eles Web, ClassLibrary1 e ClassLibrary2,
conforme havamos definido no incio
deste artigo.

Criando o StarterKit

Acesse o diretrio padro do Visual Studio (C:\Documents and Settings\<usuario>\


My Documents\Visual Studio 2005\Templates\ProjectTemplates\Visual C#) e exclua o
arquivo de template que havamos adicionado manualmente (Figura 14).
Mas voc pode estar se perguntando,
por que exclu-lo? Porque criaremos
um StarterKit que far a instalao
automtica desse template no diretrio. Vamos agora acessar o diretrio
temporrio (C:\Temp) e criar mais um
arquivo de configurao, tambm em
formato XML.
Basta criar um arquivo texto comum
com o Bloco de Notas e depois alterar
sua extenso (TXT) para vscontent.
Nesse arquivo, como podemos ver na
Listagem 2, definido o nome do arquivo
de template (MultipleProjectTemplate.zip)
na tag </FileName>, que ser executado
pela instalao.
Podemos conhecer as outras propriedades, observando a Tabela 2. Especifique
as propriedades do arquivo vscontent
conforme a Listagem 2 e salve-o com
o nome de MultipleProjectTemplate.
vscontent.
Venho chamar a ateno para a tag
<Attributes>, nela definido o tipo do
projeto de template e tambm o tipo do
projeto como um todo, que estamos desenvolvendo. Assim que finalizarmos a
instalao do StarterKit, veremos que ele
ser instalado no diretrio especfico de
templates do Visual Studio.
O que define essa caracterstica de
instalao justamente a segunda tag
Attribute. Se desejar testar outros tipos de
projetos, basta abri-lo no Visual Studio e
utilizar o Intellisense como helper.
Depois de configurado o arquivo, va-

Listagem 1. Criando o arquivo vstemplate


<VSTemplate Version=2.0.0 xmlns=http://schemas.microsoft.com/developer/vstemplate/2005
Type=ProjectGroup>
<TemplateData>
<Name>MultipleProjectTemplate</Name>
<DefaultName>MultipleProject</DefaultName>
<Description>Exemplo de Projeto de Template</Description>
<ProjectType>CSharp</ProjectType>
<!--<ProjectSubType>CSharp</ProjectSubType>-->
<SortOrder>1</SortOrder>
<CreateNewFolder>true</CreateNewFolder>
<LocationField>Enabled</LocationField>
<EnableLocationBrowseButton>true</EnableLocationBrowseButton>
<Icon>__TemplateIcon.ico</Icon>
</TemplateData>
<TemplateContent>
<ProjectCollection>
<ProjectTemplateLink ProjectName=ProjetoWebTemplate>
ProjetoWebTemplate\MyTemplate.vstemplate
</ProjectTemplateLink>
<ProjectTemplateLink ProjectName=ClassLibrary1Template>
ClassLibrary1Template\MyTemplate.vstemplate
</ProjectTemplateLink>
<ProjectTemplateLink ProjectName=ClassLibrary2Template>
ClassLibrary1Template\MyTemplate.vstemplate
</ProjectTemplateLink>
</ProjectCollection>
</TemplateContent>
</VSTemplate>

Figura 13. Criando um novo projeto a partir do template

mos compact-lo junto com o arquivo de


template chamado MultipleProjectTemplate.
zip, que criamos na primeira parte deste
artigo. D nome de StarterkitMultipleProject.zip (Figura 15).
O ltimo passo para a criao do StarterKit muito simples. Para que tenhamos um arquivo que seja executvel,
basta apenas alterar a extenso do StarterkitMultipleProject.zip para VSI, ficando,
portanto assim, StarterkitMultipleProject.
vsi (Figura 16).

Figura 14. Excluso do arquivo de template

Edio 42 - .NET Magazine

47

Listagem 2. Estrutura do arquivo (vscontent)


<?xml version=1.0 encoding=utf-8?>
<VSContent xmlns=http://schemas.microsoft.com/developer/vscontent/2005>
<Content>
<FileName>MultipleProjectTemplate.zip</FileName>
<DisplayName>MultipleProject</DisplayName>
<Description>Instalador de MultipleProject</Description>
<FileContentType>VSTemplate</FileContentType>
<ContentVersion>1.0</ContentVersion>
<Attributes>
<Attribute name=TemplateType value=Project/>
<Attribute name=Project Type value=Visual C#/>
</Attributes>

Figura 15. Arquivo StarterKit criado

</Content>
</VSContent>

Testando a instalao do StarterKit

Figura 16. Alterao de extenso do arquivo StarterKit de ZIP para VSI

Pronto, est criado nosso StarterKit. Podemos agora ento


execut-lo e test-lo. A Figura 17 ilustra a primeira tela do
assistente de instalao.
O nome MultipleProject exibido nessa tela foi definido na
tag <DisplayName> do MultipleProjectTemplate.vscontent. Deixe
selecionada essa opo e clique em Next para continuar. Uma
mensagem de erro exibida conforme a Figura 18.
Porm, podemos ignor-la clicando em Yes, pois ela exibida
devido ao instalador no possuir uma assinatura digital. Geralmente, StarterKits desenvolvidos pela Microsoft possuem
assinatura digital includa.
A Figura 19 representa o ltimo passo de instalao. Portanto,
clique em Finish para terminar.
Veremos uma mensagem exibida na prpria tela confirmando
o sucesso da instalao. Agora, podemos observar no diretrio
padro do Visual Studio (C:\Documents and Settings\<usuario>\
My Documents\Visual Studio 2005\Templates\ProjectTemplates)
que o template foi criado com sucesso. Clique em Close para
fechar o assistente.

Figura 17. Interface do assistente de instalao

Figura 18. Mensagem de erro referente ausncia de assinatura digital

48

Figura 19. Interface final do assistente

.NET Magazine - Criando Templates e StarterKit de projetos

VisuaL s Tudio
Terminada a instalao, vamos testar
o template criando uma nova soluo. No Visual Studio, acesse o menu
File>New>Project e veja que o template
exibido na seo My Templates. Selecione-o, defina um nome e tambm um
diretrio para salv-lo.
As Figuras 20 e 21 ilustram os processos
de criao e compilao realizados com
sucesso, referentes nova soluo.

Concluso

Propriedade

Descrio

FileName

Nome do arquivo de template (ZIP) que contm os diretrios dos projetos mais o arquivo (vstemplate).

DisplayName

Nome do projeto de template que ser apresentado na tela de instalao.

Description

Uma pequena descrio sobre o starterkit.

FileContentType

Tipo de projeto starterkit.

ContentVersion

Verso do starterkit.

Attributes

Especifica o tipo de template e tambm o tipo do projeto starterkit.

Tabela 2. Propriedades do arquivo (vscontent)

Podemos concluir que a criao de um


StarterKit automatiza consideravelmente
o desenvolvimento de novas solues que
possuam caractersticas bsicas e comuns
entre elas. Uma vez criado o StarterKit, o
mesmo poder ser distribudo ao time de
desenvolvimento, rapidamente.
Conclumos tambm que o processo de
criao de templates de projetos bastante
simples e eficaz, permitindo economizar
um tempo considervel na fase inicial de
programao.
Um grande abrao e at o prximo
artigo!

Referncias
MSDN How to: Create Starter Kits (ingls)
msdn2.microsoft.com/en-us/library/ms364046(vs.80).aspx
MSDN Wiki Introduo aos Starter Kits (portugus)
msdnwiki.microsoft.com/pt-br/mtpswiki/ms247071
(VS.80).aspx

Figura 20. Template adicionado ao Visual Studio

Figura 21. Nova soluo criada a partir do template e compilada com sucesso

Edio 42 - .NET Magazine

49

Utilizando o Code Analysis do Visual Studio

Penihel Roosewelt
(penihel@gmail.com)

tem 20 anos e certificado Microsoft MCP, MCTS


e MCAD. Trabalha com .NET h trs anos na cidade de Braslia-DF. Atualmente trabalha para a
AgnciaClick em projetos voltados para a Web.
Alm de ser completamente apaixonado por
tecnologia e .NET.

50

Visual Studio Code Analysis


uma ferramenta que verifica o
cdigo validando a conformidade com o Microsoft .NET Framework
Design GuideLines (msdn2.microsoft.com/
en-us/library/ms229042.aspx).
uma ferramenta que permite fazer
um check-up no seu cdigo-fonte, verificando regras de design, uso correto de
padres, deteca ainda problemas como
performance, segurana e outros.
Ele usa Reflection, MSIL Parsing e Callgraph Analysis para analisar o cdigo. So
executadas verificaes para cerca de 200
regras de cdigo, nas seguintes reas:
Design (60 regras): Regras para interfaces e estrutura das classes. Envolve
melhores prticas para uso de namespaces, eventos, colees e parmetros de
mtodos;
Globalizao (7 regras): Prticas
para o sistema aceitar vrios idiomas
facilmente;
Interoperalidade (16 regras): Regras

.NET Magazine - Utilizando o Code Analysis do Visual Studio

para o uso correto de objetos COM e


COM +;
Manutenibilidade (3 regras): Regras
para ajudar na manuteno do cdigo,
geralmente com heranas confusas e
cdigos muito extensos;
Mobilidade (2): Poucas, mas eficientes
regras para compatibilidade em dispositivos mveis;
Nomes das variveis (20 regras): Provavelmente as regras mais conhecidas,
que envolvem desde nome das variveis
at nomes das Assemblies;
Performance (19 regras): Considero
as mais importantes, mas nem sempre
so levadas a srio. Detecta melhorias de
performance que podem ser corrigidas,
apenas com melhorias no cdigo;
Portabilidade (2 regras): Regras para
o cdigo interagir com uma possvel
mudana de plataforma (Windows para
Web, Mobile ou Mono);
Confiabilidade (5 regras): Regras para
garantir que o cdigo no atrasar os

VisuaL s Tudio
recursos da CLR e do Garbage Collector
e tambm boas prticas para uso de
multi-threading;
Security (24 regras): Regras tambm
muito importantes que tratam de brechas
de segurana causadas por cdigo sem
boas prticas;
Usuais (40): Regras gerais para boas
prticas Microsoft.
Depois de ver tantas regras, voc deve
estar pensando, mas agora, vou levar dois
meses para deixar meu cdigo aprovado
por essa ferramenta! Porm voc pode
configurar apenas que regras especficas
voc deseja aplicar.
Hoje em dia essa ferramenta conhecida com Code Analysis, vem junto com o Visual Studio Team Edition for Developers,
porm no existe nas verses Standard e
Professional.
Um dia, na era .NET 1.1, era conhecida
como FxCop, mas ainda existe uma verso
que pode ser usada em uma GUI separada. O FxCop pode ser acessado em: www.
gotdotnet.com/Team/FxCop.

Studio Team Edition. Neste artigo vamos


ver em detalhes o Code Analysis para o
Visual Studio Team Edition.
O IDE do Visual Studio no mostra as
funcionalidades com todas as flexibilidades do Code Analysis (CA). O CA tem
uma ferramenta de linha de comando e
veremos como utiliz-la.
Existe a possibilidade tambm de
voc desenvolver novas regras, acesse

Mo na Massa

Crie um projeto Class Library em C#,


renomeie o arquivo Class1.cs para PayCalculator.cs e adicione o cdigo da
Listagem 1.
O cdigo calcula o salrio do desenvol-

Listagem 1. Criando uma classe de exemplo


using System;
using System.Collections.Generic;
using System.Text;
namespace CodeAnalysisClassLibrary
{
public class PayCalculator
{
public enum Pay_Level
{
EntryLevel = 20,
Normal = 35,
Senior = 50
}
public static int MaximumHours;
public const double BONUS = 0.10;
static PayCalculator()
{
MaximumHours = 100;
}

Nota: Para saber mais sobre o FxCop,


veja o artigo de Rodrigo Sendin publicado na edio 35.

O FxCop tambm pode ser baixado para


o .NET 2.0 para quem no tem o Visual

media.techtarget.com/digitalguide/images/
Misc/professionalvsts_ch08.pdf para mais
informaes.

public static double ComputePayment(int hours, Pay_Level level)


{
if (hours > MaximumHours)
{
throw new ArgumentOutOfRangeException(Horas Ultrapassadas);
}
return ((int)level * hours);
}

Figura 1. Habilitando o Code Analysis no Visual Studio Team Edition

Edio 42 - .NET Magazine

51

vedor de acordo com um fator do enum


Pay_Level e multiplicando ao nmero de
horas. Ao primeiro olhar, o cdigo no
tem nenhum erro e tambm totalmente
compilvel, mas vamos ver o que o CA
tem a dizer sobre ele.

Habilitando o CA

A primeira coisa a fazer habilitar o


CA, pois por padro no Visual Studio
ele vem desabilitado. Para habilitar,
acesse o menu Project>CodeAnalysisClas

Figura 2. Executando o Code Analysis no projeto

sLibrary Properties. Ser aberta a tela de


propriedades.
Selecione a aba Code Analysis e marque
o item Enable Code Analysis (Figura 1) e
para finalizar salve o projeto.
Nessa mesma tela podemos ver que
cada regra pode ser configurada como
Warning ou Error, sendo que Warning a
configurao padro. Quando uma regra
est definida para Warning, ela no impede o sistema de ser compilado.
J quando definida como Error, se a regra no for satisfeita, o sistema no ser
compilado. Para mudar essa configurao
apenas d um duplo clique em cima da
coluna de Status.
Podemos ainda alterar o Status de um
grupo inteiro ou apenas de uma regra
especfica, para isso clique no sinal de (+)
de cada grupo e altere o status de cada
regra individualmente.
Tambm existem duas caixas de seleo
onde voc pode indicar que tipo de Build
deve ser executado. O mais comum
configur-lo apenas para Builds Releases e
no habilitar para Builds Debugs. No nosso
exemplo, vou deixar selecionadas todas
as regras e com Status em Warning.

Figura 3. Janela de erros

52

.NET Magazine - Utilizando o Code Analysis do Visual Studio

Executando o CA

Agora vamos aprender a executar o


CA. Confirme que voc salvou as configuraes dos passos anteriores, acesse o
menu Build e clique em Run Code Analysis
on CodeAnalysisClassLibrary (Figura 2). O
Build ser executado, e no final aparecer
uma janela semelhante Figura 3.
possvel que a janela no aparea
automaticamente. Para mostr-la, acesse
o menu View>Error List. Note que nesse
caso, temos 10 regras que no foram satisfeitas no cdigo.
Cada linha contm uma descrio e
uma indicao de onde est o erro. Algumas regras no so necessariamente
associadas a uma linha de cdigo, assim
no indicam nenhum arquivo.
Se voc der um duplo clique em uma
regra que contenha uma associao de
cdigo, o Visual Studio posicionar o
cursor no local exato do erro. At a tudo
bem, mas qual o erro?
Geralmente apenas com a descrio da
regra voc j pode matar a charada e saber
o que fazer para se enquadrar na regra, mas
alguns erros no so muito claros. Vamos
ver alguns exemplos mais adiante.

VisuaL s Tudio
XML de documentao

Cada vez que voc roda o CA, ele altera


um arquivo XML dentro da pasta onde
o assembly ser compilado (/bin/debug ou
/bin/release) e geralmente ter o nome de
CodeAnalysisClassLibrary.dll.CodeAnalysisLog.xml.
Esse arquivo contm um relatrio com
as mesmas informaes da janela Error
List, porm em um modelo bem mais
apresentvel. Isso bem til para voc
apresentar esses resultados para chefes/
colegas ou acrescentar em documentos.
A Figura 4 mostra o arquivo.
Vamos corrigir alguns problemas indicados pelo CA. No Error List localize o
erro com o a descrio: CA1810 : Microsoft.
Performance : Initialize all static fields in
CodeAnalysisClassLibrary.PayCalculator
when those fields are declared and remove
the explicit static constructor. Clique com o
boto direito e escolha Show Error Help.
Isso mostrar uma janela explicativa
com todos os detalhes da regra, dizendo
o motivo de existir a regra e como voc
pode corrigir o erro (Figura 5).
Na janela de ajuda, explicado que o
cdigo ficar mais eficiente se tirarmos
a inicializao da varivel do construtor
esttico e deixarmos diretamente na declarao da varivel.

Figura 4. Arquivo XML til para documentao

Corrigindo erros

Com essa informao vamos alterar o


cdigo. No Error List clique duas vezes
na regra para sermos redirecionados
para o construtor esttico. Remova todo
o construtor e altere a declarao da
varivel para:
public static int MaximumHours=100;

Pronto, corrigimos o primeiro erro.


Para conferir, execute novamente o CA e
verifique que no Error List existem apenas 9 Warnings. Corrigir todos os 9 erros

Figura 5. Descrio e explicao sobre a regra

Edio 42 - .NET Magazine

53

passo a passo levaria muito esforo, por


isso, vou direto para o prximo assunto
do artigo, mas o importante que voc
entenda que muito fcil corrigir os erros
apontados pelas regras.

Abra esse arquivo e veja como ele utiliza


o atributo System.Diagnostics.CodeAnalysis.SuppressMessage, indicando que a
regra no deve ser analisada, conforme
vemos no cdigo a seguir:

Ignorando regras

[assembly: System.Diagnostics.CodeAnalysis.
SuppressMessage("Microsoft.Usage",
"CA2209:AssembliesShouldDeclareMinimum
Security")]

Um ponto muito importante que voc


no precisa analisar todas as regras do CA,
existem formas de evitar que certas regras
sejam executadas, pois podem no se aplicar a seu cenrio. A forma mais fcil desmarcar a regra na tela de propriedades do
projeto, como mostrado anteriormente.
Se voc no souber exatamente o que
uma regra faz, marque todas, e depois
v desmarcando de acordo com o seu
julgamento de necessidade da regra. No
nosso caso, estamos com 9 Warnings no
Error List. Clique com o boto direito na
primeira, que deve ser a de cdigo CA
2209 e clique em Suppress Message. Note
que agora a regra fica com o texto com
uma tarja (Figura 6).
Depois de executar o Suppress Message, o
CA criou um arquivo no projeto chamado
GlobalSuppressions.cs que contm atributos
para serem aplicados em todo o assembly.

Voc pode tambm colocar esse atributo


no mtodo ou na classe. Para saber mais
sobre ele, acesse msdn2.microsoft.com/enus/library/ms244717(vs.80).aspx.

Linha de comando

Vamos prxima funcionalidade. Como


disse anteriormente, o Visual Studio no
explora todas as flexibilidades do CA,
mas quando voc quiser fazer tarefas
avanadas, pode usar a ferramenta de
linha de comando.
As verses anteriores eram conhecidas
apenas como FxCop, e essa ferramenta era
bem mais usada do que hoje. Ela pode
ser encontrada na pasta de instalao do
Visual Studio no caminho: C:\Arquivos
de programas\Microsoft Visual Studio 8\
Team Tools\Static Analysis Tools\FxCop\
FxCopCmd.exe.

Figura 6. Ignorando a regra no Error List

54

.NET Magazine - Utilizando o Code Analysis do Visual Studio

O FxCopCmd pode executar qualquer tarefa que existe no IDE, pois o IDE chama
essa ferramenta passando vrios parmetros. O CA (ou FxCop) faz anlises no no
cdigo-fonte, mas sim no Assembly.
Porm o Visual Studio deixa isso transparente para o desenvolvedor, que pode
ter a impresso que a ferramenta analisa
o cdigo-fonte. Vamos supor que o projeto j est compilado atravs do CodeAnalysisClassLibrary.dll, olhe um exemplo
de como fazer essa anlise atravs da
linha de comando:
FxCopCmd.exe /f: CodeAnalysisClassLibrary.dll /o:
C:\reportresult.xml /s

Lembrando que voc deve estar dentro


da pasta onde se encontra o arquivo FxCopCmd.exe (Figura 7).
Neste exemplo, pedi ao CA para gerar
o relatrio no drive C. Abra o report.xml
e veja que o mesmo contm os 9 Warnings
e que o arquivo igual ao gerado pelo
Visual Studio.
Agora vamos analisar o comando, o
primeiro parmetro exe /f: CodeAnalysisClassLibrary.dll indica o assembly que
ser analisado, o segundo parmetro /o:
indica onde sero salvas as mensagens e

VisuaL s Tudio
o resultado da anlise.
O ltimo parmetro /s indica que o
resultado deve ser mais simplificado e
que as informaes sejam mostradas em
uma forma mais resumida.

Concluso

O Code Analysis do Visual Studio Team


Edition uma das melhores ferramentas
do Visual Studio e ajuda na qualidade e
no controle do cdigo que gerado pela
sua equipe. A sua maior qualidade a
flexibilidade para configurao.
s vezes no queremos usar todas as
regras para anlise, por isso, um fator
importante na hora de usar, voc avaliar
quais grupos de regras ou quais regras
especficas devem ser dispensadas pela
sua equipe e quais no devem.
Tambm importante lembrar que voc
no precisa do Visual Studio para us-la,
pode baix-la gratuitamente em www.
gotdotnet.com/Team/FxCop e us-la atravs
da linha de comando como mostramos
aqui ou tambm usar a GUI especfica
que existe especialmente para o FxCop.
Um ponto fraco da ferramenta quando
queremos criar nossas prprias regras,
onde o processo trabalhoso e exige
conhecimentos avanados de .NET, principalmente em Reflection.
Se voc estiver usando a verso do FxCop separada do Visual Studio, pode ter
mais facilidades para criar novas regras.
Enfim, espero que com este artigo voc
possa ter condies de melhorar o cdigo
produzido por voc e sua equipe.
Abraos!

Figura 7. Utilizando o FxCopCmd

Links
FxCop
www.gotdotnet.com/Team/FxCop
In Source Suppression Overview
msdn2.microsoft.com/en-us/library/ms244717(vs.80).aspx
Criar regras para o Code Analysis
media.techtarget.com/digitalguide/images/Misc/
professionalvsts_ch08.pdf
Microsoft .NET Framework Design GuideLines
msdn2.microsoft.com/en-us/library/ms229042.aspx
Reflection
msdn2.microsoft.com/en-us/library/system.reflection.aspx

Edio 42 - .NET Magazine

55

Microsoft
Framework

Microsoft Solutions Framework

Fbio Camara
(www.fcamara.com.br)

tem 18 anos de experincia no desenvolvimento


de softwares e produtos, e na gesto de projetos
em grandes empresas no Brasil, com destaque
para projetos na rea de telefonia e financeira/
bancria (SPB), alm de extensa experincia em
treinamento e consultoria no desenvolvimento
de software e gesto de projetos. autor de 15
livros, possui as certificaes MCT, MCP, MCSA,
MCSE, MCAD (C# e VB .NET) Charter, MCDBA,
MCSD .NET (Early Achiever), MCTS, MCPD, MSF
Certified Practitioner, ITIL Foundations, Delphi
Programmer Master, Certified SCRUM Master e
INETA Speaker (International .NET Association).
Microsoft MVP (Most Valuable Professional) para
a ferramenta Visual Studio Team System. Foi o
fundador da ArchITettura, a primeira fbrica de
software do Brasil voltada exclusivamente tecnologia Microsoft .NET. Foi Consulting Manager
da FrumAccess Consultoria. consultor especial
da Poliedro, conselheiro tcnico da Coca-Cola do
Nordeste e responsvel pelos treinamentos da
F|Camara Formao e Consultoria.

56

SF vem passando por desenvolvimento contnuo e melhorias


durante uma dcada. A viso
original para MSF era colecionar e organizar um corpo de orientao e melhores
prticas para utilizao como um guia
durante o ciclo de vida de desenvolvimento de software.
No incio, os principais influenciadores
do MSF foram:
A experincia de desenvolvimento da
prpria Microsoft;
Contribuies de experincias da Microsoft Consulting, a empresa de servios
da Microsoft;
Melhores prticas da indstria;
Contribuies do programa de empresas parceiras Microsoft.
O MSF verso 4 (atualmente est em
reviso final a verso 4.1) uma evoluo da metodologia MSF, criada pela
Microsoft em 1993. Desde a dcada de
90 o MSF adicionou uma forte influncia
da comunidade gil, tornando-a uma

.NET Magazine - Microsoft Solutions Framework

metodologia de vanguarda.
Historicamente, a Microsoft sempre
teve muito cuidado para evitar que o MSF
virasse uma metodologia. Por isso, eu
quero dizer que a adoo de MSF nunca
designou a compra de ferramentas caras,
modelos etc., ou a adoo de processos
altamente prescritivos e detalhados.
Ao invs, MSF conscientemente mostrava direes para prover orientao e
princpios dos quais podem ser agregados a uma variedade metodologias de
forma discreta. Isso inclui, por exemplo,
os famosos processos de metodologias
como DSDM e RUP.
Se analisarmos habilmente, concluiremos que para a dcada de 90 essa abordagem fazia todo sentido. A Microsoft
destinava seus esforos para atender
suas prprias necessidades de processos
e no compreendia como til destinar
investimentos para formalizar o MSF
como uma metodologia one size fits all
approaching.

Projeto/Anlis e
Na minha leitura, est a razo que mais
me agrada em usar MSF em meus desafios,
pois foi uma metodologia criada em cima
de necessidades especficas e reais, mesmo
considerando que a Microsoft no uma
empresa de desenvolvimento comum.
Hoje a proposta da Microsoft ao promover MSF para metodologia fundamentada pela compreenso da necessidade
real de utilizarmos um mecanismo que
maximize a comunicao e os princpios
de melhores prticas de desenvolvimento, testes e controle de forma integrada.
Antes de chegar nessa dimenso de
maturidade, MSF passou por trs grandes
revises que representam significativamente a evoluo como um framework
para o desenvolvimento de projetos.
Nessa ltima reviso foram criadas duas
instncias da verso 4.0: MSF for Agile
Software Development e MSF for CMMI
Process Improvement.
Eu acredito que MSF agora representa
uma significativa mudana na atitude
Microsoft, principalmente pela transparncia na definio dos mtodos, papis
e processos.
Destaco positivamente tambm a integrao com as ferramentas Visual Studio,
que marca a histria do MSF como um
divisor de guas. Em outras palavras,
ser ensinado nos livros o que MSF pr
VSTS (Visual Studio Team System) e o que
MSF ps VSTS.

Comparao de MSF v3 e MSF v4

Primeiramente, quando conheci a MSF


verso 3.1 em meados de 1999, achei-a
simplesmente fantstica. Dividida em
dois modelos e trs disciplinas, aprofundei-me em colocar os modelos em prtica
imediatamente. Os modelos eram:
Team Model: Definio dos papis de
Program Manager, Product Manager, User
Experience, Release Manager, Tester e Developer;
Process Model: Explicao dos processos, tcnicas e artefatos de cada fase do
ciclo. As fases eram: Envisioning, Planning,
Developing, Stabilizing e Deploying.
As disciplinas eram:
Project Management: Na minha leitura esta disciplina foi uma agresso ao
esprito MSF e deve ter sido alguma
imposio de pensadores de acordo com
as prticas definidas no PMBok;

Risk Management: Disciplina que define um ciclo para identificao e controle


de riscos factveis ao projeto;
Readiness Management: Disciplina que
define um ciclo para tratamento das lies aprendidas de um projeto. til como
boas prticas para elaborao de sistemas
de base de conhecimento.
No MSF v4, tivemos significativas mudanas na estruturao dos modelos. Em Team
Model os papis de Product Manager e User
Experience foram trocados pelo papel de Business Analyst, que convenhamos est muito
mais aderente a realidade dos projetos.
Na verdade, os papis do MSF v3 Product Manager e User Experience continuam
existindo, porm so considerados como
parte do cliente. No time de desenvolvimento considerado o papel de Business
Analyst como o responsvel pelo relacionamento com o Product Manager e o User
Experience.
Ainda no Team Model, tivemos a incluso na MSF v4 do papel de arquiteto
de sistemas. Esse papel h anos uma
requisio dos pensadores que definem
metodologias. Pode-se entender que ele
vem como uma transio do papel de
Program Manager do MSF v3, que na verso 4 recebeu o nome chicle de mercado
Project Manager.
Veja na Tabela 1 as diferenas dos papeis nas verses 3 e 4 do MSF.
Em Process Model, as mudanas foram
na forma do ciclo, que antes era espiral e
agora definido como iterativo incremental
e a incluso de uma nova fase chamada
contnuos. A mudana na forma do ciclo
vem como um importante passo em sinergia com os movimentos geis.
Iterativo, porque possui um ciclo pequeno e rpido que repetitivo. Incremental
porque sempre soma funcionalidades aos
resultados dos ciclos anteriores.
MSF v3

MSF e os princpios de
desenvolvimento gil

Os princpios de desenvolvimento gil


estavam no ar na dcada de 90 como uma
reao s metodologias tradicionais de
desenvolvimento em cascata (waterfall),
consideradas muito pesadas para equipes
pequenas.
MSF surgiu entre outras coisas da
necessidade de criar novos aplicativos
para a plataforma cliente-servidor, que
respondia diretamente s necessidades
de negcio dos clientes de uma maneira
muito mais gil do que a plataforma
mainframe. No ambiente da poca, como
hoje, as regras de negcio e a tecnologia
mudavam rapidamente.
No conceito de entrega em verses, MSF
1.0 explica que um sistema que demora
muito para ser desenvolvido perde seu valor para o cliente quando finalmente completado, e est sempre no crculo vicioso
de tentar alcanar requisitos em constante
fluxo. Por isso justifica-se a necessidade
de colaborar com o cliente para priorizar
e tomar decises para balancear os trs
parmetros mais comuns de gerncias de
projetos: cronograma, escopo, recursos.
Para desenvolver sistemas rapidamente e atender a necessidades estratgicas
de negcio a soluo recomendada pela
MSF manter o cronograma e fixar a
data final de entrega da verso.
Isso implica uma intensa atividade de
priorizao em conjunto e significa que
grandes idias ou requisitos desejveis
tomam uma prioridade menor do que
o cronograma de entrega da verso. O
projeto inteiro gerenciado do incio ao
fim para acomodar essa realidade.
Eis aqui um mapeamento inicial dos
doze princpios da MSF (Tabela 2). Note
que alguns princpios da MSF correspondem a mais de um do Manifesto, j que o
MSF v4

User Experience

Business Analyst

Product Manager

Business Analyst

Program Manager

Dividido entre Project Manager e Architect

Release Manager

Release Manager

Tester

Tester

Developer

Developer

???

DataBase Professional

Tabela 1. Diferena das verses 3 e 4 do MSF

Edio 42 - .NET Magazine

57

particionamento conceitual semelhante,


mas no idntico.
A seguir, vamos ver como MSF se encaixa no Manifesto gil.

As razes geis da MSF

MSF v4 uma evoluo de verses anteriores da MSF que acrescenta influncias


da comunidade gil e outras inovaes.
MSF for Agile Software Development faz
parte da nova gerao de metodologias
geis (Agile 2.0).
Mas quais so os critrios para uma
metodologia gil? No h um padro
de certificao para gil, mas podemos
com segurana usar os mesmos critrios eleitos pelos participantes do First
Princpios por trs do Manifesto gil

eWorkshop on Agile Methods [Boehm et


al., 2002].
Para essa reunio, escolheram basear a
definio de uma metodologia gil nos
doze Princpios por trs do Manifesto
gil, e quatro pontos sugeridos por
Ken Schwaber, um dos participantes e
autor do processo Scrum. Depois dessa
reunio, os critrios ainda esto sendo
debatidos, mas isso est alm do escopo
deste artigo.

Definindo agilidade

O Manifesto gil para Desenvolvimento de Software diz o seguinte:


Estamos descobrindo melhores maneiras de desenvolver software fazendo-o, e

ajudando outros a faz-lo. Atravs desse


trabalho viemos a valorizar:
Indivduos e iteraes ao invs de
processos e ferramentas;
Software operante ao invs de documentao abrangente;
Colaborao com o cliente ao invs de
negociao de contrato;
Responder mudana ao invs de
seguir um planejamento.
Ou seja, se por um lado h valor nos
itens da direita, valorizamos mais os itens
da esquerda.
Fonte: www.agilemanifesto.org
Ken Schwaber props o seguinte:
Um mtodo gil : Iterativo, Incremen-

Princpios de MSF 1.x correspondentes

MSF for Agile Software Development

Nossa prioridade mais alta satisfazer ao cliente atravs de entregas


contnuas e antecipadas de software til.

Entrega em Verses, Atitude Mental de Produto, Construo Diria.

Entregue Valor em Incrementos, Enfoque no Valor


para o Negcio.

Mudanas nos requisitos so bem-vindas, mesmo que cheguem


tarde durante o desenvolvimento. Processos geis usam mudanas
para a vantagem competitiva do cliente.

Entrega em Verses, Priorizao e Cronogramao Orientadas a Risco, Enfoque


Iterativo, Desenvolvimento em Paralelo com Sincronizaes Freqentes.

Entregue Valor em Incrementos; Mantenha-se gil,


Adapte-se a Mudanas; Enfoque no Valor para o
Negcio.

Entregar software operante freqentemente, de algumas semanas a


alguns meses, de preferncia nos intervalos mais curtos.

Entrega em Verses, Enfoque Iterativo, Atitude Mental de Produto, Atitude


Mental de Data de Entrega Fixa.

Entregue Valor em Incrementos.

Cliente e desenvolvedores devem trabalham juntos diariamente


durante o projeto.

Cliente como Gerente de Produto, Gerente de Produto e Experincia do Usurio


como parte do Modelo de Equipe desde o incio do projeto.

Faa Parceria com os Clientes, Trabalhe por Uma Viso


Compartilhada, Modelo de Equipe.

Criar projetos com indivduos motivados. Dar a eles o ambiente e


suporte que necessitam, e confiar neles para a execuo do projeto.

Modelo de Equipe, Equipe de Iguais, Equipes Pequenas e com Poder de


Deciso.

Tenha Satisfao de um Trabalho Bem Feito, D


Poder de Deciso aos Membros da Equipe, Estabelea
Responsabilidade Claramente.

O mtodo mais eficiente e efetivo para transmitir informaes dentro


e para a equipe de desenvolvimento conversao face a face.

Princpio de Colocao, Comunicaes Abertas.

Promova Comunicaes Abertas, Trabalhe por Uma


Viso Compartilhada.

Software operante a medida primria de progresso.

Construo Diria (incluindo documentao do usurio e testes de Aceitao).

Entregue Valor em Incrementos.

Processos geis promovem desenvolvimento sustentvel. Os


patrocinadores, desenvolvedores e usurios devem ser capazes de
manter um ritmo constante de maneira indefinida.

Entrega em Verses, Manuteno com uma nova Entrega (nenhuma fase de


manuteno em separado), Atitude Mental de Produto.

Entregue Valor em Incrementos.

Ateno contnua a excelncia tcnica e ao bom desenho ampliam


a agilidade.

Modelo de Aplicativo, Processo de Anlise Concorrente, Planejamento


atravs da Construo, Anlise Orientada a Arquitetura e Design, Modelo
Baseado em Servios.

Invista em Qualidade.

Simplicidade, a arte de maximizar a quantidade de trabalho no


feito, essencial.

Entrega em Verses.

Entregue Valor em Incrementos, Enfoque no Valor


para o Negcio.

As melhores arquiteturas, requisitos e desenhos emergem de equipes


auto-organizadas.

Modelo de Equipe, Equipe de Iguais, Equipes Pequenas e Com Poder de Deciso,


Planejamento de Baixo para Cima.

Modelo de Equipe, Promova uma Equipe de Iguais,


Internalize Qualidades de Servio, Enfoque na Viso
Genrica (Look at the Big Picture).

Em intervalos regulares, a equipe reflete sobre como se tornar mais


efetiva e ento harmoniza e ajusta seu comportamento de acordo

Revises Ps Entregas, Aprendendo ao Fazer, Planejamento atravs da


Construo.

Aprenda com Todas as Experincias.

Tabela 2. Princpios da MSF

58

.NET Magazine - Microsoft Solutions Framework

proJETo/aNLis E
tal, Auto-Organizante e Emergente
Fonte: [Boehm et al., 2002]

MSF e o Manifesto gil


MSF valoriza indivduos e iteraes
ao invs de processos e ferramentas. Os
desafios de lidar com software como produto mental coletivo para um mercado de
massa, fizeram com que a Microsoft ficasse bem consciente das complexidades do
desenvolvimento de software.
Ao capacitar os times colocando-os em
pequenas e auto-suficientes Equipes de
Iguais, e ao conectar-se aos seus usurios
atravs de estudos amplos de Usabilidade
em laboratrios, garantiu que o elemento
humano o mais importante ao trazer os
produtos para o mercado.
MSF valoriza software operante ao
invs de documentao abrangente. Algumas citaes clssicas da MSF bastaro
para mostrar esse ponto de que software
operante como fator fundamental para
trazer a idia do produto do abstrato para
o concreto:
Voc tem de fazer o produto visvel. Pblico. Voc pode imaginar se vendarmos
os olhares de dezenas ou mesmo centenas
de pessoas e deix-las solta para construir uma ponte sem poder ver o que esto
fazendo? essencial criar os executveis
do produto de software em construo to
frequentemente quanto possvel.
E tambm, Se equipe = software, ento
o software operante corrente o estado
corrente da equipe.
Jim McCarthy, Dynamics of Software
Development, pginas 109-112
Especificamente sobre a documentao
em si, eis aqui o pragmatismo da MSF:
Na Microsoft, documentos de desenho
so desenvolvidos quando eles so necessrios, e quando memorandos, notas de
reunio e especificaes de interface so
suficientes, o tempo no perdido escrevendo documentos de desenho formais.
Quando so necessrios pode ser:
Ao iniciar um novo produto;
Quando membros da equipe so novos na companhia de uma maneira ou
de outra;
Quando o desenho complexo;
Quando h muitos desenvolvedores
no projeto para que seja possvel assegurar comunicao apropriada de outra

maneira [...].
Para os propsitos de manuteno de
expanso depois da entrega do software,
a melhor resposta ter cdigo auto-documentante e gerar quaisquer documentaes suplementares automaticamente a
partir do prprio cdigo.
MSF 1.0 [1993]
Isso semelhante recomendao do
Robert Martin no tocante documentao
para projetos geis: No produza nenhuma documentao a no ser que a necessidade seja imediata e significante.
(Martin [2002])
MSF valoriza colaborao com o cliente ao invs de negociao de contrato.
Negociao de contratos essencialmente
algo que se faz ao desenvolver software
customizado. Para um mercado de massa,
isso no possvel, portanto Microsoft
teve de desenvolver as habilidades necessrias para ser bem sucedida. Isso
significa obter muito feedback dos clientes
para fazer um produto atraente para
milhes de pessoas.
O sucesso da Microsoft em usar princpios
de HCI (Human Computer Interaction) para
preencher as necessidades de usabilidade,
associados a uma estrutura de equipe determinada em funo de atender a critrios
de qualidade de satisfao do cliente, mostram que seu processo de desenvolvimento
voltado ao cliente, e que a colaborao com
estes utilizada intensivamente.
Por exemplo, a MSF determina que tanto
os papis Educao do Usurio e Gerncia
de Produto sejam representados em uma
equipe (esse ltimo preferencialmente por
um usurio). Tambm determina que todos
os outros papis sejam mapeados para objetivos de qualidade do ponto de vista do
cliente. Isso transparece na MSF como um
enfoque forte na satisfao do cliente.
Jim McCarthy foi at potico sobre isso:
Seu relacionamento com o cliente
como uma dana ou romance. Voc d
alguns passos (suas entregas e mensagens), e eles do passos em resposta, e
ento voc d mais passos. Voc deve
estar focado no fluxo de transaes, no
padro e direo totais, no somente na
ltima transao.
Tudo isso parte de se ter uma estratgia de tecnologia de mltiplas entregas
[...]. Se seus clientes sabem (ou sentem)
que voc vai ser pontual nas entregas,

que eles esto em uma viagem tecno-cronolgica com voc, que voc e eles esto
indo a algum lugar juntos, as expectativas
deles vo ficar mais ajustadas.
Idem, pgina 76.
MSF valoriza responder mudana
ao invs de seguir um planejamento.
Alm do conceito de Entrega em Verses
e desenho iterativo como maneiras de
lidar com mudanas de escopo, a filosofia de planejamento da MSF mostra sua
adaptabilidade:
Planejamento atravs da construo:
Um dos objetivos implcitos da MSF
ajudar organizaes a criar uma conexo
entre o processo de planejamento e o de
construo. Ao construir, uma empresa
ganha experincia tecnolgica assim como
um melhor entendimento de como a empresa est posicionada para absorver e dar
suporte tecnologia. O processo iterativo:
os processos de planejamento e construo
so ambos candidatos para aperfeioamento contnuo. Quer dizer, cada um contribui
ao refinamento do outro.
MSF 1.0 [1993]

Concluso

A MSF original poderia ter sido includa


como parte do Manifesto gil em 2001.
Na poca eu era gerente em uma dotcom,
e usei MSF (combinado com FDD) em dezenas de projetos em que era obrigatrio
ser gil. De fato, na poca fiquei surpreso
que algum da Microsoft no estivesse
entre os participantes da reunio.
Somente mais tarde entendi que a MSF no
tinha ningum que fizesse na poca parte
do colgio invisvel da comunidade gil
(Invisible College: grupo informal de pesquisadores de um assunto - Price [1963]).
Do mesmo modo, tambm no foram
convidados Mikio Aoyama, que j em
1997 havia criado seu Agile Software Process (Aoyama [1997]), e outros como Ian
Graham com seu SOMA.

Edio 42 - .NET Magazine

59

Dicas de GridView

Luciano Pimenta
(lucianopimenta@clubedelphi.net)

Tcnico em Processamento de Dados, Editor


Tcnico da Revista ClubeDelphi, .net Magazine e WebMobile. Editor de vdeo aulas do
Portal DevMedia (www.devmedia.com.br).
Palestrante da 4 edio da Borland Conference
(BorCon).

60

esde a minha primeira experincia com o ASP.NET, um dos


controles que mais utilizei foi
o Grid, pela sua facilidade em mostrar
os dados no formato de tabela. Primeiramente, usei o DataGrid da verso 1.x
do .NET Framework e agora o GridView
para o .NET 2.0.
A primeira idia de quem comea com
ASP.NET fazer aplicaes Web iguais a
aplicaes Desktop, mas claro nem tudo
possvel. Especificamente, em relao
ao Grid, adicionar imagens, controles e
formataes de acordo com determinado
campo, so as primeiras funcionalidades
que desejamos.
O DataGrid muito customizvel, mas
o GridView trouxe muito mais facilidades
ao desenvolvedor, como insero, atualizao, excluso e seleo de dados, de
forma muito simples.
Neste artigo, veremos algumas dicas
teis para a utilizao desse controle para
customiz-lo em suas aplicaes Web.

.NET Magazine - Dicas de GridView

Adicionando controles

A funcionalidade de templates do ASP.


NET ajuda em muito a customizao
do GridView para a adio de controles.
Basta criar um coluna do controle do
tipo TemplateField e adicionar os controles
necessrios.
Neste exemplo, vamos trabalhar com
o CheckBox, onde simularemos um WebMail. Para quem est acostumado a usar
WebMail, sabe que os e-mails aparecem
em um Grid, onde podemos selecion-los,
exclui-los entre outras funcionalidades.
Crie uma nova aplicao Web no Visual Studio 2005, com suporte ao AJAX
(Figura 1).
Usaremos AJAX para que algumas dicas
fiquem de fcil entendimento, j que no
teremos refresh total da pgina. Na pgina
Default.aspx adicione um UpdatePanel e
dentro dele um GridView.
No vamos no concentrar em conexes
com o banco ou formataes do GridView. Temos timos artigos publicados,

Mo Na Mas s a
mostrando essas caractersticas, bem
como temos vdeos aulas no Portal do
Assinante.
Formate o GridView na opo que desejar e conecte ao banco de dados Northwind
que acompanha o SQL Server. Voc pode
usar outro banco de sua preferncia. Para
este exemplo, use os dados da tabela Customer (selecione apenas alguns campos).
Deixe o controle com a opo de paginao ativada (propriedade AllowPaging).
Acesse a propriedade Columns do GridView, adicione um campo do tipo TemplateField e clique em OK (Figura 2).
Acesse a Smart Tag do GridView e clique
na opo Edit Templates. Na seo ItemTemplate, adicione um CheckBox. Feche
o editor, rode a aplicao e veja os CheckBoxes adicionados ao GridView.
A primeira funcionalidade que usaremos saber que linhas foram selecionadas com o CheckBox. Adicione um boto
e um TextBox na pgina. No Click do boto
adicione o cdigo da Listagem 1.
O cdigo est comentado para um fcil
entendimento. O que fizemos foi criar
uma varivel do tipo StringBuilder (j
adicionando um texto inicial), percorrer
todas as linhas do GridView e procurar o
controle CheckBox que adicionamos via
template, com o FindControl.
Esse mtodo retorna um Control, ento fizemos um type cast para um CheckBox. Vale
salientar que o parmetro do FindControl
o nome do controle e o mesmo deve ser
digitado corretamente, claro.
Se o controle no for nulo (foi encontrado)
e estiver marcado (Checked), ento adicionamos na sb os valores das colunas 1 e 2.
Nota: As colunas do GridView comeam
com 0, sendo que a do TemplateField
contada tambm.

Rode a aplicao, marque alguns CheckBoxes e clique no boto. Como mostra


a Figura 3, o TextBox exibe as linhas
selecionadas.
Como estamos usando AJAX, no temos
refresh total da pgina. tima dica, mas
para ficar melhor, que tal colocar um
CheckBox no cabealho da coluna e ao
marca-lo, todos os controles das linhas
fossem marcados?
Abra o Template do GridView e na Smart
Tag, altere para HeaderTemplate na opo

Figura 1. Criando o projeto Web com suporte ao AJAX

Figura 2. Adicionando um TemplateField no GridView


Listagem 1. Obtendo a linha com o CheckBox marcado
using System.Text;
...
protected void Button1_Click(object sender, EventArgs e)
{
//cria um StringBuilder
StringBuilder sb = new StringBuilder(* Itens Selecionados *);
//percorre todas as linhas (rows) do GridView
foreach (GridViewRow row in GridView1.Rows)
{
//procura pelo CheckBox
CheckBox ch = (CheckBox)row.FindControl(CheckBox1);

//se achou e est marcado


if ((ch != null) && (ch.Checked))
{
//adiciona na var sb os campos do GridView
sb.AppendLine();
sb.Append(row.Cells[1].Text + - + row.Cells[2].Text);
}

//repassa para o TextBox a sb


TextBox1.Text = ;
TextBox1.Text = sb.ToString();

Edio 42 - .NET Magazine

61

Listagem 2. Marcando/desmarcando os CheckBoxes


//percorre todas as linhas (rows) do GridView
foreach (GridViewRow row in GridView1.Rows)
{
//procura pelo CheckBox
CheckBox ch = (CheckBox)row.FindControl(CheckBox1);
//se achou
if (ch != null)
{
//repassa para o CheckBox das linhas, o mesmo valor do CheckBox2
ch.Checked = (sender as CheckBox).Checked;
}
}

Listagem 3. Alterando a fonte da linha marcada


using System.Drawing;
...
//percorre todas as linhas (rows) do GridView
foreach (GridViewRow row in GridView1.Rows)
{
//procura pelo CheckBox
CheckBox ch = (CheckBox)row.FindControl(CheckBox1);

//se achou
if (ch != null)
{
if (ch.Checked)
{
//formata o tamanho, negrito e cor
row.Font.Size = 14;
row.Font.Bold = true;
row.ForeColor = Color.Red;
}
else
{
//volta ao padro
row.Font.Size = 12;
row.Font.Bold = false;
row.ForeColor = Color.Black;
}
}

Display. Adicione outro CheckBox, altere


a propriedade AutoPostBack do controle
para True, pois sem ela, o cdigo adicionado no evento CheckedChanged no seria
executado.
D um duplo clique no controle e no
evento adicione o cdigo da Listagem 2.
O cdigo praticamente igual ao anterior,
apenas verificamos se a varivel ch no est
nula e repassamos para a mesma o valor
da propriedade Checked do controle que
adicionamos no cabealho da coluna.
Rode e faa o teste. E se ao clicar no
CheckBox de uma linha eu quisesse alterar a fonte da linha? Tambm fica muito
simples. Acesse o template do GridView
para o CheckBox das linhas, alterando a
propriedade AutoPostBack do mesmo para
True. D um duplo clique no controle e
adicione o cdigo da Listagem 3.
O cdigo continua semelhante aos
exemplos anteriores. Verificamos se a
varivel ch no nula e depois se foi marcada. Se positivo, alteramos as configuraes da fonte da linha. Seno, voltamos
s configuraes normais.
O cdigo do else vai variar de acordo
com as formataes do seu GridView.
Rode a aplicao e teste (Figura 4).
A funcionalidade de adicionar controles
no GridView semelhante para outros
tipos de controles. Voc pode tomar por
base essas dicas para adicionar um DropDownList, por exemplo.

Master/Detail

Crie uma nova pgina e adicione dois


GridViews. Para o primeiro, crie uma conexo com a tabela Orders do Northwind.
Para o segundo GridView acesse os dados
da tabela Order Details.
Na tela do wizard onde voc escolhe
os campos, aps escolher os mesmos,
clique no boto Where. Na tela que abrir,
em Column escolha OrderID, em Source
selecione Control e em ControlID escolha
GridView1 (Figura 5).
Clique em Add para adicionar o parmetro. Note que o valor do parmetro ser a
propriedade SelectedValue do GridView1.

www.devmedia.com.br/msdn/portal.asp

Acesse agora o mesmo o Portal .net Plus e assista a uma vdeo aula de Luciano
Pimenta, que mostra como adicionar um DropDownList no GridView.

Figura 3. Obtendo os CheckBoxes marcados

62

.NET Magazine - Dicas de GridView

www.devmedia.com.br/articles/listcomp.asp?comp=2035

Mo Na Mas s a
Finalize o wizard e no GridView1 acesse
a Smart Tag, marcando a opo Enable
Selection.
Rode a aplicao, selecione uma linha
do GridView1 e veja que o GridView2
ser preenchido com os dados referente
aos itens da tabela pai (Order) (Figura 6).
Neste exemplo, eu configurei a consulta
do GridView2 para que trouxesse o nome
do produto.

Master/detail com Templates

Mas se eu quiser que os itens (no caso


os details) sejam mostrados sem que o
usurio clique na linha do GridView1?
Para isso usaremos templates no GridView
master.
Crie uma nova pgina e adicione um
GridView, adicionando os dados da tabela Orders. Acesse o editor de colunas
do controle e remova todos os campos,
adicionando apenas um do tipo TemplateField. Acesse as configuraes do template
e adicione uma tabela com duas linhas e
trs colunas.
Na linha superior, adicione o rtulo dos
campos (digite ou coloque Labels), e na
linha inferior, adicione trs Labels. Para as
Labels vamos usar a tcnica de DataBind
para mostrar os valores dos campos.
Acesse a Smart Tag do primeiro Label
e acesse a opo Edit Databindings. Na
janela que abrir, configure o campo no
item Bound to (Figura 7).
Faa o mesmo para os outros campos.
Abaixo da tabela, adicione um GridView e
configure para acessar os dados da tabela
Orders Details e configure um parmetro
igual ao exemplo anterior, s que ao invs
de escolher o GridView1, voc escolher o
Label1 (referente ao campo OrderID).
Finalize o wizard e rode a aplicao. Veja
na Figura 8 que estamos visualizando os
dados da master (Orders) e em seguida a
detail (Order Details).

Figura 4. Alterando a fonte da linha marcada

Figura 5. Configurando os parmetros da consulta

Trabalhando com imagens

Mostrar imagens no GridView simples.


Por exemplo, para mostrar imagens nos
comandos de seleo, excluso, atualizao e edio, basta configurar propriedades no editor de colunas.
Indique a imagem que deseja na propriedade XXImageURL, onde o XX indica
o tipo de comando (Cancel, Delete, Insert,
Update). Por ltimo altere ButtonType

Figura 6. Master/Detail com dois GridViews

Edio 42 - .NET Magazine

63

Figura 7. DataBinding de controles no TemplateField

para Image. Veja na Figura 9 um exemplo


dessas imagens.
Mas e se eu tenho imagens salvas na pasta da aplicao e na tabela do banco tenho
apenas o nome dela, como mostrar?
Vamos imaginar que tenhamos uma
pasta no diretrio da aplicao, chamada
imagens e dentro dela os arquivos cadastrados no banco. Ao conectar a tabela,
trazemos todos os campos da mesma.
No campo que guarda o nome da imagem, voc deve abrir o editor de colunas
e configurar a propriedade DataFormatString para <img src=imagens/{0}>.
Rode a aplicao e veja as imagens sendo mostradas no GridView (Figura 10).

Imagens de acordo com


determinada condio

Figura 8. Master/detail usando templates

Em uma tabela de clientes, certamente


possuimos um campo indicador do sexo.
Que tal mostrar no GridView a listagem
dos clientes e de acordo com o sexo mostrar uma imagem diferente?
Bem, criei uma tabela de clientes, onde
existe um campo chamado SEXO, salvando, obviamente as opes M ou
F. Para este exemplo, vou me basear no
timo artigo de Eduardo Henrique Rizo
publicado na edio 33. Adicione o cdigo
da Listagem 4 na pgina.
O cdigo anterior retorna o nome do
arquivo, salvo na pasta imagens de acordo
com o valor passado como parmetro.
No editor de colunas do GridView, para
o campo SEXO, transforme-o em um
TemplateField.
Acesse o editor de templates e adicione um
Image. Acesse a Smart Tag e escolha a opo
Edit DataBindings. Na tela, escolha Custom
binding e digite: GetImagem(Convert.
ToString(Eval("SEXO"))).
Com esse cdigo, fizemos o Bind na
propriedade ImageURL do controle, que
passar o valor do campo SEXO atravs do
Eval(SEXO). Feche o editor, rode a aplicao e veja as imagens sendo mostradas de
acordo com o sexo do cliente (Figura 11).

Validaes

Figura 9. Colocado imagens nos comandos do GridView

64

.NET Magazine - Dicas de GridView

Podemos usar os controles de validao


normalmente na edio/insero de valores no GridView. Novamente, faremos
uso de Templates. Conecte a uma tabela
do banco e escolha uma formatao para
o GridView.

Mo Na Mas s a

Figura 10. Mostrando imagens da aplicao no GridView

Transforme os campos que deseja colocar as validaes, como templates. Acesse o


editor de templates e escolha o item EditItemTemplate na opo Display (Figura 12).
Ser mostrado o TextBox quando o usurio escolher a opo de insero ou edio
da linha. Adicione um RequiredFieldValidator e aponte o ControlToValidate para
o TextBox, e digite a mensagem de erro
em ErrorMessage. Feche o editor e rode a
aplicao (Figura 13).

Somatrio no rodap

Se o GridView possui um campo com


valores numricos ou monetrios, certamente voc gostaria de mostrar um total
no rodap da pgina. Primeiramente,
altere para True a propriedade ShowFooter
do GridView.
Neste exemplo, criei um DataSet tipado
e um mtodo que retorna a quantidade
de itens da tabela, mas voc pode adaptar
facilmente a sua necessidade (sem o uso
de TableAdapter).

Figura 11. Mostrando imagens de acordo com o valor do


campo SEXO

Listagem 4. Criando um mtodo que retorne o nome do arquivo


protected string GetImagem (string aSexo)
{
string ret = ;
if (aSexo == M)
ret = ~/imagens/M.bmp;
else if (aSexo == F)
ret = ~/imagens/F.bmp;
return ret;
}

Listagem 5. Colocando um somatrio no rodap


if (e.Row.RowType == DataControlRowType.Footer)
{
PRODUTOSTableAdapter prod = new PRODUTOSTableAdapter();
e.Row.Cells[0].Text = Quant: + Convert.ToString(prod.GetTotal());
}

Aps, acesse o evento RowDataBound e


adicione o cdigo da Listagem 5.
GetTotal uma query criada no TableAdapter que retorna a quantidade de
registros da tabela. Primeiramente, verificamos se estamos no rodap do GridView
atravs da propriedade RowType. Assim,
colocamos na primeira coluna, um texto
e a quantidade (Figura 14).

Agrupamento

Para fazer um agrupamento, usaremos a


mesma tcnica j bastante mostrada neste
artigo, templates. Ser muito semelhante
ao exemplo de master/detail usando
templates. Para este exemplo, conectaremos o GridView tabela Categories do
Northwind.
Deixe apenas um campo e transforme-o

Edio 42 - .NET Magazine

65

em TemplateField no editor de colunas.


Adicione um outro GridView no editor
de templates e configure para a tabela Products, mas que mostre apenas os produtos
de uma categoria especfica. Nesse caso
ser um Label que voc pode adicionar no
editor de templates.
Depois basta rodar a aplicao e visualizar o agrupamento (Figura 15). Qualquer dvida, consulte o projeto que est
para download (neste exemplo, removi o
cabealho das colunas do GridView dos
produtos).

Concluso

Vimos neste artigo algumas dicas para a


utilizao do GridView, um dos controles
mais utilizados em aplicaes ASP.NET
no Visual Studio 2005. Tambm sugiro
a leitura do artigo de Rodrigo Sendin
publicado na edio 41, que mostra configuraes avanadas do controle.
Para quem quiser avanar, que tal colocar todas essas dicas em prtica, extendendo o controle padro para um GridView turbinado. Fica a a dica! Um grande
abrao a todos e at a prxima!

Figura 13. Validando os campos no GridView

Figura 14. Mostrando o somatrio no GridView

Figura 12. Opes do Template

Figura 15. Agrupamento com dois GridViews

66

.NET Magazine - Dicas de GridView

31 de Agosto e
01 de Setembro
em So Paulo / SP

O Evento do desenvolvedor

Web e Wireless

Palestras 100% tcnicas!


Garanta sua participao e conhea o que as
tecnologias Java e .net trazem de
melhor para este mercado!
Para mais informaes acesse:
www.devmedia.com.br/eventos/webmobiletechweek
Realizao:

Confira abaixo a Grade de Palestras:

Salas de Java

Salas de .NET

1 dia - 31 de Agosto

1 dia - 31 de Agosto

Sala 1

Sala 2

Sala 3

Sala 1

Sala 2

Sala 3

9:00-10:20

Mini Curso 1 - Java ME


Primeiros Passos Parte 1

Interfaces ricas na Web com


Ajax Parte 1

WEB 2.0: Conceitos e


Tecnologias

Linq - veja na prtica os


fundamentos deste projeto.

Desenvolvimento para
dispositivos mveis na
plataforma .NET 2.0 - Parte 1

Ciclo de vida de desenvolvimento


com VSTS

10:30-11:50

Mini Curso 1 - Java ME


Primeiros Passos Parte 2

Interfaces ricas na Web com


Ajax Parte 2

Padres de Projeto
Java EE Parte 1

Introduo ao ASP.NET AJAX

Desenvolvimento para
dispositivos mveis na
plataforma .NET 2.0 - Parte 2

Mini-curso de C# - Parte 1

12:00-13:20

Almoo

Almoo

Almoo

Almoo

Almoo

Almoo

13:30-14-50

Mercado de Jogos para


Celulares

Interfaces ricas para a Web


com Flex 2.0 e Java

Padres de Projeto
Java EE Parte 2

Desenvolvendo Gadgets
Corporativos para Windows
Vista

Novidades no Windows
Mobile 6

Mini-curso de C# - Parte 2

15:00-16:20

Mini Curso 2 Conectividade


em Java ME - Do bsico ao
avanado Parte 1

Struts2 - A Evoluo do
framework

JavaFX: interfaces em Java de


forma fcil e portvel Parte 1

Introduo ao Silverlight

Acionamento de dispositivos
eletro-mecanicos com Pocket
PC

ASP.NET Caching

16:20-17:00

BREAK

BREAK

BREAK

BREAK

BREAK

BREAK

17:00-18:20

Mini Curso 2 Conectividade


em Java ME - Do bsico ao
avanado Parte 2

JavaFX: interfaces em
Struts2 - Desenvolvendo uma
aplicao com ajax e validao Java de forma fcil e
portvel Parte 2
Parte 1

.net 3.0 - Xaml Browser


Apllications

Desenvolvendo programa para


PocketPC com rede sem fio e
WebServices - Parte 1

Criao de um portal com ASP.NET


2.0 e WebParts

18:30-19:50

Otimizao de Aplicaes
Java ME

Alm do bsico: explorando


Struts2 - Desenvolvendo uma
aplicao com ajax e validao APIs sofisticadas com Java ME nas
plataformas Nokia Parte 1
Parte 2

Construa uma aplicao 100% Desenvolvendo programa para


PocketPC com rede sem fio e
OO com ASP.NET - Parte 1
WebServices - Parte 2

Aprenda na prtica a criar um


sistema de enquetes em ASP.NET
- Parte 1

20:00-21:20

Utilizando SVG (Scalable


VectorGraphics) com Java ME

Relatorios Web

Construa uma aplicao 100% Criando aplicaes WAP com


ASP.NET
OO com ASP.NET - Parte 2

Aprenda na prtica a criar um


sistema de enquetes em ASP.NET
- Parte 2

Alm do bsico: explorando


APIs sofisticadas com Java ME nas
plataformas Nokia Parte 2

2 dia - 01 de Setembro

2 dia - 01 de Setembro

Sala 1

Sala 2

Sala 3

Sala 1

Sala 2

Sala 3

9:00-10:20

Desenvolvendo um Game em
Java ME - Parte 1

Implementando uma loja


virtual em Java EE 5 com
JPA e EJB3 Parte 1

Google Web Toolkit passo-a-passo


Parte 1

Net Framework 3.0 - Conhea


o WPF e surpreenda-se

Otimizando aplicaes em
Windows Mobile 5.0

Aplicaes Web para dispositivos


mveis

Desenvolvendo um Game em
Java ME - Parte 2

Implementando uma loja


virtual em Java EE 5 com
JPA e EJB3 Parte 2

Google Web Toolkit passo-a-passo


Parte 2

Aplicaes com ASP.NET 2.0


e AJAX - Parte 1

Construindo uma aplicao


Mobile passo a passo com
Visual Studio 2005

Linq para Compact Framework

10:30-11:50

12:00-13:20

Almoo

Almoo

Almoo

Almoo

Almoo

Almoo

13:30-14-50

Desenvolvendo um Game em
Java ME - Parte 3

Implementando uma loja


virtual em Java EE 5 utilizando
JSF para a interface com o
usurio.- Parte 1

Planejamento e Execuo de
Testes em Aplicaes Web Parte 1

Aplicaes com ASP.NET 2.0


e AJAX - Parte 2

Envio e recebimento de dados


no Pocket usando FTP

ASP.NET 2.0 na prtica: Profiles e


Membership

15:00-16:20

Introduo ao uso do
bluetooth em J2ME

Implementando uma loja


virtual em Java EE 5 utilizando
JSF para a interface com o
usurio.- Parte 2

Planejamento e Execuo de
Testes em Aplicaes Web Parte 2

XAML

Windows Mobile no Windows


CE

WorkFlow Foundation no ASP.NET

16:20-17:00

BREAK

BREAK

BREAK

BREAK

BREAK

BREAK

17:00-18:20

Multimdia em J2ME

Desenvolvendo aplicaes
Web com o Spring Framework
Parte 1

Desenvolvendo e implantando uma


fora de vendas em Palm Parte 1

Silverlight na prtica

SQL Server 2005 Compact


Edition - Parte 1

Desenvolvimento WEB: Uma


Abordagem Utilizando OO e
Tcnicas de Teste de Software

18:30-19:50

Java Wireless: O que ns


precisamos saber sobre
MIDP3?

Desenvolvendo aplicaes
Web com o Spring Framework
Parte 2

Desenvolvendo e implantando uma


fora de vendas em Palm Parte 2

AJAX Control Toolkit

SQL Server 2005 Compact


Edition - Parte 2

Testes automatizados em
aplicaes ASP.NET

Patrocnio:

Apoio Cultural:

Apoio:

S-ar putea să vă placă și