Técnico
_ _ Bruno Sales_ 8 Comentários

Two-way Data Binding – Flex 4

Two-way data binding é uma das novidades do flex 4 e para quem não conhece, vou mostrar como funciona e o que mudou em relação ao Flex 3.

No Flex 3 tinhamos data binding de apenas uma via, como mostra o exemplo abaixo:




Nesse exemplo, caso o valor da caixa de texto do tiValor1 mudasse, o valor da caixa de texto do tiValor2 seria alterado também, porém, se o valor da caixa tiValor2 fosse alterado, nada seria refletido a caixa de texto tiValor1.

No Flex 4 temos data binding de duas vias, como mostra o exemplo:




Nesse exemplo notamos que a anotação “@” foi colocada antes do meu código “{tiValor1.text}”, essa anotação identifica um data binding de duas vias. O resultado desse exemplo é: Caso eu altere o texto da caixa de texto tiValor1, ele será refletido na caixa de texto tiValor2, e vice-versa.

Obviamente esse exemplo da funcionalidade é muito básico e serve apenas para demonstrar a funcionalidade, logo vou apresentar uma situação real que acontece a todo momento em qualquer aplicação.

Para o nosso exemplo real, vou utilizar uma situação comum para qualquer tipo de aplicação, o CRUD. Para todo CRUD precisamos sempre fazer essas 3 operações:
1. Mostrar o objeto carregado do back-end nas caixas de texto. (Famoso método carregaObjeto)
2. Atualizar o objeto com os novos valores das caixas de texto. (Famoso método preencherObjeto)
3. Limpar as caixas de textos. (Famoso método limpar)

No flex 3 teriamos o seguinte cenário.
Para a situação 1:
caixaDeTexto.text = Objeto.valor;
Para a situação 2:
Objeto.valor = caixaDeTexto.text;
Para a situação 3:
caixaDeTexto.text = “”;

Para quem usava o data binding do flex 3 de uma forma correta, conseguia resolver uma das situações com ele, mas nas outras situações sempre acabava escrevendo a linha de código apresentada.

No flex 4 poderiamos resolver da seguinte forma:



Com essa simples mudança, nós evitaríamos todas as situações acima, dispensando os métodos de carregarObjeto, preencherObjeto e limpar objeto.

Veja o exemplo funcional abaixo:
[kml_flashembed movie=”https://www.redspark.io/wp-content/uploads/TwoWayBind.swf” width=”600″ height=”450″ fversion=”10″/]

Fonte:






1
Bruno Sales
São Paulo

♥15

Autor(a)

Bruno Sales

Comentários (8)

  1. Leonardo
    25 de fevereiro de 2011
    Responder

    Post muito bom, só podia falar mais sobre quando a propriedade do objeto for do tipo int ou number.

  2. Tweets that mention Two-way Data Binding – Flex 4 | DClick Team Weblog [pt] -- Topsy.com
    25 de fevereiro de 2011
    Responder

    […] This post was mentioned on Twitter by flashbrasil, Renato Gomes. Renato Gomes said: Two-way Data Binding – Flex 4: Twitter! Two-way data binding é uma das novidades do flex 4 e para quem não conhe… http://bit.ly/i8X7cK […]

  3. João Felipe - Jotaefe
    26 de fevereiro de 2011
    Responder

    Muito bom Bruno,

    Este novo recurso realmente é uma mão na roda hehe, gostei do exemplo que utilizou para demonstrar a utilização, parabéns.

    Abraços,

  4. Two-way Data Binding – Flex 4 – Problema de Conversão de Tipo | DClick Team Weblog [pt]
    27 de fevereiro de 2011
    Responder

    […] Problema de Conversão de Tipo Twitter! Para quem já tentou utilizar o Two-way Data Binding (post) em um projeto, deve ter caído em problemas de conversão de tipo, como mostrado pela imagem […]

  5. Bruno Ferreira
    1 de março de 2011
    Responder

    Bom dia Bruno,
    Primeiramente parabéns pelo post, realmente se trata de um recurso bastante útil, além de muito interessante.
    Eu gostaria de saber se existe a possibilidade de implementar o Data Binding de duas vias em declarações e/ou criações de componentes via action script.
    Para ficar mais claro veja o exemplo abaixo.

    txtAbreviacao=new TextInput();
    txtAbreviacao.maxChars=25;
    txtAbreviacao.text = ???
    frmItem.addChild(txtAbreviacao);

    O que teria de ser colocado na propriedade “text” do TextInput para que tivesse o mesmo resultado do seu exemplo?

    Grato pela atenção.

  6. Two-way Data Binding – Flex 4 – Objetos complexos em componentes de lista | DClick Team Weblog [pt]
    2 de março de 2011
    Responder

    […] – Flex 4 – Objetos complexos em componentes de lista Twitter! Para quem acompanhou o primeiro post e o segundo post sobre Two-way Data Binding não pode deixar de conferir esse screencast onde […]

  7. Bruno Sales
    3 de março de 2011
    Responder

    @Bruno Ferreira

    Eu tentei ver o AS que é gerado quando utilizamos two-way data binding porém ele é bem extenso e confuso, precisaria de mais tempo para enteder e extrair o necessário.
    Caso você queira ver como ele se comporta, faça o exemplo citado e compile com o argumento -keep-generated-actionscript.

  8. Joel Backschat
    1 de setembro de 2011
    Responder

    Muito bom a DCLICK como sempre de parabéns.

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *