Lista das apresentações sobre Silverlight:

Palestra                                                                                          Autor

Após o lançamento do Silverlight 3, eu começei a desenvolver um client para o twitter em Silverlight, eu sei que já existem centenas de clients de twitter disponíveis, e que a idéia não é muito original, mais eu queria algo que eu não precisa-se me preocupar com serviços de BackEnd (Estou usando a biblioteca Dimebrain.TweetSharp que faz todo “trabalho sujo”). Estou procurando um lugar para hospedar a applicação, assim que conseguir atualizarei este post com o link.

Andamento

A aplicação ainda não esta concluída ( na verdade ainda esta longe disso ). Mais como é um projeto somente com objetivo de estudo então isto não me preocupa tanto.

MVVM – Model View ViewModel

Apesar de ser um projeto pequeno e em desenvolvimento, ele aplica o pattern MVVM recomendado para aplicações Silverlight ( para quem quiser saber mais sobre MVVM, jonas.follesoe e nikhil ).

IoC – Inversion Of Control com Unity

Também estou usando a biblioteca Microsoft.Practices.Composite.Presentation para configurar a injeção de dependência entre a View e o ViewModel. ( Estou usando o Unity Container que vem disponível dentro desta biblioteca ) .

Behaviors

O Tweetup utiliza o pacote de Behaviors “Expressions.Samples” para fazer a comunicação da View com o ViewModel  ( atravéz do Behavior CallDataMethod ).  Isso diminuiu drasticamente a quantidade de código que foi necessário ser escrito.

Expression Blend 3

Sou um grande fã do Blend 3, acho uma ótima ferramenta para criar aplicações em Silverlight. O Tweetup é 100% compatível com Blend 3 ( entenda melhor sobre compatibilidade com Blend 3 aqui ), isso é uma coisa um pouco complicada de se ter, é preciso conhecer um pouco das “limitações” do Blend 3 para não perder esta compatibilidade.

Download

Eu disponibilizei o source da aplicação no GitHub (não sabe o que é GitHub ou Git. clique aqui).

Issues List

A aplicação ainda esta em desenvolvimento, e portanto muitas alterações ainda serão feitas para melhorar o Design, para criar as novas features e corrigir possíveis Bugs.

Features

Abaixo segue lista de features disponíveis e as não disponíveis.

• Login
• Friend Timeline
• Replies Timeline
• Favorites Timeline
• Reply
• Update
• Retweet
• Followers
• Following
• User Detail
• Direct Messages
• Delete Update
• Logout

Nós próximos posts voi mostrar em detalhes como o Tweetup esta sendo feito.

Super novidade.

Microsoft acaba de lançar a release do Silverlight 3, segue os links para download:

Expression Blend 3 with Sketchflow

Na versão release do Blend 3, voce podera ver entre outras novidades o Skectchflow, ferramenta muito comentada nas apresentações do MIX09.

Silverlight 3 Software Development Kit (SDK)

Todos os assemblys necessários para começar a desenvolver em Silverlight 3 e a documentação oficial =).
Silverlight 3 Tools for Visual Studio 2008 SP 1

Ferramentas para desenvolver Silverlight 3 no Visual Studio 2008

Agora com o lançamento oficial da versão 3, podem esperar com novos tutoriais, videos e muitos exemplos em Silverlight=)

abraço.

Dentro deste assembly existem 3 classes que voce pode usar como base para criar seus proprios behaviors:

• Behavior<T>: Behavior simples
• TriggerAction<T>: Behavior disparado com eventos
• TargettedTriggerAction<T>: Behavior disparado com eventos que afeta objetos separados ( Targets )

O diagrama de classe fica da seguinte maneira:

Neste post vamos criar um behavior simples que usa como base a classe Behavior<T>. Para behaviors simples esta classe é perfeita, o unico trabalho que temos que fazer é implementar dois metodos para notificar o behavior quando ele é anexado e desanexado de um objeto.  Eu decidi criar um behavior que será aplicado em Panels ( Componentes que são usados para gerenciamento de layout: Canvas, StackPanel e Grid ), a ideia deste behavior é que quando o usuário entrar com o mouse sobre um dos filhos do panel ( componentes dentro do panel: button,list,… ), os outros fiquem transparente ( próximo do invisivel ), e quando o usuário sair  com o mouse, os filhos voltem com sua cor original.

Então para começar crie uma classe que extende a classe Behavior<T>, eu dei o nome de PanelFocusBehavior.

public class PanelFocusBehavior : Behavior<Panel>

O metodo Behavior possui 2 metodos (OnAttached e OnDetaching) que vamos sobrescrever para adicionar
a nossa lógica.
OnAttached: Este método é executado no momento em que o behavior é associado a um objeto da aplicação.
OnDetaching: Este metodo é executado quando o a associação entre o behavior e o objeto deixa de existir.

Veja a implementação do método OnAttached para o nosso behavior:

        private Panel panel;
        private Dictionary<UIElement, Brush> childrenOpacityMask;
        protected override void OnAttached()
        {
            base.OnAttached();
            panel = this.AssociatedObject;
            childrenOpacityMask = new Dictionary<UIElement, Brush>();
            panel.Loaded += new RoutedEventHandler(panel_Loaded);

        }        

        void panel_Loaded(object sender, RoutedEventArgs e)
        {
            foreach (UIElement children in panel.Children)
            {
                children.MouseEnter += new MouseEventHandler(children_MouseEnter);
                children.MouseLeave += new MouseEventHandler(children_MouseLeave);
                childrenOpacityMask.Add(children, children.OpacityMask);
            }
        }

Veja que no metodo OnAttached a única coisa que fazemos é guardar a referencia para o Panel que esta
sendo associado ao nosso behavior e adicionar um handler para o evento Loaded deste panel.

No metodo panel_Loaded percorremos todos os filhos ( objetos dentro do panel ) e adicionamos um handler
para o evento MouseEnter e outro para o evento MouseLeave. Também adicionamos em um Dictionary a mascara
original do objeto ( Este passo é importante para que o aspecto original do objeto seja mantido durante a
execução do behavior ).

Ok, depois de iniciarmos o behavior e adicionar um handler para os eventos dos filhos, o que falta?
Falta ainda, realizar as alterações que havia idealizado para o Panel. Veja a lógica dos metodos MouseEnter e MouseLeave.

        void children_MouseEnter(object sender, MouseEventArgs e)
        {
            Brush oldOpacityMask;
            SolidColorBrush opacityMask = new SolidColorBrush(Color.FromArgb(40,255,255,255));
            foreach (UIElement children in panel.Children)
            {
                children.OpacityMask = opacityMask;
            }

            UIElement elementSender = (sender as UIElement);
            if (childrenOpacityMask.TryGetValue(elementSender, out oldOpacityMask) == true)
            {
                elementSender.OpacityMask = oldOpacityMask;
            }
        }

        void children_MouseLeave(object sender, MouseEventArgs e)
        {
            foreach (UIElement children in panel.Children)
            {
                restoreColor(children);
            }
        }

        private void restoreColor(UIElement element)
        {
            Brush opacityMask;
            if (childrenOpacityMask.TryGetValue(element, out opacityMask) == true)
            {
                element.OpacityMask = opacityMask;
            }
        }

No metodo children_MouseEnter percorremos todos os objetos que estão no panel e trocamos
a OpacityMask de cada um para um SolidColorBrush com alpha 40. Depois de percorrer todos, voltamos a
mascara do objeto que disparou o evento para sua mascara original ( deste modo somente ele irá permanecer
com sua aparencia original )

No metodo children_MouseLeave percorremos todos os objetos que estão no panel e voltamos
sua mascara original.

O metodo restore color, só serve para voltar a aparencia original de um objeto.

Ok. Nós já vimos no post anterior como aplicar os behaviors. Portanto agora basta adicionar este behavior
em um Panel qualquer e testar. Veja figura do nosso behavior em ação.

Para quem não conseguiu acompanhar o tutorial, veja o código completo do nosso Behavior:

using System;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Ink;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using Microsoft.Expression.Interactivity;
using System.Collections;
using System.Collections.Generic;

namespace BehaviorsDemo
{
    public class PanelFocusBehavior : Behavior<Panel>
    {
        private Panel panel;
        private Dictionary<UIElement, Brush> childrenOpacityMask;
        protected override void OnAttached()
        {
            base.OnAttached();
            panel = this.AssociatedObject;
            childrenOpacityMask = new Dictionary<UIElement, Brush>();
            panel.Loaded += new RoutedEventHandler(panel_Loaded);

        }        

        void panel_Loaded(object sender, RoutedEventArgs e)
        {
            foreach (UIElement children in panel.Children)
            {
                children.MouseEnter += new MouseEventHandler(children_MouseEnter);
                children.MouseLeave += new MouseEventHandler(children_MouseLeave);
                childrenOpacityMask.Add(children, children.OpacityMask);
            }
        }

        protected override void OnDetaching()
        {
            foreach (UIElement children in panel.Children)
            {
                children.MouseEnter -= new MouseEventHandler(children_MouseEnter);
                children.MouseLeave -= new MouseEventHandler(children_MouseLeave);
                restoreColor(children);
            }
        }

        void children_MouseLeave(object sender, MouseEventArgs e)
        {
            foreach (UIElement children in panel.Children)
            {
                restoreColor(children);
            }
        }

        void children_MouseEnter(object sender, MouseEventArgs e)
        {
            Brush oldOpacityMask;
            SolidColorBrush opacityMask = new SolidColorBrush(Color.FromArgb(40,255,255,255));
            foreach (UIElement children in panel.Children)
            {
                children.OpacityMask = opacityMask;
            }

            UIElement elementSender = (sender as UIElement);
            if (childrenOpacityMask.TryGetValue(elementSender, out oldOpacityMask) == true)
            {
                elementSender.OpacityMask = oldOpacityMask;
            }
        }

        private void restoreColor(UIElement element)
        {
            Brush opacityMask;
            if (childrenOpacityMask.TryGetValue(element, out opacityMask) == true)
            {
                element.OpacityMask = opacityMask;
            }
        }
    }
}

O interessante é que agora podemos adicionar este comportamento em qualquer Panel da nossa aplicação sem a necessidade de alterar código. Basta arrastar o Behavior e pronto.
Nos próximos posts sobre o tema vamos ver como criar Behaviors através da classe TriggerAction<T>.

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

Microsoft.Expression.Interactivity

SLPreviewBehaviorsLibrary

Jesse Liberty Blog – Autor da maior parte dos videos “How To” no site oficial do Silverlight. Otimo blog, com muitos tutoriais, exemplos e novidades.

Tim Heuer Blog – Responsável pela sessão “The Application Corner” no site oficial do Silverlight. Material sobre Silverlight 2 e Silverlight 3, otimo exemplos, muitas novidades. Site obrigatório.

Microsft Expression Community – Site que tem muita coisa para quem está aprendendo, coisas prontas para usar em seus projetos, forum de discussão, possui praticamente tudo sobre Silverlight ( De inspirações de Design até Bibliotecas de Behaviors para Silverlight 3). Recomendo para designers e para desenvolvedores também.

SilverZine – Este site é novo, porém tem ótimos exemplos e tutoriais de design utilizando Expression Blend.

Nikhil Kothari`s Weblog – Nikhil faz parte da equipe de desenvolvimento do Silverlight, ele é responsável pelo framework de efeitos Silverlight.FX. Posta grandes dicas de Silverlight, especialmente sobre Animação.

Silverlight Cream – Este site é uma espécie de um agregador de noticias sobre Silverlight, eles recebem diversos materiais, avaliam e postam um review sobre cada um. Tem muita coisa interessante também, vale a pena conferir.

Design with Silverlight – Mais um site que possui vários tutoriais, videos sobre Silverlight, atualizado constantemente.

Channel9 Silverlight – Conteúdo relacionado à Silverlight no Channel9. Otimos videos, recomendo a série de videos sobre o framework arquitetura para Silverlight Composite Application Guindance.

Uau nosso de cada dia – Site brasileiro, frequentemente atualizado com novidades, noticias e dicas para quem acompanha o Silverlight.

Estes são alguns dos sites que eu recomendo. Existem vários outros sites que poderiam ser citados, quem tiver algum interessante e quiser adicionar, sinta-se à vontade =).

Pra quem não conhece, splashscreen é o nome dado a imagem que é exibida durante o loading de uma aplicação, o splashscreen serve para fornecer um feedback ao usuário sobre o tempo de load da aplicação.

A idéia deste tutorial é melhorar a experiencia com o usuário durante este tempo que aplicação leva para ser carregada. O silverlight da suporte para nós trocarmos o splashscreen padrão ( aquele com as bolinhas azuis ) como vocês vão  ver a seguir.

O tutorial pode ser um pouco complicado para você, caso nunca tenha utilizado o Silverlight e o Expression Blend. Caso fique alguma duvida, ou queira ver em detalhes segue o link para o downloa do projeto:

Source

Pré requisitos para fazer este tutorial:

Silverlight tools for Visual Studio 2008 SP1

Visual Studio 2008 SP1

Microsoft Expression Blend 2 SP1

Obs: As imagens do tutorial foram tiradas na versão 3 beta do Expression Blend, no entanto é possível fazer o mesmo com a versão 2.

Passo 1: Criando o projeto no Visual Studio

Vamos começar abrindo o Visual Studio 2008, vá em File->New->Project.. , em Project types selecione Silverlight e em templates selecione Silverlight Application. Coloque o nome do projeto como “CustomSplashScreen” e click em ok.

No popup segunte desmarque a opção “Link to ASP.NET server project” e clique ok

Passo 2: Adicionando um novo item

O Visual Studio deve ter criado além do projeto silverlight, um projeto ASP.NET que será o host de sua aplicação SL. ( Caso isso nao tenha acontecido reveja o passo 1)

Clique com o botao da direita do mouse sobre o projeto Silverlight ( “CustomSplashScree” ), e em seguida escolha “Add New Item”.

Em categories selecione “Silverlight” e em Templates selecione “Silverlight User Control”. De o nome de splash.xaml:

Passo 3: Criando o SplashScreen

Clique com o botão direito do mouse sobre o novo item criado e selecione a opção, “Open in Expression Blend”.

Com o expression blend aberto, na aba “Objects and Timeline” clique com botão da direita do mouse no elemento “LayoutRoot” na estrutura de componentes, e vá em Change Layout Type->Canvas:

Vou utilizar um logo vetorizado que já está pronto, porém voce pode criar o logo no próprio Expression Blend, no Expression Design, ou entao importar um arquivo do Adobe Illustrator.

A principio vamos exibir somente as linhas do logo, e conforme a aplicação for carregando o logo irá ganhando a sua cor original. Para fazer isso temos que ter 2 versões do logo, esta com as linhas ( “Wires” ) :

E uma outra com as cores originals e com uma mascara de visão ( “Body” ) que se movimenta de acordo com a porcentagem carregada.

Repare que no Xaml do “Body” existe uma definição para OpacityMask:

Passo 4: Adicionando um texto para representar a porcentagem.

Para informar o usuário a porcentagem restante no load da aplicação vamos acrecentar um TextBlock com o nome de Progress:

Passo 5: Criando animação do texto “Loading”

Para melhorar a experiencia do usuario, vamos adicionar uma animação em baixo do logo com a String “Loading…” . Para fazer isso eu utilizei um TextBlock com 3 ellipse dentro de um grid para compor o desenho:

Para acrescentar animação no texto de Loading, vamos criar uma animação, vá em Objects and Timeline -> New para criar animação, de o nome de “LoadingText”:

A animação é bem simples, ela some ( Opacity = zero ) com as bolinhas no keyframe zero ( começo da animação ), e vai apareçendo com elas novamente em sequencia:

Detalhe:

Passo 6: Adicionando o splashScreen na aplicação .NET.

Como o splashScreen é exibido antes de carregar a aplicação, ele nao pode ficar no projeto Silverlight, uma vez que o mesmo só é exibido depois que a aplicação é carregada, portanto as configurações para utilizar o splashScreen fica no projeto host ( ASP.NET ). Para isso mover o arquivo “splash.xaml” para o projeto ASP.NET. Para fazer isso começe deletando o arquivo splash.cs e em seguida copie o arquivo “splash.xaml” e cole no projeto “CustomSplashScreen.Web”. Feito isso, ajuste o código xaml para que fique semelhante ao da imagem abaixo ( Estes ajustes precisam ser feito, pois o projeto ASP.NET nao reconhece o componente “UserControl”, entao deve-se trocar para canvas, como mostra a imagem abaixo):

Passo 7: Configurando o projeto para utilizar o seu splashScreen.

Para fazer com que o silverlight deixe de utilizar o splashScreen padrão, abra o arquivo “CustomSplashScreenTestPage.html” localizado no projeto “CustomSplashScreen.Web”, procure pela tag <object> e adicione mais 3 parametros ( splashscreensource, onsourcedownloadprogresschanged, onsourcedownloadcomplete ) como na imagem abaixo:

splashscreensource: Caminho para o arquivo que irá ser usado como splashScreen.

onsourcedownloadprogresschanged: Evento que é disparado quando o download da aplicacao é atualizado.

onsourcedownloadcomplete: Evento que é disparado quando o download da aplicação termina.

Dentro do mesmo documento procure pela tag <script> e adicione 2 funcoes javascript como na imagem abaixo:

A função, OnSourceDownloadProgresschanged é chamada quando o download da aplicação é atualizado, o que ele faz é inicar a animação textuao do Loading… caso ainda nao tenha sido iniciada, em seguida atualiza o valor do componente Progress com o percentual atual, e por ultimo obtem referencia para o logo com as cores originais com a mascara de visao e atualiza o Offset ( posicao dos ponteiros da mascará ) em função do percentual baixado, de modo que quando estiver com 100% de download os ponteiros da mascará estarão com valor zero, e o logo estará com suas cores originais.

A função onSourceDownloadComplete, altera o texto da porcentagem de download para “Done”.

Para poder ver a animação, anexe um arquivo grande  ( torno de 100mb ) ao seu projeto silverlight e configure como Embedded Resource para que o download a aplicação demore e voce consiga ver sua animação:

Final

Este é o primeiro post do meu blog, pretendo sempre que possivel atualizar com conteudo referente a Silverlight e .NET em geral. Estou estudando Silverlight, e a medida que descobrir coisas interessante vou atualizando aqui para voces.

Vou começar colocando os links de uma serie com 3 screencasts que eu fiz entre o fim de 2008 e começo de 2009, infelizmente ainda nao pude terminar a sequencia ( que deve te em torno de 5 videos ). O conteudo apresentado é simples, ideal para quem ainda nao teve contato com o Silverlight, até para poder como o Silverlight trabalha.

Pra quem tiver interesse em baixar os videos e os fontes, acesse blog.dclick.com.br

ScreenCast 1

ScreenCast 2

ScreenCast 3