FLASH 5 E XML. XML - Simples

(1)

(2)

FLASH 5 E XML

Introdução

O Flash5 trouxe consigo impressionantes novidades, uma delas foi o objecto XML. O objecto XML permite introduzir dinamicamente dados num movie Flash. Ver o exemplo a seguir.

XML - Simples

XML é o modo de escrever dados no formato tag. O XML permite criar tags que melhor descrevem a informação que cada tag representa. O HTML é uma linguagem formatada para texto e média, peloo contrário, o XML nada tem a ver com formatar dados, apenas descreve-os. Confuso? Bem, vamos ver um exemplo prático para clarificar as coisas. Este é um simples documento XML que contém o primeiro e o último nome de um indivíduo como dados de XML.

(3)

<last_name>Smith</last_name> <first_name>Chris</first_name> </person>

Não é um exemplo muito complicado, mas demonstra os fundamentos do XML. Em vez de colocar este tipo de dados numa tabela HTML, que torna isto muito complicado de

reformatar, ordenar, etc, os próprios dados são marcados com tags que descrevem que tipo de dados são.

XML - Mais Complexo

O XML é muito mais complexo que o pequeno exemplo anterior. Cada tag XML pode conter: texto, child tags (são tags que estão dentro de outros, abre-se e fecha-se o tag dentro de outro) e até mesmo atributos:

<person id="12345"> <-- repara no atributo 'id'

...

</person>

O XML é o que parece, tags legíveis e humanos que ordenam e descrevem os dados dentro deles. O XML é quebrado em hierarquias de nodos. Cada nodo pode conter 0 ou mais nodos filhos. No XML, cada nodo pode, por ele próprio, ser considerado um

documento XML separado, com os child como elementos deste documento XML. Aqui um simples exemplo: <?xml version="1.0" encoding="iso-8859-1" ?> <parent_node> <child_node id="1"> <grandchild_node>GrandChild 1a</grandchild> <grandchild_node>GrandChild 1b</grandchild> </child_node> <child_node id="2"> <grandchild_node>GrandChild 2a</grandchild> <grandchild_node>GrandChild 2b</grandchild> </child_node> </parent_node>

O tag parent_node é o parente de ambos os tags child_node. O tag child_node com o id de 1 é o parente dos dois tags grandchild_node dentro dele, e por aí fora. Qualquer tag que contém alguma coisa diz-se que é nodo pai (parent_node) dessa coisa. Qualquer elemento definido dentro de um tag é nodo criança (child_node) desse tag.

(4)

Depois desta explicação temos milhões de questões: Para que é que isto é bom no nosso site? Para fazer registos como estes e para armazenar dados, mas experimenta ver este documento num browser e não verás nada a não ser umas linhas de texto com todos os tags cá fora. Como podemos mostrar estes dados aos utilizadores? Até agora, a melhor forma de formatar dados XML é com XSL stylesheets, linguagem de formatação e styling para o XML conseguir ler dados. É baseado na informação da stylesheet que os dados são formatados e exibidos. Uma stylesheet XSL pode exibir a informação como HTML, WML, somos nós que definimos isto.

A maioria dos browsers recentes (IE 4 e superiores e o novo Netscape 6) suportam XML e XSL stylesheet desde que sejam de versões recentes, a implementação entre os browsers está muito difundida.

Entrar no Flash 5

O Flash 5 tem uma bom implementação do XML em actionscript, permite colocar conteúdos XML nos Movies Flash. Isto é realizado com o novo objecto XML. Cria-se um novo objecto XML em actioscript da seguinte maneira:

my_variable = new XML();

Então o Flash deixa carregar qualquer conteúdo XML que se queira de um URL, carregando isto para o novo objecto, chamando o objecto XML através do comando load().

my_variable.load("http://someurl.net/somefile.xml");

É importante notar que o URL que chamamos no Flash não tem que ser um documento XML. É isto, o ficheiro não tem que ser um ficheiro completo, certamente nenhum acaba com a extensão .XML. Isto poderia chamar um script ou um cgi para passar os

parâmetros. É útil se quiser-mos carregar informação de uma base de dados ou de registos de um servidor de Idap para um script no servidor, e enviar os dados para o Movie Flash. Basta formatar o output do script como XML, e o Flash consegue ler isto sem problemas.

Nota: A implementação de XML pelo Flash só permite chamar ficheiros XML para dentro do player do flash. Para Movies Flash na Internet, os ficheiros XML que escolhemos para usar têm que estar no nosso domínio ou num local do sistema do servidor.

(5)

Manipular eventos

Objectos XML, como muitos outros objectos em actionscript, têm manipuladores de eventos (event handlers). Para quem não sabe, event handlers são bits do código que correm quando qualquer coisa acontece. O que quer isto dizer? Um grande exemplo são todos os eventos handlers do rato, que provocam um acontecimento qualquer quando o rato é clicado ou pressionado, ou o que quer que seja. É um event handlers quando chamamos algum código para correr depois do click do botão, ou quando qualquer coisa é arrastado com o rato. Estes são event handlers do rato. Os objectos XML têm os seus próprios event handlers. Vamo-nos focar no evento onLoad, o qual permite correr algumas funções quando o documento XML pedido é carregado dentro do objecto XML.

Text Box Dinâmica

Primeiro, criar uma text box dinâmica:

Começar o Script

Esta text box permite exibir o conteúdo do XML.

(6)

scripting.

{Click} direito na primeira e única frame do movie e seleccionar "Actions". Começar por definir o objecto XML.

//cria um novo objecto xml

urlXML = new XML();

//Quando objecto xml data é carregado, o objecto XML corre a função convertXML

urlXML.onLoad = convertXML;

//Escreve na tua text field que os dados estão a ser carregados

content_feed_display = "Loading data...";

//agora carrega o url

urlXML.load("moreover.xml");

O próximo passo é o que fazer com o XML depois de carregado. Para isto, precisamos de definir a função convertXML e extrair os dados pretendidos.

Depois de fazer isto, podemos dar uma olhadela no XML em questão. Isto permite fazer a função parecer mais clara.

O XML

<?xml version="1.0" encoding="iso-8859-1" ?>

<!DOCTYPE moreovernews (View Source for full doctype...)><-- Definição do documento. Neste caso podemos ignorar esta linha.

<moreovernews><-- elemento topo da hierarquia. Isto é o nodo raíz.

<url>http://c.moreover.com/click/here.pl?x12591193</url><-- Queremos isto, o nosso link

<headline_text>PlayStation 2 continues the legend</headline_text> <-- Isto é o texto do nosso link.

<source>STUFF</source> <media_type>text</media_type>

<cluster>Computer games news</cluster> <tagline /> <document_url>http://www.stuff.co.nz/inl/index/0,1008,0a28,FF.html</document_url> <harvest_time>Nov 26 2000 7:10PM</harvest_time> <access_registration /> <access_status /> </article>

...more article nodes...

</moreovernews><-- Fecho do node moreovernews.

A Função

Aqui está a função. Colocar esta função na primeira frame do movie abaixo do código á pouco colocado.

function convertXML() { if(this.loaded) {

(7)

}

mainTag = new XML; elementTag = new XML; articleList = new Array; elementList = new Array;

mainTag = this.firstChild.nextSibling;

if(mainTag.nodeName.toLowerCase() == "moreovernews") { articleList = mainTag.childNodes;

content_feed_display = ""; for(i=0;i<=articleList.length;i++){

//inicializa um par de variáveis para guardar os dados do xml que queremos exibir

document_url = ""; headline_text = "";

if(articleList[i].nodeName.toLowerCase() == "article") {

//colocamos o node child num array, ou seja, o que andamos à procura

elementList = articleList[i].childNodes; //e repete até encontrar os dados desejados

for(j=0;j<=elementList.length;j++) { elementTag = elementList[j]; elementType = elementTag.nodeName.toLowerCase(); if(elementType == "headline_text"){ headline_text = elementTag.firstChild.nodeValue; } else { if(elementType == "url"){ url = elementTag.firstChild.nodeValue; } } }

content_feed_display += "<p><font size=\"+2\"><a href=\"" + url + "\" target=\"_new\">"+ headline_text +"</a></font></p>";

} } } }

Ok, não fujam. Isto não é tão mau como parece. Na secção a seguir, vamos olhar para isto linha a linha e tudo vai fazer sentido.

O Código

Vamos olhar para o primeiro par de linhas, que só envia alguma informação que precisaremos mais tarde.

if(this.loaded) {

content_feed_display = "Data loaded."; }

As linhas anteriores dizem ao utilizador que os dados estão a ser carregados.

Provavelmente não conseguimos ver a mensagem se os dados forem carregados muito rapidamente.

mainTag = new XML; elementTag = new XML; articleList = new Array; elementList = new Array;

Criámos documentos de XML interno (lembrar, um nodo dentro de um documento XML comporta-se como um documento XML completo), e um par de arrays para fazer o loop

(8)

até ao fim dos dados.

mainTag = this.firstChild.nextSibling;

Conseguimos manejar os dados do XML que quisermos. O this refere-se ao objecto XML

que criámos. Notifica que conseguimos o primeiro child node chamando a propriedade firstChild, mas, desde que o first child seja o documento definição, conseguimos o próximo child node com a propriedade nextSibling.

if(mainTag.nodeName.toLowerCase() == "moreovernews") {...}

Queremos ter a certeza que temos a chave na tag moreovernews. Para fazer isto, chamamos a propriedade nodeName do objecto mainTag. A propriedade nodeName permite retornar o nome do elemento exactamente que aparece entre as tags.

Depois de saber-mos que temos o node moreovernews, queremos apanhar todo o artigo do child nodes.

articleList = mainTag.childNodes;

A propriedade childNodes devolve um array de objectos que são i child nodes do objecto XML original. Neste caso, o objecto XML original é a mainTag. Agora precisamos saltar por cima dele.

//coloca a dynamic text field em branco e então podemos escrever os novos dados

content_feed_display = "";

for(i=0;i<=articleList.length;i++){

//inicializa um par de váriaveis para guardar os dados do xml que queremos exibir

url = "";

headline_text = "";

if(articleList[i].nodeName.toLowerCase() == "article") {

///colocamos o node child num array, ou seja, o que andamos à procura

elementList = articleList[i].childNodes;

Colocamos a dynamic text field em branco, assim temos uma área limpa para colocar os nossos links. A seguir, saltamos por cima dos child nodes e devolve-mos o articleList. Apagamos repetidamente duas variáveis em cada passagem: url e headline_text. Desde que o Flash XML parser considere tudo no documento XML (incluindo retornos e novas linhas) como nodos de XML, nós conferimos, cada um, para ver se tem um nome de nodo de artigo. Colocamos estes child nodes num array chamado elementList.

for(j=0;j<<=elementList.length;j++) { elementTag = elementList[j];

elementType = elementTag.nodeName.toLowerCase(); if(elementType == "headline_text"){

(9)

© 2002 VISUALWORK Produções Multimedia, Lda. Todos os direitos reservados. Qualquer reprodução, incluindo fotocópia, só pode ser feita com autorização expressa da VISUALWORK. headline_text = elementTag.firstChild.nodeValue; } else { if(elementType == "url"){ url = elementTag.firstChild.nodeValue; } } }

Pegamos em cada node XML na elementList e passamos isto para dentro do elementTag do objecto XML. Fazemos isto mais para simplificar o código. Agora definimos a variável elementType para conter o nome do node do elementTag corrente. Desta maneira

conseguimos verificar se o elemento que estamos a ver se é uma das duas que queremos. Lembrar que andamos á procura do headline e do url.

O Código (cont)

if(elementType == "item_we_want"){ ...

}

Passamos esta informação para dentro de uma ou duas variáveis, headline_text e url. Depois de ter-mos os dados que queremos, só temos que os passar para a text field, desta forma...

content_feed_display += "<p><font size=\"+2\"><a href=\"" + url + "\" target=\"_new\">"+ headline_text +"</a></font></p>";

E é isto! O resto do código só está a para fechar os ciclos.

Conclusão

Demora um bocado para conseguir dominar o XML, mas se este tutorial for feito, é um grande contributo. Há uma grande quantidade de conteúdos de XML livres na internet que podemos ir buscar. O objecto XML do Flash também permite fazer mais do que ler

elementos de um documento XML. É possível adicionar elementos, apagar, mover, e mais. Esperamos que este tutorial tenha sido útil, até á próxima!