1) O documento apresenta uma palestra sobre desenvolvimento de aplicações ricas para internet (RIA) usando a plataforma Microsoft Silverlight 4. 2) A palestra aborda tópicos como prototipação com SketchFlow, padrão MVVM, serviços WCF RIA e ferramentas como Expression Blend. 3) Também discute sobre o uso do Silverlight no Windows Phone 7 e comparação com HTML5 e Flash.

1. Desenvolvimento RIA com
Silverlight 4
do básico ao acabamento...

2. Rodrigo Kono
• MVP da Microsoft
• MCP – MCTS – MCPD – MCT
• Fundador do grupo de usuários DevGoiás .NET
• 7 anos de comunidade .NET
• Mais de 12.000 pessoas nesse tempo
• Pensou.NET Treinamentos e Consultoria
• Torcedor do Goiás (Uhuu série B)
• Bonitão
• www.rodrigokono.net

3. Developer Evangelist, Pai e Gamer.
Foco em Ferramentas e Soluções Microsoft

4. Agenda
• First steps
• RIA
• Sketflow: Tudo começa com a Prototipação
• Padrão MVVM
• WCF RIA Services

5. Microsoft Silverlight é um runtime cross-
browser, cross-platform que permite
desenvolver aplicações ricas para
internet e potencializar a experiência de
media na Web, Desktop e Devices.
Media e RIA

6. Microsoft .NET Application Platform
Tecnologia e Ferramenta
DesignDevelop
Ferramentas &
Modelo de Aplicações
Deploy
Browser ClientUser Experience

7. ALM

8. RIA

9. RIA – Rich Internet Applications

10. Back Button and Refresh
Visual Vocabulary
State management
Browser Sandbox Business Logic in UI
Component Level Logic
Animation
Desktop Developers Web Developer
O que tem de diferente com RIA?
Limited Runtime
Service Orientation
Non-text based layout
Hype

11. App RIA

12. Blend + SketchFlow
Protótipos não lineares
Compatível com as principais ferramentas de criação
Presença de comportamentos
Padrão de wireframes
Comportamentos extensíveis
Solução Silverlight e WPF
Reutilização de sketchs
SketchFlow player
Feedbacks
Documentação
+SketchFlow

13. Sketchflow

14. Entendendo o Layout
• Essencial para a criação da sua UI
• Renderização/organização do conteúdo
• Panels são usados para receber conteúdo
• Margin e Padding
• Posicionamento Fixo (Canvas) é
raramente usado

15. Controles
Controles são Faceless. Crie o seu!
Subset do WPF, porém muitos controles do
Silverlight não existem no WPF
Silverlight Toolkit possui vários controles
Existem ótimos controles de terceiros

16. Expression Blend
Layout , Bind e Controles

17. Dica #1: Escolha um padrão e respeite-o
• Silverlight Line-of-Business (LOB) pode crescer
fora do controle e sem planejamento
adequado:
– Normalmente muitas telas de código
– Código de validação
– Código para chamar serviços da aplicação
– Código de Serviço
– Código do Modelo
– Código de acesso aos dados

18. O Padrão MVVM
• O Model-View-ViewModel (MVVM) funciona
muito bem com apps para Silverlight LOB:
– Fornece consistência em código
– Permite uma melhor reuso de código
– Permite a separação de preocupações (SoC)
– Suporta Testes Unitários
– Usado como um tipo de controller para view
– Silverlight 4 fornece suporte ICommand
Code-behind não é ruim, mas minimiza
o código que você adicionar

19. • O padrão MVVM tem 3 elementos chaves:
• Model: domínio de negócio (regras de negócio,
acesso a dados, modelo de classes)
• View: Interface de usuário (telas Silverlight)
• ViewModel: Elemento do meio. Fica entre a View e
o Model – similar a um controller
MVVM Pattern Players
View ViewModel Model
Presentation Layer Business Domain

20. Cenário MVVM: O que está envolvido?
Silverlight client
View
(Pessoa Master/Details)
XAML Code
Precisa ser desenhado
model
Model
(PessoaModel)
Pessoa
Camada
Dados/
Serviço
Camada
de
Negócios
Precisa ser testável e
sustentável

21. MVVM
View (Pessoa
Master/Details)
XAML
Code
puro
“Display”
Model
(PessoaModel/Pessoa)
puro
“Dados
ViewModel
ViewModel é o
DataContext da View.
Bind to data, commandsDesigners e
Ferramenta
s de Design
como
XAML para
maximizar
a
utilização.
Aberto para
aplicar técnicas
como injeção de
dependência,
testes, etc
Difícil de testar este
Código sem retirar/
Minimizar ele da UI
Vincula a
View com a
ViewModel
(ViewModelLoc
ator)
INotifyPropertyCh
anged
Envia para a
View quando há
mudanças de
dados

22. Vinculando View com a ViewModel

23. MVVM
View (Pessoa
Master/Details)
XAML
Code
puro
“Display”
Model
(PessoaModel/Pessoa)
puro
“Dados
ViewModel
ViewModel é o
DataContext da View.
Bind to data, commands
Designers e
Ferramenta
s de Design
como
XAML para
maximizar
a
utilização.
Aberto para
aplicar técnicas
como injeção de
dependência,
testes, etc
Difícil de testar este
Código sem retirar/
Minimizar ele da UI
Vincula a
View com a
ViewModel
(ViewModelLoc
ator)
INotifyPropertyCh
anged
Envia para a
View quando há
mudanças de
dados
+
Services
Services
Fornece serviços
para realizar
operações como
RetornaPessoa

24. Camadas e camadas…
XAML
Code behind
ViewModel
Model
Data Access
Network client
Database
Network server
Model Server Validation rules
Client Validation rules

25. Melhorando isto…
XAML
Code behind
ViewModel
Model
Data Access
Network client
Database
Network server
ModelModel Server Validation rules
Client Validation rules
Data Access
WCF RIA
Services

26. A próxima grande onda
7
Plataforma
Consistente
Windows Phone
Hardware
Elementos de
Hardware
Foco na
Qualidade

27. Silverlight no Windows Phone 7

28. HTML 5 x Silverlight x Flash
Amigo ou inimigo?

29. • Spark’s
• DreamSpark
• WebSiteSpark
• BizSpark

30. • WebsiteSpark
• Software
• Visibilidade
• Suporte

31. • WebsiteSpark

32. • WebsiteSpark

33. • WebsiteSpark

34. www.microsoft.com/web/websitespark/

35. XAMLCast
Podcast sobre Silverlight, WPF e XAML
www.xamlcast.net

36. Links
• Cases: www.microsoft.com/silverlight/case-
studies/business
• Site oficial do produto
– www.microsoft.com/silverlight
• Free Windows Phone Developer Tools
– http://developer.windowsphone.com
• Blog: Rodrigo Kono - www.rodrigokono.net
• Blog do Kelps Sousa - blog.kelps.net

37. Twitter:
@fernandomartin
@rodrigokono

38. Apoio
Agradecimentos
Patrocinadores
Realização