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.
Selecione o tipo “Silverlight 3 Application” coloque o nome do projeto como “BehaviorsDemo” e pressione ok.Veja Figura 2.
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.
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.
Arraste este Behavior para cima do botão. Veja figura 5.
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
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
Thiago,
vc pode dar um help?
ajudar naqueles tvDestaques …
http://social.msdn.microsoft.com/Forums/pt-BR/silverlightpt/thread/847968fe-e548-492c-af63-fb7fe21136c4
Mesmo assim…
Valeuuu
Cara, gostei demais do tópico, principalmente da definição de BEHAVIORS.
Poderia me ajudar? Estou meio perdido com as definições de alguns dos elementos do Blend 3 e da “arvore genealógica” deles, tipo, o que está dentro do que, que função cada um tem…
Poderia definí-las assim como foi feito com o behaviors?
São eles:
-User Control
-Templates
-Resorces
-Templates
-Styles
-Events
-Triggers
-Actions
Mto Obrigado!