[Tofinha]

Salve galera!

Dando sequência a série de posts do Ben Forta, postamos agora o seu quarto post que trata das novas funções e incrementos do Ajax nesta nova versão.

Informações:
Post original: ColdFusion Ajax Tutorial 4: Partial Page Updates
Autor: Ben Forta

Aplicações AJAX permitem que os desenvolvedores atualizem partes da página da web sem precisar restaurar a página inteira. Clicar em um link e outra área da tela é atualizada, clicar com a seta para aumentar ou diminuir uma caixa de detalhe inline, submeter um formato e receber a confirmação sem atualizar a página e assim por diante.

Esse tipo de interação usa uma chamada http assíncrona e retorna para o servidor para adicionar dados, ou processar formatos de submissão, e assim por diante e o cliente Javascript atualiza partes específicas da página (usualmente definida usando tags <DIV>).

O ColdFusion 8 faz esse tipo de interação muito simples, permitindo que controles sejam ligados para outros controles, assim quando um controle muda (ou ocorre um evento) um segundo controle pode ser atualizado fazendo uma chamada assíncrona para o ColdFusion no servidor.

Para demonstrar isso, aqui temos um simples exemplo. Uma lista de itens de art é exibida em um controle <SELECT>, e clicando em qualquer item atualiza uma descrição abaixo dele. A lista de descrições não está no cliente, pelo contrário, quando um item de art é selecionado o seguinte método no CFC é invocado:

<cfcomponent output="false">
  <cfset THIS.dsn="cfartgallery">
	 [i]<!--- Pega uma descriçao de arte --->[/i]
	 <cffunction name="getArtDescription" access="remote" returnType="string">
		<cfargument name="artid" type="numeric" required="true">
		[i]<!--- Define as variaveis --->[/i]
		<cfset var data="">
		<cfset var result="">
		[i]<!--- pega os dados  --->[/i]
		<cfquery name="data" datasource="#THIS.dsn#">
		SELECT description
		FROM art
		WHERE artid = #ARGUMENTS.artid#
		</cfquery>
		[i]<!--- Pegou?  --->[/i]
		<cfif data.RecordCount IS 1>
		   <cfset result=data.description>
		</cfif>
		[i]<!--- e retorna isso --->[/i]
		<cfreturn result>
	 </cffunction>
  </cfcomponent>

O método aceita um identificador da art e retorna a descrição de arte como uma string.
Agora vamos para o código cliente side:

[i]<!--- pega lista de artes --->[/i]
  <cfquery datasource="cfartgallery" name="art">
  SELECT artid, artname
  FROM art
  ORDER BY artname
  </cfquery>
  
  [i]<!--- mostra lista de artes --->[/i]
  <cfform>
  <cfselect name="artid"
		query="art"
		display="artname"
		value="artid"
		size="10" />
  </cfform>
  
  [i]<!--- DIV para descirção --->[/i]
  <cfdiv bind="cfc:art.getArtDescription({artid})"
	 style="background-color:grey; color:white; height:100; width:200" />

Primeiro a lista de art é restabelecida (e sim, esse é um exemplo ruim, a query deveria estar no CFC também e não no cliente, mas eu quis manter esse exemplo o mais simples possível). <CFSELECT> é usado para exibir a lista de itens de art. E então <CFDIV> é usada para definir uma <DIV> e para estabelecer uma ligação. Esse <DIV> vai para o método CFC anterior, e passa {artid} (o nome do controle <SELECT>) como um argumento. Desse modo, toda vez que a seleção no <SELECT> muda, o binding é disparado, o método no CFC é invocado, e a exibição é atualizada com a string retornada.