logo
  • Home
  • Acerca
  • Autores
  • Faq
  • Rede
  Twitter   Feed-me! RSS!
Mai 19

10 coisas que um bom programador flex deve saber

Escrito por Daniel Schmitz em .NET, 1, 2.0, 2009, 3.5, 4, 6, action, Action Script, Actionscript, ActionScript 3, Actionscript 3.0, Actionscript3, Adobe, Air, api, Aplicativos, Apresentação, AR, Arquitetura, arte, Artigo, as3, BI, Bindable, blog, bug, builder 4, C#, Cairngorm, class, classe, classes, código, código fonte, Componente, Componentes, components, control, Controles, css, Curso, Cursos, custom, dados, Data Binding, DataGrid, Debug, demo, desempenho, Desenvolvedor, desenvolvedores, Design, developer, development, dispatch, dispatchEvent, DRE, empresas, err, Estilo, event, EventListener, Evento, Eventos, eventos customizados, events, Excel, explorer, Ferramenta, flash, flash builder, Flash Builder 4, Flash Player, Flex, Flex 3, Flex 4, Flex Examples, fonte, for, framework, Frameworks, Google, Gráfico, handle, html, HTTPService, ide, IE, if, int, interface, Java, layout, lista, live, Livro, lógica, map, Mate, MAX 2009, mvc, MXML, O, on, oop, opensource, Outros, player, polimorfismo, problema, problemas, programação, Projetos, pt, RIA, Ria’s Geral, ruby, S+S, site, skins, Sun, tag, TAT, Tech, Tecnologia, tv, UI, uint, utf8, Ved, Vídeo, vs, web, Webservice, XML, XP @ 05 19th, 2011 | via http://flex.etc.br | Sem comentários
Daniel Schmitz
? X
  • Bookmarks

Blinkbits BlinkLists BlogLines Blogmarks Buddymarks CiteULike Co.mments Del.icio.us Digg Diigo

Fark Feed Me Links Furl Google Linkagogo ma.gnolia Mister Wong Newsvine Propeller Rawsugar

Reddit Rojo Simpy Sphinn Spurl Squidoo StumbleUpon Tailrank Technorati Yahoo

More »

Esta é uma tradução do seguinte artigo: 10 Things A Good Flex Developer Should Know

Para ser um bom programador Flex é preciso mais que simplesmente saber como usar alguns componentes nativos do Flex. É preciso muito mais.

Aqui está minha contribuição sobre o assunto… juntamente com alguns recursos ou algumas palavras-chave que você poderá pesquisar facilmente através do Google.

Por favor, comente no blog se você achar que esqueci algo (o que é inevitável) ou se quiser sugerir alguns recursos interessantes que devo acrescentar.

1- Programação orientada a Objetos (OO)

O Flex se baseia na linguagem ActionScript3, que é totalmente orientada a objetos. Embora não seja um conceito fácil de aprender, programação orientada a objeto é um pré-requisito para aprender Flex. Se já possui experiência com OO (Java, C#, Ruby, etc), então você está pronto. Se não, você precisará pegar um livro sobre OO e começar a aprender o mais rápido possível.

· Head First Java (Java? Sim, Eu sei. Mas confie em mim.)

· Object-oriented programming with ActionScript 3.0

Nota: Alguns de vocês poderão perguntar – “O que são padrões de projetos?”. Vamos dar um passo de cada vez? Preocupe-se em entender classes e objetos, interfaces, herança, composição, polimorfismo, encapsulamento, etc. Só então considere estudar padrões de projetos. De fato, se eu escrever um post intitulado “10 coisas que um GRANDE programador Flex deve saber”, padrões de projeto estará nessa lista.

2- ActionScript/MXML

ActionScript é a linguagem de programação usada juntamente com MXML para criar aplicações Flex. MXML é uma linguagem de marcação baseada em XML. Cada tag MXML é mapeada diretamente para uma classe ActionScript correspondente. MXML é usado pelos desenvolvedores Flex principalmente para apresentar a interface do usuário, enquanto que, o ActionScript é usado para a lógica de negócio. Com exceções, é claro.

O Framework Flex inclui centenas de classes ActionScript e interfaces usadas para desenvolver aplicações Flex. Seu nível de habilidade como um desenvolvedor Flex está diretamente ligado ao seu conhecimento em relação ao ActionScript e MXML.

· Flex in a Week

· Tour De Flex

· Essential ActionScript 3.0

Nota: Fique ? vontade com a API do Flex. Como um desenvolvedor Flex, você vai usá-la diariamente.

3- Debugging

Boa parte do tempo de qualquer programador é gasto no debugging. Obviamente, é necessário debugar para rastrear a causa de bugs. No entanto, também é uma ótima maneira de conhecer o código fonte.

Felizmente, existem muitas ferramentas disponíveis para ajudá-lo com o trabalho de debugging. Invista algum tempo para aprender essas ferramentas. Seu investimento irá proporcionar retorno imediato.

· Flash Builder 4.5 Debugger

· De MonsterDebugger

· Kap Inspect

4- Programação orientada a eventos

Aplicações Flex são orientadas a eventos. Toda ação é o resultado de um evento assíncrono.

Como um desenvolvedor Flex, você deve saber como responder a eventos e como criar e disparar eventos. Para isso, é necessária uma sólida compreensão da arquitetura de eventos do Flex, incluindo familiaridade com os seguintes conceitos:

· Eventos nativos (Flash Player ou Framework de eventos Flex)

· Eventos customizados (Eventos criados pelo desenvolvedor, que estende a classe Event ou uma de suas subclasses)

· Disparar eventos, propagação de eventos (ver classe EventDispatcher e seu método dispatchEvent)

· Event listeners, event handlers (ver classe EventDispatcher e seus métodos addEventListener e removeEventListener)

· Fases do evento (capture, target & bubbling phases; target vs. currentTarget)

· Objetos do evento, tipos de eventos (ver classe Event e subclasses)

· Comportamento do evento default (ver classe Event e subclasses e seu método preventDefault)

5- Data binding

Aparentemente, data binding é um “no brainer”[1]. É só vincular o valor de uma propriedade ao valor de outra propriedade usando chaves. Quando o valor da propriedade de origem for alterado, o valor da propriedade de destino também é alterado.

No entanto, existe uma sobrecarga associada ao uso indiscriminado de data binding, podendo haver implicações no desempenho. Uma sólida compreensão de data binding ajudará a determinar quando é apropriado o seu uso e quando não é.

· Flex Tips – Using Bindable Metadata Events

· Michael Labriola’s presentation entitled Diving in the Data Binding Waters

6- Item renderers

Uma característica de uma aplicação Flex bem projetada é a apresentação dos dados de uma forma visualmente atraente. O Flex oferece uma série de controles baseados em listas (DataGrid, List, TileList, HorizontalList, etc) responsável pela apresentação dos dados. Portanto, pode-se personalizar a exibição dos dados com a ajuda de item renderers.

Você irá consumir muito tempo trabalhando com item renderers. Então é melhor saber bem como ele funciona.

· Flex Examples – Item Renderers in Practice

· A Deep Dive into Flex 4 Lists and Layouts

7- Acesso remoto a dados

Você conhece muitas aplicações que não interagem com os dados? Eu também não. Saiba como recuperar dados através de HTTPServive, WebService e RemoteObject. A arquitetura do framework Flex também poderá ajudá-lo com isso (ver #9).

· Retrieving and handling data with HTTPService

· Retrieving and handling data with WebService

· Retrieving and handling data with RemoteObject

8- Styling / Skinning

Não vamos nos esquecer que o Flex é uma tecnologia de interface e, como tal, certamente há expectativas em relação ao design. Como um desenvolvedor Flex, você deve ser capaz de personalizar a aparência de seus aplicativos usando estilos CSS, gráficos e/ou skins.

Com o Flex 4, não há mais desculpas. Use um pouco do seu tempo para conhecer de uma vez o lado direito do seu cérebro. É uma excelente mudança de paradigma, e vai ajudá-lo a diferenciar-se dos outros desenvolvedores Flex.

· Flex Style Explorer

· ScaleNine

· Introduction to Flex: Part 3 – Styles & Skins

9- Pelo menos um framework de arquitetura Flex

A maioria dos frameworks de arquitetura Flex impõe uma separação de camadas através da implementação do MVC (model-view-controller). Além disso, esses mesmos frameworks especificam como seu código deve ser organizado dentro do projeto Flex.

Embora muitos argumentariam que os frameworks são desnecessários, acredito que os desenvolvedores Flex se beneficiam em muitos aspectos da experiência de usá-los. Basta assistir ? s técnicas (boas ou más) empregadas por um framework para resolver problemas complexos de arquitetura. Isso contribuirá para seu crescimento como um desenvolvedor Flex.

Além disso, é difícil negar o fato de que a experiência com framework aumentará substancialmente o seu valor comercial como um desenvolvedor Flex. Jesse Warden me disse recentemente “Existem poucas empresas que não usam frameworks, mas isso é raro. Queiramos ou não, está na ‘moda’”. Eu concordo com Jesse.

· Cairngorm

· Parsley

· PureMVC

· Mate

· Swiz

· Robotlegs

10- Ciclo de vida de componentes e display list

Eu não estava convencido da necessidade de aprender o ciclo de vida de componentes Flex ou da display list até que escrevi o meu primeiro componente customizado (na verdade foi um componente semi-customizado que se estendia do componente Canvas). Até essa época eu usava componentes nativos do Flex, usando apenas o MXML enquanto que a display list era renderizada para mim. Em nenhuma vez tive que usar os métodos addChild, createChildren ou commitProperties, e usava o evento creatiomComplete para tudo.

Meu primeiro componente customizado usava uma quantidade enorme de eventos assíncronos, e eu não poderia prever a ordem em que cada evento seria disparado. Só depois que eu aprendi os métodos e variáveis do ciclo de vida dos componentes do Flex que eu pude ter um certo controle.

Estes métodos do ciclo de vida estão lá para serem usados. Saiba como funcionam e use-os para o seu benefício. Sua vida será mais fácil e você perderá menos cabelos.

· Colin Moock’s Lost ActionScript Weekend – The Display List

· Creating New Components in Flex 3

· Diving Deep with the Flex Component Lifecycle

· Understanding the Flex 3 Component and Framework Lifecycle


[1] Expressão americana usada para algo que requer pouco esforço mental ou inteligência para realizar ou compreender

Mar 3

Two-way Data Binding – Flex 4 – Objetos complexos em componentes de lista

Escrito por DClick Team em 1, 4, Actionscript, AR, BI, blog, Componente, Componentes, Data Binding, Download, Flex, Flex Components, int, library, lista, Number, O, on, problema, pt, Ria’s Geral, screen, Screencast, TAT, Twitter, Two-way Data Binding, UI, uint @ 03 3rd, 2011 | via http://blog.dclick.com.br/pt/ | Sem comentários
DClick Team
? X
  • Bookmarks

Blinkbits BlinkLists BlogLines Blogmarks Buddymarks CiteULike Co.mments Del.icio.us Digg Diigo

Fark Feed Me Links Furl Google Linkagogo ma.gnolia Mister Wong Newsvine Propeller Rawsugar

Reddit Rojo Simpy Sphinn Spurl Squidoo StumbleUpon Tailrank Technorati Yahoo

More »

primeiro post e o segundo post sobre Two-way Data Binding não pode deixar de conferir esse screencast onde apresento como utilizar objetos complexos em componentes de lista.

Faça o download da biblioteca aqui. Ela agora contém os seguintes componentes:

  • DropDownListCompare
  • NumberInput
Fev 27

Two-way Data Binding – Flex 4 – Problema de Conversão de Tipo

Escrito por DClick Team em 1, 4, 6, action, Actionscript, app, AR, BI, Bindable, blog, class, classe, Componente, components, Data Binding, Download, err, erro, exemplo, Flex, Flex Components, function, IE, if, image, isNaN, mg, NaN, Number, O, on, problema, problemas, pt, RIA, Ria’s Geral, RoR, spark, string, TAT, TextInput, Twitter, Two-way Data Binding, UI @ 02 27th, 2011 | via http://blog.dclick.com.br/pt/ | Sem comentários
DClick Team
? X
  • Bookmarks

Blinkbits BlinkLists BlogLines Blogmarks Buddymarks CiteULike Co.mments Del.icio.us Digg Diigo

Fark Feed Me Links Furl Google Linkagogo ma.gnolia Mister Wong Newsvine Propeller Rawsugar

Reddit Rojo Simpy Sphinn Spurl Squidoo StumbleUpon Tailrank Technorati Yahoo

More »

post) em um projeto, deve ter caído em problemas de conversão de tipo, como mostrado pela imagem abaixo:

Esse erro acontece por que estamos tentando fazer 2 operações:

  • 1. Atribuir o valor de user.id (Number) a proriedade text (String)
  • 2. Atribuir o valor de text (String) a proriedade user.id (Number)

A primeira operação funciona muito bem, pois a classe Number tem o método toString() que é chamado toda vez que fazemos esse tipo atribuição. Nosso problema está com o item 2, onde estamos tentando atribuir uma String a uma propriedade Number.

Para resolver essa situação eu criei a classe NumberInput que extende a classe TextInput do spark, e funciona com um wrapper para a propriedade text do TextInput, o source do novo componente é simples e fica assim:

PLAIN TEXT
ACTIONSCRIPT:

  1. package br.com.dclick.components
  2. {
  3. ? ?
  4. ? ? import spark.components.TextInput;
  5. ? ?
  6. ? ? public class NumberInput extends TextInput
  7. ? ? {
  8. ? ? ? ? public function NumberInput()
  9. ? ? ? ? {
  10. ? ? ? ? ? ? super();
  11. ? ? ? ? }
  12. ? ? ? ?
  13. ? ? ? ? [Bindable("change")]
  14. ? ? ? ? [Bindable("textChanged")]
  15. ? ? ? ? public function get textNumber():Number
  16. ? ? ? ? {
  17. ? ? ? ? ? ? return Number(text);
  18. ? ? ? ? }
  19. ? ? ? ?
  20. ? ? ? ? public function set textNumber(value:Number):void
  21. ? ? ? ? {
  22. ? ? ? ? ? ? text = isNaN(value)?“”:value.toString();
  23. ? ? ? ? }
  24. ? ? }
  25. }

Quando aplicamos o novo componente, o erro some do projeto e conseguimos compilar:

Abaixo segue o exemplo funcional:

Para fazer o download da biblioteca que contém o NumberInput, clique aqui.

Fev 25

Two-way Data Binding – Flex 4

Escrito por DClick Team em 1, 2009, 4, 6, action, Actionscript, Adobe, app, AR, back, BI, blog, carregar, código, CRUD, Data Binding, demo, exemplo, Flex, Flex 3, Flex 4, fonte, for, function, ide, IE, if, int, label, layout, library, Linha de Código, MXML, novidade, Novidades, O, on, pt, RIA, Ria’s Geral, spark, string, TAT, TextInput, Twitter, Two-way Data Binding, UI, uint, XML @ 02 25th, 2011 | via http://blog.dclick.com.br/pt/ | Sem comentários
DClick Team
? X
  • Bookmarks

Blinkbits BlinkLists BlogLines Blogmarks Buddymarks CiteULike Co.mments Del.icio.us Digg Diigo

Fark Feed Me Links Furl Google Linkagogo ma.gnolia Mister Wong Newsvine Propeller Rawsugar

Reddit Rojo Simpy Sphinn Spurl Squidoo StumbleUpon Tailrank Technorati Yahoo

More »

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:

PLAIN TEXT
ACTIONSCRIPT:

  1. “tiValor1″/>
  2. “tiValor2″ text=“{tiValor1.text}”/>

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:

PLAIN TEXT
ACTIONSCRIPT:

  1. “tiValor1″/>
  2. “tiValor2″ text=“@{tiValor1.text}”/>

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:

PLAIN TEXT
ACTIONSCRIPT:

  1. “caixaDeTexto” text=“@{Objeto.valor}”/>

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:

Fonte:

PLAIN TEXT
ACTIONSCRIPT:

  1. xml version=“1.0″ encoding=“utf-8″?>
  2. “http://ns.adobe.com/mxml/2009″
  3. ? ? ? ? ? ?? ? xmlns:s=“library://ns.adobe.com/flex/spark” maxHeight=“400″ maxWidth=“600″
  4. ? ? ? ? ? ?? ? xmlns:mx=“library://ns.adobe.com/flex/mx” width=“600″ height=“400″ xmlns:local=“*”>
  5. ? ?
  6. ? ? ? ? “user”>
  7. ? ? ? ? ? ? 1
  8. ? ? ? ? ? ? Bruno Sales
  9. ? ? ? ? ? ? São Paulo
  10. ? ? ? ?
  11. ? ?
  12. ? ?
  13. ? ?
  14. ? ? ? ? [CDATA[
  15. ? ? ? ? ? ? private function recarregar():void
  16. ? ? ? ? ? ? {
  17. ? ? ? ? ? ? ? ? user = new User("1", "Bruno Sales", "São Paulo");
  18. ? ? ? ? ? ? }
  19. ? ? ? ? ]]>
  20. ? ?
  21. ? ?
  22. ? ?
  23. ? ? ? ? “middle” horizontalAlign=“center”/>
  24. ? ?
  25. ? ?
  26. ? ? “Form” width=“250″ height=“180″>
  27. ? ? ? ?
  28. ? ? ? ? ? ? “Id”>
  29. ? ? ? ? ? ? ? ? “tiValor1″ text=“@{user.id}” maxChars=“20″/>
  30. ? ? ? ? ? ?
  31. ? ? ? ? ? ? “Nome”>
  32. ? ? ? ? ? ? ? ? “tiValor2″ text=“@{user.nome}” maxChars=“20″/>
  33. ? ? ? ? ? ?
  34. ? ? ? ? ? ? “Cidade”>
  35. ? ? ? ? ? ? ? ? “tiValor3″ text=“@{user.cidade}” maxChars=“20″/>
  36. ? ? ? ? ? ?
  37. ? ? ? ? ? ? “right”>
  38. ? ? ? ? ? ? ? ? Button label=“Limpar” click=“user = new User()”/>
  39. ? ? ? ? ? ?
  40. ? ? ? ?
  41. ? ?
  42. ? ?
  43. ? ? “Objeto User” width=“300″ height=“180″>
  44. ? ? ? ?
  45. ? ? ? ? ? ? “middle” horizontalAlign=“center”/>
  46. ? ? ? ?
  47. ? ? ? ? “label” text=“{user.toString()}”/>
  48. ? ? ? ? Button label=“Recarregar Objeto” click=“recarregar()”/>
  49. ? ?
  50. ?
Jan 6

Dica Flex – Construindo um Value Object

Escrito por Pablo Souza em 1, action, Actionscript, AR, auto, back, BI, Bindable, bug, class, classe, classes, código, Componente, Componentes, dados, Data Binding, Debug, Dica, email, flash, Flash Player, Flex, for, function, int, lista, lógica, monitor, O, on, Outros, player, pt, RIA, Ria’s Geral, serviço, string, tag, Tema, UI, UX @ 01 6th, 2011 | via http://rectius.com.br/blog | Sem comentários
Pablo Souza
? X
  • Bookmarks

Blinkbits BlinkLists BlogLines Blogmarks Buddymarks CiteULike Co.mments Del.icio.us Digg Diigo

Fark Feed Me Links Furl Google Linkagogo ma.gnolia Mister Wong Newsvine Propeller Rawsugar

Reddit Rojo Simpy Sphinn Spurl Squidoo StumbleUpon Tailrank Technorati Yahoo

More »

A dica Flex de hoje é a respeito de um objeto muito utilizado quando trafegamos dados entre o Flex e o back-end da nossa aplicação. Estamos falando dos Value Objects, também chamados de Data Transfer Objects (DTOs) ou apenas Transfer Objects, que têm como principal função o armazenamento de dados e que, ao contrário de outros componentes, estão livres de qualquer lógica de negócio. Os Value Objects são implementados como classes ActionScript.

Vamos supor que estamos desenvolvendo em nossa aplicação uma tela onde deveremos listar todos os usuários do sistema. Ao chamar um serviço no back-end recebemos a lista de usuários, sendo que cada um dos elementos dessa lista é representada por um Value Object como mostramos abaixo:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
package vo
{
    [Bindable]
    public class UsuarioVO
    {
        public var nome:String;
        public var email:String;
        public var senha:String;

        public function UsuarioVO()
        {
        }

    }
}

Repare que no trecho de código acima criamos um package chamado “vo” e dentro deles criamos uma classe ActionScript chamada “UsuarioVO.as”. Repare que a tag “Bindable” é utilizada antes da definição da classe, justamente porque queremos garantir que todos os atributos do nosso Value Object possam utilizar o data binding, ou seja, que suas alterações possam ser monitoradas por componentes do Flex. Lembrando que também poderíamos definir o data binding individualmente para cada atributo dessa classe ao invés de definir para a classe toda.

Uma outra dica interessante é definir o método toString() nas nossas classes, dessa forma toda vez que você utilizar seus Value Objects em lugares que o Flex precisa mostrar uma String, esse método será invocado automaticamente pelo Flash Player. Essa dica pode auxiliar nos traces e debugs da sua aplicação.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
package vo
{
    [Bindable]
    public class UsuarioVO
    {
        public var nome:String;
        public var email:String;
        public var senha:String;

        public function UsuarioVO()
        {
        }

        public function toString():String
        {
            return "Usuário: " + this.nome;
        }

    }
}

Espero que tenham gostado e até a próxima!

Dez 28

Flex4 – Usando data binding bidirecional com XMLList

Escrito por Pablo Souza em 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 @ 12 28th, 2010 | via http://rectius.com.br/blog | Sem comentários
Pablo Souza
? X
  • Bookmarks

Blinkbits BlinkLists BlogLines Blogmarks Buddymarks CiteULike Co.mments Del.icio.us Digg Diigo

Fark Feed Me Links Furl Google Linkagogo ma.gnolia Mister Wong Newsvine Propeller Rawsugar

Reddit Rojo Simpy Sphinn Spurl Squidoo StumbleUpon Tailrank Technorati Yahoo

More »

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>

Espero que tenham gostado. Baixe aqui o projeto de exemplo.

Até a próxima!

Ago 30

Os 45 tutoriais de Adobe Flex mais procurados

Escrito por Igor Musardo em .NET, 1, 2009, 3d, 4, 6, abas, Accordion, Actionscript, Adobe, Adobe Flex, AR, as3, AUG, BI, blog, bug, class, classe, cliente, Componente, Curso, custom, dados, Data Binding, DataGrid, Debug, degrafa, Design, Dica, dynamic, email, encode, encoder, Estilo, externalInterface, facebook, flash, Flex, Flex 3, Flex Builder, for, Formulário, Formulários, galeria, Google, Google Maps, Gráfico, how-to, html, ide, IE, if, image, imagens, int, interface, internet, Introdução, itemRenderer, Java, Javascript, jogo, JQuery, lista, map, maps, MXML, mysql, NaN, O, on, photoshop, PHP, player, procura, pt, RIA, Ria’s Geral, rss, tag, TAT, Tech, Tema, Tutoriais, Tutorial, UI, web, Webservice, Widget, window, windows, XML @ 08 30th, 2010 | via http://www.igormusardo.com.br | Sem comentários
Igor Musardo
? X
  • Bookmarks

Blinkbits BlinkLists BlogLines Blogmarks Buddymarks CiteULike Co.mments Del.icio.us Digg Diigo

Fark Feed Me Links Furl Google Linkagogo ma.gnolia Mister Wong Newsvine Propeller Rawsugar

Reddit Rojo Simpy Sphinn Spurl Squidoo StumbleUpon Tailrank Technorati Yahoo

More »

Está procurando alguns tutoriais de Adobe Flex? O blog Design Your Way separou 45 tutoriais muito bacanas para Adobe Flex, eu separei os que eu achei mais interessantes e relevantes.

Aproveite e bons estudos!

01º Flex MP3 Player

02º XML Básico com Flex 3

03º Criando uma galeria 3D do Flickr com Flex e Awaya3D

04º Usando a classe TextRange

05º Construindo um ItemRenderer para TileList

06º Rotacionando a ViewStack em forma de Cubo

07º Drag Drop simples no Flex

08º Cursor customizado no Flex

09º Como fazer gráficos no Flex

10º Visualizador de imagens em miniaturas no Flex

11º Jogo da Velha em Flex com Degrafa

12º Formulários no Flex

13º Sistema de Login em Flex com PHP

14º Pegando informações de músicas do WebService da Amazon com o Adobe Flex

15º Instalando e usando o Google Maps no Flex

16º Galeria de imagens com o componente Accordion e XML no Flex

17º Interação entre Flex e Javascript

18º Múltiplos uploads com JQuery e Flex ou Flash

19º Desenvolvendo janelas em Flex ou Flash para o Adobe Photoshop

20º Criando um cliente Digg em Flex

21º Introdução ao Data Binding

22º Data Grid com XML

23º Usando Flex, PHP e Json para modificar dados no MySQL

24º Trabalhando com o Debugger no Adobe Flex Builder

25º Criando um relógio de contagem regressiva em Flex

26º Transmitindo dados entre Flex e PHP usando Json

27º Criando um leitor de Feeds (RSS) em Flex

28º Como criar um gráfico de Bolhas em Flex

29º Usando Item Renderes

30º Criando um formulário de email em Flex com PHP

31º Criando grandes listas dinâmicas em Flex

32º Encodificador assincrono de JPEG

33º Criando seu jogo de aventura no Adobe Flex

34º Mudando o identificador de seleção de uma Lista no Flex

35º Criando um player customizado do You Tube em Adobe Flex

36º Criando uma lista de contatos usando Flex e XML

37º Criando um album de fotos do Facebook em Flex

38º Modificando o estilo da linha selecionada na Data Grid

Jul 6

Workshop de Adobe Flex 4 Integrado com Java EE

Escrito por Edgard Davidson em 1, 4, Accordion, action, Actionscript, Adobe, Adobe Flex, Air, app, AR, back, bar, BI, Blazeds, Cairngorm, class, Componente, Componentes, comunicação, configuração, control, Curso, Cursos, custom, dados, Data Binding, Desenvolvedor, desenvolvedores, Desenvolvimento, Desktop, Download, educacao, event, Evento, Eventos, eventos customizados, exemplo, Flex, for, Formação, framework, Frameworks, game, HTTPService, IE, if, image, int, internet, Introdução, Java, layout, lista, Mate, Mentoring, Mercado, mg, mvc, MXML, O, on, pagamento, procura, programação, Projetos, pt, RIA, Ria’s Geral, Rich Internet Application, Software, state, TAT, Tecnologia, Tema, Treinamento, UI, Vários, Ved, web, Webservice, window, Workshop, XML, XP @ 07 6th, 2010 | via http://edgarddavidson.com | 1 comentário
Edgard Davidson
? X
  • Bookmarks

Blinkbits BlinkLists BlogLines Blogmarks Buddymarks CiteULike Co.mments Del.icio.us Digg Diigo

Fark Feed Me Links Furl Google Linkagogo ma.gnolia Mister Wong Newsvine Propeller Rawsugar

Reddit Rojo Simpy Sphinn Spurl Squidoo StumbleUpon Tailrank Technorati Yahoo

More »

Público Alvo

Desenvolvedores Web e Desktop que estejam interessando em desenvolver aplicações RIA utilizando Adobe Flex integrado com Java EE.

Ementa

Este workshow  tem o objetivo de capacitar o aluno ao desenvolvimento de aplicações ricas para a Web RIA (Rich Internet Application) utilizando Adobe® Flex™ e Java EE

O curso apresenta uma visão integrada de Adobe Flex contemplando aspectos relacionados desde manipulação de dados e componentes em Flex até a sua integração com um back-end Java.

No fim do curso, o aluno com bom aproveitamento será capaz de desenvolver aplicações RIA, explorando frameworks MVC mais utilizados no mercado e explorando vários meios de comunicação.

  • Introdução
  • Containers de Layout
  • Componentes de Navegação
  • Trabalhando com Eventos(Disparar e capturar)
  • Usando Janelas Popup
  • Trabalhando com módulos
  • Introdução ao BlazeDS
  • Comunicando Adobe Flex com back-end Java EE
  • Comunicação em Real-Time (Messages)
  • Frameworks MVC para Flex

Pré-requisito

Conhecimento em programação orientada a objetos e em desenvolvimento de aplicações Web ou desktop.

Detalhes:

Data: De 19 a 23 de julho de 2010 – 19:00h às 22:00h
Local: Núcleo de Educação Continuada da Challenge IT
Endereço: Rua Gonçalves Dias, 1181 / 1005 -  Savassi

Instrutor

Edgard Davidson Costa Cardoso

Profissional especialista em engenharia de software e desenvolvimento de sistemas, professor universitário, coordenador do curso de Pós Graduação em Engenharia de Software Centrada em Métodos Ágeis ofertado pela UNA, mestrando em Engenharia Elétrica com ênfase em Engenharia de Software, Especialista em Engenharia de Software, Graduado em Sistemas de Informação. Sou sócio da MÉRITA – ENGENHARIA DE SERVIÇOS E SISTEMAS e atualmente estou utilizando Java como back-end  e Adobe Flex como front-end em projetos e em Mentoring.

Habilidades Após o Workshop

Compreender a tecnologia de RIA (Rich Internet Application) da Adobe.
Desenvolver aplicações RIA utilizando Adobe Flex
Integrar front end (Flex) com back end (Java EE)
Compreender a utilização o Blaze DS
Compreender a utilização de frameworks MVC no Flex
Compreender a integração de Flex com outras tecnologias além do Java

Agenda

  • Introdução
    • O que é RIA – Rich Internet Applications
    • Aonde procurar ajuda
    • O que é o MXML
    • MXML e o ActionScript
    • Diferença entre Flex e AIR.
    • Hello World em Flex
    • Data Binding
    • Entendo o que significa assincronismo.
  • Containers de Layout
    • Tipos de Containeres
    • Application, Box, Panel, TitleWindow, Form,  ControlBar
    • Layout absoluto e relativo
  • Componentes de Navegação
    • ViewStack
    • Accordion
    • TabNavigator
    • States
  • Trabalhando com Eventos(Disparar e capturar)
    • Ouvindo eventos em MXML
    • Evento de Objetc
    • Disparar e capturar eventos.
    • Eventos Customizados
  • Usando Janelas Popup
    • Criando um janela popup personalizada
    • Removendo uma janela popup
    • Manipulando evento de uma janela popup
  • Trabalhando com módulos
    • Criando um componente Module
    • Carregando um módulo com ModuleLoader
    • Manipulando eventos de um componente módulo
    • Passando dado para um módulo
  • Introdução ao BlazeDS
    • Download e configuação
    • Entendendo os arquivos de configuração
  • Comunicando Adobe Flex com back-end Java EE
    • HTTPServices
    • WebServices
    • Remote Object – RPC ( Remote Procedure Calls )
  • Comunicação em Real-Time (Messages)
    • Data Push
    • Construindo um exemplo
  • Frameworks MVC para Flex
    • Cairngorm
    • Swiz
    • Mate

Investimento

R$ 595,00 ou 3 X de R$ 198,33

Descontos:

  • 05% para pagamento à vista
  • 10% para associados de entidades convêniadas
  • 15% para estudantes de escolas convêniadas

* Descontos não cumulativos

Inscreva-se

Jul 4

Características – Microsoft Silverlight 4 & Adobe Flex 4

Escrito por Robson Fernandes em .NET, 1, 2.0, 3d, 4, 6, action, Actionscript, ActionScript 3, Adobe, Adobe Air, Adobe Flex, Adobe Flex - 3, Adobe Flex - Core, Air, Android, Animação, app, AR, BI, Blend, builder 4, C#, Catalyst, class, ColdFusion, control, Controls, css, Data Binding, Data Service, Data Services, DataGrid, Desenvolvedor, desenvolvedores, Desenvolvimento, Design, Desktop, Dica, DRM, encode, encoder, err, Estilo, event, expression, Expression Blend, Ferramenta, flash, flash builder, Flash Builder 4, flash media, Flash Media Server, Flash Player, Flash Remoting, Flex, Flex 4, for, Google, html, ide, IE, if, image, imagens, int, interface, internet, Java, Javascript, layout, Linux, Mac, Mercado, Microsoft, Microsoft Expression, Microsoft Silverlight, MXML, NaN, O, on, Opinião, Partilha, Pessoal, photoshop, PHP, player, print, programação, pt, Remoting, RIA, Ria’s Geral, Rich Internet Application, ruby, runtime, server, silverlight, Silverlight - Core, Silverlight 3, Silverlight 4, Soap, socket, streaming, surface, swf, tag, Tecnologia, tool, UI, UX, Ved, Vídeo, Visual Studio, Visual Studio 2010, WCF, web, Web Service, web services, window, windows, XAML, XML, XP @ 07 4th, 2010 | via http://www.riasoftware.com.br/blog/ | 2 comentários
Robson Fernandes
? X
  • Bookmarks

Blinkbits BlinkLists BlogLines Blogmarks Buddymarks CiteULike Co.mments Del.icio.us Digg Diigo

Fark Feed Me Links Furl Google Linkagogo ma.gnolia Mister Wong Newsvine Propeller Rawsugar

Reddit Rojo Simpy Sphinn Spurl Squidoo StumbleUpon Tailrank Technorati Yahoo

More »

INTRODUÇÃO

Boa noite Galera!

Hoje gostaria de compartilhar com vocês, uma postagem com as principais características, das mais comentadas tecnologias de desenvolvimento de aplicações RIA(Rich Internet Applications) do mercado, o Microsoft Silverlight e o Adobe Flex.
São ao todo 20 características destacadas, sendo que elas foram aplicadas nas últimas versões das plataformas destacadas.
Gostaria da opinião de vocês, meus amigos leitores e desenvolvedores, até mesmo para que possam avaliar o conteúdo, caso eu tenha descrito algo errado. Lembrando que a intenção desta postagem, não é denegrir nenhuma tecnologia, mas sim, apresentar suas características!


Abaixo, segue a tabela:

  Tecnologias   Adobe Flex 4   Microsoft Silverlight 4
 
  Runtime   - Flash Player 10.1   - Silverlight 4.0.5
  Aplicações
  Multi-Plataforma
  - Windows
  - MacOS
  - Linux
  - Solaris
  - Google Android
  - Windows
  - MacOS
  - Windows Phone 7
  - XBox 360
  - Microsoft Surface
  Animação – Timeline   - Frame-by-Frame   - Baseada em tempo
  - Frame-by-Frame
  3D   - Baseado em simulação de
    perspectiva X, Y e Z.
  - Baseado em simulação de
    perspectiva X, Y e Z.
  Aplicações baseadas em
  Desktop 2.0
  - Adobe Air   - Silverlight OOB
  Modelo de programação   - Orientado a Objetos   - Orientado a Objetos
  Linguagem de interfaces   - Baseado em XML, o MXML   - Baseado em XML, o XAML
  Linguagem base – Client   - ActionScript 3

  - C#
  - VB.NET
  - IronRuby
  - IronPython

  Linguagens utilizadas com   frequência – Server/Side   - Java
  - PHP
  - ColdFusion
  - C#

  - C#
  - VB.NET
  - PHP

  Arquivo executável binário   - Arquivo SWF

  - Arquivo XAP

  Característica da plataforma   - Data Binding
  - Event Handling
  - Layout
  - Navigation
  - Controls
  - DataGrid
  - Data Visualization
  - Styling
  - Câmera e Microfone
  - Suporte Offiline DRM
  - Peer-assisted P2P
  - Print Suport
  - Right-to-Left Text
  - HTML hosting
  - Aceleração de Hardware

  - Data Binding
  - Event Handling
  - Layout
  - Navigation
  - Controls
  - DataGrid
  - Data Visualization
  - Theming
  - Câmera e Microfone
  - Suporte Offiline DRM
  - Multicast Streaming
  - Print Suport
  - Right-to-Left Text
  - HTML hosting
  - Aceleração de Hardware
  - COM Interop
  - Multi-Threading

  Ferramentas de   desenvolvimento   - Flash Builder 4   - Microsoft Visual Studio 2010
  Ferramentas de design

  - Adobe Flash CS5
  - Adobe Catalyst CS5

  - Microsoft Expression Blend 4
  - Microsoft Expression Design 4
  Integração com outras
  ferramentas de design
  - Adobe PhotoShop CS5
  - Adobe Illustrator CS5
  - Adobe Fireworks CS5
  - Adobe PhotoShop CS5
  - Adobe Illustrator CS5
  Linguagens baseadas
  em estilos
  - CSS   - XAML
  Suporte a Imagens   - Todos os formatos   - PNG
  - JPG
  Acesso remoto   - HTTP
  - Socket
  - Web Services
  - Remoting
  - HTTP
  - Socket
  - Web Services
  - WCF
  Data Services   - Flash Remoting
  - Bynary e Soap Services
  - WCF Services
  - Bynary e Soap Services
  Manipulação de vídeo   - Tipos de arquivos(FLV, F4V)
  - Tool: Adobe Media Encoder
  - Suporte a DRM
  - Tipos de arquivos(WMV, F4V)
  - Tool: Expression Media Encoder
  - Suporte a DRM
  Distribuição de vídeo   -Adobe Flash Media Server   -Microsoft IIS Media Services

Obrigado pessoal!

Abs.

Robson Fernandes


Mar 4

Evitando problemas com Views e DTOs

Escrito por DClick Team em 1, 4, 6, Access, app, Apresentação, AR, BI, class, código, código fonte, Componente, dados, Data Binding, Download, err, exemplo, flash, Flex, Flex Components, fonte, framework, Frameworks, FullScreen, gc, IE, if, lógica, Mac, O, on, Partilha, problema, problemas, pt, Ria’s Geral, screen, Screencast, string, swf, TAT, tv, Twitter, UI, UX, wave @ 03 4th, 2010 | via http://blog.dclick.com.br/pt/ | Sem comentários
DClick Team
? X
  • Bookmarks

Blinkbits BlinkLists BlogLines Blogmarks Buddymarks CiteULike Co.mments Del.icio.us Digg Diigo

Fark Feed Me Links Furl Google Linkagogo ma.gnolia Mister Wong Newsvine Propeller Rawsugar

Reddit Rojo Simpy Sphinn Spurl Squidoo StumbleUpon Tailrank Technorati Yahoo

More »

Twitter!

No seu aplicativo você tem um DTO cujo os dados são renderizados por diferentes Views (telas). Então, toda hora que o seu DTO muda, você percebe sua aplicação travada por uns segundos. Depois de um tempo você percebe que o problema é que mesmo as telas que estão invisíveis estão executando código de apresentação de dados com base no novo DTO. Bem, este é um problema comum quando trabalhamos com DTOs complexos e abusamos do Data Binding.

A notícia ruim é que se você não teve este problema ainda, um dia você terá. A notícia boa é que uma das maneiras de evitar este problema é utilizar o DTOViewHelper, componente disponibilizado neste screencast.

Alguns Frameworks atuais do Flex oferecem maneiras de resolver este problema, mas o DTOViewHelper é independente do Framework que você usa. Além disso, como pode ser visto no Screencast, você pode definir métodos auxiliares dentro do DTOViewHelper com o objetivo compartilhar lógica de apresentação de dados de DTOs entre diferentes Views (veja o exemplo da Data que mostra a string “Hoje” no Screencast).

Clique aqui para fazer o download do código fonte do exemplo “errado” (I could be WRONG).

Clique aqui para fazer o download do código fonte do exemplo “certo” (I could be RIGHT).

« Entradas anteriores |

ACERCA

O que é o RedeRIA ?

O redeRIA não é nada mais que um agregador de feed's que disponibiliza o conteudo de varios blogs e autores ao redor do mundo RIA, actualmente agregamos mais de 2755 entradas vindas de 53 blogs especializados em ria’s, pelo que só fica a ganhar em assinar o feed ou seguir a comunidade no twitter.

Se acha que o seu blog ou um blog de um amigo é interessante e util para os leitores o redeRIA, faça a sua submissão aqui.

Feed: assine já
Twitter: siga-nos

GOOGLE

Votação


Deveria o RedeRia agregar conteúdo em inglês?
Ver Resultados

AUTORES


Eduardo KrausAlexandre TadashiBindableCognitiva SoluçõesDaniel LopesDaniel SchmitzDanielPedrinhaDClick TeamEbercomEdgard DavidsonElvis FernandesErko BrideeFabiel PrestesFábio Batista da SilvaFabio da SilvaFabriccio BernardesFelipe BorellaFlavia MoreiraGabriel VersalliniGabriela T. PerryIgor MusardoJanderson CardosoJoão AugustoJose Carlos FielKelps SousaLeonardo FrançaLucas MarçalLuis MessiasLuiz TarabalMario JuniorMário SantosMauro MartinsPablo SouzaPedro ClaudioreneRia BrazilriaPTRicardo CerqueiraRobson FernandesRodrigo Pereira FragaSaintBrSamuelFacchinelloSergio SouzaSilva DeveloperStefan HorochovecTech CaffeTecinforThiago BuenoVedVinícius SandimWillian ManoXAML Cast

PUBLICIDADE








Powered by Wordpress & msdevstudio.com