Suporte JavaScript e AJAX do Visual Studio 2008

Mudámos de casa – visitem o novo site em www.istomesmo.com

image Este posting vai ser especialmente grande! Pois o Visual Studio 2008 está cheio de novidades relacionada com o desenvolvimento de JavaScript.

 

A principal novidade, muito esperada nos últimos tempos, é o intellisense para JavaScript, que vem tornar a sua programação muito mais natural, proporcionando ao desenvolvedor um ambiente menos propício a erros, e um desenvolvimento muito mais rápido.

Desde há algum tempo atrás que se tem tentado implementar esta funcionalidade, o problema é que o JavaScript é uma linguagem não tipada, ou seja, até a variável ser inicializada com o valor o seu tipo é desconhecido, pois pode ser qualquer. Para contornar este problema, o intellisense usa inferência, adaptando-se ao tipo que as variáveis assumem no código. Nos exemplos seguintes vão ficar a perceber melhor este conceito.

Vamos começar por criar um novo website no Visual Studio 2008, para a framework 3.5. Nesse site vamos criar uma página com uma calculador simples em javascript. Começamos por criar uma função “sum”, que vai somar dois números. Ao começarmos a escrever function, o intellisense é-nos logo apresentado.

image

Para percebermos melhor o funcionamento do intellisense por inferência, vamos criar uma variável de teste e instânciá-la com uma string.

image

Como podemos ver pela imagem anterior, o intellisense analisou a variável e como esta estava instânciada como string, só apresenta as opções para variáveis desse tipo. Se agora atribuirmos um “int” à variável, o intellisense vai adaptar-se e só mostrar as opções para “ints”.

image

Voltando ao exemplo da calculadora, vamos criar a função que vai receber dois números, vai somá-los. Como esta função poderá ser necessária noutras páginas, vamos criá-la num ficheiro JavaScript à parte.

image

Como vamos utilizar esta função fora do ficheiro, é melhor que a mesma esteja documentada, para sabermos qual a sua finalidade quando a mesma aparece no intellisense. Esta situação está prevista pelo Visual Studio 2008, e só temos de documentar a função utilizando um formato semelhante ao usado no ASP.NET. Noutro post irei dar mais detalhes sobre este formato.

Vamos então documentar a função:

image

Como podemos ver pela imagem anterior, podemos definir um resumo da função (summary), o tipo de parâmetros que a função recebe, e qual o resultado que é devolvido. Estes comentários poderão depois ser extraídos, gerando um documento com toda a documentação.

Agora que já temos a função criada, vamos construir o interface da aplicação, adicionando duas textboxs, um span e um botão à nossa página aspx.

image

Necessitamos também de adicionar uma referência ao ficheiro JavaScript onde criámos a função, bastando arrastá-lo da Solution Explorer para cima do design, sendo automaticamente criada a referência para o mesmo.

image

Na nossa página vamos chamar a função acabada de criar, para somar os valores introduzidos nas textboxs.

image

Como é visível na imagem anterior, o intellisense apresenta-nos a função criada, bem como o resumo que adicionamos na documentação da mesma. Na introdução dos parâmetros, o intellisense mostra-nos também o que cada parâmetro deve receber.

image

Depois da soma, vamos mostrar o resultado no span “txtResult” criado anteriormente, para isso, vamos usar o novo comando “$get” introduzido pelo ASP.NET AJAX. Este comando permite obter um elemento do DOM, de forma semelhante ao document.getElementByID, mas sem a necessidade de nos preocuparmos com compatibilidades do browser. Também para estes comando temos o intellisense.

image

A página deverá neste momento conter o código seguinte:

<body>

<form id=”form1″ runat=”server”>

<div>

<asp:ScriptManager ID=”ScriptManager1″ runat=”server”>

</asp:ScriptManager>

<script language=”javascript” type=”text/javascript”>

function sum(number1, number2)

{

var result = soma(parseInt(number1), parseInt(number2));

$get(“txtResult”).innerHTML = result;

}

</script>

</div>

<div>

<input type=”text” id=”txtNumb1″ />

+

<input type=”text” id=”txtNumb2″ />

= <span id=”txtResult” style=”width: 100px;“> </span>

<input type=”button” id=”btnOk” onclick=”javascript:sum($get(‘txtNumb1’).value, $get(‘txtNumb2’).value);”

value=”Somar” />

</div>

</form>

</body>

Podem testar a página e verificar que conseguem efectuar somas correctamente, sem refrescamento da página, apenas com JavaScript.

O Visual Studio 2008 tem ainda um excelente suporte para a criação de bibliotecas JavaScript. Vamos supor que queremos criar outro ficheiro JavaScript onde vamos necessitar da função “soma” do ficheiro JScript.js. Para termos intellisense das funções existentes no ficheiro criado anteriormente, necessitamos de referenciá-lo no novo. Como podem ver na imagem seguinte, basta uma pequena linha de código, para que o Visual Studio 2008 nos disponibilize o intellisense para as funções do outro ficheiro.

image

Com esta funcionalidade o desenvolvimento de JavaScript estruturado em vários ficheiros torna-se bastante mais simples, usando estes comentários “reference”. Podemos até referenciar a biblioteca do ASP.NET AJAX para termos acesso às novas funções disponibilizadas.

image

O Visual Studio 2008 possui também intellisense para os novos webservices que são disponibilizados através da plataforma ASP.NET AJAX. Estes webservices podem depois ser consumidos através de JavaScript nas páginas. O intellisense do Visual Studio 2008 reconhece as funções destes webservices e mostra-as, para que seja mais fácil a sua invocação.

Para testarmos, podemos criar um novo WebService no site, com a seguinte função:

image

Descomentando a linha [System.Web.Script.Services.ScriptService], para que este webservice possa ser utilizado pelo ASP.NET AJAX (JavaScript).

Depois no ScriptManager referenciamos este WebService.

image

Assim que executarmos este passo, passamos a ter as funções do WebService disponíveis no intellisense.

image

Como puderam ver através deste extenso artigo, o intellisense de JavaScript do Visual Studio 2008 sofreu melhoramentos muito grandes, tornando o desenvolvimento de JavaScript muito mais fácil e agradável.

O debug do JavaScript será abordado noutro artigo, pois este já está demasiadamente grande.

Se tiverem dúvidas deixem um comentário.🙂

3 Respostas

  1. Suporte JavaScript e AJAX do Visual Studio 2008 Isto Mesmo

    Artigo sobre as novas funcionalidades de desenvolvimento JavaScript no Visual Studio 2008

  2. Bom dia, Parabéns pelo artigo. Muito bem escrito.
    Realizei o passo a posso do seu artigo mas continuo sem conseguir visualizar com intellisense o webservice.
    Tem que importa alguma dll ?

Deixe uma Resposta

Preencha os seus detalhes abaixo ou clique num ícone para iniciar sessão:

Logótipo da WordPress.com

Está a comentar usando a sua conta WordPress.com Terminar Sessão / Alterar )

Imagem do Twitter

Está a comentar usando a sua conta Twitter Terminar Sessão / Alterar )

Facebook photo

Está a comentar usando a sua conta Facebook Terminar Sessão / Alterar )

Google+ photo

Está a comentar usando a sua conta Google+ Terminar Sessão / Alterar )

Connecting to %s

%d bloggers like this: