O Problema

A criação de rich internet applications geralmente é um processo manual e que consome muito tempo, com pouca oportunidade de simplificar as tarefas entre o time ( Designer / Desenvolvedor / Arquiteto da Informação ). Para que a aplicação fique com a aparência imaginada pelo Designer ele precisa conhecer um pouco a linguagem de programação,  e terá muito trabalho até que fique igual ao Mockup feito no Photoshop ou em qualquer outra ferramenta. Normalmente este trabalho é feito pelo desenvolvedor, e o resultado em geral não é como esperado. Este problema existe também para as idéias do Arquiteto da Informação e a UX da aplicação.

O Expression Blend 3 trouxe novidades para solucionar este problema, permitindo que o especialista em UX consiga aplicar todo o modelo de interações da aplicação de um jeito fácil e simples - sem a necessidade de saber linguagem de programação.

Uma destas novidades são os Behaviors.

O que são Behaviors?

Um Behavior é um comportamento de interatividade reutilizável que pode ser aplicado em diversos elementos da interface da aplicação  no Expression Blend.  Um Behavior não representa o comportamento de "um" controle, mais sim de quantos você quiser. Uma biblioteca de Behaviors pode ser criada para ser utilizada em diversos projetos.

Um Behavior pode ser simples, como iniciar e parar uma animação, ou complexo, como adicionar efeito gravitacional a um componente, porem o jeito que o Behavior é criado e aplicado continua o mesmo.

Por que utilizar Behaviors?


Behaviors permite que interatividade seja adicionada diretamente pelo Blend sem a necessidade de escrever nenhum código adicional. Isso permite uma separação lógica dentro do time que esta participando do projeto. Por exemplo, o designer e o desenvolvedor podem definir juntos quais o tipo de interações eles precisam para a animação. O desenvolvedor então irá colocar suas idéias encapsuladas dentro de um Behavior para que o designer possa aplicar aos objetos dentro da surface do Expression Blend de maneira simples e fácil via drag'n drop. O designer então pode então configurar e testar as interações que foram feitas pelo desenvolvedor mais idealizadas junto.

O mesmo Behavior pode ser utilizado em outras partes da aplicação, o que permite rapidamente incluir interatividade ao projeto.

Demo

Vamos ver um exemplo de utilização de Behaviors.

Abra o Expression Blend 3. Veja Figura 1.

pic1

Selecione o tipo "Silverlight 3 Application" coloque o nome do projeto como "BehaviorsDemo"  e pressione ok.Veja Figura 2.

pic2

Para conseguir utilizar Behaviors você precisa incluir uma referencia ao assembly "Microsoft.Expression.Interactivity.dll". Também vamos incluir referencia ao assembly SLPreviewBehaviorsLibrary. O link para download destes arquivos estão disponíveis no fim deste post. Veja figura 3.

pic3

Após incluir estas referências, adicione um botão qualquer dentro da interface da aplicação, e em seguida selecione o menu "Asset Library" ( Ultimo botal da toolbar do EB3, lado esquerdo ). Dentro da tab Behaviors selecione "HyperlinkAction". Veja figura 4.

pic4

Arraste este Behavior para cima do botão. Veja figura 5.

pic5

Selecione o Behavior e configure as propriedades deste Behavior, como ele é um Behavior de ação de Hiperlink você deve informar um endereço web. Veja figura 6

pic6

Pronto, agora rode sua aplicação e veja o resultado. Ao clicar no botão você deverá ser redirecionado para a página configurada no Behavior.

Este foi um exemplo simples, somente para ilustrar como funcionam os Behaviors, nó próximo post sobre o tema vamos ver como criar nossos próprios Behaviors.

Links para Download:

Silverlight 3 + Tools + Expression Blend 3: http://silverlight.net/getstarted/silverlight3/default.aspx

Microsoft.Expression.Interactivity

SLPreviewBehaviorsLibrary