Você está na página 1de 23

Data:

Nome: XML e Data Components no Flash MX 2004


24/04/2004

Olá prezados leitores do FlashMasters. Desculpem a demora, pois tive problemas com tempo em
virtude de muito trabalho, mas estou de volta e agora vou mostrar para vocês mais uma das
novidades do FMX 2004: os Data components. Usaremos nesse tutorial o componente XML
Connector; acessaremos um arquivo no formato xml; construiremos a aplicação - que você
pode ver logo abaixo - programando apenas uma única linha de código no Flash. O que, sem
dúvida, vai facilitar muito a vida dos designers que querem fazer uma aplicação em Flash mais
inteligente e, também, descansar os dedos dos programadores. Você deve estar pensando como
vamos fazer uma aplicação em Flash acessando XML, programando apenas uma linha. Só lendo
a matéria pra saber :-D heuehuee.

E aí, gostaram do que vamos desenvolver? :-D

Vamos ao nosso arquivo XML. Ele deverá ter a seguinte estrutura:

<?xml version="1.0" encoding="UTF-8"?>


<lista>
<colunistas>
<nome>Maxwell Dayvson</nome>
<id>04</id>
<coluna>Flash e AS na prática</coluna>
<emails>&lt;a
href='mailto:maxwellb@terra.com.br'&gt;maxwellb@terra.com.br&lt;/a&gt;</emails>
<descricao>Vamos ao Flash MX 2004 (ao infinito e além)</descricao>
<link>&lt;a
href='http://www.flashmasters.com.br/?site=colunas&amp;as=mostra&amp;cat=8&amp;id=35'
&gt;Rotacionando campos de texto dinâmicos&lt;/a&gt;</link>
<foto>http://www.flashmasters.com.br/colunas/maxwell/foto.jpg</foto>
</colunistas>
</lista>

Aqui eu coloquei apenas um nó do XML que é o nó que contém os dados da minha coluna, mais
a estrutura é a mesma para todos os outros. Baixe o xml completo no final do tutorial.

Vamos começar! Abaixo você pode observar nossa primeira tela, que se resume ao layout
existente do projeto. O primeiro passo será arrastar um componente loader para a posição,
como mostra a imagem, e atribuir uma instância a ele, de foto.

1
Agora iremos arrastar o componente label para o posição indicada abaixo, onde será exibido o
nome do colunista. Agora vamos atribuir a instância do componente como "nome" (sem aspas),
depois, habilitaremos a opção html do nosso componente label deixando-a como true,
mostrado na imagem abaixo.

2
Agora faremos o mesmo processo para os outros 3 campos que restam da nossa aplicação, que
são: email, link coluna e nome da coluna, lembrando de repetir o mesmo processo pra todos
eles, fazer uma cópia do componente label, dar a instância a cada um e habilitar a opção html
como true do componente. Em todos o html deve está como true.
obs: o componente label para o campo email, deverá tera a instância de email, assim
como o componente label link e coluna deverá ter a instância de link e coluna.

3
Agora adicionaremos o componente textArea para exibir a descrição da coluna escolhida. O
posicione, como mostra a imagem abaixo, atribua uma instância de descrição ao componente e
também habilite a opção html do mesmo. Se você desejar que o texto exibido no textArea não
possa ser evitável, marque a opção editable como false.

4
Agora arraste um componente comboBox. Será nele que iremos escolher o nome do colunista
para visualizar as informações disponíveis. Atribua uma instância ao componente, como lista,
como na imagem abaixo.

5
Agora vamos para a mágica. Iremos arrastar o componente XMLConnector, que será
responsável por receber os dados do nosso arquivo XML. Nesse componente iremos configurar
algumas opções, como por exemplo, a URL, que é o endereçamento do nosso arquivo XML,
tendo para essa coluna o colunistas.xml. Configurar a opção direction do componente como
receive para receber os dados e não esquecer de atribuir ao componente uma instância, que no
nosso exemplo será xcomm.

6
Vamos agora abrir o painel Component Inspector para configurar mais algumas opções. Com
o componente XML Connector, navegue até a aba Schema e, em results, clique no ícone
representado por uma folhinha com uma seta, na qual o mouse está sobre ele na imagem
abaixo, que é o responsável por importar o Schema do arquivo XML. Observe:

7
Quando clicamos na opção de Importar o Schema do XML irá abrir uma caixa de dialogo
pedindo para você informar o arquivo no qual deseja importar o Schema do mesmo, iremos
escolher o mesmo arquivo XML que informamos na opção URL do XML Connector, clicamos
em abrir e pronto.

8
Após termos clicado em abrir, a opção results da aba Schema irá exibir toda a estrutura do
nosso arquivo XML como mostra na imagem abaixo.

9
Continuando no painel Component Inspector, navegue até a aba Bindings, e lá clique no
sinal de [+]. Irá abrir uma caixa de dialogo, navegue ate o colunistas: Object, que está dentro
do nó lista do nosso xml. Veja na figura a seguir. Depois clique em ok.

10
Agora temos um Bindings na nossa lista, logo abaixo temos alguns campos que precisam ser
configurados. O primeiro a é o direction, deixe o value na opção out, depois dê dois cliques no
value do bound to (que será quem você quer conectar o bindgind selecionado, ou seja, a qual
componente você quer ligá-lo), irá abrir uma caixa de dialogo mostrando todos os componentes
que temos, iremos escolher o Combobox na Componente path e a opção dataProvider no
Schema locations, como mostra na imagem abaixo. Depois disso, clique em ok.

11
Ainda nas configurações do binding que criamos, vamos configurar o terceiro campo que é o
formatter. Iremos escolher a opção Rearrange Fields para organizar a forma como o nosso
ComboBox vai receber os valores do XML.

12
E agora, iremos configurar o último campo, o formatter options. Dê dois cliques nele quando
abrir a caixa de dialogo, mostrado na imagem abaixo. Informaremos as opções label e data do
Combobox Para label vamos atribuir a tag nome do XML, para data iremos atribuir o valor da
tag id do XML. Então fica assim: label=nome;data=id
Clique em ok.

13
Agora iremos adicionar mais um Bindings. Para isso, clique novamente no sinal de [+], e agora
navegue até a opção nome, como mostra a imagem abaixo. Depois clique em ok. Esse bindign
será responsável por exibir no componente Label, com a instância de nome, o valor da tag
nome do nosso XML.

14
Agora que temos o nosso 2º Binding, vamos configurá-lo também nas opções que temos
abaixo. Para o caso do label, precisaremos apenas configurar a opção bound to, dando dois
cliques nela. Ao abrir a caixa de dialogo, escolha o componente Label <nome> (imagem
abaixo) e clique em ok. Observe que temos um último campo das configurações, com o nome de
Index for 'colun..., exibindo a opção 0, que é o primeiro registro, ou seja, assim que você
testar o swf, ele vai exibir o primeiro registro do qual foi atribuído.
Ex.: você, no seu xml, tem os nomes: josé,maria,joão. Ele mostrará o valor joão, quando
estiver com o valor 0;

15
Agora criaremos mais um binding para o mesmo componente Label nome. Clique no botão
[+], e escolha novamente a opção nome na caixa de dialogo. Clique em ok.

16
Novamente configure o bound to ligando-o ao componente Label <nome>, como mostrado na
imagem. Clique em ok. Você deve estar se perguntando: estamos fazendo a mesma coisa, mas
para que?
Bom, nesse novo binding será mostrado o valor da tag nome do XML, de acordo com o nome
do colunista escolhido, no ComboBox e, para isso, iremos configurar mais uma opção que
veremos na próxima imagem.

17
Agora vamos configurar o campo Index for 'colun... para indicar que o componente label
<nome> deve exibir a tag nome do nosso arquivo XML de acordo com a opção escolhida no
Combobox. Para tanto, dê dois clique no value do Index for 'colun... Abrindo a caixa de
dialogo, desmarque a opção Use constant value. Escolha o componente ComboBox <lista>
em Component path, e em Schema location escolha a opção selectedIndex:Number (como
na imagem abaixo) e clique em ok.

Recapitulando o que fizemos: criar dois bindings para o componente Label <nome>, um
para ele iniciar mostrando o valor zero e outro pra ele mudar o que é exibido no componente, de
acordo com o a opção selecionada no comboBox <lista>. Agora iremos repetir esses mesmo
passos para os componentes email, link, coluna. Não esquecendo de criar 2 bindings para cada
um, sendo um com o Index for 'colun... tendo como valor 0, e o outro que mude de acordo
com o Combobox, como fizemos anteriormente.

18
Então, após ter feito todo o processo acima, estaremos com os seguintes bindings iguais da
imagem abaixo. Agora criaremos mais um binding para ligar ao componente TextArea
<descricao>, que será responsável por exibir a descrição da coluna escolhida. Novamente,
clique no sinal [+] do painel Bindings e na caixa de dialogo escolha o TextArea <descricao>
e clique em ok.

19
Então criamos mais um binding para o componente TextArea <descricao>, repetindo o
mesmo processo que fizemos acima, so que agora iremos configurar o campo Index for
'colun... Como ja sabemos o que teremos que fazer é, deixar que nosso componente TextArea
<descricao> exibida o conteúdo de acordo com a opção escolhida no ComboBox <lista>,
para isso faça como mostra a imagem abaixo

20
E por fim, criaremos os dois últimos Bindings que mostrarão a foto correspondente ao colunista
escholhido no ComboBox <lista>, para isso, clique no sinal de [+], escolha a opção foto na
caixa de dialogo Add Binding,
dai clique em ok, e configure o bound to, como mostra na imagem abaixo,fazendo isso o
componente Loader <foto> e deixando o parametro Index for 'colun... do Binding com o
valor 0, o Loader <foto> vai exibir o primeiro registro da tag foto do XML. Clique em ok.

21
Repita os passos, que fizemos acima pra criar o último Binding para o componente Loader
<foto>, e agora vamos configurar o parametro Index for 'colun... como mostra na imagem
abaixo, fazemo isso como já sabemos a foto que vai ser exibida será de acordo com a seleção no
Combobox.

Ufa... finalmente, mais foi simples né!?

22
Para que não digam que não iremos programar nada, :-D vamos escrever uma linha de código.
Crie um layer novo,vamos inserir nosso código nessa layer, para isso usamos a instância do
componente XML Connector, e executar método trigger(),para inicializar o componente XML
Connector

this.xcomm.trigger();

Pronto pessoal vimos como foi simples a criação da nossa aplicação com os novos componente
no FMX 2004 Professional, agora é só treinar e pensar nas suas próprias aplicações e usar e
abusar dessa maravilha.

Clique aqui para baixar o exemplo usado neste artigo.

Espero que tenham gostado

Abraços
Maxwell Dayvson

23