Desenvolvimento RIA com Silverlight 4
do básico ao acabamento...
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
Developer Evangelist, Pai e Gamer.Foco em Ferramentas e Soluções Microsoft
Agenda
• First steps• RIA• Sketflow: Tudo começa com a Prototipação• Padrão MVVM• WCF RIA Services
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
Microsoft .NET Application PlatformTecnologia e Ferramenta
DesignDevelo
p
Ferramentas & Modelo de Aplicações
Deploy
Browser
ClientUser Experience
ALM
RIA
RIA – Rich Internet Applications
Back Button and RefreshVisual 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 layoutHype
DEMOApp RIA
Blend + SketchFlow
Protótipos não linearesCompatível com as principais ferramentas de criaçãoPresença de comportamentosPadrão de wireframesComportamentos extensíveisSolução Silverlight e WPFReutilização de sketchsSketchFlow playerFeedbacksDocumentação
+SketchFlow
DEMOSketchflow
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
ControlesControles 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
DEMOExpression BlendLayout , Bind e Controles
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
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
• 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
Cenário MVVM: O que está envolvido?
Silverlight client
View(Pessoa Master/Details)
XAML Code
Precisa ser desenhado
model
Model(PessoaModel)
Pessoa
CamadaDados/Serviço
Camada de
Negócios
Precisa ser testável e sustentável
MVVM
View (Pessoa Master/Details)
XAMLCode
puro “Display”
Model(PessoaModel/Pessoa)
puro “Dados”
ViewModel
ViewModel é o DataContext da View.Bind to data, commandsDesigners
e Ferramentas de Design comoXAML 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(ViewModelLocator)
INotifyPropertyChangedEnvia para a View quando há mudanças de dados
DEMOVinculando View com a ViewModel
MVVM
View (Pessoa Master/Details)
XAMLCode
puro “Display”
Model(PessoaModel/Pessoa)
puro “Dados”
ViewModel
ViewModel é o DataContext da View.Bind to data, commandsDesigners
e Ferramentas de Design comoXAML 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(ViewModelLocator)
INotifyPropertyChangedEnvia para a View quando há mudanças de dados
+ Services
Services
Fornece serviços para realizar operações como RetornaPessoa
Camadas e camadas…XAML
Code behind
ViewModel
Model
Data Access
Network client
Database
Network server
Model Server Validation rules
Client Validation rules
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
A próxima grande onda7
Silverlight nativo no Windows Phone 7 Criação rápida de aplicações visuais
fantásticasMetro-themed UI controlsHTML/JavaScript500.000 developers Windows e WebDesenvolvimento para o MarketPlace
Plataforma Consistente
Windows Phone
Hardware
Elementos de Hardware
Foco na Qualidade
DEMOSilverlight no Windows Phone 7
HTML 5 x Silverlight x Flash
Amigo ou inimigo?
• Spark’s
• DreamSpark• WebSiteSpark• BizSpark
• WebsiteSpark
• Software• Visibilidade• Suporte
• WebsiteSpark
• WebsiteSpark
• WebsiteSpark
www.microsoft.com/web/websitespark/
XAMLCastPodcast sobre Silverlight, WPF e XAML
www.xamlcast.net
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
P&R Twitter: @fernandomartin@rodrigokono
Apoio
Agradecimentos
Patrocinadores
Realização
Top Related