Exis­tem mui­tas manei­ras de lidar com um requi­sito espe­cí­fico de um pro­jeto de inter­face e?–?como desig­ner?–?a coisa mais importante que você pode fazer é sele­ci­o­nar a opção que melhor reflita as neces­si­da­des de seus usuá­rios. Os exem­plos abaixo são parte de uma com­pi­la­ção com os melho­res dos melho­res, publi­ca­ções online e bibli­o­te­cas dedi­ca­das a com­par­ti­lhar infor­ma­ções e explo­rar con­ceitos rela­ti­vos aos padrões de design de inter­face do usuário.

UI-patterns.com

UI-patterns.com é uma cole­ção de padrões de design onde os desig­ners de inter­face podem bus­car ins­pi­ra­ção. O site per­mite que os usuá­rios man­ter con­jun­tos de suas pró­prias (publi­ca­mente aces­sí­veis aos visi­tan­tes do site) para que você possa ver outras cole­ções de padrão de design de inter­face do usuário.

Konigi

Konigi des­taca exem­plos do design de inte­ra­ção e do uso de design visual no mundo-real. Exis­tem mui­tas for­mas de utilizar,navegar e encon­trar o con­teúdo dese­jado no site, incluindo uma página de Tags popu­la­res com as palavras-chave mais usa­das divi­di­das em três cate­go­rias: palavra-chave, pro­duto e empresa.

Inte­rac­tion Design Pat­tern Library

Welie.com pos­sui uma bibli­o­teca de padrões de design de inte­ra­ção man­tida por Mar­tijn van Welie, Ph.D. em Human Com­pu­ter Inte­rac­tion. A bibli­o­teca pos­sui uma tone­lada de padrões de design que envol­vem várias tare­fas de um site. Cada padrão segue um for­mato espe­cí­fico: o pro­blema, a solu­ção, quando usar o padrão, por que você deve usar o padrão de design e os exem­plos do padrão em uso.

design|snips

Esta Gale­ria de design concentra-se em com­po­nen­tes comuns de pági­nas web bem como nas ten­dên­cias de design. Design|snips pos­sui mais de 30 cate­go­rias, o que per­mite que se encon­tre facil­mente o padrão de design ou ten­dên­cia que mais inte­res­sam. Além disso, os usuá­rios têm per­mis­são para clas­si­fi­car cada design em des­ta­que na Galeria.

The UI Pat­tern Factory

The UI Pat­tern Fac­tory é uma bibli­o­teca e gale­ria de design de inter­face do usuá­rio. O inte­res­sante do UI Pat­tern Fac­tory é que as vezes eles com­par­ti­lham vídeos para melhor des­cre­ver os pro­ble­mas e solu­ções de design. Alem disso os usu­a­rios podem con­tri­buir com exem­plos que são arqui­va­dos em uma conta no Flickr: UIPatternFactory.com

Ele­ments of Design

Ele­ments of Design concentra-se em com­po­nen­tes espe­cí­fi­cos do web design, tais como for­mu­lá­rios de login e nave­ga­ção de site, na espe­rança de ins­pi­rar desig­ners, bem como para real­çar mode­los que estão se tor­nando padrão.

Web & Patterns

Web & Patterns, é um site onde podem encontrar padrões, ilustrações, etc. Podem aceder a alguns conteúdos gratuitamente, outros terão de se tornar membros.

Olá a todos!!

Hoje resolvi escrever um post sobre Cairngorm. Desde quando comecei a estudar o Cairngorm, uma micro-arquitetura para RIA para construir aplicações em Flex ou AIR, já comecei a perceber os benefícios que poderia alcançar com esse framework. Ele implementa o padrão de projeto (design patterns)  MVC (Model, View e Controller).

A Figura 1 mostra o Diagrama Explorer do Cairngorm. Clique sobre a figura e experimente a aplicação. Como pode ser visto na figura 1, o diagrama é divido em três responsabilidades distintas:

• A View (Interface) que trata da interação interface gráfica com o usuário.
•  O Model (Modelo) onde essencialmente estão as classes de entidade, ou seja, são objetos que muito provavelmente serão persistidos em banco de dados.
• O Controller (Controlador) tem a responsabilidade de fazer a ponte com o back-end, processar eventos, etc.

Este post não tem por objetivo o aprofundamento sobre o assunto. Se você ficou interessado acesse o blog do David Tucker que é quem criou o framework, e, diga-se de passagem, ficou tão bom que que a Adobe o adicionou como um dos projetos open source que complementam o SDK do Flex. O David Tucker postou uma série de tutoriais, bastante interessante,  que se lido com cuidado, é o necessário para entender o funcionamento.

Acesso os artigos e os vídeos referentes aos artigos nos seguintes links:

• Artigo sobre Cairngorm parte 1 e o vídeo Cairngorm Part 1

• Artigo sobre Cairngorm parte 2 e o Vídeo Cairngorm Part 2

• Artigo sobre Cairngorm parte 3 e o Vídeo Cairngorm Part 3

• Artigo sobre Cairngorm parte 4 e o  Vídeo Cairngorm Part 4

• Artigo sobre Cairngorm parte 5 e o  Vídeo Cairngorm Part 5

Para complementar acesse também o link da documentação do Cairngorm .

Figura 1

Então para entender um pouco mais, retirei a figura 2 do blog do David Tucker que em conjunto a figura 1 ajudará a mostrar o fluxo de excecução que ocorre quando o botão Add Contact for pressionado.

1. O usuário preenche os dados do contato e em seguida aciona o comando Add Contact . Então o objeto ContactVO é criado, os valores informados na tela são passados paras as respectivas propriedades do objeto instanciado, um objeto do tipo AddContatcEvent que estende CairngormEvent é instanciado e é passado em seu construtor o objeto ContactVO. Em seguia um evento é “despachado”  por meio do método dispatchEvent.
2. O evento despachado é recebido pelo FrontController implementado pela classe estendia AddContactControl. Recebido o evento, é de responsabilidade do FrontController instanciar e direcionar o evento para a classe Command apropriada.
3. O Command implementado pela classe estendia AddContactCommand recebe a instância do ContactVO através do evento do método execute e, em seguida, instancia o objeto Delegate AddContactDelegate  que dispara o método addContact que será invocado no back-end
4. A classse Service serve para definir todos os serviços que a aplicação utiliza, incluindo HTTPService, WebService, ou RemoteObject.

Figura 2

Bom, como mostrado nas figuras 1 e 2, o Cairngorm possibilita que a implementação do lado cliente da aplicação seja em Flex ou em AIR tenha alta coesão e baixo acoplamento.  Esses duas características são fundamentais para construir aplicações escaláveis, de fácil manutenção, e como utiliza patterns conhecidos, de fácil entendimento para outros programadores. Mas agora a questão é a seguinte, apesar de oferecer todos os benefícios descritos até agora a primeira impressão que eu tive, e, que você provavelmente está tendo ou terá logo, é que agora, para utilizar o framework torna-se necessário escrever várias classes e várias linhas de código. Enfim, quando percebi isso logo pensei que deveria haver algo para acelerar a implementação, já que a estrutura de classes são sempre as mesmas. Em uns trinta segundos de buscas no google descobri alguns plugins que são adicionados ao Flex Builder ou eclipse que aceleram bastante a geração de código. No entanto, sobre os que eu analisei nenhum deles foi mais interessante  que a aplicação AIR chamada FCG desenvolvida pelo David Deraedt. 

Figura 3

O FCG é uma aplicação que a partir de Services e Value Object(VO) desenvolvidos em PHP, Java ou C# analisa e gera os códigos fonte respectivos em Flex (figura 4). O interessante é que ele gera em Flex puro, em Flex para utilizar o framework PureMVC e o Cairngorm.

Figura 4

Bom é isso aí. Penso que este post trouxe o básico do básico sobre o cairngorm e os liks necessário para começar a estudá-lo. Espero que possa ter ajudado.