ScottGu's Blog em Português

Este é o sexto de uma série de posts que estou escrevendo sobre o próximo lançamento do VS 2010 e .NET 4.

O post de hoje é sobre outra melhoria útil presente no VS 2010 – suporte a snippets de HTML/ASP.NET/JavaScript. Snippets (pedaços/fragmentos de código) permitem que você seja mais produtivo dentro da visão de código permitindo que você crie agrupamentos de código e linguagem de marcação HTML que você pode rapidamente aplicar e usar em sua aplicação com um mínimo de digitação.

Usando Snippets da ASP.NET

Vamos seguir um passo a passo que mostra como nós podemos usar snippets para rapidamente implementar um cenário de segurança comum. Especificamente, nós implementaremos a funcionalidade necessária para mostrar ou um link "[ Login ]" ou uma mensagem de boas-vindas "[ Welcome UserName ]" no topo direito do site dependendo se o usuário está ou não logado:

A funcionalidade acima é automaticamente adicionada para você quando você cria um projeto usando os novos Modelos de Projeto Iniciais da ASP.NET no VS 2010. Por ocasião deste passo a passo, nós iremos assumir que estamos começando com uma página master (principal) em branco e iremos construí-la inteiramente do início.

Nós começaremos adicionando um elemento <div> padrão na página master, e então posicionaremos nosso cursor do mouse dentro deste div:

Nós vamos usar o controle <asp:loginview> para nos ajudar a implementar esse cenário. O controle <asp:longinview> é um controle que usa template (e foi introduzido pela primeira vez na ASP.NET 2.0) o qual nos permite facilmente mudar entre os templates “Anonymous” (Anônimo) e “LoggedIn” (Logado) que são automaticamente mostrados dependendo se o usuário está autenticado ou não. Ao invés de digitar a linguagem de marcação do controle <asp:loginview> manualmente, nós usaremos o novo suporte a snippets do VS 2010.

Nós selecionaremos o snippet de código já construído "loginview" presente na lista acima e pressionaremos a tecla "tab" para completá-lo:

Agora que nós selecionamos o snippet que queremos usar, nós podemos pressionar a telca "tab" novamente para executar o snippet – o que fará com que este imediatamente substitua o nome do snippet com a linguagem de marcação mostrada a seguir. Note que o snippet adicionou um novo controle <asp:loginview> para nós e automaticamente definiu os dois templates mais comumente usados no controle. Nós fomos capazes de implementar isto tudo com somente 6 teclas pressionadas (4 teclas pressionadas para digitar "<log", e então pressionamos 2 vezes a tecla "tab").

Nós iremos agora implementar o template "AnonymousTemplate".

Digitando "<a" no editor trará a intellisense que mostrará os elementos e snippets de código disponíveis que nós podemos usar:

Nós selecionaremos o snippet de código já pronto "a" presente na lista acima e pressionaremos a tecla "tab" para completá-lo. Quando nós pressionarmos a tecla tab novamente, o snippet será executado – o que fará com que o que digitamos seja substituído pelo nome do snippet com o seguinte código de marcação:

O valor do atributo "href" e conteúdo interno do elemento <a> acima são destacados com uma cor de fundo verde. Isto indica que estes valores são parâmetros substituíveis e que nós podemos automaticamente pressionar tab para preenchê-los – evitando a necessidade de usar as teclas do cursor ou tocar o mouse (tornando as coisas muito mais rápidas).

Quando terminado, nós podemos pressionar a tecla "tab" e o VS irá automaticamente destacar o segundo parâmetro de conteúdo no editor para nós (sem necessidade de movimentar o cursor manualmente ou de ativar uma ação com o mouse):

Nós podemos então digitar o texto que queremos mostrar (novamente sem ter que mover o mouse ou tocar a tecla do cursor):

Uma vez terminado com o "<AnonymousTemplate>”" nós podemos partir para o "<LoggedInTemplate>”. Nós digitaremos "<log" no editor para trazer a intellisense – e selecionaremos o snippet "loginname" já pronto:

Quando nós pressionarmos a tecla tab, o snippet será executado – o que fará com que o que digitamos seja substituído pela marcação HTML a seguir:

O valor da propriedade "FormatString" acima foi automaticamente preenchido para nós com o texto da mensagem padrão de boas-vindas. O valor também é automaticamente destacado caso desejemos alterá-lo (sem a necessidade de mover o mouse ou as teclas do cursor). Para este exemplo nós iremos manter o texto padrão.

Quando nós executarmos nossa aplicação, a marcação acima mostrará um link "[Login]" quando nós não estivermos autenticados:

Quando nós estivermos logados, nós veremos uma string de boas-vindas igual a seguir:

O número total de teclas que pressionamos para implementar todo este cenário é menor que 15% daquilo que teríamos que digitar anteriormente. Digitando rápido eu pude perceber que eu poderia implementar este cenário completo em menos de 15 segundos :-)

Snippets da ASP.NET MVC

Snippets prontos estão disponíveis para todos os controles da ASP.NET e elementos de marcação HTML.

Snippets prontos também estão disponíveis para cenários de visão da ASP.NET MVC, e para os métodos de ajuda HTML da ASP.NET MVC.

Por exemplo, nós podemos digitar "<act" dentro de uma visão da ASP.NET MVC e em seguida selecionar o snippet "actionlink":

Quando nós completamos esta ação e pressionamos a tecla "tab", o snippet será executado – o que fará com que o que digitamos seja substituído pelo nome do snippet com a marcação HTML a seguir:

Note que os valores "linktext" e "actionname" são marcados como parâmetros do snippet – isto significa que nós podemos facilmente substituí-los sem ter que usar as teclas do cursor ou tocar o mouse. O valor do primeiro parâmetro "linktext" é selecionado por padrão – o que significa que nós podemos simplesmente digitar para imediatamente substituir o valor, e então podemos pressionar a tecla tab para imediatamente selecionar e substituir o segundo parâmetro "actionname":

Snippets Customizados