Galeria dinâmica de imagens com flash e coldfusion

Rich Internet Application (RIA)-Galeria de Imagens Dinâmicas com Flash e ColdFusion.

Salve pessoal, hoje vamos abordar um assunto bem interessante e procurado na internet, um sistema de galeria de imagens, que recebe os parâmetros das imagens do banco de dados mysql, então chega de conversa e vamos a luta.

Pré-Requisitos

Internet Information Server (IIS), Coldfusion MX7, MYSQL, Flash 8, Dreamweaver MX 2004 ou superior

Objetivo.

Ao final desse tutorial você será capaz de desenvolver uma galeria dinâmica de imagens com comentários

Conceitos.

Para isso usaremos as facilidades das ferramentas Adobe/Macromedia, como Coldfusion, Dreamweaver e Flash, assim como o Flash Remoting para interagir com o banco de dados Mysql.

Conteúdo

Primeiramente vamos montar um banco de dados Mysql faça download do arquivo txt que contém as informações do banco.
Configurações do banco

Agora que já temos nosso banco devidamente montado, vamos registrar ele no administrador do Coldfusion, para maiores informações sobre esse processo veja esses links:
Link1
Link2

Feito isso vamos criar nossa tela para cadastro e upload de imagens o formulário deverá ficar como a figura abaixo:

Depois disso vamos configurar o Insert, vá na paleta Application + Server Behaviors + InsertRecord , na tela que se abre configure como na imagem abaixo e depois salve essa pagina como Cadastro.cfm, após isso faça uma lista para visualizar seus resgistros, assunto que não vamos abordar aqui nessa matéria.

Bom já está tudo certo para o insert, porém ainda temos que fazer o upload da imagem para a pasta especificada, para isso vamos abrir o código da pagina ele deve estar como o código abaixo:

<cfset CurrentPage=GetFileFromPath(GetTemplatePath())>
<cfif IsDefined(“FORM.MM_InsertRecord”) AND FORM.MM_InsertRecord EQ “form1″>
<cfquery datasource=”galeria”>
INSERT INTO galeria_tbl (FotoG, FotoP, Descricao) VALUES (
<cfif IsDefined(“FORM.fotoG”) AND #FORM.fotoG# NEQ “”>
‘#FORM.fotoG#’
<cfelse>
NULL
</cfif>
,
<cfif IsDefined(“FORM.fotoP”) AND #FORM.fotoP# NEQ “”>
‘#FORM.fotoP#’
<cfelse>
NULL
</cfif>
,
<cfif IsDefined(“FORM.descricao”) AND #FORM.descricao# NEQ “”>
‘#FORM.descricao#’
<cfelse>
NULL
</cfif>
)
</cfquery>
<cflocation url=”list_fotos.cfm”>
</cfif>

Então nós vamos altera-lo para que receba os parâmetros para upload das duas imagens, no código antes de começarmos a tag <cfquery> você vai colocar as seguintes instruções:

<cffile action=”upload” destination=”c:\Inetpub\wwwroot\GaleriaImg\Fotos\” filefield=”fotoG” nameconflict=”makeunique” accept=”image/pjpeg,image/jpeg,image/gif,image/x-png”>
<cffile action=”upload” destination=”c:\Inetpub\wwwroot\GaleriaImg\Fotos\pequenas\” filefield=”fotoP” nameconflict=”makeunique” accept=”image/pjpeg,image/jpeg,image/gif,image/x-png”>
<cfset img1 = “File.ServerFile”>
<cfset img2 = “File.ServerFile”>

Ainda teremos que alterar os parâmetros de insert do SQL, no final nosso código deverá ficar da seguinte maneira:

<cfset CurrentPage=GetFileFromPath(GetTemplatePath())>
<cfif IsDefined(“FORM.MM_InsertRecord”) AND FORM.MM_InsertRecord EQ “form1″>
<cffile action=”upload” destination=”c:\Inetpub\wwwroot\GaleriaImg\Fotos\” filefield=”fotoG” nameconflict=”makeunique” accept=”image/pjpeg,image/jpeg,image/gif,image/x-png”>
<cffile action=”upload” destination=”c:\Inetpub\wwwroot\GaleriaImg\Fotos\pequenas\” filefield=”fotoP” nameconflict=”makeunique” accept=”image/pjpeg,image/jpeg,image/gif,image/x-png”>
<cfset img1 = “File.ServerFile”>
<cfset img2 = “File.ServerFile”>
<cfquery datasource=”galeria”>
INSERT INTO galeria_tbl (FotoG, FotoP, Descricao) VALUES (
<cfif IsDefined(“img1″) AND #FORM.fotoG# NEQ “”>
‘#File.ServerFile#’
<cfelse>
NULL
</cfif>
,
<cfif IsDefined(“img2″) AND #FORM.fotoP# NEQ “”>
‘#File.ServerFile#’
<cfelse>
NULL
</cfif>
,
<cfif IsDefined(“FORM.descricao”) AND #FORM.descricao# NEQ “”>
‘#FORM.descricao#’
<cfelse>
NULL
</cfif>
)
</cfquery>
<cflocation url=”list_fotos.cfm”>
</cfif>

Obs: Fora esse código na sua pagina também há os códigos html = )
Feito isso vamos criar agora o nosso componente ColdFusion (CFC), abra um novo documento no Dreamweaver e escolha Coldfusion Component salve-o como galeriamx

Agora vamos criar uma função para retornar o resultado dos registro de nossa tabela, para o Flash, a função ficara assim:

<cfcomponent>
<!— Instanciando o nome da função e os parametros de acesso e tipo de retorno—>
<cffunction name=”RetornaFotos” access=”remote” returntype=”query”>
<!— Criando um select simples para trazer os dados da tabela—>
<cfquery name=”q_fotos” datasource=”galeria”>
SELECT *
FROM galeria_tbl
ORDER BY id_galeria ASC
</cfquery>
<!— Passando como parametro de retorno a query—>
<cfreturn q_fotos>
</cffunction>
</cfcomponent>

Tudo pronto então vamos ao Flash, para facilitar um pouco nosso trabalho eu já desenvolvi a interface flash para as fotos, ela é simples nada de muita “firula” é só para nos servir de parâmetro.

Download da interface Flash

Na camada action escreva o seguinte código:

stop();
// Iniciando a conexão com o Flash Remoting
import mx.debug.*;
import mx.remoting.*;
// Condição
if (init == null) {
init = true;
// Setando o local do Remoting
NetServices.setDefaultGatewayUrl(“http://localhost/flashservices/gateway”);
// Criando a variável de conexão
conn = NetServices.createGatewayConnection();
// Criando a variável de serviço, e setando o componente
service = conn.getService(“GaleriaImg.OOP.galeriamx”, this);
}
/////////////////////////////////////////////////////////////////////////////////////
// Propriedades de componentes
////////////////////////////////////////////////////////////////////////////////////
mcDetalhe._visible = false;
////////////////////////////////////////////////////////////////////////////////////
function RetornaFotos_Result(result) {
// For para correr sobre o resultado
for (var i = 0; i<result.length; i++) {
// Chama MovieClip da Biblioteca
var ItemAtual:MovieClip = _root.base.conteiner.attachMovie(“fotoP”, “fotop”+i, i);
// define variavés
ItemAtual.id = result.items[i].id_galeria;
ItemAtual.fotoP = result.items[i].FotoP;
ItemAtual.fotoG = result.items[i].FotoG;
ItemAtual.descricao = result.items[i].Descricao;
// O movieClip “Carrega” deve ser do mesmo tamanho da Foto Pequena cadastra-da no banco de dados.
ItemAtual.carrega.loadMovie(“Fotos/pequenas/”+ItemAtual.fotoP);
// Regra para paginação
if (i%6 == 0) {
ItemAtual._x = 0;
ItemAtual._y = anterior._y+anterior._height+10;
} else {
ItemAtual._x = anterior._x+anterior._width+10;
ItemAtual._y = anterior._y;
}
anterior = ItemAtual;
// Ação ao MovieClip para chamar imagem grande
ItemAtual.onPress = function() {
_root.mcDetalhe._visible = true;
// O movieClip “Carrega” deve ser do mesmo tamanho da Foto Grande cadastra-da no banco de dados.
_root.mcDetalhe.carrega.loadMovie(“Fotos/”+this.fotoG);
_root.mcDetalhe.txtDetalhe.text = this.descricao
};
// Ação para fechar a tela de detalhe.
_root.mcDetalhe.fechar.onPress = function() {
_root.mcDetalhe._visible = false;
};
}
}
service.RetornaFotos();

Considerações Finais

Bom pessoal por hoje é só espero que vocês tenham gostado, para ver essa galeria um pouco mais customizada, é só visitar o site da banda Audisete que lá eu usei algumas coisas a mais para deixar ela mais bonitinha.

Aviso Importante

Desde semana passada o meu blog oficial mudou click aqui para conhecer meu novo blog.

Abraços

Escrito por Lucas_marcal on março 16, 2006. Arquivado em RIA. Você pode seguir as respostas a esse artigo pelo RSS 2.0. Você pode deixar respostas para esse artigo

1 resposta a Galeria dinâmica de imagens com flash e coldfusion

  1. Renan A. Mendonça

    Caro Lucas,
    só visualizei o seu post hoje e parece ser muito interessante, mas infelismente nenhum dos aquivos podem ser baixados, pois diz que eles são inexistentes nos links que você deixou.

    Gostaria muito que você os atualizasse eu quem sabe me enviaesse um email com eles descritos ou os arquivos em si.

    No mais gostei bastante da coluna.

    Obrigado e abraços.

Deixe uma resposta

O seu endereço de email não será publicado Campos obrigatórios são marcados *

*

Você pode usar estas tags e atributos de HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>