Olá pessoal.

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.

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

Microsoft.Expression.Interactivity

SLPreviewBehaviorsLibrary

Olá pessoal, vou deixar aqui o que eu considero ser as melhores fontes de informação para quem acompanha ou esta estudando Silverlight.

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 =).

Olá pessoal.

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

Olá pessoal.

Um bom tempo já se passou depois do ultimo screencast da nossa aplicação, gostaria de ter postado a continuação antes, mais é um pouco complicado conseguir tempo.

Neste screencast vamos poder ver de fato o silverlight em ação utilizando a ferramenta Microsoft Expression Blend, como integrar com código C# e algumas idéias de interface.
Espero que vocês gostem.

Download: Source (Temporariamente no rapidshare)

Duvidas, criticas e sugestões por favor me enviem.

Para realizar a terceira parte do desenvolvimento da nossa aplicação, resolvi dividi-lá, em dois videos (screen cast). O segundo pretendo postar em breve

Olá pessoal.

Continuando a nossa aplicação de consulta de produtos da amazon, segue o screencast da parte 2.

Até agora nós utilizamos somente o VisualStudio 2008 como ferramenta e programamos apenas em C#.NET, o que pode não ser novidade para alguns. Mas a partir do próximo screencast entramos em outra fase do desenvolvimento, vamos usar o Expression Blend da Microsoft para criar o Layout da aplicação e entender o código XAML.

Logo estarei disponibilizando os arquivos para download.

Olá pessoal.

Este é o primeiro Screencast sobre silverlight aqui no blog, vamos desenvolver uma aplicacao que consulta um webservice da amazon.

Para aqueles que estão anciosos para ver o Silverlight e suas IDE’s em ação, posso adiantar que nos dois primeiros screencasts montaremos o code-behind da nossa aplicacao e os tres screencasts seguintes serão voltados para construção do design da aplicação utilizando o Expression Blend.

Espero que voces gostem.

Download do codigo fonte.

Download do video(Botão direito/Salvar link) :High | Medium | Low