Nos últimos anos as linguagens de marcação vêm ganhando espaço também na definição das interfaces de usuário dos aplicativos. Você ainda duvida disto? As linguagens de marcação são mais convenientes do que as linguagens de programação para definir interfaces de usuário. MXML Code Styling é uma proposta de padronização na utilização das Tags da linguagem de marcação do Flex.

No MXML as Tags representam os nomes dos componentes. Já os atributos das Tags podem ser três coisas:

1. Eventos
2. Triggers (eventos especiais que disparam efeitos)
3. Propriedades

Ex:

< mx:Button label=”Clique me” click=”alert(‘Hello World’)” showEffect=”Fade”/>

Para aumentar a legibilidade deste código é importante que exista um padrão na utilização destas Tags e seus respectivos atributos. Como no Flex um atributo pode representar três entidades diferentes de um componente (eventos, triggers ou propriedades) podemos estar diante de uma boa maneira de organizar as Tags. No exemplo abaixo temos o seguinte esquema:

1. A primeira linha é reservada para o id do componente
2. A segunda para os Eventos
3. A terceira para os Triggers
4. A quarta e última para as Propriedades

Ex:

< mx:DataGrid id="myDG"
change=”changeHandler()” cellEdit=”cellEditHandler2()”
showEffect=”Fade” hideEffect=”Fade”
dataProvider=”{myData}” width=”100%” height=”100%”/>

Esta divisão é boa, mas ao considerarmos a importância dos atributos da Tag podemos modificar ainda mais este esquema para facilitar a manutenção nas RIAs feitas em Flex. Assim, por ordem de importância – durante a fase de manutenção - podemos separar os atributos da seguinte forma:

1. A primeira linha é reservada para o id do componente
2. A segunda para os Eventos
3. A terceira para as Propriedades mais importantes (tais como as que contêm Data Binding)
4. A quarta para os Triggers
5. A quinta e última para as Propriedades menos importantes (tais como as de layout)

Ex:

< mx:DataGrid id="myDG"
change=”changeHandler()” cellEdit=”cellEditHandler2()”
dataProvider=”{myData}”
showEffect=”Fade” hideEffect=”Fade”
width=”100%” height=”100%” />

Isto deve facilitar a manutenção porque a primeira coisa que um programador geralmente procura em um componente (Tag) é “quem” está tratando determinado evento. As propriedades que usam o Data Binding, na terceira linha, também são importantes porque têm a ver com a representação interna do componente. Depois disto vêm os efeitos e o layout respectivamente. Geralmente o layout é mais importante na fase de prototipação. Depois desta fase as mudanças no layout não costumam ser tão freqüentes, relegando a estas propriedades uma posição menos importante na fase de manutenção.

Assim como o artista dá vida à sua obra também o programador dá vida ao software. Sim, programar é uma arte! A arte de resolver o problema da melhor forma possível dentro do prazo estabelecido e de tal forma que mudanças possam ser facilmente implementadas no futuro. Também, assim como os artistas os programadores devem ter seu estilo. O problema, infelizmente, é que ainda existem muitos programadores Dadaístas.

Nú Descendo Uma Escada - Obra de Marcel Duchamp (um dos principais artistas Dadaístas).

Vai me dizer que você nunca se deparou com um código tão confuso quanto esta obra de Marcel Duchamp?

Depois da onda de cheat sheets de diferentes linguagens, agora é a vez do ActionScript 2.0 ter o seu. Muito interessante e prático!

Para maiores detalhes, é claro, ainda é indispensável a documentação completa dos produtos, acessível via LiveDocs ou ainda para download nas páginas individuais dos produtos.

O componente Form é um container para elementos de uma formulário e que fornece vatagens em termos de layout e input de dados, pois fornece um alinhamento e verificação de campos requeridos automaticamente quanto utilizada em conjunta com sua tag filha, a FormItem.

Exemplo contido na documentação da API do Flex

Outro dia passei por um problema estranho, quanto configurei a direção do FormItem para horizontal (e coloquei dois elementos dentro), de modo que os elementos contidos do FormItem ficassem lado a lado, não um embaixo do outro, como é o padrão, e esse FormItem ficou com uma estranha margem inferior, diferenciando-o dos demais. A imagem ao lado mostra um rascunho onde é possível observar esse comportamento. Vale notar que esse comportamento estranho não acontece caso, dentro do mesmo FormItem com direção horizontal esteja apenas com um item.

Para verificar o que ocorria, coloquei uma borda no FormItem a fim de observar o seu comportamento de relação às margens. Colocar a borda em um container facilita um bocado para identificar tamanhos, margens e afins.

Todos os desenvolvedores Macromedia que ficaram conhecendo o Cairngorm e suas incríveis facilidades com o Flex, em algum momento se perguntaram: “Como eu poderia usar o Cairngorm com o Flash?” Foi essa pergunta mais a necessidade de desenvolver um projeto em Flash que me levou a um pequeno empenho de adaptação/implementação do cairngorm para o Flash.

Leia o artigo completo »

Os links abaixo são de sites interessantes para ler, aprender e manter-se informado sobre o Flex.

FlexCoders: Lista de discussão sobre Flex. Tem uma quantidade moderada de mensagens, na faixa de umas 50 por dia. Boa para acomapnhar os assuntos, é a lista de discussão principal sobre o assunto.

Flex Brasil: A nossa versão tupiniquim do FlexCoders. Tem um volume baixo, porém com mais de 150 associados, o que mostra o interesse da comunidade no assunto. Acredito que o volume irá aumentar conforme o pessoal for “se soltando” para fazer e responder perguntas.

Community Flex: Conteúdos diversos sobre Flex e afins. Um bom ponto de partida e diversas dicas, artigos e links para se aprofundar no assunto.

RichInternetApps.com: O blog da equipe da Adobe Consulting Europe, anteriormente conhecida como iteration::two, do qual Steven Webster e Alistar McLoid, autores do livro Developing Rich Clients with Macromedia Flex, fazem parte. Não é atualizado com muita freqüência, mas a leitura dos arquivos do blog é essencial.

Falando em blogs, é interessante vasculhar nos arquivos de blogs de outros funcionários da Adobe, como Brandon Purcell, Christophe Coenraets, Sho Kuwamoto, etc.. O agregador de blogs da própria Adobe/Macromedia agrega conteúdo destes e de outros blogs, o que o torna excelente para mantar-se informado e até mesmo fazer buscas sobre assuntos específicos.

E por último, mas não menos importante, o blog CFGIGOLO.com, do qual este que vos escreve também faz parte. É um blog sobre tecnologias, inclusive da Adobe e Macromedia. Tem posts sobre Flex e uma quantidade considerável de posts de qualidade sobre ColdFusion.

E a equipe da DClick entrou no mundo dos bloggers! A DClick é hoje uma pequena e bem sucedida empresa de desenvolvimento de softwares para web, desktop e mobile com foco em experiência e interface nos moldes das Rich Internet Applications, e que conta com uma equipe multi-desciplinar, do qual faço parte.

Este é o espaço em que a equipe irá compartilhar suas experiências, peripécias e aprendizados em tecnologias como Flex, Flash Lite e Windows Presentation Foundation.