Post on 24-May-2015
description
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.