A Microsoft trouxe novamente ao cenário de
desenvolvimento de sites e de aplicações web o WebMatrix, totalmente
remodelado e com foco em aplicações de pequeno e médio porte.

O WebMatrix ainda permite desenvolver em diversas linguagens, como o PHP e é integrado com as principais plataformas, como o WordPress. Outra enorme vantagem é podermos criar nossas aplicações utilizando a nova view engine da Microsoft – Razor.

Fica a recomendação do WebMatrix para toda a comunidade de desenvolvedores e abaixo falo um pouco mais sobre o seu uso.

O WebMatrix

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

Para se ter uma ideia sobre as ferramentas que compõem esse 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 outros.

Alguns aspectos importantes

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
esse 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 é gratuita. Para a instalação, é preciso utilizar o Web Platform
Installer, que 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, clique aqui. 

A instalação do WebMatrix é extremamente simples e o processo pode ser visualizado neste link.

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.

Vamos lá, inicialize o 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 das opções.

Do lado esquerdo, temos a opção “My Sites”. Intuitivamente, ao clicar nessa opção, você será levado a seus projetos criados com o WebMatrix. Por default, o WebMatrix salva seus projetos em “C:UsersSeu_UsuarioDocumentsMy 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.

À direita da opção “My Sites“, temos a opção “Site From Web Gallery“.
Com essa 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 nessa
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 deles. A figura abaixo apresenta esse processo.

Escolhendo a estrutura adequada na galeria

À direita da opção “Site From Web Gallery“, temos a opção “Site From Template“. Essa é uma das novidades do WebMatrix. Ao clicar nessa 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). Veja a tela
de escolha do modelo que melhor se adequa a sua necessidade.

Escolhendo o template na opção Site From Template

Finalmente, a última dentre as opções existentes na tela de abertura é “Site From Folder”.
Essa opção trata basicamente de criarmos um site em branco e o
direcionarmos para uma pasta específica. Ao clicar-se nessa 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.

Após explorarmos as funcionalidades de cada item da tela de abertura,
vamos então criar um pequeno aplicativo web
com o WebMatrix. Nesse simples aplicativo, temos uma página .cshtml que
possui dois campos de texto, “Nome” e “E-mail”, e um botão,”Exibir”. O
nosso aplicativo vai fazer com que nosso aplicativo, ao clicar-se em
“Exibir”, o sistema mostrará os
dados digitados pelo usuário nos campos “Nome” e “E-mail”. Como
mencionei anteriormente, a ideia 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 imagem acima já apresenta a funcionalidade de
criarmos um site em branco e apontarmos esse site para uma pasta. Para
este exemplo, é exatamente isso que faremos, portanto, ela 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:

Ambiente de trabalho do WebMatrix

Na tela apresentada, estão
presentes todos os recursos de configuração e de 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. Esse 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 a view engine razor, selecione a opção CSHTML, nomeie o arquivo para “Formulario.cshtml” e clique em OK.

Escolhendo o tipo de arquivo para trabalhar na aplicação

Em seguida, realizando o mesmo processo
apresentado pela figura acima, adicione um arquivo do tipo CSS e renomeie-o
para “CSSFormulario.css”. Se tudo correu bem, seu menu do lado esquerdo
deve estar semelhante ao apresentado abaixo:

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 ele
traz uma estrutura HTML simples. Entretanto, nesse arquivo, podemos
utilizar o modelo razor para processar as requisições para e fazer a
composição dos resultados. A Listagem 1 apresenta a composição de nosso
formulário (apenas o HTML).

<!DOCTYPE html>
<html>
    <head>
        <title>Apresentando o WebMatrix e o Razor - Parte 1</title>
    </head>
    <body>

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

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

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

            <div>
                <label>Informe seu e-mail: </label>
                <input type="text" size="100" id="tbEmail" name="tbEmail" />
            </div>

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

        </form>

    </body>
</html>

Listagem 1: Estrutura 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.

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

    //Efetuando a validação
    if(IsPost)
    {
        var errosEncontrados = false;
        var nome = Request["tbNomeCompleto"];
        var email = Request["tbEmail"];

        if(nome.IsEmpty())
        {
            errosEncontrados = true;
            @:Por favor, digite seu nome.<br />
        }
        if(email.IsEmpty())
        {
            errosEncontrados = true;
            @:Por favor, digite seu e-mail.
        }
        if(errosEncontrados == false)
        {
            <text>
                Nome Completo: @nome <br />
                E-mail: @email
            </text>
        }
    }
}

<!DOCTYPE html>
<html>
    <head>
        <title>Apresentando o WebMatrix e o Razor - Parte 1</title>
    </head>
    <body>

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

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

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

            <div>
                <label>Informe seu e-mail: </label>
                <input type="text" size="100" id="tbEmail" name="tbEmail" value="" />
            </div>

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

        </form>

    </body>
</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
esse formulário pode ser visualizado na Listagem 3, entretanto, você
pode estilizá-lo da forma que achar conveniente.

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

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

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

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

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

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

.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.

@{
    //Efetuando a validação
    if(IsPost)
    {
        var errosEncontrados = false;
        var nome = Request["tbNomeCompleto"];
        var email = Request["tbEmail"];

        if(nome.IsEmpty())
        {
            errosEncontrados = true;
            @:<p class="Erro">Por favor, digite seu nome.<br />
        }
        if(email.IsEmpty())
        {
            errosEncontrados = true;
            @:Por favor, digite seu e-mail.</p>
        }
        if(errosEncontrados == false)
        {
            <text>
                <p class="Sucesso">
                Nome Completo: @nome <br />
                E-mail: @email
                </p>
            </text>
        }
    }
}

<!DOCTYPE html>
<html>
    <head>
        <title>Apresentando o WebMatrix e o Razor - Parte 1</title>
        <link href="CSSFormulario.css" rel="stylesheet" type="text/css" />
    </head>
    <body>

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

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

            <div id="campo1">
                <label class="TextoFormulario">Informe seu nome completo: </label>
                <input type="text" size="100" id="tbNomeCompleto" name="tbNomeCompleto" value="" class="Input" />
            </div>

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

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

        </form>

    </body>
</html>

Listagem 4: Formulário finalizado

Chamo a atenção ainda para o poder do arroba. Com o @, podemos ganhar produtividade, inserindo código em meio ao nosso html.

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. Veja o teste realizado com o formulário:

Testando o funcionamento do aplicativo

Bom, pessoal, este foi apenas nosso primeiro artigo. Baixem o WebMatrix e começem a brincar. Tenho certeza de que irão
gostar, ele é bastante funcional para aplicações de pequeno e de médio
porte.

Não se esqueça de deixar seus comentários ao
final da leitura! Lembre-se: esta é a chance de podermos melhorar cada
vez mais nossos textos e nos manter incentivados a produzir.