Contedo 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

Em caso de dúvidas acessem o nosso fórum.