Criando aplicações web com WebMatrix e Razor – Parte 1

Neste artigo apresento como podemos utilizar o WebMatrix e a nova view engine da Microsoft para aplicações web (Razor) para construir aplicações de pequeno e médio porte.

por Fabrício Lopes Sanchez

Há alguns meses a Microsoft trouxe novamente ao cenário de desenvolvimento de sites e aplicações web o WebMatrix. Totalmente remodelado e com foco na experiência do usuário, o WebMatrix traz novos modelos de desenvolvimento, principalmente para aplicações de pequeno e médio porte. Uma das grandes vantagens de se trabalhar com o WebMatrix é o fato de podermos criar nossas aplicações utilizando a nova view engine da Microsoft – Razor. Nesta série de artigos, cobrirei os aspectos principais relacionados ao WebMatrix e ao formato Razor.

Neste primeiro artigo, falaremos mais especificamente sobre o WebMatrix e sobre como podemos criar uma aplicação web utilizando o mesmo.

O que é o WebMatrix?

Antes de entrarmos em maiores detalhes sobre o WebMatrix, é preciso saber exatamente o que é o WebMatrix. WebMatrix é um conjunto de ferramentas robustas que proporciona ao desenvolvedor uma rica experiência no desenvolvimento de aplicações web de pequeno e médio porte. Este conjunto de ferramentas permitem ao usuário criar aplicações ricas de forma rápida e fácil.

Para se ter uma idéia sobre as ferramentas que compõem este conjunto, ao instalar o WebMatrix têm-se acoplado a ele o IIS Developer Express (um pequeno servidor para rodar as aplicações web), o ASP.NET (framework para “rodar” as páginas asp.net) e uma versão compacta do SQL Server, o SQL Server CE para hospedar seus bancos de dados, dentre outras.

O WebMatrix permite ao desenvolvedor criar páginas dinâmicas, como por exemplo, interagir com bancos de dados, validar formulários, etc. e o melhor de tudo, pode-se fazer isso tudo com C#, VB.NET em sintonia com a view engine Razor, mas isso é assunto para os próximos artigos.

Alguns aspectos importantes

O WebMatrix foi lançado em versão Beta (para testes), portanto, é possível que no lançamento da versão final, algumas features do produtos possam não mais estar presentes ou terem sido modificadas.

Por se tratar de uma versão Beta, a equipe de desenvolvimento do WebMatrix espera o feedback da comunidade técnica, portanto, é fundamental que ao utilizar a ferramenta, você destaque para a equipe de desenvolvimento os pontos críticos da mesma para que a modificação

Uma pergunta muito comum: Com que objetivo a Microsoft lança no mercado um produto como o WebMatrix se ela já possui o Visual Studio que é completo? Novamente, é preciso entender o foco do produto. O WebMatrix, pelo menos a princípio, propõe disponibilizar ao desenvolvedor uma experiência rica ao criar aplicações web de pequeno para médio porte e, para tanto, disponibiliza ferramentas que agilizam este processo. Evidentemente que, se o objetivo é criar uma aplicação de médio para grande porte, sua ferramenta é o Visual Studio.

Download e instalação do WebMatrix

A utilização do WebMatrix é gratuíta, portanto, você pode fazer o download, instalar e executar em seu computador sem qualquer custo adicional.

Para instalar o WebMatrix é preciso utilizar o Web Platform Installer, pois este último baixa e instala todos os pré-requisitos para que o WebMatrix funcione, bem como, todo o set de ferramentas do WebMatrix. Para baixar o Web Platform Installer, basta seguir o link: http://go.microsoft.com/fwlink/?LinkId=195938.

A instalação do WebMatrix é extremamente simples e o processo pode ser visualizado ao seguir o link: http://www.microsoft.com/web/webmatrix/download/.

Conhecendo o WebMatrix

Neste primeiro artigo vamos fazer um tour pelo WebMatrix e criar uma aplicação simples, apenas para apresentar o ambiente de desenvolvimento. Nos artigos posteriores, quando abordarmos a view engine Razor, criaremos aplicações mais completas, incluindo acesso a dados e etc.

Vamos lá, inicialize o WebMatrix. Ao fazê-lo, você deverá estar visualizando uma tela semelhante a apresentada na Figura 1.

Figura 1: Tela de abertura do WebMatrix

A tela de abertura do WebMatrix é bem simples e traz 4 opções para o desenvolvedor. Vamos olhar um pouco mais de perto cada uma destas opções.

Do lado esquedo temos a opção “My Sites”. Intuitivamente, ao clicar nesta opção você será levado a seus projetos criados com o WebMatrix. Por default, o WebMatrix salva seus projetos em “C:\Users\Seu_Usuario\Documents\My Web Sites”. Ao clicar em “My Sites“, uma nova janela será exibida com todos os seus sites. Basta selecionar aquele que deseja trabalhar e clicar em OK. Pronto, você será levado ao workspace do WebMatrix. A Figura 2 apresenta este procedimento que acabei de descrever.

Figura 2: Selecionando o projeto que deseja trabalhar

À direita da opção “My Sites” temos a opção “Site From Web Gallery“. Com esta opção, podemos criar nosso site com base em uma estrutura já existente, como por exemplo um Blog Engine .NET, DotNetNuke, WordPress, dentre outros. A galeria de opções é extensa e dividida por categorias, o que facilita a escolha da estrutura mais adequada. Ao clicar nesta opção e escolher a estrutura que melhor se adequa a sua situação problema, você é levado ao workspace do WebMatrix com todos os arquivos e as especificações dos mesmos. A Figura 3 apresenta este processo.

Figura 3: Escolhendo a estrutura adequada na galeria

À direita da opção “Site From Web Gallery” temos a opção “Site From Template“. Esta é uma das novidades do WebMatrix Beta. Ao clicar nesta opção você pode: criar um site em branco, um starter site (com alguns arquivos básicos de um site), Bakery (um modelo de catálogo online), um Directory Link (uma espécie de catálogo de links divididos por categorias) e finalmente, um site do tipo Photo Gallery (um template sugestivo pra criar uma galeria de fotos). A Figura 4 apresenta a tela de escolha do modelo que melhor se adequa a sua necessidade.

Figura 4: Escolhendo o template na opção Site From Template

Finalmente, a última dentre as opções existentes na tela de abertura é “Site From Folder”. Esta opção trata basicamente de criarmos um site em branco e o direcionarmos para uma pasta específica. Ao clicar-se nesta opção, uma janela do windows explorer se abre para que a pasta de destino dos arquivos do site seja escolhida. Ao efetuar a seleção e clicar em OK, o usuário é direcionado para o workspace do WebMatrix. A Figura 5 ilustra este processo.

Figura 5: Selecionando a pasta de destino dos arquivos do site

Após explorarmos as funcionalidades de cada ítem da tela de abertura, vamos então criar um pequeno aplicativo web com o WebMatrix. Neste simples aplicativo, temos uma página .cshtml que possui dois campos de texto “Nome” e “E-mail” e um botão “Exibir”. O que nosso aplicativo fará é, ao clicar-se em “Exibir” o sistema mostrará os dados digitados pelo usuário nos campos “Nome” e “E-mail”. Como mencionei anteriormente, a idéia deste primeiro artigo é apresentar o WebMatrix e não construir um aplicativo complexo (faremos isso nos próximos artigos). Vamos então ao trabalho!

Criando nossa primeira aplicação

A Figura 5 ilustra a funcionalidade de criarmos um site em branco e apontarmos este site para uma pasta. Para este exemplo, é exatamente isso que faremos, portanto, a Figura 5 já ilustra a primeira etapa do processo, a de criação do projeto. Ao clicar em OK, somos levados ao ambiente de trabalho do WebMatrix, conforme apresenta a Figura 6.

Figura 6: Ambiente de trabalho do WebMatrix

Na tela apresentada na Figura 6 estão presentes todos os recursos de configuração e parametrização necessários para que seu site funcione corretamente. Ao centro temos as opções de gerenciamento de arquivos, bases de dados e relatórios. Um pouco abaixo, temos as opções de “setar” parâmetros de deploy e feedback. À esquerda, na parte superior, temos a possibilidade de gerenciar requisições e configurações do IIS para execução de nossa Web Application. Abaixo, temos o gerenciamento do nosso site propriamente dito, ou seja, gerenciamento de arquivos, bases de dados, relatórios, etc.

Outra característica que vale a pena ser notada é o menu do tipo Ribbon, introduzido no Office 2007. Este menu está localizado na parte superior da workspace do WebMatrix. Ele se contextualiza na medida em que você alterna o gerenciamento de seu site. Conforme o trabalho avança, vamos nos familiarizando com as ferramentas disponíveis no WebMatrix.

Nossa aplicação já está criada e configurada corretamente, entretanto, como criamos um projeto em branco não temos nenhum arquivo. Vamos então adicionar dois arquivos: o primeiro do tipo .cshtml (onde criaremos o formulário e a lógica da aplicação) e o segundo do tipo .css (onde estilizaremos nossa aplicação).

Antes de criarmos os arquivos, vamos parar nossa aplicação (por default quando se cria um novo projeto a aplicação já é criada e colocada em execução). Para isso, vá até o ribbon menu e clique em “Stop“. Muito bem, vamos agora criar os arquivos de nossa aplicação. Vá até a parte inferior do menu da esquerda, selecione a opção “Files“. Vá até o ribbon menu e clique em “New“. Na janela que se abre, veja que temos várias opções para trabalharmos em nossas aplicações. Como iremos utilizar o modelo razor, selecione a opção CSHTML, nomeie o arquivo para “Formulario.cshtml” e clique em OK. A Figura 7 apresenta este processo.

Figura 7: Escolhendo o tipo de arquivo para trabalhar na aplicação

Em seguida, realizando o mesmo processo apresentado pela Figura 7, adicione um arquivo do tipo CSS e renomeie-o para “CSSFormulario.css”. Se tudo correu bem, seu menu do lado esquerdo deve estar semelhante aquele apresentado na Figura 8.

Figura 8: Arquivos criados para a aplicação

Vamos então montar a estrutura de nosso formulário. Para isso, dê um duplo clique sobre o arquivo “Formulario.cshtml”. Ao visualizarmos o código podemos notar que o mesmo traz uma estrutura HTML simples. Entretanto, neste arquivo, podemos utilizar o modelo razor para processar as requisições e fazer a composição dos resultados. A Listagem 1 apresenta a composição de nosso formulário (apenas o HTML).

01	<!DOCTYPE html>
02	<html>

03	<head>
04	<title>Apresentando o WebMatrix e o Razor - Parte 1</title>

05	</head>
06	<body>

07
08	<h1>Apresentando o WebMatrix e o Razor - Parte 1</h1>

09
10	<form method="post" action="">

11
12	<div>

13	<label>Informe seu nome completo: </label>
14	<input type="text" size="100" id="tbNomeCompleto" name="tbNomeCompleto" />

15	</div>
16

17	<div>
18	<label>Informe seu e-mail: </label>

19	<input type="text" size="100" id="tbEmail" name="tbEmail" />
20	</div>

21
22	<div>

23	<input type="submit" id="botaoExibir" value="Exibir" />
24	</div>

25
26	</form>

27
28	</body>

29

</html>

Listagem 1:Estrtura HTML de nossa aplicação

A estrutura do HTML é simples, dois campos de texto e um botão que exibe as informações enviadas. Vamos então tratar as informações fornecidas pelo usuário. Para nosso exemplo, não devemos permitir que valores nulos sejam enviados. Para isso e para exibir os valores, vamos fazer uma pequena alteração em nosso HTML. Vamos escrever todo o código de validação no padrão razor e exibiremos os resultados do processo de validação em uma div, assim como os dados que o usuário digitou. O HTML alterado e pronto para ser executado pode ser visualizado na Listagem 2.

01	@{
02	//var resultado = new string("");

03
04	//Efetuando a validação

05	if(IsPost)
06	{

07	var errosEncontrados = false;
08	var nome = Request["tbNomeCompleto"];

09	var email = Request["tbEmail"];
10

11	if(nome.IsEmpty())
12	{

13	errosEncontrados = true;
14	@:Por favor, digite seu nome.<br />

15	}
16	if(email.IsEmpty())

17	{
18	errosEncontrados = true;

19	@:Por favor, digite seu e-mail.
20	}

21	if(errosEncontrados == false)
22	{

23	<text>
24	Nome Completo: @nome <br />

25	E-mail: @email
26	</text>

27	}
28	}

29	}
30

31	<!DOCTYPE html>
32	<html>

33	<head>
34	<title>Apresentando o WebMatrix e o Razor - Parte 1</title>

35	</head>
36	<body>

37
38	<h1>Apresentando o WebMatrix e o Razor - Parte 1</h1>

39
40	<form method="post" action="">

41
42	<div>

43	<label>Informe seu nome completo: </label>
44	<input type="text" size="100" id="tbNomeCompleto" name="tbNomeCompleto" value="" />

45	</div>
46

47	<div>
48	<label>Informe seu e-mail: </label>

49	<input type="text" size="100" id="tbEmail" name="tbEmail" value="" />
50	</div>

51
52	<div>

53	<input type="submit" id="botaoExibir" value="Exibir" />
54	</div>

55
56	</form>

57
58	</body>

59

</html>

Listagem 2:Validando os campos do formulário

No código apresentado na Listagem 2, temos a lógica da aplicação implementada, entretanto, não iremos entrar em maiores detalhes, pois nos próximos artigos o objeto de estudo será o padrão razor, assim, basta para nós saber neste instante que o código apresentado na Listagem 2 faz a validação do formulário. Vamos então estilizar nosso formulário. Para isso, abra o arquivo com a extensão .css criado anteriormente. O conteúdo sugerido para estilizar este formulário pode ser visualizado na Listagem 3, entretanto, você pode estilizá-lo da forma que achar conveniente.

01	h1 { font-family:"Lucida Sans Unicode"; font-size:150%; color:#666; letter-spacing:-1px; }
02

03	.TextoFormulario { font-family:"Lucida Sans Unicode"; font-size:75%; color:#666; }
04

05	#campo1 { padding:10px; }
06	#campo2 { padding:10px; }

07
08	.Input { width: 250px; background:#efefef; border: 1px solid #ccc; padding:5px; }

09
10	.Button { background:#666; border: 1px solid #333; font-family:"Lucida Sans Unicode"; font-size:90%; color:#fff; }

11
12	.Erro { font-family:"Lucida Sans Unicode"; font-size:90%; color:Red; letter-spacing:-1px; font-weight:bold; }

13
14	.Sucesso { font-family:"Lucida Sans Unicode"; font-size:90%; color:Green; letter-spacing:-1px; font-weight:bold; }

Listagem 3: CSS que configura o formulário

Agora que temos o formulário devidamente customizado, podemos então visualizar na Listagem 4 o formulário finalizado.

01	@{
02	//Efetuando a validação

03	if(IsPost)
04	{

05	var errosEncontrados = false;
06	var nome = Request["tbNomeCompleto"];

07	var email = Request["tbEmail"];
08

09	if(nome.IsEmpty())
10	{

11	errosEncontrados = true;
12	@:<p class="Erro">Por favor, digite seu nome.<br />

13	}
14	if(email.IsEmpty())

15	{
16	errosEncontrados = true;

17	@:Por favor, digite seu e-mail.</p>
18	}

19	if(errosEncontrados == false)
20	{

21	<text>
22	<p class="Sucesso">

23	Nome Completo: @nome <br />
24	E-mail: @email

25	</p>
26	</text>

27	}
28	}

29	}
30

31	<!DOCTYPE html>
32	<html>

33	<head>
34	<title>Apresentando o WebMatrix e o Razor - Parte 1</title>

35	<link href="CSSFormulario.css" rel="stylesheet" type="text/css" />
36	</head>

37	<body>
38

39	<h1>Apresentando o WebMatrix e o Razor - Parte 1</h1>
40

41	<form method="post" action="">
42

43	<div id="campo1">
44	<label class="TextoFormulario">Informe seu nome completo: </label>

45	<input type="text" size="100" id="tbNomeCompleto" name="tbNomeCompleto" value="" class="Input" />
46	</div>

47
48	<div id="campo2">

49	<label class="TextoFormulario">Informe seu e-mail: </label>
50	<input type="text" size="100" id="tbEmail" name="tbEmail" value="" class="Input" />

51	</div>
52

53	<div>
54	<input type="submit" id="botaoExibir" value="Exibir" class="Button" />

55	</div>
56

57	</form>
58

59	</body>
60	</html>

Listagem 4: Formulario finalizado

Muito bem, nosso formulário está devidamente programado e estilizado. O que nos falta agora é efetuar o teste, ver se tudo está funcionando como o esperado. A Figura 8 apresenta o teste realizado com o formulário.

Figura 8: Testando o funcionamento do aplicativo

Bom pessoal, para este primeiro artigo é isso. Baixem o WebMatrix e começem a brincar. Tenho certeza de que irão gostar ele é bastante funcional para aplicações de pequeno e médio porte. Nos próximos artigos falaremos mais especificamente sobre o razor, não perca!