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