desenvolvimento web - danielbarbosa77.files.wordpress.com · dados dinâmico trazido asp e asp.net...
Post on 30-Nov-2018
215 Views
Preview:
TRANSCRIPT
Desenvolvimento Web Desenvolvimento de aplicações Ricas para Internet em SilverLight
Apresentação
• Daniel Oliveira
• E-mail: daniel@danielboliveira.com
• 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 funcionalidades de 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
Data Base 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) é uma linguagem 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ício
Criando 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.
prf
. Dan
iel O
livei
ra
27
Blend
Visu
al Stud
io
XAML
• Exemplo
prf
. Dan
iel O
livei
ra
28
XAML
• Exemplo
prf
. Dan
iel O
livei
ra
29
XAML Explicação
UserControl 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 Tags para 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 largura G’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>
v XAML
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 – Podem
ser de diferentes
tipos
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 gerenciado utilizando 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_SelectionChan
ged);
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 quando estiver 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 controles VisualStateManager
• 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 type 2
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ário
XAML 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 seguintes
propriedades: Foreground, TextWrapping, e
TextDecorations
SERVICES
Serviços providos pelo Silverlight
prf
. Dan
iel O
livei
ra
103
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
104
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
105
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”
prf
. Dan
iel O
livei
ra
106
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
107
APLICAÇÃO
Recursos para desenvolvimento de aplicações
prf
. Dan
iel O
livei
ra
108
Configuração
• HTML tag
prf
. Dan
iel O
livei
ra
109
<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
110
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
111
Configuração
• Eventos
• onError
• onResize
• onLoad
• Onfullscreenchanged
• onSourceDownloadComplete
• onSourceDownloadProgressChanged
• Eventos para controle via Javascript
prf
. Dan
iel O
livei
ra
112
Configuração
• Acessando informações do navegador
prf
. Dan
iel O
livei
ra
113
Alerts, Confirms e Prompt
• Alert
• Prompt
• Confirm
prf
. Dan
iel O
livei
ra
114
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
115
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
116
MediaPlayer Control
• Controle para exibição de multimídia nas páginas web
prf
. Dan
iel O
livei
ra
117
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
118
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
119
Trabalhando com os dados
• Obtendo um XML no servidor
prf
. Dan
iel O
livei
ra
120
WebClient client = new WebClient(); client.DownloadStringCompleted += new DownloadStringCompletedEventHandler(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
121
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
122
Trabalhando com dados
• Binding
• Gerando binding dinamicamente: one-time / one-way
prf
. Dan
iel O
livei
ra
123
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
124
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
125
<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
126
<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
127
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
128
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. p
rf. D
anie
l Oliv
eira
129
Gerenciando Atualizações
• OneWay bindings
prf
. Dan
iel O
livei
ra
130
<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
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}"></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
132
Gerenciando Atualizações
• Tratando exceções
prf
. Dan
iel O
livei
ra
133
<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
134
Usando o Isolated Storage
• Gerenciando o tamanho do repositório
prf
. Dan
iel O
livei
ra
135
Usando o Isolated Storage
• Criando um novo arquivo
prf
. Dan
iel O
livei
ra
136
Usando o Isolated Storage
• Exemplo
prf
. Dan
iel O
livei
ra
137
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
138
MANAGED CODE X JAVASCRIPT
Interação entre o código gerenciando e não gerenciado
prf
. Dan
iel O
livei
ra
139
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
140
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
141
Eventos
• O próximo passo é definir uma classe derivada de EventArgs
prf
. Dan
iel O
livei
ra
142
Eventos
• Criando o Handler para a execução do evento
prf
. Dan
iel O
livei
ra
143
Eventos
• ScriptableTypeAttribute
• Atributo para expor classes (tipos) para os scripts das páginas hospedeiras dos controles Silverlight
prf
. Dan
iel O
livei
ra
144
Eventos
• Registrando o controle para acesso via script
prf
. Dan
iel O
livei
ra
145
public MainPage() { InitializeComponent(); HtmlPage.RegisterScriptableObject("Page", this); }
Eventos
• Script na página
prf
. Dan
iel O
livei
ra
146
<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
147
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
148
<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
149
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
150
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
151
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
152
Navegação
• No controle deve-se instanciar a janela child exibi-lá
prf
. Dan
iel O
livei
ra
153
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
154
private void btnLogin_Click(object sender, RoutedEventArgs e) { Views.Login _login = new ExemploNavegacao.Views.Login(); _login.LoginUsuario = "algumacoisa@qualquercoisa.com"; _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
155
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
156
private void btnLogin_Click(object sender, RoutedEventArgs e) { Views.Login _login = new ExemploNavegacao.Views.Login(); _login.LoginUsuario = "algumacoisa@qualquercoisa.com"; _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
157
Navegação
• Navigation Frame
prf
. Dan
iel O
livei
ra
158
<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
159
private void Application_UnhandledException(object sender, ApplicationUnhandledExceptionEventArgs e) { if (!System.Diagnostics.Debugger.IsAttached) { e.Handled = true; ChildWindow ErrorWin = new ErrorWindow(e.ExceptionObject); ErrorWin.Show(); } }
top related