Desenvolvimento Web - danielbarbosa77.files.wordpress.com · Data Base Class Library Windows...
161
Desenvolvimento Web Desenvolvimento de aplicações Ricas para Internet em SilverLight
Transcript of Desenvolvimento Web - danielbarbosa77.files.wordpress.com · Data Base Class Library Windows...
Desenvolvimento WebDesenvolvimento de aplicações Ricas para Internet em SilverLight
Apresentação• Daniel Oliveira
• E-mail: [email protected]
• Blog: http://danielbarbosa77.wordpress.com/
prf.
Dan
iel O
livei
ra
2
Introdução• Aplicações Ricas para Intenet (RIA)
• Aplicações Web que têm os recursos e funcionalidadesde aplicações desktop tradicionais
prf.
Dan
iel O
livei
ra
3
Initial Load
Asynchronous Calls
Introdução• Deficiências de aplicações RIA
• Normalmente requer um Plug In
• Sandboxing
• Necessidade de execução de scripts no navegador
• Velocidade de processamento do cliente
• Tempo de download dos scripts
• Perda de visibilidade
• A dependência de uma conexão de internet
• Acessibilidade
prf.
Dan
iel O
livei
ra
4
Introdução• Principais vantagens do Silverlight
• Managed Code
• Separação das camadas Desenvolvimento de Aplicações
• Microsoft UI Automation (UIA) Technology
• . NET
prf.
Dan
iel O
livei
ra
5
Introdução• Navegadores
• Internet Explorer 6+
• Firefox 1.5+
• Safari 2.0+
• Sistemas Operacionais
• OS X Tiger, Leopard
• Windows Vista, XP, Server 2003, 2000
prf.
Dan
iel O
livei
ra
6
Introdução• Histórico
• SGML
• HTML
• HTML + JavaScript (também chamado ECMAScript)
• Páginas da Web tornou-se mais complexa ea necessidade de dados dinâmico trazido ASP e ASP.NET
• AJAX
• Silverlight ... prf.
Dan
iel O
livei
ra
7
Introdução• Recursos
• Layout, content model, data binding, styles, e triggers
• Gráficos 2D & 3D *, tipografia, animação, audio, e vídeo
• Suporte ao padrão XPS
prf.
Dan
iel O
livei
ra
8* Previsto nas próximas versões
Introdução• Qual a relação do WPF e o Silverlight?
• Similaridades• XAML
• Código gerenciado
• Subconjunto do WPF
• Diferenças• Acesso a um subset de toda a .NET Framework
• Apenas um conjunto de namespaces disponíveis
• Executado dentro do sandbox dos navegadores
• Todos os recursos do computador não estarão disponíveis para o silverlight
• ADO.NET não é suportado (utiliza-se chamados a webservices)
prf.
Dan
iel O
livei
ra
9
Introdução• Ferramentas de desenvolvimento
• Microsoft Visual Studio 2008
• Microsoft Expression Encoder
• Microsoft Expression Blend
prf.
Dan
iel O
livei
ra
10
Introdução• Utilizando o Blend
• Designers geram XAML desenhando gráficos, animações, e todos os aspectos da interface do usuário. A interface do usuário pode ser ligada, em seguida, aos objetos gerenciados.
• Desenvolvimento no VS 2008• Os desenvolvedores do programa de código gerenciado podem
manipular objetos da interface do usuário.
prf.
Dan
iel O
livei
ra
11
Aplicação Silverlight• Os aplicativos geram o arquivo de aplicação em formato XAML
que especifica:• A classe de code-behind para aplicação
• Recursos para aplicação
prf.
Dan
iel O
livei
ra
12
Aplicação Silverlight
prf.
Dan
iel O
livei
ra
13
Aplicação Silverlight
prf.
Dan
iel O
livei
ra
14
Aplicação Silverlight
prf.
Dan
iel O
livei
ra
15
Vantagens
Resource Design
Visual Layers
Storyboard Design
Interaction
Timeline
Storyboards
Aplicação Silverlight• Expression Blend & Visual Studio
• Expression Blend gera XAML de controles adicionados à exibição de design.
• O código code-behind que pode ser visto no painel Projeto do Expression Blend só pode ser editado no Visual Studio.
prf.
Dan
iel O
livei
ra
16
Aplicação Silverlight• Silverlight Foundation
prf.
Dan
iel O
livei
ra
17
Aplicação Silverlight• Silverlight Platform
prf.
Dan
iel O
livei
ra
18
Core Presentation Framework•Component• Services
.NET Framework for Silverlight• Subset of .NET•CLR•Networking Controls
Installer and Updater• Small plug-in• Simplifies installation• Low impact• Automatic updates
Aplicação Silverlight• Core Presentation Components
prf.
Dan
iel O
livei
ra
19
Components
Input
UI Rendering
Media
Controls
Layout
Data Binding
DRM
XAML
Aplicação Silverlight
prf.
Dan
iel O
livei
ra
20
DataBase Class
Library
Windows Communication
Foundation
Common Language Runtime
Windows Presentation Foundation
Dynamic Language Runtime
Aplicação Silverlight• Recursos de desenvolvimento
prf.
Dan
iel O
livei
ra
21
Isolated Storage
Asynchronous Programming
File Management
HTML Interaction
Serialization
Packaging
Aplicação Silverlight• XMAL
• Extensible Application Markup Language (XAML) é umalinguagem declarativa.
• XAML é case-sensitive
prf.
Dan
iel O
livei
ra
22
Aplicação Silverlight• XAML Namescopes
• Armazena a correlação entre os objetos do XAML e suas instâncias equivalentes.
prf.
Dan
iel O
livei
ra
23
Aplicação Silverlight• TypeConverters
• Por padrão o Silverlight realiza conversão entre tipos de dados
• Caso não seja possível ocorre um erro
prf.
Dan
iel O
livei
ra
24
Background Property
(of type Brush)
ColorName Property
(of type String)
Binding Target Binding Source
Button Object MyData Object
Default Conversion
ExercícioCriando uma aplicação em Silverlight
prf.
Dan
iel O
livei
ra
25
XAML
prf.
Dan
iel O
livei
ra
26
XAML• Linguagem case-sensitive
• Baseada em XML
• Através da qual se realiza a construção das interfaces UI em Silverlight
• Realiza o mapeamento das interface com code-behind
• Possibilita o uso de ferramentas distintas para design e codificação. pr
f. D
anie
l Oliv
eira
27
Blend Visual Studio
XAML• Exemplo
prf.
Dan
iel O
livei
ra
28
XAML• Exemplo
prf.
Dan
iel O
livei
ra
29
XAML ExplicaçãoUserControl x:Class="SilverlightApplication1.MainPage" Abertura da tag para o objeto principal (root) da aplicação.
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
Namespace padrão do Silverlight
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Mapeamento padrão para o namespace XAML
Width="400" Height="300" Largura e altura do UserControl
<Grid Background="OldLace" x:Name="LayoutRoot"> Abertura para o elemento de layout de grid
</Grid> Fechamento do elemento de layout de grid
</UserControl> Fechamento do elemento do UserControl
XAML• Declaração de objetos
• Object Element Syntax - utiliza-se abertura e fechamento de Tagspara se determinar um objeto
• Attribute Syntax – declaração de valores in-line, utilizado principalmente para informações de valores de propriedades
prf.
Dan
iel O
livei
ra
30
XAML• Object / Content Element Syntax
prf.
Dan
iel O
livei
ra
31
XAML• Attribute Element Syntax
prf.
Dan
iel O
livei
ra
32
XAML• Configurando propriedades usando coleções implícitas
prf.
Dan
iel O
livei
ra
33
XAML• Quando utilizar a sintaxe de atributos ou elemento para
propriedades?• Tipos primitivos (integer, string, double) só suportam ser
informados por meio de atributos:
• Nos demais tipos, a escolha fica de acordo com a necessidade:
prf.
Dan
iel O
livei
ra
34
Indicando o tipo de Brush
XAML Hierarchy• O uso da notação XML reforça o fato de que os objetos em
XAML são organizados em forma hierárquica.
• Todos os arquivos XAML tem uma raiz ou elemento root
• Em silverlight o elemento raiz (content) sempre tem o atributo x:Class indicado.
prf.
Dan
iel O
livei
ra
35
XAML Hierarchy
prf.
Dan
iel O
livei
ra
36
Eventos• No Silverlight a associação entre o arquivo XAML e o code-
behind é realizado via o atributo x:Class
• O prefixo x: indica que a classe declarada faz parte do namespace do XAML
• O atributo x:Class não pode ser utilizado nos elementos filhos na hierarquia
• Só pode ser declarado uma única vez e no elemento root do arquivo
prf.
Dan
iel O
livei
ra
37
Eventos• Quando é realizado o build de um XAML todos os elementos
que tem o atributo x:Name (com valores únicos) são instanciados em objetos.
• Ficando assim, disponível para a partial class associada ao XAML
• Regras para a formação de nomes de objetos no XAML:• Podem conter letras , números e underscore
• Não podem iniciar com número
• Caracteres unicode não são suportados
prf.
Dan
iel O
livei
ra
38
Eventos
prf.
Dan
iel O
livei
ra
39
ARQUITETURA
prf.
Dan
iel O
livei
ra
40
Arquitetura
prf.
Dan
iel O
livei
ra
41
Arquitetura• Tecnicamente falando, Silverlight é um plugin para o
navegador.
• Por estar ancorado no navegador é sujeito a todas as restrições de segurança
• O próprio plugin gerencia a instalação e atualização (os scripts gerados pela aplicação do Silverlight auxiliam o usuário na instalação)
• Out-of-Browser Experience – é possível desenvolver soluções aonde os usuário executam as aplicações off-line
• Possibilidade de construção de aplicações híbridas: Silverlight + Ajax
prf.
Dan
iel O
livei
ra
42
Arquitetura• Os objetos do DOM (Document Object Model) e BOM
(Browser Object Model) são disponibilizado via interOp
• É possível o uso do javascript para tratamento de respostas a eventos e interação com objetos do Silverlight
• Presentation Core – parte não gerenciada do Silverlight (as diferentes plataformas que suportam o silverlight terá uma implementação própria desse componente)
prf.
Dan
iel O
livei
ra
43
Arquitetura• Display
• Suporte a gráficos vetoriais e rasters (bmp, jpeg e etc)
• Caching para renderização de imagens utilizando GPUs
• Suporte a gráficos m 3D
• Opções de exibição de texto com formatação com mais opções do uso do HTML ou CSS
• Várias opções de layout de objetos (tamanho, posicionamento, transformações, alinhamento e etc.
• Transformações
• Animação
prf.
Dan
iel O
livei
ra
44
Arquitetura• Input
• Mouse
• Teclado
• Arquivos
• Ink (possibilita o reconhecimento de texto)
prf.
Dan
iel O
livei
ra
45
Arquitetura• Áudio e vídeo
• Formatos de vídeo suportados:WMV,WMVA,WMVC1,H.26
• Formatos de áudios suportados: WMA, MP3, AAC
• Protocolos de comunicação:• HTTP
• HTTPs
• mms
• rtps
• rtpst
prf.
Dan
iel O
livei
ra
46
CONSTRUINDO UI
prf.
Dan
iel O
livei
ra
47
Silverlight Layout System
prf.
Dan
iel O
livei
ra
48
1. Etapa de medidas
2. Etapa de organização
Configuração do tamanho de cada elemento
Determinar o posicionamento de cada elemento com base nas propriedades dos objetos filhos, tais como altura e larguraG’day Mate!
Page Layout Classes
prf.
Dan
iel O
livei
ra
49
Grid
• Define um layout tabular usando linhas e colunas
StackPanel
• Organiza os elementos filho "empilhados" um em cima do outro na vertical ou na horizontal
Canvas
• Free layout design que usa coordenadas para posicionar elementos filho
Silverlight Object Tree
prf.
Dan
iel O
livei
ra
50
<html><head><title>Silverlight</title></head><body><div id=“pluginHost”>
</div></body></html>
vXAML
HTML/ASP.NET
Content Control• Contém um único objeto
• Tem a propriedade Content
prf.
Dan
iel O
livei
ra
51
Common content controls:
• Button
• CheckBox
• RadioButton
•TextBlock
•TextBox
This is text content of a Button
Button
Header Content Control• Content Control Especializado
• Além da propriedade Content tem a propriedade Header
prf.
Dan
iel O
livei
ra
52
Headered content controls:
• Expander
• DataGrid
•TabControl
Items Control• Contém múltiplos objetos
• Tem uma propriedade items
• ItemsSource
prf.
Dan
iel O
livei
ra
53
Items Controls comuns:
• TabControl
• ListBox
• temsControl
ItemsSource
Items – Podemser de diferentestipos
Data
Gerenciando coleções de Itens
prf.
Dan
iel O
livei
ra
54
Anexar o evento no XAML
Anexar o evento diretamete no código gerenciadoutilizando x:Name
Definindo um gerenciador de eventos
<ListBox x:Name=“listPeople” SelectionChanged=“listPeople_SelectionChanged"></ListBox>
void listPeople_SelectionChanged(object sender, SelectionChangedEventArgs e)
listPeople.SelectionChanged += new SelectionChangedEventHandler(listPeople_SelectionChanged);
Silverlight Project Templates
prf.
Dan
iel O
livei
ra
55
Silverlight Project Templates• Silverlight Application – template para criação de uma nova
aplicação Silverlight.
• A aplicação é compilada em um arquivo XAP que deverá ser publicado no webserver.
• O arquivo XAP é um arquivo ZIP
• Silverlight Class Library – criação de bibliotecas para as aplicações Silverlight. Qualquer library referenciada fora do projeto do silverlight é incluída no arquivo XAP
prf.
Dan
iel O
livei
ra
56
Silverlight Project Templates
prf.
Dan
iel O
livei
ra
57
Text Input• Silverlight 3 inclui três componentes para input de texto
• Fornece as mesmas funcionalidades da tag INPUT do HTML
• Os controles oferecem integração com o clipboard, quebra de texto, múltiplas linhas e capacidade de fazer/desfazer.
prf.
Dan
iel O
livei
ra
58
Text Input• Password
prf.
Dan
iel O
livei
ra
59
Datagrid• Permite a exibição e edição de coleções de dados
• Para exibir os dados é necessário realizar o bind de enumerável a propriedade ItemsSource
• AutoGenerateColumns
prf.
Dan
iel O
livei
ra
60
Datagrid• Datagrid disponibiliza três tipos de colunas: textbox, checkbox
e template
• Utiliza-se a propriedade Binding para vincular os dados
prf.
Dan
iel O
livei
ra
61
Datagrid• DataGridCheckBoxColumn
prf.
Dan
iel O
livei
ra
62
Datagrid• DataGridTemplateColumn
• CellTemplate
prf.
Dan
iel O
livei
ra
63
ListBox, ComboBox, e TabControl• ListBox
prf.
Dan
iel O
livei
ra
64
ListBox, ComboBox, e TabControl• ComboBox
prf.
Dan
iel O
livei
ra
65
ListBox, ComboBox, e TabControl• TabControl
prf.
Dan
iel O
livei
ra
66
Button• O controle nativo do Silverlight oferece os recursos
semelhantes a outras tecnologias
• Ao invés da presença da propriedade Text tem-se a propriedade Content
prf.
Dan
iel O
livei
ra
67
HyperlinkButton• Prover recurso de navegação ao se clicar em um botão
prf.
Dan
iel O
livei
ra
68
ToggleButton• Combinação de recursos do Button e Checkbox
prf.
Dan
iel O
livei
ra
69
Calendar e DatePicker
prf.
Dan
iel O
livei
ra
70
Silverlight Text• O suporte a texto é realizado diretamente na plataforma
• Fontes Portable User Interface
• Suporte inicial a fonte Lucinda e outras 10
• A utilização das fontes de sistemas não requer download, nem a disponibilização no servidor. Apenas, que elas deverão estar na máquina local.
prf.
Dan
iel O
livei
ra
71
Silverlight Text• A forma mais básica para se exibir textos no Silverlight é o
textblock
prf.
Dan
iel O
livei
ra
72
Silverlight Text• Utilize a propriedade Forecolor para alterar a cor do texto para
uma cor sólida
• É possível uma formatação de cores mais complexa
prf.
Dan
iel O
livei
ra
73
Silverlight Text• TextWrapping
prf.
Dan
iel O
livei
ra
74
Silverlight Text• Formatação em linha (Inline Text Formatting)
prf.
Dan
iel O
livei
ra
75
Silverlight Text• LineBreak
prf.
Dan
iel O
livei
ra
76
Silverlight Text• RenderTransform
prf.
Dan
iel O
livei
ra
77
Silverlight Text• RenderTransform
prf.
Dan
iel O
livei
ra
78
Silverlight Text• Transform Groups
prf.
Dan
iel O
livei
ra
79
Layout• O Microsoft Presentation Foundation apresenta um conjunto
de ferramentas para facilitar a construção de layouts das aplicações.
• O Silverlight baseia-se nos recursos do WPF
• A base da construção de layouts no Silverlight são as seguintes etapas:• Medir
• Arranjar
• Desenhar
• Bounding Box
prf.
Dan
iel O
livei
ra
80
Layout• Pode-se informar de forma explícita a largura e altura de
objetos em pixels
• Por padrão estas propriedades são configuradas ara Auto –aonde o sistema de layout do Silverlight dimensiona os objetos de acordo com o espaço disponível
prf.
Dan
iel O
livei
ra
81
Layout• Os objetos podem ter alinhamento vertical(bottom e Up) e
horizontal (Center, left e right)
• Todos os objetos tem uma margem intrínseca (Margin)
• Padding – Distância dos elementos internos do objeto até a sua margem.
prf.
Dan
iel O
livei
ra
82
Canvas• Prover uma forma de se posicionar objetos através de um
sistema de coordenadas
• Elementos posicionados no interior de uma Canvas são posicionados em relação a coordenada do canto alto a esquerda (0,0)
prf.
Dan
iel O
livei
ra
83
Canvas
prf.
Dan
iel O
livei
ra
84
StackPanel• Fixa verticalmente ou horizontalmente o objetos
• Propriedades: Orientation, Width e Height
prf.
Dan
iel O
livei
ra
85
Grid• Elemento de layout mais versátil
• Pode-se posicionar objetos em linhas e colunas
prf.
Dan
iel O
livei
ra
86
Grid• ColumnSpan e RowSpan
prf.
Dan
iel O
livei
ra
87
<Grid x:Name="LayoutRoot" Background="White" ShowGridLines="True"><Grid.RowDefinitions>
<RowDefinition /><RowDefinition />
</Grid.RowDefinitions><Grid.ColumnDefinitions>
<ColumnDefinition /><ColumnDefinition />
</Grid.ColumnDefinitions>
<TextBlock Grid.Row="0" Grid.Column="0"Grid.ColumnSpan="2" TextWrapping="Wrap">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed ultricies lectus et dui. Quisque vulputate facilisis nisl. Nulla sed turpis. Pellentesque ultricies mi ac velit. Praesent id turpis. Nunc mattis pharetra enim. In leo eros, sollicitudin vitae, ultricies accumsan, luctus quis, justo.
</TextBlock><TextBlock Text="Grid Cell 1" Grid.Row="1" Grid.Column="0" /><TextBlock Text="Grid Cell 1" Grid.Row="1" Grid.Column="1" />
</Grid>
Grid
prf.
Dan
iel O
livei
ra
88
Grid• É possível informar propriedades individuais de cada coluna
prf.
Dan
iel O
livei
ra
89
<Grid x:Name="LayoutRoot"Background="White" ShowGridLines="True">
<Grid.RowDefinitions><RowDefinition /><RowDefinition />
</Grid.RowDefinitions><Grid.ColumnDefinitions>
<ColumnDefinition Width="100" /><ColumnDefinition Width="*" /><ColumnDefinition Width="2*" /><ColumnDefinition Width="*" />
</Grid.ColumnDefinitions></Grid>
Plug-in
prf.
Dan
iel O
livei
ra
90
<asp:Silverlight ID="Xaml1" runat="server"Source="~/ClientBin/MySample.xap"
MinimumVersion=”2.0.31005.0”Width="100%" Height="100%" />
Plug-in
prf.
Dan
iel O
livei
ra
91
<object data="data:application/x-silverlight-2,"type="application/x-silverlight-2" width="100%" height="100%“ >
<param name="source" value="ClientBin/MySample.xap"/><param name="onerror" value="onSilverlightError" /><param name="background" value="white" /><param name="minRuntimeVersion" value="2.0.31005.0" /><param name="autoUpgrade" value="true" /><a href="http://go.microsoft.com/fwlink/?LinkID=124807"
style="text-decoration: none;“><img src="http://go.microsoft.com/fwlink/?LinkId=108181"
alt="Get Microsoft Silverlight" style="border-style: none"/></a></object>
Exercício
- Desenvolver uma solução SilverLight baseada em páginas Asp.NET
- Desenvolver um controle de Silverlight para que os usuários realizem um login em um site hipotético: informando email e senha
- Deverá ser validada a informação de ambos os campos e mensagens de erros deverão ser exibidas para os usuários.
prf.
Dan
iel O
livei
ra
92
CUSTOMIZANDO A APARÊNCIA
prf.
Dan
iel O
livei
ra
93
Resources• Definem uma forma simples de reuso de objetos e valores
• Por exemplo: brushes, styles, e control templates
prf.
Dan
iel O
livei
ra
94
VisualState
prf.
Dan
iel O
livei
ra
95
• Representa a aparência visual do controle quandoestiver em um estado específico.VisualState
• Contém objetos mutualmente excludentes: VisualState e VisualTransition, que são usados para ir de um estado para outro.
VisualStateGroup
• Gerencia o estado e a lógica para a transição entre os estados dos controlesVisualStateManager
• Representa o comportamento visual que ocorre quando o controle transaciona de uma estado para outro.
VisualTransition
Definindo recursos
prf.
Dan
iel O
livei
ra
96
Pode-se definir recursos de várias maneiras:
• Application scope (App.xaml)• Page scope• Element-level scope
XAML<UserControl.Resources><SolidColorBrush x:Key="blueBrush" Color="Blue"/><SolidColorBrush x:Key="whiteBrush" Color="White"/>
</UserControl.Resources >
Referenciando recursos
prf.
Dan
iel O
livei
ra
97
Como referenciar um recurso estático:
PropertyName="{StaticResource ResourceKey}"
<Button Background="{StaticResource blueBrush}"Foreground="{StaticResource whiteBrush}">
Text</Button>
Estilos e templates
prf.
Dan
iel O
livei
ra
98
Você pode usar estilos para aplicar valores de propriedade de elementos :
Você pode definir estilos na seção de Recursos em XAML :
Estilos representam propriedades de interface de usuário de um elemento
• Aplicação estilos a vários controles
•Promover a aparência consistente de controles
Aplicando estilos a um controle
prf.
Dan
iel O
livei
ra
99
Para definir um estilo:
Definindo estilo pelo elemento <Style>1
Configurando a propriedade TargetType para um element type2
3 Definir <Setter> para os elementos filho para definir valores de propriedade
<UserControl.Resources><Style x:Key="myStyle" TargetType=“Button"><Setter Property="Background" Value="Blue" /><Setter Property="Foreground" Value="White" />
</Style></UserControl.Resources>
Automação de UI
prf.
Dan
iel O
livei
ra
100
UI Automation permite que aplicativos de acessibilidade, como leitores de tela para controlar os elementos da interface do usuário e simular a interação do usuárioXAML Example:
<Button x:Name=“btnFirstName” AutomationProperties.Name=“First Name“ />
Elementos de texto
prf.
Dan
iel O
livei
ra
101
TextBlock principal objeto para exibição de textos em aplictivos Silverlight
XAML
Renderizado
Formatando textos
prf.
Dan
iel O
livei
ra
102
A formatação de texto é realizada com as seguintespropriedades: Foreground, TextWrapping, e TextDecorations
Exercício
- No controle de Login, criar um estilo estático e aplicar nos Labels.
- Criar também um estilo para os botões e aplicar.
prf.
Dan
iel O
livei
ra
103
SERVICESServiços providos pelo Silverlight
prf.
Dan
iel O
livei
ra
104
Services• Comunicação
• Silverlight suporta dois tipos de protocolos: Socket TCP e HTTP
• Normalmente utiliza-se o acesso a um webservices utilizando uma classe proxy e WSDL
• Mas, pode-se também realizar requests HTTP obtendo dados em formato XML simples (Plain-Old XML - POX)
• Suporte a comunicação em formato Duplex (Duplex Communication)
• Windows Communication Foundation (WCF)
prf.
Dan
iel O
livei
ra
105
Services• Armazenamento
• Isolated storage
• Os dados são sempre isolados pelo usuário em um sistema de arquivos virtual que pode ser apenas um arquivo no diretório raiz ou uma árvore de diretórios e arquivos.
• É uma abstração, não um local de armazenamento específico
• Qualquer tipo de dado poder ser armazenado
• Tamanho padrão de 100Kb
• Pode ser aumentado o tamanho da quota através do método: IncreaseQuotaTo
prf.
Dan
iel O
livei
ra
106
Services• Out-of-Browser Applications (OOBA)
• Aproximação de uma aplicação RIA com uma solução desktop
• Aplicação é inicializada a partir de um ícone de desktop ou item de menu do sistema operacional.
• Para a criação de uma aplicação OOBA:• Altere a propriedade do projeto Silverlight para permitir Out of
Browser:“Enable running Silverlight application out of the browser” pr
f. D
anie
l Oliv
eira
107
Exercício
- Evoluir o último exercício :- Introduzir um checkbox que ao se marcado irá indicar
que o controle de acesso deverá guardar o login do último usuário acessado.
- O controle de acesso deverá exibir o login o último usuário informado (caso o checkbox esteja selecionado)
- Deverá ser persistido o estado do checkbox para a realização desses controles
prf.
Dan
iel O
livei
ra
108
APLICAÇÃORecursos para desenvolvimento de aplicações
prf.
Dan
iel O
livei
ra
109
Configuração• HTML tag
prf.
Dan
iel O
livei
ra
110
<div id="silverlightControlHost"><object data="data:application/x-silverlight-2,"type="application/x-silverlight-2" width="100%" height="100%"><param name="source" value="ClientBin/SilverlightApplication2.xap"/><param name="onError" value="onSilverlightError" /><param name="background" value="white" /><param name="minRuntimeVersion" value="3.0.40603.0" /><param name="autoUpgrade" value="true" /><a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=3.0.40603.0"
style="text-decoration:none"><img src="http://go.microsoft.com/fwlink/?LinkId=108181"
alt="Get Microsoft Silverlight"style="border-style:none"/>
</a></object><iframe id="_sl_historyFrame"
style="visibility:hidden;height:0px;width:0px;border:0px"></iframe></div>
Configuração• Atributos da tag
• id – identificador da tag para ser utilizado em scripts
• data – MIME(application/x-silverlight)
• Type – tipo mime que indica a versão do Silverlight a ser carregada.
• Height – altura do controle na página
• Width – largura do controle na página
prf.
Dan
iel O
livei
ra
111
Configuração• Parâmetros
• Source – origem do arquivo XAP para exibição• enableHtmlAccess – permissão de acesso ao html• allowHtmlPopupWindow – permite ou não a exibição de popups html
através do código do Silverlight• Background – cor de fundo do controle• minRuntimeVersion – versão mínima para executar o controle• autoUpgrade – indica se o Silverlight poderá realizar atulização
automática • maxFramerate – framerate máximo, o padrão é 60• Windowless – aplicável para Windows. O padrão é falso e aumenta a
performance no Windows.• splashScreenSource – indicação de uma tela customizada para ser
exibida durante a carga do controle.• initParams – passagem de parâmetros para a aplicação.
prf.
Dan
iel O
livei
ra
112
Configuração• Eventos
• onError
• onResize
• onLoad
• Onfullscreenchanged
• onSourceDownloadComplete
• onSourceDownloadProgressChanged
• Eventos para controle via Javascript
prf.
Dan
iel O
livei
ra
113
Configuração• Acessando informações do navegador
prf.
Dan
iel O
livei
ra
114
Alerts, Confirms e Prompt• Alert
• Prompt
• Confirm prf.
Dan
iel O
livei
ra
115
HtmlPage.Window.Alert("Opa!");
string resposta = HtmlPage.Window.Prompt("Informe alguma coisa");
bool resposta = HtmlPage.Window.Confirm("Confirma alguma coisa");
Html Navigate• Navigate
prf.
Dan
iel O
livei
ra
116
HtmlPage.Window.Navigate( new Uri("http://www.silverlight.net", UriKind.Absolute),"NavWindow", "toolbars=no,address=no,width=800,height=600");
Silverlight Control• Server control
prf.
Dan
iel O
livei
ra
117
MediaPlayer Control• Controle para exibição de multimídia nas páginas web
prf.
Dan
iel O
livei
ra
118
Trabalhando com Dados• Questões sobre o trabalho com dados:
• Como expor dados do servidor?
• Como enviar dados para o servidor?
• Exibindo dados via binding
• Armazenando dados no cliente
prf.
Dan
iel O
livei
ra
119
Trabalhando com dados• Não é possível o acesso a dados via as classes do ADO.NET
• Os dados deverão ser obtidos via serviços WCF
• Utiliza-se a classe WebClient para realizar requisições a um URI específica
• Todas as requisições realizadas via WebClient são assincronas
prf.
Dan
iel O
livei
ra
120
Trabalhando com os dados• Obtendo um XML no servidor
prf.
Dan
iel O
livei
ra
121
WebClient client = new WebClient();
client.DownloadStringCompleted += newDownloadStringCompletedEventHandler(client_DownloadStringCompleted);
Uri xmlUri = new Uri("dados.xml", UriKind.Relative);client.DownloadStringAsync(xmlUri);
void client_DownloadStringCompleted(object sender, DownloadStringCompletedEventArgs e)
{if (e.Error == null){
txtXML.Text = e.Result;}
}
Trabalhando com dados
prf.
Dan
iel O
livei
ra
122
Trabalhando com dados• Binding
• É possível através do XAML indicar a vinculação entre um elemento de tela e um dado
prf.
Dan
iel O
livei
ra
123
Trabalhando com dados• Binding
• Gerando binding dinamicamente: one-time / one-way
prf.
Dan
iel O
livei
ra
124
Cliente cliente = new Cliente() { Codigo = 1, Nome = "Daniel Oliveira" };
Binding codigoBinding = new Binding("Codigo");codigoBinding.Source = cliente;codigoBinding.Mode = BindingMode.OneTime;txtCodigo.SetBinding(TextBlock.TextProperty, codigoBinding);
Binding nomeBinding = new Binding("Nome");nomeBinding.Source = cliente;nomeBinding.Mode = BindingMode.OneTime;txtNome.SetBinding(TextBlock.TextProperty, nomeBinding);
Trabalhando com dados• ItemsControl
prf.
Dan
iel O
livei
ra
125
List<Cliente> clientes = new List<Cliente>();Cliente cliente = new Cliente() { Codigo = 1, Nome = "Daniel" };Cliente cliente2 = new Cliente() { Codigo = 2, Nome = "Pedro" };Cliente cliente3 = new Cliente() { Codigo = 3, Nome = "Paulo" };
clientes.Add(cliente);clientes.Add(cliente2);clientes.Add(cliente3);
LayoutRoot.DataContext = clientes;
Trabalhando com dados• ItemTemplate
prf.
Dan
iel O
livei
ra
126
<Grid x:Name="LayoutRoot" Background="White"><StackPanel>
<ItemsControl ItemsSource="{Binding}"><ItemsControl.ItemTemplate>
<DataTemplate><StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding Codigo}"></TextBlock><TextBlock Text=" - "></TextBlock><TextBlock Text="{Binding Nome}"></TextBlock>
</StackPanel></DataTemplate>
</ItemsControl.ItemTemplate></ItemsControl>
</StackPanel></Grid>
Trabalhando com dados• Element-to-Element Binding
prf.
Dan
iel O
livei
ra
127
<Grid x:Name="LayoutRoot" Background="White"><StackPanel>
<Slider x:Name="Slider1" Minimum="0" Maximum="100" /><TextBlock Text="{Binding ElementName=Slider1, Path=Value}" />
</StackPanel></Grid>
Gerenciando Atualizações• Para atualizações existem 3 tipos de Binding
• OneWay – alterações na origem são refletidas no target
• OneTime – Target é atualizado somente na inicialização
• TwoWay – alterações na origem são refletidas no target e alterações realiadas no target são refletidas no destino.
• Dependendo do tipo de binding, o tipo de objeto envolvido deverá ser restringido
prf.
Dan
iel O
livei
ra
128
Gerenciando Atualizações• INotifyPropertyChanged
• Esta interface possibilita o broadcast de eventos de alteração quando um propriedade de um objeto é alterada
prf.
Dan
iel O
livei
ra
129
Gerenciando Atualizações• INotifyCollectionChanged
• Esta interface é implementada quando um objeto realiza um DataBind completo.
• Irá expor um evento quando a coleção for alterada.
• O Silverlight disponibiliza um tipo que implementa esta interface: ObservableCollection<T>
• Caso seja necessário utilizar coleções que sofrerão alterações é aconselhável utilizar este tipo. pr
f. D
anie
l Oliv
eira
130
Gerenciando Atualizações• OneWay bindings
prf.
Dan
iel O
livei
ra
131
<Grid x:Name="LayoutRoot" Background="White"><StackPanel>
<Button x:Name="StartButton" HorizontalAlignment="Center"><TextBlock>Start Timer</TextBlock>
</Button><StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
<TextBlock>Elapsed Island Time:</TextBlock><TextBlock Text="{Binding ElapsedTime, Mode=OneWay}" />
</StackPanel></StackPanel>
</Grid>
Gerenciando Atualizações• TwoWay Binding
prf.
Dan
iel O
livei
ra
132
<Grid x:Name="LayoutRoot" Background="White"><StackPanel>
<Button x:Name="StartButton" HorizontalAlignment="Center"><TextBlock>Start Timer</TextBlock>
</Button><StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
<TextBlock>Elapsed Island Time:</TextBlock><TextBlock Text="{Binding ElapsedTime, Mode=OneWay}"></TextBlock>
</StackPanel><StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
<TextBlock>Timer Name:</TextBlock><TextBox Text="{Binding Name, Mode=TwoWay}" Width="100" /><TextBlock Text="{Binding Name, Mode=OneWay}"/>
</StackPanel></StackPanel>
</Grid>
Gerenciando Atualizações• Tratando exceções
• ValidatesOnExceptions – Se for marcada como TRUE todas as exceções que ocorrerem na origem serão tratadas pelo objeto que realizou o binding
• NotifyOnValidationError – se for marcada como TRUE o binding irá gerar um exceção do tipo BindingValidationError caso ocorra algum erro ocorra.
prf.
Dan
iel O
livei
ra
133
Gerenciando Atualizações• Tratando exceções
prf.
Dan
iel O
livei
ra
134
<Grid x:Name="LayoutRoot"BindingValidationError="LayoutRoot_BindingValidationError" Background="White" >
<Grid.RowDefinitions><RowDefinition Height="0.113*"/>
<RowDefinition Height="0.887*"/></Grid.RowDefinitions><Grid.ColumnDefinitions>
<ColumnDefinition Width="0.462*"/><ColumnDefinition Width="0.538*"/>
</Grid.ColumnDefinitions><TextBlock Text="Destination Name"/><TextBlock Grid.Column="1" Text="Population" /><TextBlock Text="{Binding Name, Mode=OneWay}" Grid.Row="1" /><TextBox Text="{Binding Population, Mode=TwoWay,ValidatesOnExceptions=true, NotifyOnValidationError=true}"VerticalAlignment="Top" Grid.Column="1" Grid.Row="1" Width="200" />
</Grid>
Usando o Isolated Storage• A classe IsolatedStorageFile provê um conjunto de métodos
estáticos para auxiliar o uso desse recurso.
prf.
Dan
iel O
livei
ra
135
Usando o Isolated Storage• Gerenciando o tamanho do repositório
prf.
Dan
iel O
livei
ra
136
Usando o Isolated Storage• Criando um novo arquivo
prf.
Dan
iel O
livei
ra
137
Usando o Isolated Storage• Exemplo
prf.
Dan
iel O
livei
ra
138
void MainPage_Loaded(object sender, RoutedEventArgs e){
_store = IsolatedStorageFile.GetUserStoreForApplication();CheckAvailableSpace();CreateFile();ReadDestinations();LayoutRoot.DataContext = _destinations;
}
Exercício• Construir uma aplicação em Silverlight que receba o Nome e
e-mail e usuários.
• Armazene as informações em uma classe
• Deverá ser montando uma lista das classes e a mesma será serializada no Isolated Storage.
• Toda a vez que a aplicação for executada deverá ser exibida todas as informações cadastradas.
prf.
Dan
iel O
livei
ra
139
MANAGED CODE X JAVASCRIPTInteração entre o código gerenciando e não gerenciado
prf.
Dan
iel O
livei
ra
140
Eventos• System.Windows.Browser
• Namespace que gerencia boa parte da interação com o navegador via o código gerenciado.
• É possível gerenciar eventos gerados pelo código .NET pelo script das páginas
• Também é possível via script interagir com o código gerenciado.
prf.
Dan
iel O
livei
ra
141
Eventos• A primeira coisa é a determinação dos dados que serão
passados entre os métodos.
• Deve-se definir um DTO – Data Transfer Object
prf.
Dan
iel O
livei
ra
142
Eventos• O próximo passo é definir uma classe derivada de EventArgs
prf.
Dan
iel O
livei
ra
143
Eventos• Criando o Handler para a execução do evento
prf.
Dan
iel O
livei
ra
144
Eventos• ScriptableTypeAttribute
• Atributo para expor classes (tipos) para os scripts das páginas hospedeiras dos controles Silverlight
prf.
Dan
iel O
livei
ra
145
Eventos• Registrando o controle para acesso via script
prf.
Dan
iel O
livei
ra
146
public MainPage(){
InitializeComponent();HtmlPage.RegisterScriptableObject("Page", this);
}
Eventos• Script na página
prf.
Dan
iel O
livei
ra
147
<param name="onload" value="onSilverlightLoad" />
<script type="text/javascript" language="javascript">function onSilverlightLoad(sender, args) {
var plugin = sender.getHost();plugin.Content.Page.addEventListener('UserSelected', userSelected);
}
function userSelected(sender, userArgs) {alert("Username: " + userArgs.User.Name + "\nPassowrd: " +
userArgs.User.Password);}
</script>
Eventos• Disparando o evento
prf.
Dan
iel O
livei
ra
148
void btnLogin_Click(object sender, RoutedEventArgs e){
User user = new User();user.Name = "Daniel";user.Password = "123";OnUserSelected(user);
}
Eventos• Via javascript é possível interagir diretamente com objetos
gerenciados
prf.
Dan
iel O
livei
ra
149
<script type="text/javascript" language="javascript">function onSilverlightLoad(sender, args) {
var plugin = sender.getHost();var managedButton = plugin.content.findName("ManagedButton");
managedButton.addEventListener("MouseMove", managedButtonHover);}
var mouseX, mouseY;function managedButtonHover(sender, mouseArgs) {
if (!mouseX)mouseX = document.getElementById("MouseX");
if (!mouseY)mouseY = document.getElementById("MouseY");
var coords = mouseArgs.getPosition(null); mouseX.innerHTML = coords.X;mouseY.innerHTML = coords.Y;
}</script>
Eventos• Capturando eventos do javascript no code behind
prf.
Dan
iel O
livei
ra
150
public MainPage(){
InitializeComponent();HtmlElement btn = HtmlPage.Document.GetElementById("btnClickHTML");if (btn != null)
btn.AttachEvent("onclick", HtmlButton_Click);}
void HtmlButton_Click(object sender, HtmlEventArgs e){
HtmlPage.Window.Alert("Opa!");}
Navegação• Em um mesmo arquivo XAP podemos ter vários controles
Silverlight• Páginas
• Child Windows
prf.
Dan
iel O
livei
ra
151
Navegação• Pode-se ter uma aplicação como template para navegação,
através de um projeto específico
prf.
Dan
iel O
livei
ra
152
Navegação• A exibição d janelas popup em silverlight é realizada atraveés
da criação de Child Windows
prf.
Dan
iel O
livei
ra
153
Navegação• No controle deve-se instanciar a janela child exibi-lá
prf.
Dan
iel O
livei
ra
154
private void btnLogin_Click(object sender, RoutedEventArgs e){
Views.Login _login = new ExemploNavegacao.Views.Login();_login.Show();
}
Navegação• Sendo classes os controles de janelas filhas pode-se utilizar
atributos para passar informações
prf.
Dan
iel O
livei
ra
155
private void btnLogin_Click(object sender, RoutedEventArgs e){
Views.Login _login = new ExemploNavegacao.Views.Login();_login.LoginUsuario = "[email protected]";_login.Show();
}
Navegação• Através da propriedade DialogResult, controla-se o
cancelamento ou não da ação
prf.
Dan
iel O
livei
ra
156
private void OKButton_Click(object sender, RoutedEventArgs e){
this.DialogResult = true;}
private void CancelButton_Click(object sender, RoutedEventArgs e){
this.DialogResult = false;}
Navegação• A chamada do método Show() é assíncrona
prf.
Dan
iel O
livei
ra
157
private void btnLogin_Click(object sender, RoutedEventArgs e){
Views.Login _login = new ExemploNavegacao.Views.Login();_login.LoginUsuario = "[email protected]";_login.Closed += new EventHandler(_login_Closed);_login.Show();
}
void _login_Closed(object sender, EventArgs e){
HtmlPage.Window.Alert(((Views.Login)sender).DialogResult.ToString());}
Navegação• Silverlight Navigation Application
prf.
Dan
iel O
livei
ra
158
Navegação• Navigation Frame
prf.
Dan
iel O
livei
ra
159
<navigation:Frame x:Name="Frame" Source="/Views/HomePage.xaml"HorizontalContentAlignment="Stretch"VerticalContentAlignment="Stretch"Padding="15,10,15,10"Background="White"/>
private void NavButton_Click(object sender, RoutedEventArgs e){
Button navigationButton = sender as Button;String goToPage = navigationButton.Tag.ToString();this.Frame.Navigate(new Uri(goToPage, UriKind.Relative));
}
Navegação• Tratamento global de erros (app.xaml)
prf.
Dan
iel O
livei
ra
160
private void Application_UnhandledException(object sender, ApplicationUnhandledExceptionEventArgs e)
{if (!System.Diagnostics.Debugger.IsAttached){
e.Handled = true;ChildWindow ErrorWin = new ErrorWindow(e.ExceptionObject);ErrorWin.Show();
}}
Exercício
- Criar uma aplicação aonde tenha-se:- Login
- Fale conosco
- Sobre
- Catálogo
- A aplicação deverá possibilitar a navegação entre as páginas.
prf.
Dan
iel O
livei
ra
161
![Desenvolvimento de jogos para a Windows Store [MVP ShowCast 2013 - DEV - Windows Store apps]](https://static.fdocuments.us/doc/165x107/557ddc96d8b42a124f8b4fd3/desenvolvimento-de-jogos-para-a-windows-store-mvp-showcast-2013-dev-windows-store-apps.jpg)
