Sistema de noticia parte final – editar e deletar dados
Introdução
Vimos nos 2 outros tutoriais como montar um sistema de noticias com flash e coldfusion, no primeiro tratamos do Insert ao banco, no segundo fizemos uma busca dos registros do banco de dados, e agora na ultima versão desse tutorial vamos aprender a como deletar e atualizar os registros do banco.
Pré-Requisitos
Flash 8
Dreanweaver 8
Coldfusion MX 7
Mysql
Arquivos de exemplo
Objetivo
Adcionar a nosso sistema as funcionalidades de editar e deletar os registros.
Conceitos
Para isso usaremos as facilidades do flash remoting e coldfusion através de um sistema moldado para funcionar perfeitamente, não é de interesse nesse tutorial ensinar coisas como por exemplo fazer com que os campos de texto se apresentem em formato HTML, nem que as datas das noticias sejam validadas, isso veremos em futuros tutoriais.
Conteúdo
Abra o arquivo que está disponível para download e verifique os novos movieClips adicionados para que as aplicações funcionem corretamente.
<cfcomponent>
<!— Função para retorno de dados da tabela Noticia. —>
<cffunction name=”RetornaNoticia” access=”remote” returntype=”query”>
<cfquery name=”q_noticia” datasource=”lucasmarcal”>
SELECT *
FROM noticia
ORDER BY id_noticia DESC
</cfquery>
<cfreturn q_noticia>
</cffunction>
<!— Fim da Função —>
<!— Função para Inserir dados na tabela Noticia —>
<cffunction name=”InserirNoticia” access=”remote” returntype=”boolean”>
<cfargument name=”dia” required=”yes” type=”string”>
<cfargument name=”autor” required=”yes” type=”string”>
<cfargument name=”assunto” required=”yes” type=”string”>
<cfargument name=”mensagem” required=”yes” type=”string”>
<cfquery name=”q_inserir” datasource=”lucasmarcal”>
INSERT
INTO noticia
(
data,
autor,
assunto,
mensagem
)
VALUES
(
‘#Arguments.dia#’,
‘#Arguments.autor#’,
‘#Arguments.assunto#’,
‘#Arguments.mensagem#’
)
</cfquery>
<cfreturn true>
</cffunction>
<!— Fim da Função —>
<!— Função para Editar dados —>
<cffunction name=”EditarNoticia” access=”remote” returntype=”boolean”>
<cfargument name=”id” required=”yes” type=”numeric”>
<cfargument name=”dia” required=”yes” type=”string”>
<cfargument name=”autor” required=”yes” type=”string”>
<cfargument name=”assunto” required=”yes” type=”string”>
<cfargument name=”mensagem” required=”yes” type=”string”>
<!— <CFTRY> inicia a tentativa—>
<cftry>
<!— Aqui começã o transiction gravando passo a passo as ações.—>
<cftransaction action=”begin”>
<!—Inicio do Update —>
<cfquery datasource=”lucasmarcal”>
UPDATE noticia SET
data = <cfqueryparam cfsqltype=”cf_sql_char” value=”#arguments.dia#”> ,
autor = <cfqueryparam cfsqltype=”cf_sql_char” value=”#arguments.autor#”> ,
assunto = <cfqueryparam cfsqltype=”cf_sql_char” value=”#arguments.assunto#”> ,
mensagem = <cfqueryparam cfsqltype=”cf_sql_char” value=”#arguments.mensagem#”>
WHERE id_noticia= <cfqueryparam cfsqltype=”cf_sql_integer” value=”#arguments.id#”>
</cfquery>
<!— Aqui se tudo ocorreu bem ele termina e grava a ação de update—>
<cftransaction action=”commit” />
<!—Se tudo deu certo ele retorna True —>
<cfset retorno = true>
<!— fecha a tag transaction—>
</cftransaction>
<!—tratamento de erro, ou parecido com o Else —>
<cfcatch type=”any”>
<!—Usa o transaction para limpar da memoria o que ja foi feito e deu erro —>
<cftransaction action=”rollback” />
<!— Retorno para o Flash—>
<cfset retorno = false>
<!— Fecha o cfCatch—>
</cfcatch>
<!—Fecha a tentativa —>
</cftry>
<cfreturn retorno>
</cffunction>
<!— Fim da Função —>
<!— Inicio da Função de Delet —>
<cffunction name=”DeletaNoticia” access=”remote” returntype=”boolean”>
<cfargument name=”id” required=”yes” type=”numeric”>
<cfquery name=”qDelete” datasource=”lucasmarcal”>
DELETE FROM noticia
WHERE id_noticia= <cfqueryparam cfsqltype=”cf_sql_integer” value=”#arguments.id#”>
</cfquery>
<cfreturn true>
</cffunction>
<!— Fim da Função de delet —>
<!— Função de Busca —>
<cffunction name=”RetornaBusca” access=”remote” returntype=”any”>
<cfargument name=”palavra” required=”yes” type=”string”>
<cfquery name=”qBusca” datasource=”lucasmarcal”>
SELECT *
FROM noticia
WHERE assunto LIKE <cfqueryparam cfsqltype=”cf_sql_char” value=”%#arguments.palavra#%”>
</cfquery>
<cfif #qBusca.RecordCount# LTE 0>
<cfset qBusca = “Não encontrou nada”>
</cfif>
<cfreturn qBusca>
</cffunction>
<!— Fim da Função —>
</cfcomponent>
Acima estão todas as funções ( métodos ) que vamos utilizar para que o sistema funcione corretamente, salve esse arquivo como mxstudio.cfc dentro da pasta OOP
Agora no flash, vá na camada action de sua aplicação no primeiro frame , logo abaixo da ultima linha, que é todo o conteúdo escrito nos últimos 2 tutoriais, nós vamos adcionar as seguintes linhas de comando.
// Ação do Botão que passa os valores
// dos campos de texto dinamicos do
// “detalhe” para os campos de texto dinamicos
// de mcEdit
_root.detalhe.btEditar.onPress = function() {
_root.mcEdit._visible = true;
_root.mcEdit.EditData.text = _root.detalhe.detData.text;
_root.mcEdit.EditAutor.text = _root.detalhe.detAutor.text;
_root.mcEdit.EditAssunto.text = _root.detalhe.detAssunto.text;
_root.mcEdit.EditMensagem.text = _root.detalhe.detMensagem.text;
};
//Ação destinada ao botão de salvar
// as alterações, responsável tb
// por chamar o metodo do CFC
// “EditarNoticia”
_root.mcEdit.btSalvar.onPress = function() {
service.EditarNoticia({id:vId, dia:_root.mcEdit.EditData.text, autor:_root.mcEdit.EditAutor.text, assunto:_root.mcEdit.EditAssunto.text, mensagem:_root.mcEdit.EditMensagem.text});
trace(id);
};
//Função Metodo (Função) responsável
//por fazer o update do Registro.
function EditarNoticia_Result(result) {
detalhe._visible = false;
_root.mcEdit._visible = false;
confirma._visible = true;
confirma.rotulo.text = “Resgistro atualizado com Sucesso !!!”;
service.RetornaNoticia();
}
// vamos adcionar aqui um evento
// para fechar a tela de editar
// caso o usuário não click no botão
// de salvar
_root.mcEdit.fechar.onPress = function() {
_root.mcEdit._visible = false;
};
// Função de intervalo para fechar
// tela de Deletar
function fechaDel() {
clearInterval(chamada);
_root.mcConfirmaDel._visible = false;
}
// Agora vamos trabalhar com o metodo
// para deletar as noticias
// em nosso cfc ele se chama
// “DeletaNoticia”, nesse caso vamos
// montar aqui uma função que recebe
// esse metodo do cfc, ela deve ficar assim
function DeletaNoticia_Result(result) {
// aqui dentro vamos colocar as
// ações que esse metodo deve fazer
// quando receber a resposta do CFC
// dentro vamos chamar o set Interval
chamada = setInterval(fechaDel, 2000);
_root.mcConfirmaDel.btNao._visible = false;
_root.mcConfirmaDel.btSim._visible = false;
_root.mcConfirmaDel._visible = true;
_root.mcConfirmaDel.status.text = ” “;
_root.mcConfirmaDel.txtNomeDel.text = “Noticia Excluida com sucesso”;
detalhe._visible = false;
_root.mcEdit._visible = false;
service.RetornaNoticia();
}
// agora vamos adcionar
// um evento ao botão que chama
// a tela de confirmação
// de exclusão de noticia
_root.detalhe.btDeletar.onPress = function() {
_root.mcConfirmaDel._visible = true;
_root.mcConfirmaDel.status.text = “Deseja Excluir essa Noticia ?”
_root.mcConfirmaDel.btNao._visible = true;
_root.mcConfirmaDel.btSim._visible = true;
_root.mcConfirmaDel.txtNomeDel.text = _root.detalhe.detAssunto.text;
};
// Agora vamos colocar
// a um evento ao botão que
// irá fechar a tela de confirmação
// de exclusão caso o usuário
// clique na opção “Não”
_root.mcConfirmaDel.btNao.onPress = function() {
_root.mcConfirmaDel._visible = false;
};
// agora sim vamos colocar
// a ação que faz a exclusão
// do registro no banco de dados
// vamos chamar então a função
// “DeletaNoticia” e passa um unico
// parametro para elá que será
// o id que está sendo requerido
// la no CFC dentro da função de
// exclusão.
_root.mcConfirmaDel.btSim.onPress = function() {
service.DeletaNoticia({id:vId});
};
Ao final de tudo nosso Action Script deve estar da seguinte forma:
// 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://www.lucasmarcalferreira.com.br/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(“OOP.mxstudio”, this);
}
////////////////////////////////////////////////////
//Propriedades de componentes e MovieClips
confirma._visible = false;
detalhe._visible = false;
mcEdit._visible = false;
mcEdit.fundo.useHandCursor = false;
btLista._visible = false;
mcConfirmaDel._visible = false;
////////////////////////////////////////////////////
// Eventos do Data Grid.
var objDg:Object = new Object();
objDg.change = function(eventObject) {
/*
selectedItem = Retorna o resultado do item selecionado no DataGrid
*/
detalhe._visible = true;
vId = dgDados.selectedItem.id_noticia;
detalhe.detData.text = dgDados.selectedItem.data;
detalhe.detAutor.text = dgDados.selectedItem.autor;
detalhe.detAssunto.text = dgDados.selectedItem.assunto;
detalhe.detMensagem.text = dgDados.selectedItem.mensagem;
};
dgDados.addEventListener(“change”, objDg);
////////////////////////////////////////////////////
// Criando Funções
////////////////////////////////////////////////////
// Função para retorno das noticias
function RetornaNoticia_Result(result) {
// Data Provider é responsável por inserir o resultado de “result” dentro do DataGrid
dgDados.dataProvider = result;
dgDados.removeAllColumns();
dgDados.columnNames = ["data", "autor", "assunto"];
dgDados.getColumnAt(0).headerText = “Data de Publicação”;
dgDados.getColumnAt(1).headerText = “Autor Notícia”;
dgDados.getColumnAt(2).headerText = “Assunto Notícia”;
dgDados.getColumnAt(0).width = 150;
// tamanho em Pixels do cabeçalho e colunas
dgDados.getColumnAt(1).width = 150;
// tamanho em Pixels do cabeçalho e colunas
dgDados.getColumnAt(2).width = 150;
}
// Chamando a Função de Retorno de Noticias
service.RetornaNoticia();
////////////////////////////////////////////////////
// Função para inserir noticias
function InserirNoticia_Result(result) {
if (result) {
txtData.text = “”;
txtAutor.text = “”;
txtAssunto.text = “”;
txtMensagem.text = “”;
confirma._visible = true;
confirma.rotulo.text = “Os dados Foram gravados com sucesso !”;
}
}
////////////////////////////////////////////////////
btGravar.onPress = function() {
// Chamando Função de Inserir Noticias e passando os argumentos necessarios
// para o coldfusion.
// e faz uma verificação para certificar que todos os campos foram preenchidos corretamente.
if (txtData.text == “” || txtAutor.text == “” || txtAssunto.text == “” || txtMensagem.text == “”) {
confirma._visible = true;
confirma.rotulo.text = “Preencha todos os campos !”;
} else {
service.InserirNoticia({dia:txtData.text, autor:txtAutor.text, assunto:txtAssunto.text, mensagem:txtMensagem.text});
service.RetornaNoticia();
}
};
////////////////////////////////////////////////////
// Função de Busca
function RetornaBusca_Result(result) {
// Verifica se foi digitado alguma coisa no campo de Busca, e não tiver nada
// digitado ele retorna uma mensagem de alerta para que seja inserido
// um parametro de busca.
if (_root.txtTermo.text == “”) {
confirma._visible = true;
confirma.rotulo.text = “Digite um termo de Busca !”;
// se tiver parametro de busca mais o result for == a frase que você
// criou no CFC “Não encontrou nada” então ele retorna a seguinte mensagem
// dentro do MovieClip confirma “Nada foi encontrado com esse parametro”
} else {
if (result == “Não encontrou nada”) {
confirma._visible = true;
confirma.rotulo.text = “Nada foi encontrado nehum resultado com esse parametro”;
} else {
// Caso seja encontrado o resultado do termo digitado, ele
// remove os resultados da lista antiga, e coloca os novos
// resultados.
// removeAllColumns(); == Remover resultados lista antiga
// columnNames = ["assunto", "autor"]; == seleciona os campos “assunto” e “autor”
// getColumnAt(0).headerText = “Assunto relacionado”; == da o nome ao cabeçalho
// getColumnAt(0).width = 262; == Define um tamanho para as colunas do dataGrid
// dgDados.dataProvider = result; == Adciona o resultado da Busca ao DataGrid
dgDados.removeAllColumns();
dgDados.columnNames = ["assunto", "autor"];
dgDados.getColumnAt(0).headerText = “Assunto relacionado”;
dgDados.getColumnAt(1).headerText = “Autor da Noticia”;
dgDados.getColumnAt(0).width = 262;
dgDados.getColumnAt(1).width = 262;
dgDados.dataProvider = result;
btLista._visible = true;
}
}
}
// Chama a função de RetornaBusca e passa como parametro “palavra”
btBuscar.onPress = function() {
service.RetornaBusca({palavra:_root.txtTermo.text});
};
// Botão Para listar novamente todas as noticias
btLista.onPress = function() {
service.RetornaNoticia();
};
////////////////////////////////////////////////////
/// CSS COMPONETES Data Grid
_root.dgDados.setStyle(“themeColor”, 0xcccccc);
_root.dgDados.setStyle(“selectionColor”, 0xffffff);
_root.dgDados.setStyle(“ollOverColor”, 0xcccccc);
_root.dgDados.setStyle(“textrollOverColor”, 0xffffff);
_root.dgDados.setStyle(“textselectionColor”, 0xffffff);
_root.dgDados.setStyle(“headerColor”, 0×999999);
_root.dgDados.setStyle(“color”, 0xffffff);
_root.dgDados.setStyle(“backgroundColor”, 0×006699);
_root.dgDados.setStyle(“selectionColor”, 0xffffff);
_root.dgDados.setStyle(“ollOverColor”, 0xcccccc);
_root.dgDados.setStyle(“headerColor”, 0×000000);
////////////////////////////////////////////////////
// Ação do Botão que passa os valores
// dos campos de texto dinamicos do
// “detalhe” para os campos de texto dinamicos
// de mcEdit
_root.detalhe.btEditar.onPress = function() {
_root.mcEdit._visible = true;
_root.mcEdit.EditData.text = _root.detalhe.detData.text;
_root.mcEdit.EditAutor.text = _root.detalhe.detAutor.text;
_root.mcEdit.EditAssunto.text = _root.detalhe.detAssunto.text;
_root.mcEdit.EditMensagem.text = _root.detalhe.detMensagem.text;
};
//Ação destinada ao botão de salvar
// as alterações, responsável tb
// por chamar o metodo do CFC
// “EditarNoticia”
_root.mcEdit.btSalvar.onPress = function() {
service.EditarNoticia({id:vId, dia:_root.mcEdit.EditData.text, autor:_root.mcEdit.EditAutor.text, assunto:_root.mcEdit.EditAssunto.text, mensagem:_root.mcEdit.EditMensagem.text});
trace(id);
};
//Função Metodo (Função) responsável
//por fazer o update do Registro.
function EditarNoticia_Result(result) {
detalhe._visible = false;
_root.mcEdit._visible = false;
confirma._visible = true;
confirma.rotulo.text = “Resgistro atualizado com Sucesso !!!”;
service.RetornaNoticia();
}
// vamos adcionar aqui um evento
// para fechar a tela de editar
// caso o usuário não click no botão
// de salvar
_root.mcEdit.fechar.onPress = function() {
_root.mcEdit._visible = false;
};
// Função de intervalo para fechar
// tela de Deletar
function fechaDel() {
clearInterval(chamada);
_root.mcConfirmaDel._visible = false;
}
// Agora vamos trabalhar com o metodo
// para deletar as noticias
// em nosso cfc ele se chama
// “DeletaNoticia”, nesse caso vamos
// montar aqui uma função que recebe
// esse metodo do cfc, ela deve ficar assim
function DeletaNoticia_Result(result) {
// aqui dentro vamos colocar as
// ações que esse metodo deve fazer
// quando receber a resposta do CFC
// dentro vamos chamar o set Interval
chamada = setInterval(fechaDel, 2000);
_root.mcConfirmaDel.btNao._visible = false;
_root.mcConfirmaDel.btSim._visible = false;
_root.mcConfirmaDel._visible = true;
_root.mcConfirmaDel.status.text = ” “;
_root.mcConfirmaDel.txtNomeDel.text = “Noticia Excluida com sucesso”;
detalhe._visible = false;
_root.mcEdit._visible = false;
service.RetornaNoticia();
}
// agora vamos adcionar
// um evento ao botão que chama
// a tela de confirmação
// de exclusão de noticia
_root.detalhe.btDeletar.onPress = function() {
_root.mcConfirmaDel._visible = true;
_root.mcConfirmaDel.status.text = “Deseja Excluir essa Noticia ?”
_root.mcConfirmaDel.btNao._visible = true;
_root.mcConfirmaDel.btSim._visible = true;
_root.mcConfirmaDel.txtNomeDel.text = _root.detalhe.detAssunto.text;
};
// Agora vamos colocar
// a um evento ao botão que
// irá fechar a tela de confirmação
// de exclusão caso o usuário
// clique na opção “Não”
_root.mcConfirmaDel.btNao.onPress = function() {
_root.mcConfirmaDel._visible = false;
};
// agora sim vamos colocar
// a ação que faz a exclusão
// do registro no banco de dados
// vamos chamar então a função
// “DeletaNoticia” e passa um unico
// parametro para elá que será
// o id que está sendo requerido
// la no CFC dentro da função de
// exclusão.
_root.mcConfirmaDel.btSim.onPress = function() {
service.DeletaNoticia({id:vId});
};
Detalhe interessante no método “publish” da classe NetStream, que pode ter três argumentos, sua sintaxe é a seguinte:
Considerações Finais
Ponto agora nosso sistema já está finalizado, execute com CTRL +ENTER, e se você seguiu todos os passos de todos os tutoriais o seus sistema também estará funcionando perfeitamente.
Clique aqui e veja um exemplo funcionando
Aviso importante
Desde semana passada o meu blog oficial mudou click aqui para conhecer meu novo blog.
Autor: Lucas Marçal- Colunista R.I.A do Portal MXSTUDIO
|
O UPDATE não está funcionando…
Apesar de dar a mensagem de notícia atualizada, a alteração não é gravada no banco…
Alguma idéia?