Assine:
Coldfusion 8: Formulários De Auto-sugestão
Coldfusion 8: formulários de auto-sugestão
Escrito por Tofinha em ColdFusion. Data: 12/08/2007
Licença: Alguns direitos reservados. Dar créditos ao autor e linkar este original
Salve Galera!
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):
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:
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:
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
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):
CODE
[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>
<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:
CODE
<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>
<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:
CODE
<cfform>
Art:
<cfinput type="text"
name="artname"
autosuggest="cfc:art.lookupArt({cfautosuggestvalue})">
</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
Mais recentes em ColdFusion
- Coldfusion 8: ajax tutorial 4 - atualização
- Por Tofinha - Salve galera! - dando sequência a série de posts...
- Cold fusion 8: ajax tutorial 3 - live data grids
- Por Tofinha - Salve galera! - dando sequência a série de posts...
- Coldfusion 8: selects relacionados
- Por Tofinha - Dando sequência a série de posts do ben forta, postamos...
- Coldfusion 8: formulários de auto-sugestão
- Por Tofinha - Salve galera! - ando meio ocupado devido a minha...
- Gerando arquivos pdf e flashpaper
- Por Tofinha - Simples e rápido...
Ver mais Artigos de ColdFusion.
Ver e retirar outras dúvidas no fórum Webly.
Alguns Direitos Reservados | RSS | O Fórum
Webly Portal e Fóruns - Internet + Humana | Design by ArthurHenrique.com
Comentários:
CRSramone disse:
Ver o restante dos comentários no fórum (e aproveitar pra comentar também !).