SETEMBRO, 2010 | SÃO PAULO

Rodrigo KonoMVP - MCT - MCTS - MCPDPensou.Net Treinamentos

www.rodrigokono.netwww.twitter.com/rodrigokono

www.pensou.net

Silverlight 4 e Expression Blend 4 – Tecnologia e Ferramenta em suas mãos

CÓDIGO DA SESSÃO: WEB203

4

AgendaSilverlight 4 e Expression Blend 4

Visão GeralEntendendo o LayoutControlesStyles e Resource DictionaryData BindingVisual State ManagerDicas!A próxima onda…

5

Silverlight e o Expression Blend 4Silverlight é uma tecnologia web, que permite criar experiências ricas, tanto visuais como usuais e vai além disto! Já o Expression

Blend é uma poderosa ferramenta para desenvolver UI

6

Microsoft .NET Application PlatformTecnologia e Ferramenta

DesignDevelo

p

Ferramentas & Modelo de Aplicações

Deploy

Browser

ClientUser Experience

7

Timeline do Silverlight Em números

36 meses desde o

lançamento

Silverlight lançado em 2007…

8

36 meses desde o

lançamento

500m+downloads

500m+

Timeline do Silverlight Em números

9

36 meses desde o

lançamento

500m+downloads

500.000+Developers &

Designers

Source: Microsoft Developer Tracker 2008 Report

+500.000

Timeline do Silverlight Em números

10

36 meses desde o

lançamento

500m+downloads

500.000+Developers &

Designers

350+ parceiros em

30 países

Timeline do Silverlight Em números

11

36 meses desde o

lançamento

500m+downloads

500.000+Developers &

Designers

350+ parceiros em

30 países

350+Microsoft

Products & Websites

Timeline do Silverlight Em números

12

36 meses desde o

lançamento

500m+downloads

500.000+Developers &

Designers

350+ parceiros em

30 países

350+Microsoft

Products & Websites

Milhares de Apps pelo mundo!

www.silverlight.net/showcase

Timeline do Silverlight Em números

13

Timeline do SilverlightEm números no Brasil

Lançamento do Silverlight em Set 2007Silverlight 2 - Out 2008 Silverlight 3 - Jul 2009Silverlight 4 - Mar 2010

Em 3 anos!54,30% da internet no BRA possui dispositivos com o Silverlight 4 instalado!11,39% ainda no Silverlight 3

56,31% no Flash 10.1

fonte: www.riastats.com, 14.09.2010

14

O que preciso ter para começar a desenvolver com Silverlight 4?

Visual Studio 2010 ou Visual Web Developer Express 2010

Silverlight 4 Tools for Visual Studio 2010Expression Blend 4Silverlight 4 toolkit

Todos estes passos estão em http://www.silverlight.net/getstarted

15

XAML

Separa o front-end do back-end

Simples e declarativa. Adequado para a construção e inicialização de objetos do .NET

Forma mais concisa para representar interfaces de usuário (ou outras hierarquias de objetos)

Não precisa de ser compilada

Expression Design e export em Adobe Illustrator, Fireworks, SWF2XAML...

<Button Width="100"> OK <Button.Background> LightBlue </Button.Background></Button>

Lê, Parse, Mostra

16

Primeiros passosCompreedendo o Ambiente de Desenvolvimento

17

Entendendo o Layout

Essencial para a criação da sua UIRenderização/organização do conteúdoPanels são usados para receber conteúdoMargin e PaddingPosicionamento Fixo (Canvas) é raramente usado

18

Entendendo o LayoutLayout Controls (Panels)

StackPanel •Posiciona objetos próximos um do outro ou sobre o outro

Grid •Funciona como uma tabela. Posiciona objetos em linha e coluna

Canvas •Utiliza o posicionamento absoluto

19

Entendendo o Layout Layout Controls (parte do Silverlight Toolkit )

WrapPanel

• Posiciona os elementos filho sequencialmente da esquerda para a direita, quebrando o conteúdo para a linha seguinte.

DockPanel

• Um espaço onde você pode organizar os elementos filho horizontalmente ou verticalmente, em relação uns aos outros.

20

Entendendo o Layout Posicionamento

Margin

Text Block Text Block

Padding

Alinhamento Horizontal e Vertical Margin

Padding

21

Layout

22

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

23

ControlesNativos do Silverlight

Border Button Checkbox Combobox

DataGrid Grid Image Label

ListBox RadioButton Rectangle StackPane

l

TabControl TextBlock TextBox TreeView

ViewboxE muito mais no Silverlight Toolkit...

24

Controles

25

Styles

O que são styles?

•Capacidade de associar diferentes efeitos visuais com base em eventos do usuário•Proporcionar um aspecto totalmente novo para os controles existentes•Controla o comportamento de renderização de objetos não-visual

Silvrlight 4 suporta styles implícitos

•Herda os styles mestres

Semelhança com Cascading Style Sheets

(CSS)

•Declaração Inline•Declaração na página•Declaração em arquivos

26

Resource Dictionary

Contém hash table de recursos

Ótima maneira de organizar recursos

ResourceDictionary.MergedDictionaries combina vários arquivos diferentes em uma única base

27

Styles e Resource Dictionaries

28

Trabalhando com Dados (Data Binding)

Ligação de elementos da UI com os DadosSample Data para facilitar a vidaData TemplatesValidação de DadosDireção do Fluxo de dadosConversões de Dados

29

Databinding no Blend 4

30

The Silverlight Visual State Manager

Alternativa para os triggers do WPF no SilverlightTotalmente suportados no Expression BlendDomínio dos estados dos controlesPromove a separação da interface do usuário com o códigoPode adicionar estados manualmente a um UserControl

31

Visual State Manager

Dicas do mundo realCrie projetos no Visual Studio

Visual Studio gerencia e possui outros recursosTemplates não são identicos

Teste e rode sua aplicação no Visual StudioNão há suporte para debug no BlendMelhor informação do erro no Visual Studio

Cuidado de ter aberto o mesmo arquivo duas ou mais vezes.

33

A próxima grande onda

7

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

34

Conclusão

Você pode até não usar no momento, mas em breve você irá usar!Layout em XAML é simples e flexívelO ecossistema de controle para Silverlight é muito vastoData Binding no Silverlight é rico, suporta vários tipos de dadosUX, Usabilidade e NUI para suas aplicaçõesA curva de aprendizagem pode ser íngreme, mas vale a pena. Comece já!

35

Onde conseguir informações?!Portal da comunidade oficial do Silverligh - www.silverlight.netSite oficial do produto - www.microsoft.com/silverlightFree Windows Phone Developer Tools - developer.windowsphone.comBlog: Rodrigo Kono - www.rodrigokono.netBlog: Roberto Sonnino – www.virtualdreams.com.br/blog Blog do Kelps Sousa - http://blog.kelps.net PodCast: XAMLCast - www.xamlcast.netComunidade Silverlight Brasil: www.silverlightbrasil.ning.com

36

XAMLCastPodcast sobre Silverlight, WPF e XAML

www.xamlcast.net

37

© 2008 Microsoft Corporation. Todos os direitos reservados. Microsoft, Windows, Windows Vista e outros nomes de produtos são ou podem ser marcas registradas e/ou marcas comerciais nos EUA e/ou outros países.Este documento é meramente informativo e representa a visão atual da Microsoft Corporation a partir da data desta apresentação. Como a Microsoft deve atender a condições de mercado em constante alteração, este

documento não deve ser interpretado como um compromisso por parte da Microsoft, e a Microsoft não pode garantir a precisão de qualquer informação fornecida após a data desta apresentação. A MICROSOFT NÃO DÁ QUALQUER GARANTIA, SEJA ELA EXPRESSA, IMPLÍCITA OU ESTATUTÁRIA, REFERENTE ÀS INFORMAÇÕES DESTA APRESENTAÇÃO.