Flex Component Review – Usando o FlowBox para Criar um Chat com Emoticons Em Flex


Bom dia a todos.

Estive nessa última semana desenvolvendo um sisteminha de chat em Flex para um portal que estamos desenvolvendo. Um sisteminha simples mas que deveria conter umas funcionalidades normais contidas na maioria dos chats. O que me intrigou e que me tomou um bom tempo foi o desenvolvimento da adição de emoticons entre textos. Como a SDK do Flex não possui tal componente, tive que pesquisar!

Pesquisando encontrei um componente da FlexLib chamado FlowBox.

Esse container implementa o Algoritmo FlowLayout presente em outras APIs gráficas (Java Swing por exemplo) que permite alinhar os componentes internos a esse container horizontal ou verticalmente de maneira livre. Seguindo o mesmo padrão do Java, esse container ajusta automaticamente a quebra de linha dos componentes internos.

Então resolvi usar o FlowBox para fazer o trabalho de intercalar imagens e textos. Foi aí que eu vi o excelente post no kiorull.com falando de como ele implementou um chat com emoticons.

Em resumo, a solução foi:

  • encontrar os simbolos de emoticons ( [= P], [= /], etc) através de um match com expressão regular;
  • dar um split na string nos pontos dos emoticons. Isso formaria um vetor de textos e símbolos de emoticons;
  • Encapsular os textos em componentes Label;
  • Encapsular os emoticons em componentes Image;
  • Incluir esses componentes gerados na FlowBox.

O resultado foi exatamente o esperado. O chat funcionou perfeitamente com as imagens intercaladas. A ideia é simples mesmo porque a funcionalidade foi simples.

Achou interessante o post? Deixe um comentário então. 🙂

Referências:

Simple Flex Smilies Emoticons

Documentação do FlowBox no Google Code

How do you implement a Flow Layout?

Flex FlowBox Container – Tony Fendall’s OLD Flex Blog

Anúncios

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s