Conhecimentos:
Este artigo pede um conhecimento básico de ActionScript, mas é
necessário ter uma familiaridade com o Flash. Como por exemplo,
já saber o uso adequado de instâncias. Não é
necessário saber nada sobre XML.
A linguagem
XML tem sido frequentemente utilizada por desenvolvedores como método
de resposta do servidor. Mas o que é XML? Para que serve? Comentei
que não precisamos saber XML para desenvolver esse tutorial, mas
recomendo que leiam sobre isso mais a fundo, inclusive sobre DTD e XSLT.
Bom, XML é uma meta linguagem estruturada, que possui padrões
que facilitam o desenvolvimento e o entendimento por diversas linguagens.
Com um único arquivo podemos gerar várias saídas
para várias linguagens, por exemplo, num editor de texto (recomendo
o Dreamweaver 8, está muito bom para desenvolvimento XML, XHTML
estrito e DTD), digito:
Como observamos
acima, não temos tags obrigatórias a seguir. Devido a sua
estrutura de árvore, vamos chamar essas tags de nós. O único
padrão que tivemos de seguir foi que ao iniciar devemos possuir
um nó inicial no caso <agenda>. Dentro desse "pai"
temos quatro "filhos", cada um com seu nó de nome pessoa,
os quais também fechamos ao terminar de atribuir uma descrição
para a pessoa.
Nesse exemplo nosso primeiro nó, agenda, pode ser acessado por
firstChild, seu nome seria acessado por nodeName.
Então firstChild.nodeName nos retorna agenda.
Com este único documento podemos gerar várias saídas,
como por exemplo para um dispositível móvel, PDF, documentos
Adobe como In Design. Essa meta linguagem é muito boa para compreensão
também como entrada de dados, mas neste módulo não
vamos falar sobre isso.
Há muitas formas do servidor responder a uma requisição
e a maioria delas pode ser utilizada com aplicações Flash.
Depende apenas da maneira como os dados de resposta são trabalhados
pelo desenvolvedor Flash.
Vamos parar com o XML por aqui.
A partir dessas informações vamos testar algumas coisas
no Flash. Não esquecendo que o XML deve vir de uma requisição
http do servidor através de um ASP, PHP, ColdFusion, JSP, etc.
Salve o texto acima como xmlBasico.xml, defina a codificação
Encoding: UTF-8, isso nos permitirá ler todos
os acentos no Flash.
No
Flash Document em branco:
Salvem
o arquivo na mesma pasta do XML.
Farei todas as actions no frame 1 chamado AS, mas nada nos impede de fazer
os textos dinâmicos desenhando-os. No layer AS, chamamos a janela
de actions (F9) e nela colocamos o seguinte:
var
leitor:XML = new XML();
leitor.load("xmlBasico.xml");
leitor.onLoad = leia;
leitor.ignoreWhite = true;
Vamos entender
as Actions, na primeira linha estou dizendo que leitor
será um objeto XML.
Esse objeto XML irá ler o arquivo xmlBasico.xml.
Ao ler nosso objeto não faz nada, por isso inclui a ação
onLoad, que diz que ao carregar o xml chamará
a função leia.
Na quarta linha estamos dizendo que vamos ignorar os espaços em
branco.... mas como assim ignorar espaços em branco? Sim, isso
mesmo, devido ao Flash ler o XML a risca, cada tabulação
ou quebra de linha é considerado como caractere de espaço,
por isso vamos ignorá-los.
Abaixo deles vamos criar alguns textos. Vocês podem criar os textos
no palco mesmo. Devem ser dinâmicos e conter os nomes nas instâncias
e não na variável. Vou criar tudo dinamicamente mas não
explicarei isso. Tentarei também criar do jeito mais simples possível,
sem loop e sem duplicate.
Estamos agora
com três instâncias no palco, nome, email
e descricao. Com esse código autoSize, qualquer
texto ali inserido será automaticamente redimencionado.
Agora por último, mas não menos importante, vamos criar
nossa função leia(), que é quem
trará os códigos do XML para o Flash.
Bom, dentro
da função criei um apontador para o caminho firstChild
que pega o primeiro nó e mais um firstChild para
pegar o segundo nó, onó dos dados da agenda. Nosso apontador
funciona como um atalho e não como um apontador propriamente dito
em outras linguagens de programação.
Na terceira linha, a instancia nome chamará um
texto, por isso o .text que virá do nosso ponteiro
mais o atributo nome. Após isso concatenamos com um simples espaço
para separar nome do atributo sobrenome.
Na quarta linha, chamamos o atributo email e na quinta
linha chamamos mais um filho, que é onde o texto da descrição
se encontra. Com certeza poderíamos colocar como um atributo também,
mas geralmente a descrição é um texto longo, onde
ficaria difícil de entender a estrutura dos nós.
Para teste, aplique dentro da função leia,
esses comandos:
trace(leitor.firstChild.nodeName);
// traz o nome do primeiro nó, no cado
agenda
trace(leitor.firstChild.childNodes.length); //
traz o número de nós filhos de agenda, no caso 4
Uma última
dica para acessar sua "irmãs" é com o nextSibling,
em nossa estrutura. Para acessar os dados do Tiago Venegas, utilizamos
firstChild.firstChild.nextSibling.
O código final fica assim:
Nosso exemplo
acaba por aqui. Cabe a você agora chamar os outros dois nomes ou
mesmo alterar os nós e dados contidos neles. Baixe aqui os rquivos desse tutorial.
A linguagem XML da pra ser aplicada em vários exemplos, desde websites
a aplicativos ricos. Fiz um teste recente no meu próprio site http://www.leandroamano.com.br/.
É um comboBox preenchido com XML para download de alguns arquivos.
Caso não achem, procurem internamente no site, o arquivo estará
lá (e meu blog estará pronto... =D).
Grande abraço
e até a próxima!
Devido à reformulação implementada no site, pode ser que você encontre alguns links quebrados. Por favor, ajude-nos a corrigir eventuais problemas nos informando links quebrados
Leandro muito bom sua explicação, porém estou tendo um problema numa variação desta ideia.
No seu tutorial colocamos cada informação da agenda em um "texto dinâmico" especifico para ela. (ex. nome no text dinamico nome; e-mail no text dinamico email e assim por diante).
O que estou tentando e sem sucesso e colocar no caso todas estas informações (nome e email) dentro de um unico texto dinâmico, seria possível?
Se puderes colabora com sua opnião fico grato!