Active Media

Labs

Pedaços de código, truques, dicas, conselhos e sugestões

7/12/2010

Flash + WordPress = Amantes

No final do mês de Novembro o Adobe User Group Portugal (AUG-PT) realizou mais encontro onde fui convidado a participar como orador.

Devo dizer que foi uma experiência bastante interessante e que estou disponível para futuros convites :)

Comigo esteve um conjunto de pessoas e profissionais fabulosos. Sempre um bom ambiente, o que caractareriza os encontros do AUG-PT, e uma plateia participativa e de várias àreas.

Sobre o evento

Paulo Moreira falou sobre interacção com devices touch e das diferenças entre o público europeu e asiático. Rui Madeira que mostrou as potencialidades da nova câmara da Microsoft – Kinect – e como as coisas funcionam por detrás da cortina. João Fernandes trouxe-nos o AIR na Tv e mostrou-nos como um vídeo full-hd corre a partir de uma pen sem qualquer tipo de lag. Ricardo Castelhano falou-nos sobre o Processing dando-nos ao seu bom estilo um apanhado geral do que é e para que serve. Por fim Cláudia Pernencar contou-nos as peripécias dos seus últimos trabalhos na área de interacção.

Amigos ou amantes?

Com a minha apresentação quis mostrar que por vezes diferentes tecnologias podem comunicar entre si de uma forma simples e fácil. Associar a versatilidade do WordPress ao poder do Flash é possível e pode-nos facilitar muito a vida, seja em RIAS ou em sites. Deixo-vos os slides da minha apresentação juntamente com as minhas notas.

Flash + WordPress = Amantes (Mais apresentações da Active Media no SlideShare).
A lógica

A forma mais simples de comunicarmos entre Actionscript e WordPress é a de usar a framework do WordPress e retornar o resultado da consulta de dados em formato xml. Não é necessário criar ficheiros físicos com a extensão *.xml, apenas temos de fazer com que o ficheiro PHP que “trabalha” o lado do WordPress faça um output do resultado numa estrutura xml.

Para isso podemos usar um ficheiro de apoio que será colocado dentro da pasta do theme activo. Poderíamos construir um plugin, mas não compliquemos…

Esse ficheiro, que no meu exemplo se chama wordpress-to-flash.php,  poderá receber variáveis (por GET ou POST) do Flash para assim podermos filtrar a consulta dos dados. Um exemplo prático seria o de o Flash enviar o ID da categoria (ex.: notícias) para o PHP e este fornecer os artigos apenas dessa categoria. Assim com apenas um ficheiro fazemos a festa toda :)

O lado do WordPress

Imaginado que queremos saber o título e o texto dos artigos de portfolio da Active Media, o código do ficheiro wordpress-to-flash.php é bastante simples:

<?php

// Ligação à Base de Dados
require_once( '../../../wp-config.php' );

// Inicia variável que gaurdará todos os dados
$xml_output = "";

// ---------------------------------------------------------------------------------
// QUERY POSTS

// Queremos apenas artigos da categoria com o ID de 1
$query = 'cat=1';
$queryObject = new WP_Query($query);

// Verifica se existem artigos
if ($queryObject->have_posts())
{
	// Inicia loop
	while ($queryObject->have_posts())
	{
		// Objecto geral
		$queryObject->the_post();

		// Id do artigo
		$post_id = get_the_ID();

		// Agrega dados à variável em formato xml
		$xml_output .= "\n\t<artigo>";
		$xml_output .= "\n\t\t<titulo>" . get_the_title() . "</titulo>";
		$xml_output .= "\n\t</artigo>";
	}
}

// ---------------------------------------------------------------------------------
// OUTPUT dos dados numa estrutura xml

$xml = "<xml version='1.0' encoding='UTF-8'>";
$xml .= "\n<artigos>\n";
$xml .= $xml_output;
$xml .= "\n</artigos>";
$xml .= "\n</xml>";

echo $xml;

?>

O resultado desta consulta, se olharem para o source-code da página, é uma estrutura em formato xml. É isso que o Flash vai ler.

O lado do Flash/Actionscript

Se o processo anterior era simples, este consegue superar. A única coisa que necessitamos de Actionscript é de um request ao xml.

// Inicia Vars
var myXML:XML;
var myXMLList:XMLList;
var nArtigos:int;

// Load XML
display_txt.text = "A carregar...";

var myLoader:URLLoader = new URLLoader();
myLoader.load(new URLRequest("http://www.omeusite.com/wp-content/themes/omeutema/wordpress-to-flash.php"));
myLoader.addEventListener(Event.COMPLETE, onLoadXML);

// On Load XML
function onLoadXML(e:Event):void
{
	// dados
	myXML = new XML(e.target.data);
	myXMLList = myXML.artigos.children();
	nArtigos = myXMLList.length();

	// reset texto
	display_txt.text = "";

	// loop
	for(var i:int = 0; i<nArtigos; ++i)
	{
		display_txt.appendText(myXMLList[i].titulo.toUpperCase());
		display_txt.appendText("\n\n");
	}
}
Exemplo de integração

Vamos então consultar quais os últimos artigos na categria de “Portfólio” da Active Media:

Para ver este componente tem de ter instalado o Flash Player.

Alternativa com plugin

Dentro da mesma lógica de programação existem plugins para o WordPress que têm já mecanismos próprios.

Um exemplo é o Press2Flash. Com este plugin só nos temos de preocupar com a parte de Actionscript já que o plugin trata sozinho de todas as comunicações com o WordPress. Um bom resumo do que é está aqui: How to Get started with Press2Flash in 8 Steps.

Vantagens:

  • Tira partido da framework do WordPress
  • Óptimo para Flash Developers
  • Concentra o código apenas numa linguagem

Desvantagens:

  • Carregamento de um xml  extenso pode-se tornar lento
  • Não temos controlo sobre a comunicação com o WordPress e que dados retornamos. Isto torna-se ainda mais acentuado quando temos o Gestor de Conteúdos completamente personalizado

Apesar destas possíveis desvantagens, o Press2Flash é sem dúvida uma muito boa alternativa a ter que fazer tudo de raíz.

Alternativa com acesso directo à base de dados

Numa linha completamente diferente, podemos também tirar partido do amfphp e consultar directamente a base de dados.

Vantagens:

  • O processamento é mais rápido

Desvantagens:

  • De vez em quando o WordPress mexe na estrutura da base de dados ao fazer novas actualizações. Se já tivermos consultas à BD personalizadas, isso é a última coisa que queremos…
  • Ao não tirar partido da framework do WordPress perdemos uma série de potencialidades que facilmente se traduzem em dados
Para finalizar…

No encontro falei também de um plugin “mágico” que nos permite com extrema facilidade personalizar os campos de edição dos artigos no WordPress. Acrescentar chekboxes, zonas de imagens que podem ser duplicadas, campos de texto, tudo isto é possível com a acção de dois ou três clicks. Esse plugin chama-se Magic Fields. O nome diz tudo :)

Download

Como prometido, aqui estão os ficheiros que utilizei para este exemplo.

Dúvidas, comentários ou sugestões?

(there’s an english version of this article in my personal blog)

Deixe o seu comentário

Lamentamos, mas há muito que deixámos de fazer sites a pensar no Internet Explorer 6.
Porquê? Algumas das mil razões são dadas pela Google aqui.

Em alternativa sugerimos que faça o upgrade do seu browser para uma versão mais recente do Internet Explorer, ou se já estiver farto e quiser mudar, aconselhamos o Firefox, o Chrome ou o Safari, todos eles grátis.

Obrigado, Active Media

Av. Guerra Junqueiro, 4 - 5ºEsq., 1000-168 Lisboa
Tel.: (+351) 21 313 86 25 / Fax: (+351) 21 313 86 21 / Email: active@activemedia.pt