Principal

Interagindo Flash com XML - Parte 1

Sex, 07/10/2005 - 12:48 — mozartpetter

Hoje em dia, diversos aplicativos usam XML: bancos de dados, navegadores web, clientes de e-mail, seu player de MP3 e até mesmo a sua agenda. Podemos citar também os diversos formatos que existem, tais como RSS, ATOM, SVG, WSDL, etc.

Para quem não conhece, XML (eXtensible Markup Language) é uma linguagem de marcação que tem uma sintaxe para criação de documentos estruturados, que podem ser lidos tanto por máquinas como por seres humanos. O principal objetivo do XML é criar uma maneira comum de descrever dados. Dessa forma, um programa A pode gravar seus dados em um documento XML, e um programa B pode ler esses dados sem problemas de compatibilidade entre ambos.

XML é independente de qualquer software particular, ou seja, podemos criar um XML no próprio bloco de notas, e ler os seus dados através de um aplicativo criado em Flash, PHP, ColdFusion, Python, Java, etc. Essa é uma das maiores vantagens do XML, você pode criar um documento com diversos dados, e ler esses dados através de diferentes aplicações. Um banco de dados por exemplo, pode gravar os dados armazenados nele em um documento XML para que outro banco de dados possa ler esses dados e armazená-los também.

Vamos ver então a cara desse tal XML:

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <enderecos>
  3.    <dados>
  4.       <morador>José Fulano da Silva</morador>
  5.       <rua>Av. Dobra a Esquina</rua>
  6.       <numero>132</numero>
  7.       <bairro>Morro do Conde</bairro>
  8.       <cidade>Santa Maria da Prosperidade</cidade>
  9.       <pais>Candelábria</pais>
  10.    </dados>
  11.    <dados>
  12.       <morador>João Ciclano de Souza</morador>
  13.       <rua>Rua Tá em Casa</rua>
  14.       <numero>887</numero>
  15.       <bairro>Da Lapa</bairro>
  16.       <cidade>Springfield</cidade>
  17.       <pais>Alhures</pais>
  18.    </dados>
  19. </enderecos>

Obs.: Procure sempre utilizar o encoding UTF-8, pois esse é o padrão de codificação do Flash, e assim evitamos problemas com acentos.

Veja que a estrutura do documento é uma árvore, podem existir diversas ramificações. Os nomes das tags não são padrões, ou seja, diferentemente do HTML, você mesmo pode definir o nome delas.

No exemplo, temos uma lista de endereços com 2 pessoas cadastradas. Nessa lista temos o nome da pessoa, o endereço onde habita e mais algumas informações. Agora, como acessamos esses dados a partir do Flash? É o que nós vamos ver agora.

O Flash tem uma classe específica para ler arquivos XML, a classe XML. A classe XML representa o documento XML no Flash, e contém métodos e eventos quase idênticos ao da classe LoadVars. Portanto, se você já trabalhou com a classe LoadVars, vai tirar de letra. Vamos a um pequeno exemplo, usando o documento XML acima. Também existe a classe XMLNode que representa cada elemento da hierarquia do XML.

Vamos pensar da seguinte forma:

  • <enderecos> - Nó pai, é o nó que inicia a árvore do documento.
    • <dados> - Nó filho de enderecos, é o primeiro filho.
      • <morador> - Nó filho de dados, é o primeiro filho.
      • <rua> - Nó filho de dados, é o segundo filho.
      • <numero> - Terceiro nó filho.
      • <bairro> - Quarto.
      • <cidade> - Quinto.
      • <pais> - Sexto e último nó filho.

      </dados>

    </enderecos>

Agora que vimos a hierarquia do documento XML, vamos ao Flash.

  1. // Declarando o nosso objeto da classe XML
  2. var oXML:XML = new XML();
  3. /* Ignorando os espaços em branco do documento XML.
  4. O que acontece é que quando escrevemos o documento,
  5. nós formatamos ele com espaços, tabs, quebras de linha,
  6. e isso interfere na leitura do documento.
  7. Experimente depois, definir essa opção como false. */
  8. oXML.ignoreWhite = true;
  9. /* Evento onLoad. Quando o arquivo tiver sido carregado
  10. completamente, esse evento é acionado. */
  11. oXML.onLoad = function():Void{
  12.    trace(this);
  13. }
  14. // Carregando documento XML
  15. oXML.load("enderecos.xml");
Resultado:<?xml version="1.0" encoding="utf-8"?><enderecos><dados><morador>José Fulano da Silva</morador><rua>Av. Dobra a Esquina</rua><numero>132</numero><bairro>Morro do Conde</bairro><cidade>Santa Maria da Prosperidade</cidade><pais>Candelábria</pais></dados><dados><morador>João Ciclano de Souza</morador><rua>Rua Tá em Casa</rua><numero>887</numero><bairro>Da Lapa</bairro><cidade>Springfield</cidade><pais>Alhures</pais></dados></end recos /></enderecos>

Bom, com isso sabemos que o XML está sendo lido. Mas, isso é simples demais. Vamos tentar ler o valor da tag morador da primeira tag dados. Lembra da pequena análise da estrutura que fizemos há pouco né? Pois bem, ela é a base para o que vamos fazer.

  1. // Declarando o nosso objeto da classe XML
  2. var oXML:XML = new XML();
  3. /* Ignorando os espaços em branco do documento XML.
  4. O que acontece é que quando escrevemos o documento,
  5. nós formatamos ele com espaços, tabs, quebras de linha,
  6. e isso interfere na leitura do documento.
  7. Experimente depois, definir essa opção como false. */
  8. oXML.ignoreWhite = true;
  9. /* Evento onLoad. Quando o arquivo tiver sido carregado
  10. completamente, esse evento é acionado. */
  11. oXML.onLoad = function():Void{
  12.    /* Exibindo o valor do nó morador do primeiro nó dados.
  13.    XML = this
  14.    <enderecos> = firstChild ou childNodes[0], mas como só existe
  15.    1 nó pai, usamos firstChild mesmo.
  16.    <dados> = childNodes[0] ou firstChild. Usamos childNodes[0]
  17.    porque temos o childNodes[1], e podemos querer acessá-lo em breve.
  18.    <morador> = childNodes[0].
  19.    Valor do nó = childNodes.
  20.    */
  21.    trace(this.firstChild.childNodes[0].childNodes[0].childNodes);
  22. }
  23. // Carregando documento XML
  24. oXML.load("enderecos.xml");

Resultado: José Fulano da Silva

Opa, funcionou! this é o objeto XML, firstChild é o primeiro nó do XML, ou seja, o nó enderecos. Vamos usar nosso esquema anterior novamente para clarear as idéias

  • <enderecos> - firstChild - Nó pai, é o nó que inicia a árvore do documento.
    • <dados> - childNodes[0] - Nó filho de enderecos, é o primeiro filho.
      • <morador> - childNodes[0] - Nó filho de dados, é o primeiro filho.
      • <rua> - childNodes[1] - Nó filho de dados, é o segundo filho.
      • <numero> - childNodes[2] - Terceiro nó filho.
      • <bairro> - childNodes[3] - Quarto.
      • <cidade> - childNodes[4] - Quinto.
      • <pais> - childNodes[5] - Sexto e último nó filho.

      </dados>

    </enderecos>

Isso que dizer, que se desejarmos mostrar o valor da rua ao invés do morador, bastaria mudar o valor do segundo childNodes[0] para childNodes[1]. Lembre-se que temos 2 nós dados, portanto, se mudarmos o valor do primeiro childNodes[0] para childNodes[1] o resultado será João Ciclano de Souza. Entendeu? É só seguir a hierarquia do documento, mais simples que isso não tem.

Então, que tal mostrarmos os dados do nosso XML em um campo de texto?

  1. // Declarando o nosso objeto da classe XML
  2. var oXML:XML = new XML();
  3. // Ignorando espaços
  4. oXML.ignoreWhite = true;
  5. // Evento onLoad
  6. oXML.onLoad = function():Void{
  7.    // Objeto TextField. Nosso campo de texto.
  8.    var cptexto:TextField = _root.createTextField("dados_txt", 1, 0, 0, 300, 300);
  9.    /* Objeto XMLNode (é outra classe sim, mas vamos fingir que não).
  10.    Uma referência ao root ou nó pai, só para simplificar o acesso a esse nó,
  11.    ao invés de escrever this.firstChild toda vez que quisermos acessá-lo. */
  12.    var rootNode:XMLNode = this.firstChild;
  13.    /* Loop. Vou ser breve nessa parte, até porque o assunto é XML.
  14.    Pegamos o valor total de nós contidos em rootNode. Perceba que
  15.    temos um childNodes ali. Para não confundir sua cabeça, vamos imaginar o seguinte:
  16.    Em rootNode, você vê o nó <enderecos> mas não enxerga dentro dele.
  17.    Já em rootNode.childNodes, tu enxerga os nós filhos dele, inclusive quantos são.
  18.    Portanto rootNode.childNodes.length nos diz quantos filhos esse nó tem.
  19.    Então, para cada i menor que o número de nós filhos, o FOR executa o bloco de código. */
  20.    for(var i = 0; i < rootNode.childNodes.length; i++){
  21.       /* Objeto XMLNode. Mesma coisa que o anterior.
  22.       Temos 2 nós <dados>, ou seja esse bloco vai ser executado 2 vezes, uma para cada nó.*/
  23.       var nodeDados:XMLNode = rootNode.childNodes[i];
  24.       // For denovo, desta vez para o filhos de <dados>
  25.       for(var n = 0; n < nodeDados.childNodes.length; n++){
  26.          /* Aqui eu preferi separar em 2 variáveis. Uma contém o valor do nó,
  27.          o que tem dentro dele, no caso, texto.
  28.          A outra contém o nome do nó, o nome da tag.*/
  29.          var nodeValue:String = nodeDados.childNodes[n].childNodes;
  30.          var nodeName:String = nodeDados.childNodes[n].nodeName;
  31.          /* Adicionamos os valores no campo de texto, dei um uppercase no nodeName pra
  32.          ficar bunitinho.*/
  33.          cptexto.text += nodeName.toUpperCase() + ": " + nodeValue + "\n";
  34.       }
  35.       // Adicionamos uma quebra de linha para separar os valores de cada nó <dados>
  36.       cptexto.text += "\n";
  37.    }
  38. }
  39. // Carregando documento XML
  40. oXML.load("enderecos.xml");

Resultado: MORADOR: José Fulano da Silva
RUA: Av. Dobra a Esquina
NUMERO: 132
BAIRRO: Morro do Conde
CIDADE: Santa Maria da Prosperidade
PAIS: Candelábria

MORADOR: João Ciclano de Souza
RUA: Rua Tá em Casa
NUMERO: 887
BAIRRO: Da Lapa
CIDADE: Springfield
PAIS: Alhures

Acho que deu para termos uma noção de como trabalhar com dados vindos de um XML certo? Esse artigo é apenas uma introdução, algo bem simples para que você compreenda o funcionamento da interação Flash com o XML. Existem ainda diversos métodos que eu pretendo abordar nas próximas partes desse artigo. Pratique bastante, altere o código, enfim, tente!

Fique à vontade para deixar seus comentários (sugestões, críticas, etc) a respeito dessa matéria, e caso tenha dúvidas, por favor direcione-se à nossa lista que eu e o pessoal ajudaremos com muito prazer.

Ficamos por aqui, em breve estarei escrevendo a próxima parte deste artigo, onde eu detalharei melhor os métodos da classe.
Abraços.

Comentários

Ter, 30/09/2008 - 11:38 — biulofgos

Adicionar CSS

Mozart bom dia!  gostiei muito do seu tutorial e estou usando como base para vários projetos meus aqui ... e uma coisa ta dando problema.... como fica a action desse exemplo q vc passou no tutorial com o segunte formatação CSS

Morador em negrito e letras em vermelho
País em negrito e letra na cor preta
morador {
  color: #CC3300;
  font: Arial;
  font-size: 12px;
  font-weight: bold;
}
pais {
  color: #333333;
  font: Arial;
  font-weight: bold;
  font-size: 11px;
}
Estou tentando resolver essa incógnita ... mas esta dificil ... não tenho muita experi em action .... 
(tousando flash cs3 com a opção actionscript 1.0 2.0)
Se você puder ajudar agradeço.
meu msn: biolofgos@hotmail.com

Fabiano

Qui, 04/09/2008 - 18:28 — grindz

Parabéns.

Muito bom o tutorial, entendia muito pouco do XML agora deu uma esclarecida muito boa...
um dos melhores tutoriais que eu ja li.