HUFERSIL.WEBDEVELOPER

Integração Flash com Lumine, usando XML – Parte 2

Caso você não tenha feito, faça a parte 1 deste tutorial.

A versão utilizada neste tutorial é a CS4.

Hoje, vamos criar nossa interface em flash e fazer com que ela acesse o PHP que criamos no tutorial anterior.

Abra a ferramenta de autoração do Flash.

Abra a paleta Components (Window > Components).

Components

Arraste para o palco:

  • Um componente DataGrid, e coloque seu nome de instancia como grid;
  • Dois componentes Button. Em um, coloque o nome de instancia como btnPesquisar e no outro btnRemover.
  • Um componente TextInput, e coloque seu nome de instancia como txtPesquisa.
  • Crie um TextField, utilizando a ferramenta de texto, e escolha a opção Dynamic Text. Coloque seu nome de instancia como txtResultados.

Abaixo um modelo de como ficam os nomes:

Layout Flash 1

Dica: para mudar o label dos botões, abra a janela Components Inspector e clique no botão. Altere a propriedade Label.

 

Agora, crie uma nova camada na timeline, para que possamos colocar nossas ações sem misturar com camadas que contenham elementos gráficos.

Cole as ações abaixo:

// carregando as classes
import fl.controls.dataGridClasses.DataGridColumn;
import fl.data.DataProvider;

// url com os dados
var url:String = 'http://127.0.0.1/exemplos/flash-lumine-xml/dados.php';

// definindo colunas
var codIdusuario:DataGridColumn = new DataGridColumn('idusuario');
codIdusuario.width = 50;
codIdusuario.headerText = 'ID';

var colNome:DataGridColumn = new DataGridColumn('nome');
colNome.headerText = 'Nome';

// adicionando as colunas no grid
grid.addColumn(codIdusuario);
grid.addColumn(colNome);

// funcao de pesquisa
function pesquisar():void {
	// carregando os dados
	// objeto de requisicao
	var req:URLRequest = new URLRequest(url);
	// mudando para post
	req.method = URLRequestMethod.POST;
	// variaveis que queremos passar por post
	var postData:URLVariables = new URLVariables();
	// nome que vamos usar na pesquisa
	postData.nome = txtPesquisa.text;
	// setando os dados na requisicao
	req.data = postData;

	// criando o objeto de carregamento
	var loaderData:URLLoader = new URLLoader();
	// retorno quando terminar de carregar os dados
	loaderData.addEventListener(Event.COMPLETE, function(e:Event):void {
		// transforma o retorno em objeto xml
		var xml:XML = XML(e.target.data);
		// popula o grid
		grid.dataProvider = new DataProvider( xml );

		// numero de resultados encontrados
		txtResultados.text = xml.item.length() + ' resultados encontrados';

	});

	// carrega os dados
	loaderData.load(req);
}

// acoes do botao de remover
btnRemover.addEventListener(MouseEvent.CLICK, btnRemover_clickHandler);
// acoes do botao de pesquisar
btnPesquisar.addEventListener(MouseEvent.CLICK, btnPesquisar_clickHandler);

// handler para o botao de remover
function btnRemover_clickHandler(e:MouseEvent):void {
	// para cada item do grid que estiver selecionado
	for each(var item:Object in grid.selectedItems){
		// removemos o item
		grid.removeItem( item );
	}
}

// handler para o botao de pesquisar
function btnPesquisar_clickHandler(e:MouseEvent):void {
	pesquisar();
}

Atenção: altere o caminho correto para onde o flash deverá carregar os dados do PHP, na variável URL.

 

Quando o Flash termina de carregar os dados do PHP, estes dados vem como simplesmente como texto. Como temos acesso direto ao texto carregado, e ele vem no padrão XML, utilizamos o objeto XML do Flash para converte-lo em um objeto XML nativo do Flash.

Posteriormente, para visualizar os dados no DataGrid, jogamos este XML recém criado dentro de um objeto do tipo DataProvider, que é o objeto que faz a comunicação com o DataGrid e outros componentes do tipo List no Flash.

 

@braços e fiquem com Deus!

Deixar uma resposta

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

*

Pode usar estas etiquetas HTML e atributos: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="" highlight="">