Flex4 – Usando data binding bidirecional com XMLList

Colocado por Pablo Souza na(s) categoria(s): 1, 2009, 4, Adobe, Air, app, AR, bar, BI, blog, class, comunidade, Data Binding, DataProvider, Desenvolvedor, desenvolvedores, exemplo, Flex, Flex 3, Flex 4, fonte, for, ide, IE, if, int, label, layout, library, menu, MXML, O, on, Ria’s Geral, spark, tag, TextInput, UI, utils, Ved, wow, XML, XMLList em 12 28th, 2010 | Sem comentários

Eu já falei na semana passada sobre o Data Binding bidirecional, e hoje volto a falar devido a algumas dúvidas que se tornaram recorrentes em fóruns da comunidade de desenvolvedores Flex. Essa funcionalidade foi uma das coisas que simplificaram as coisas no Flex 4, basicamente permitindo que você utilize uma propriedade tanto como fonte quanto como destino para um determinado valor.

No Flex 3 tinhamos a possibilidade de fazer binding bidirecional usando o método mx.binding.utils.BindingUtils.bindProperty() ou a tag mx:binding. Porém no Flex 4 a nova notação @{property} simplificou a sintaxe. Vale lembrar que o uso do data binding no Flex vem com um alto custo de performance, portanto sempre analise suas necessidades antes de sair utilizando-o por todo lado em sua aplicação.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<?xml version="1.0" encoding="utf-8"?>

<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"

               xmlns:s="library://ns.adobe.com/flex/spark"

               xmlns:mx="library://ns.adobe.com/flex/mx">



    <fx:Declarations>



        <fx:XMLList id="meuMenu">

            <menuitem label="@{txtItemMenu.text}"/>

            <menuitem label="Item 02"/>

        </fx:XMLList> 



    </fx:Declarations>



    <s:layout>

        <s:VerticalLayout horizontalAlign="center" verticalAlign="middle" gap="10"/>

    </s:layout>



    <mx:MenuBar labelField="@label" dataProvider="{meuMenu}" />



    <s:TextInput id="txtItemMenu" text="Item 01" />



</s:Application>