Assine:
Coldfusion 8: Selects Relacionados
Coldfusion 8: selects relacionados
Escrito por Tofinha em ColdFusion. Data: 12/08/2007
Licença: Alguns direitos reservados. Dar créditos ao autor e linkar este original
Dando sequência a série de posts do Ben Forta, postamos agora o seu segundo post que trata de Selects relacionados.
Informações:
Post original: ColdFusion Ajax Tutorial 2: Related Selects
Autor: Ben Forta
Muito de nós desenvolvemos listas de seleção relacionadas, formulários com dois (ou mais) controles drop down <SELECT>, onde fazer uma mudança em um controle causa mudanças nas seleções disponíveis no controle relacionado. Por exemplo, selecionar uma categoria em um controle exibe produtos de categoria no controle relacionado, ou selecionar um estado em um controle atualiza um controle relacionado com as cidades desse estado.
Esses controles são tipicamente implementados usando JavaScript para processar arrays de dados embutidos na página.
A nova funcionalidade Ajax do ColdFusion 8 faz esse tipo de interface realmente fácil, sem requerer nenhuma codificação client-side, ou que todos os dados estejam embutidos na página gerada. Ao invés disso, controles de <CFSELECT> podem ser passados para os métodos dos componentes do ColdFusion que são assincronicamente invocados quando necessário.
Para demonstrar isso, aqui está um exemplo que usa um dos bancos de dados do exemplo que vem com ColdFusion. Primeiro o Componente do ColdFusion:
Esse CFC contém dois métodos. getMedia, que retorna todos os tipos de mídia no banco de dados catálogo de artes, e getArt, que aceita o id de mídia e retorna qualquer arte que esteja associada com aquele id passado. Os dois métodos convertem seus resultados em arrays bidimensionais, com a primeira dimensão contendo o id (para ser usado como o valor no controle <SELECT>) e o segundo contendo o texto de exibição. (Agora, esse array bidimensional está no formato requerido pelo <CFSELECT>).
Agora o formulário:
O formulário contém dois controles <CFSELECT>, um chamado "mediaid" e o outro chamado "artid".
"mediaid" é ligado ao cfc: art.getMedia(), e então obtém a lista de tipos de mídia para popular o controle, o cliente faz uma chamada assíncrona para o método getMedia em art.cfc, e popula a lista com o array retornado.
Como nós queremos que esse controle esteja automaticamente populado quando os formulários carregam, bindonload é setado pra "true", assim a chamada ao método getMedia() é disparada automaticamente no tempo de carregamento do formulário. "artid" é ligado ao método getArt em art.cfc.
Esse método requer que um mediaid seja passado para ele, então {mediaid} é usado para passar o valor selecionado no controle mediaid (o primeiro <CFSELECT>). Como estes dois controles estão interligados, o segundo depende do primeiro e ColdFusion gera automaticamente um código JavaScript que força artid a ser repopulado com dados recuperados toda vez que o mediaid mudar.
Esse exemplo relaciona só dois controles, mas esse mecanismo pode ser usado para relacionar muitos controles, e não só controles <CFSELECT>.
Informações:
Post original: ColdFusion Ajax Tutorial 2: Related Selects
Autor: Ben Forta
Muito de nós desenvolvemos listas de seleção relacionadas, formulários com dois (ou mais) controles drop down <SELECT>, onde fazer uma mudança em um controle causa mudanças nas seleções disponíveis no controle relacionado. Por exemplo, selecionar uma categoria em um controle exibe produtos de categoria no controle relacionado, ou selecionar um estado em um controle atualiza um controle relacionado com as cidades desse estado.
Esses controles são tipicamente implementados usando JavaScript para processar arrays de dados embutidos na página.
A nova funcionalidade Ajax do ColdFusion 8 faz esse tipo de interface realmente fácil, sem requerer nenhuma codificação client-side, ou que todos os dados estejam embutidos na página gerada. Ao invés disso, controles de <CFSELECT> podem ser passados para os métodos dos componentes do ColdFusion que são assincronicamente invocados quando necessário.
Para demonstrar isso, aqui está um exemplo que usa um dos bancos de dados do exemplo que vem com ColdFusion. Primeiro o Componente do ColdFusion:
CODE
<cfcomponent output="false">
<cfset THIS.dsn="cfartgallery">
[i]<!--- definindo um array para o tipo de midias --->[/i]
<cffunction name="getMedia" access="remote" returnType="array">
[i]<!--- Definindo as variaveis --->[/i]
<cfset var data="">
<cfset var result=ArrayNew(2)>
<cfset var i=0>
[i][i]<!--- realizando a busca --->[/i][/i]
<cfquery name="data" datasource="#THIS.dsn#">
SELECT mediaid, mediatype
FROM media
ORDER BY mediatype
</cfquery>
[i][i]<!--- Convertendo o resultado em array --->[/i][/i]
<cfloop index="i" from="1" to="#data.RecordCount#">
<cfset result[i][1]=data.mediaid[i]>
<cfset result[i][2]=data.mediatype[i]>
</cfloop>
[i][i]<!--- retornando o resultado --->[/i][/i]
<cfreturn result>
</cffunction>
[i]<!--- trazendo o artista pelo id da midia --->[/i]
<cffunction name="getArt" access="remote" returnType="array">
<cfargument name="mediaid" type="numeric" required="true">
[i]<!--- Define variables --->[/i]
<cfset var data="">
<cfset var result=ArrayNew(2)>
<cfset var i=0>
<!--- realizando a busca --->
<cfquery name="data" datasource="#THIS.dsn#">
SELECT artid, artname
FROM art
WHERE mediaid = #ARGUMENTS.mediaid#
ORDER BY artname
</cfquery>
<!--- Convertendo o resultado em array --->
<cfloop index="i" from="1" to="#data.RecordCount#">
<cfset result[i][1]=data.artid[i]>
<cfset result[i][2]=data.artname[i]>
</cfloop>
<!--- retornando o resultado --->
<cfreturn result>
</cffunction>
</cfcomponent>
<cfset THIS.dsn="cfartgallery">
[i]<!--- definindo um array para o tipo de midias --->[/i]
<cffunction name="getMedia" access="remote" returnType="array">
[i]<!--- Definindo as variaveis --->[/i]
<cfset var data="">
<cfset var result=ArrayNew(2)>
<cfset var i=0>
[i][i]<!--- realizando a busca --->[/i][/i]
<cfquery name="data" datasource="#THIS.dsn#">
SELECT mediaid, mediatype
FROM media
ORDER BY mediatype
</cfquery>
[i][i]<!--- Convertendo o resultado em array --->[/i][/i]
<cfloop index="i" from="1" to="#data.RecordCount#">
<cfset result[i][1]=data.mediaid[i]>
<cfset result[i][2]=data.mediatype[i]>
</cfloop>
[i][i]<!--- retornando o resultado --->[/i][/i]
<cfreturn result>
</cffunction>
[i]<!--- trazendo o artista pelo id da midia --->[/i]
<cffunction name="getArt" access="remote" returnType="array">
<cfargument name="mediaid" type="numeric" required="true">
[i]<!--- Define variables --->[/i]
<cfset var data="">
<cfset var result=ArrayNew(2)>
<cfset var i=0>
<!--- realizando a busca --->
<cfquery name="data" datasource="#THIS.dsn#">
SELECT artid, artname
FROM art
WHERE mediaid = #ARGUMENTS.mediaid#
ORDER BY artname
</cfquery>
<!--- Convertendo o resultado em array --->
<cfloop index="i" from="1" to="#data.RecordCount#">
<cfset result[i][1]=data.artid[i]>
<cfset result[i][2]=data.artname[i]>
</cfloop>
<!--- retornando o resultado --->
<cfreturn result>
</cffunction>
</cfcomponent>
Esse CFC contém dois métodos. getMedia, que retorna todos os tipos de mídia no banco de dados catálogo de artes, e getArt, que aceita o id de mídia e retorna qualquer arte que esteja associada com aquele id passado. Os dois métodos convertem seus resultados em arrays bidimensionais, com a primeira dimensão contendo o id (para ser usado como o valor no controle <SELECT>) e o segundo contendo o texto de exibição. (Agora, esse array bidimensional está no formato requerido pelo <CFSELECT>).
Agora o formulário:
CODE
<cfform>
<table>
<tr>
<td>Selecione o tipo de Midia:</td>
<td><cfselect name="mediaid"
bind="cfc:art.getMedia()"
bindonload="true" /></td>
</tr>
<tr>
<td>Selecione o Artista:</td>
<td><cfselect name="artid"
bind="cfc:art.getArt({mediaid})" /></td>
</tr>
</table>
</cfform>
<table>
<tr>
<td>Selecione o tipo de Midia:</td>
<td><cfselect name="mediaid"
bind="cfc:art.getMedia()"
bindonload="true" /></td>
</tr>
<tr>
<td>Selecione o Artista:</td>
<td><cfselect name="artid"
bind="cfc:art.getArt({mediaid})" /></td>
</tr>
</table>
</cfform>
O formulário contém dois controles <CFSELECT>, um chamado "mediaid" e o outro chamado "artid".
"mediaid" é ligado ao cfc: art.getMedia(), e então obtém a lista de tipos de mídia para popular o controle, o cliente faz uma chamada assíncrona para o método getMedia em art.cfc, e popula a lista com o array retornado.
Como nós queremos que esse controle esteja automaticamente populado quando os formulários carregam, bindonload é setado pra "true", assim a chamada ao método getMedia() é disparada automaticamente no tempo de carregamento do formulário. "artid" é ligado ao método getArt em art.cfc.
Esse método requer que um mediaid seja passado para ele, então {mediaid} é usado para passar o valor selecionado no controle mediaid (o primeiro <CFSELECT>). Como estes dois controles estão interligados, o segundo depende do primeiro e ColdFusion gera automaticamente um código JavaScript que força artid a ser repopulado com dados recuperados toda vez que o mediaid mudar.
Esse exemplo relaciona só dois controles, mas esse mecanismo pode ser usado para relacionar muitos controles, e não só controles <CFSELECT>.
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:
Seu post é exatamente o que eu preciso, mas acho que fiz besteira, pois não funcionou pra mim.
Nunca usei CFC sempre fiz tudo direto no documento, e usei templates em CFM mesmo.
Veja se fiz certo:
Copiei o código CFC e salvei um arquivo "art.cfm"
Depois copiei o código do form e salvei um arquivo "form.cfm"
Os 2 estão no mesmo diretório
Mas quando acesso o form.cfm ele abre normalmente, mas não tem nenhuma opção nos campos do form.
Fiz uma query para ver se meu "cfartgallery" existie e se possuia dados, e sim, ele existe e possui dados.
Se puder me ajudar ficarei muito grato.
Um abraço
Ver o restante dos comentários no fórum (e aproveitar pra comentar também !).