Conteúdo Flash - Usando o XML Connector

Olá pessoal, estarei explicando neste tutorial o uso de um component muito interessante que o
Flash possui, o XMLConnector. O XMLConnector facilita em muito a vida do programador, além de
otimizar seu trabalho, pois se você é daquelas pessoas que não gostam ou não tem paciência para
lidar com nós de arquivos XML, é uma boa saída. Lembrando que, em prol de adquirir mais
conhecimento, é melhor utilizar a classe XML do ActionScript e fazer tudo na mão mesmo.

Produzindo o XML

Neste tutorial estaremos utilizando um arquivo XML, que conterá os dados que serão lidos pelo
XMLConnector. Copie o código abaixo em um editor a sua escolha, e salve-o como xml.xml no
mesmo diretório do .fla criado no tutorial.

Como o objetivo do tutorial não é entender a estrutura de um XML e como funciona a classe XML do
AS, recomendo dar uma lida no tutorial Estudo de XML.
Preparando o palco
Agora iremos puxar para o palco os components que serão utilizados:

XMLConnector (conn)
ComboBox (titulo)
TextInput (autor)
TextInput (data)
TextArea (texto)

(.:. Obs: Os nomes entre parenteses, são seus respectivos nomes de instancia)
Com os objetos devidamente instanciados, vamos agora trabalhar com o XMLConnector. Abra o
painel Component Inspector (Window > Ccomponent Inspector) e selecione o component
XMLConnector do palco e vá para tab Parameters, para definir alguns parametros. Defina-os como
na figura abaixo.
Com os parametros ja definidos vá para a tab Schema. Note que já haverá duas propriedades,
results e params. Selecione results e clique no botão “Import a schema from a sample XML file”. Na
janela que se abre procure o arquivo xml.xml e clique em abrir, feito isso o component irá
reconhecer automaticamente os nós do XML. (figura abaixo)
Agora entre na tab Bindings, vamos relacionar os nós com os components do palco. Na tab Bindings
clique no botão de “+” no canto superior esquerdo (add binding), na janela que se abre selecione a
propriedade “noticia : Array”. Clique em OK. (figura abaixo)
Selecione a propriedade que será exibida no painel e modifique seus valores para:
direction - clique na seta e selecione a opção out (.:. Obs: Utilize este valor para todos os
components)
bound to - clique na lupa, na janela que se abre, em Component path selecione o ComboBox
(titulo) e em Schema location, selecione “dataProvider : Array”. (figura abaixo)
formatter - clique na seta e selecione “Rearrange Fields”, no component ComboBox nós temos dois
parametros em especial, label e data, para defini-los iremos usar a propriedade formatter options.
Clique na lupa, a janela “Rearrange Fields” irá aparecer, no campo “Fields definitions” digite
“label=titulo;data=data”. (figura abaixo)
Clique em OK. Agora utilize o mesmo procedimento para adicionar outra propriedade, clique em
add bindings, selecione a propriedade “autor : String”. O valor da propriedade direction como
descrito na observação acima, é igual para todos os components, em bound to clique na lupa e
selecione o component correspondente a essa propriedade. Os campos formatter e formatter
options não serão alterados. No campo Index for ‘noticia’, clique na lupa, na janela “Bound To”
desmarque a opção “Use constant value”, em Component path selecione o ComboBox (titulo) e em
Schema location selecione a opção “selectedIndex : Number”, clique em OK. (figura abaixo)
(.:. Obs: A partir daqui todos os outros components não terão os campos formatter e formatter
options alterados)
Repita o descrito acima para todos os outros components, apenas modifique o nó. Em bound to
selecione o component correspondente ao nó.

Definindo as ações do XMLConnector

Vamos agora fazer o component funcionar. O XMLConnector vai precisar de uma ação apenas para
funcionar, crie uma nova layer, nomei-a como actions, agora abra o painal Behaviors (Window >
Behaviors). Selecione o quadro criado na nova layer, clique no sinal de “+” no painel Behaviors,
selecione Data > Trigger Data Source. Na janela Trigger Data Source, selecione a instancia do
component XMLConnector e clique em OK. (figura abaixo)
Pronto!
Agora é só dar um CTRL+Enter e ver o resultado. Lembrando que, esse foi um tutorial simples, mas
que já é um bom início para alguma coisa mais complexa.
Abraços.

Autor: Marcus Henrique - Colunista de Flash do Portal MXSTUDIO