Sistema de Notícia Flash e Coldfusion parte 2

R.I.A. – Sistema de Notícia com Flash e Coldfusion – Parte 2

Salve Macromedianos de plantão rsrsr, seguinte hoje vamos dar sequencia na nossa coluna para montar um sistema de noticias usando flash + coldfusion, para isso é necessário que você tenha feito a parte 1 desse tutorial que você pode acessar no link abaixo. Ao final dessa coluna você será capaz de customizar um componente de DataGrid e criar um sistema de busca simples para o nosso sistema de notícias.

Os pré-requisitos desse tutorial:
ColdFusion MX 7
Flash Remoting 2.0
Flash 8
Dreamweaver 8
Ler parte 1 desse tutorial (Baixe os arquivos para facilitar sua vida.)

Modificando Componente ColdFusion ( CFC )

Vamos alterar algumas configurações de nosso componente, na verdade o que vamos fazer é adcionar mais uma função dentro desse componente, a função se chama “RetornaBusca”, você deve adcionar essa função dentro das tags <cfcomponent></cfcomponent>, então vamos lá certifque-se de que você está dentro das tags e escreva a seguinte instrução
<cfcomponent>
<!— 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>

Ao final seu componente deverá ficar assim:

<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>
<!— 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>

Editando Arquivo em Flash

Agora vamos fazer algumas alterações no nosso arquivo de Flash,vamos adcionar um campo de texto e intancialo como “txtTermo”,depois vamos colocar mais dois botões que serão respectivamente “btBuscar” e “btLista”, vá na camada action de seu arquivo e altere o codigo para que ele fique como abaixo:

// 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
// esse é online
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(“Desafios.OOP.mxstudio”, this);
}
////////////////////////////////////////////////////
//Propriedades de componentes e MovieClips
confirma._visible = false;
detalhe._visible = false;
mcEdit._visible = false;
mcEdit.fundo.useHandCursor = false;
btLista._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;
id = 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(“headerColor”, 0×000000);
////////////////////////////////////////////////////

Agora é só executar sua aplicação e ele estará funcionando normalmente, espero que vocês tenham gostado desse tutorial, na próxima parte vamos criar as funções para editar e deletar as noticias.

Testar o arquivo Online

Para mais informações visite o Forum de RIA, ou o meu Blog

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

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>