Entrar
Cadastre-se
Ajuda
Responder
Ando meio ocupado devido a minha empresa, mas sempre que posso to por aqui.
Postei no meu blog alguns tutoriais traduzidos do mestre Ben Forta, o grande nome do ColdFusion, com sua devida autorização, sobre as novidades do CF8.
Segue então os posts aqui tb!
Informações:
Post original: ColdFusion Ajax Tutorial 1: Auto-Suggest
Autor: Ben Forta
Dando sequência...
Ben Forta pretende postar uma série de exemplos demonstrando como usar a nova funcionalidade Ajax no Coldfusion 8 (muitos baseados em exemplos usados durante seu último passeio pelos usergroups).
Primeiro ele começa falando sobre o controle de auto-sugestão.
Auto-sugestão é uma input text modificada, que exibe uma lista de sugestões. O controle de auto-sugestão pode ser usado no ColdFusion de duas formas: com dados locais do cliente, e com retorno assíncrono para o ColdFusion.
Aqui tem um exemplo simples dos dados no lado do cliente (que utiliza um dos exemplos do banco de dados do CF8):
[i]<!--- Pega dados --->[/i] <cfquery datasource="cfartgallery" name="data"> SELECT artname FROM art ORDER BY artname </cfquery> [i]<!--- o formulario --->[/i] <cfform> Art: <!--- Popula controle auto-suggest ---> <cfinput type="text" name="artname" autosuggest="#ValueList(data.artname)#"> </cfform>
Esse form exibe uma caixa de texto simples, mas no momento em que é digitado o texto, as sugestões são exibidas. As listas de sugestões são passadas para o atributo de auto-sugestão que aceita uma lista delimitada por vírgulas.
A lista pode ser difícil de codificar, mas aqui a lista de valores está sendo usada para construir dinamicamente uma lista baseada em um banco de dados de busca anterior.
Esse não é um controle do Ajax em que os buscadores não são assíncronos, não há comunicação de volta para o servidor para acessar dados, todo dado é local. Essa é realmente a forma mais simples e preferida de auto-sugestão para as listas menores.
Para listas maiores é preferível a interação assíncrona, e o controle de auto-sugestão suporta isso permitindo chamadas assíncronas para um componente do ColdFusion. Aqui está um exemplo com CFC:
<cfcomponent output="false">
<cfset THIS.dsn="cfartgallery">
<!--- metodo Lookup usado para a auto-sugestão --->
<cffunction name="lookupArt" access="remote" returntype="array">
<cfargument name="search" type="any" required="false" default="">
[i]<!--- Definindo as variáveis --->[/i]
<cfset var data="">
<cfset var result=ArrayNew(1)>
[i]<!--- realizando a busca --->[/i]
<cfquery datasource="#THIS.dsn#" name="data">
SELECT artname
FROM art
WHERE UCase(artname) LIKE Ucase('#ARGUMENTS.search#%')
ORDER BY artname
</cfquery>
[i]<!--- transpondo o resultado para um array --->[/i]
<cfloop query="data">
<cfset ArrayAppend(result, artname)>
</cfloop>
[i]<!--- dando o retorn --->[/i]
<cfreturn result>
</cffunction>
</cfcomponent>Esse CFC tem um método chamado "lookupArt" que aceita um string e executa uma query para encontrar todas as combinações que começam com o valor especificado. A auto-sugestão precisa que os resultados voltem em um array unidimensional (mas, isso mudará antes de chegarem ao produto final), e então o código ocupa um array com os resultados retornados.
Agora para o código modificado usando esse CFC e esse método:
<cfform>
Art:
<cfinput type="text"
name="artname"
autosuggest="cfc:art.lookupArt({cfautosuggestvalue})">
</cfform>Aqui o auto-sugestão aponta para o CFC, e como o CFC (Ben o nomeou art.cfc) está na pasta atual, nenhum caminho precisa ser especificado. Quando o usuário digita um valor, o código Javascript gerado desencadeia uma chamada assíncrona para o método lookupArt em art.cfc. {cfautosuggestvalue} é automaticamente substituído por qualquer valor que o usuário tiver digitado, e esse valor é então usado pelo CFC no buscador. Quando um array de resultados é retornado, a lista de auto-sugestão é ocupada.Aqui um exemplo que fizemos trazendo o nome das cidades:
Exemplo Auto-sugestão
Quote