Nome: XML e Data Components no Flash MX 2004

Data: 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

Master your semester with Scribd & The New York Times

Special offer for students: Only $4.99/month.

Master your semester with Scribd & The New York Times

Cancel anytime.