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 . D an ie l O liv eir a 2Introdução
• Aplicações Ricas para Intenet (RIA)
• Aplicações Web que têm os recursos e funcionalidades
de aplicações desktop tradicionais
prf . D an ie l O liv eir a 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 . D an ie l O liv eir a 4
Introdução
• Principais vantagens do Silverlight
• Managed Code
• Separação das camadas Desenvolvimento de Aplicações • Microsoft UI Automation (UIA) Technology
• . NET prf . D an ie l O liv eir a 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 . D an ie l O liv eir a 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 . D an ie l O liv eir a 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 . D an ie l O liv eir a 8
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 . D an ie l O liv eir a 9
Introdução
• Ferramentas de desenvolvimento
• Microsoft Visual Studio 2008
• Microsoft Expression Encoder
• Microsoft Expression Blend
prf . D an ie l O liv eir a 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 . D an ie l O liv eir a 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 . D an ie l O liv eir a 12
Aplicação Silverlight
prf . D an ie l O liv eir a 13Aplicação Silverlight
prf . D an ie l O liv eir a 14Aplicação Silverlight
prf . D an ie l O liv eir a 15Vantagens
Resource Design Visual Layers Storyboard Design Interaction Timeline StoryboardsAplicaçã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 . D an ie l O liv eir a 16
Aplicação Silverlight
• Silverlight Foundation prf . D an ie l O liv eir a 17Aplicação Silverlight
• Silverlight Platform prf . D an ie l O liv eir a 18Core Presentation Framework
• Component • Services
.NET Framework for Silverlight
• Subset of .NET • CLR
• Networking Controls
Installer and Updater
• Small plug-in
• Simplifies installation • Low impact
Aplicação Silverlight
• Core Presentation Components
prf . D an ie l O liv eir a 19 Components Input UI Rendering Media Controls Layout Data Binding DRM XAML
Aplicação Silverlight
prf . D an ie l O liv eir a 20Data Base Class
Library Windows Communication Foundation Common Language Runtime Windows Presentation Foundation Dynamic Language Runtime
Aplicação Silverlight
• Recursos de desenvolvimento prf . D an ie l O liv eir a 21Isolated 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 . D an ie l O liv eir a 22
Aplicação Silverlight
• XAML Namescopes
• Armazena a correlação entre os objetos do XAML e suas
instâncias equivalentes. prf . D an ie l O liv eir a 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 . D an ie l O liv eir a 24 Background Property
(of type Brush)
ColorName Property
(of type String)
Binding Target Binding Source
Button Object MyData Object
Exercício
Criando uma aplicação em Silverlight
prf . D an ie l O liv eir a 25
XAML
prf . D an ie l O liv eir a 26XAML
• 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 ie l O liv eir a 27 Blend V isua l S tudi o
XAML
• Exemplo prf . D an ie l O liv eir a 28XAML
• Exemplo prf . D an ie l O liv eir a 29 XAML ExplicaçãoUserControlx:Class="SilverlightApplication1.MainPage" Abertura da tag para o objeto principal (root) da aplicação.
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/pres entation"
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
<GridBackground="OldLace"x:Name="LayoutRoot"> Abertura para o elemento de layout de grid
</Grid> Fechamento do elemento de layout de grid
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 . D an ie l O liv eir a 30
XAML
• Object / Content Element Syntax
prf . D an ie l O liv eir a 31
XAML
• Attribute Element Syntax
prf . D an ie l O liv eir a 32
XAML
• Configurando propriedades usando coleções implícitas
prf . D an ie l O liv eir a 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 . D an ie l O liv eir a 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 . D an ie l O liv eir a 35
XAML Hierarchy
prf . D an ie l O liv eir a 36Eventos
• 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 . D an ie l O liv eir a 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 . D an ie l O liv eir a 38
Eventos
prf . D an ie l O liv eir a 39ARQUITETURA
prf . D an ie l O liv eir a 40Arquitetura
prf . D an ie l O liv eir a 41Arquitetura
• 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 . D an ie l O liv eir a 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 . D an ie l O liv eir a 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 . D an ie l O liv eir a 44
Arquitetura
• Input
• Mouse
• Teclado • Arquivos
• Ink (possibilita o reconhecimento de texto)
prf . D an ie l O liv eir a 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 . D an ie l O liv eir a 46
CONSTRUINDO UI
prf . D an ie l O liv eir a 47Silverlight Layout System
prf . D an ie l O liv eir a 481. Etapa de
medidas
organização
2. Etapa de
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
Page Layout Classes
prf . D an ie l O liv eir a 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 filhoSilverlight Object Tree
prf . D an ie l O liv eir a 50 <html> <head><title>Silverlight</title></head> <body> <div id=“pluginHost”> </div> </body> </html> v XAMLHTML/ASP.NET
Content Control
• Contém um único objeto
• Tem a propriedade Content
prf . D an ie l O liv eir a 51
Common content controls: • Button
• CheckBox • RadioButton • TextBlock • TextBox
This is text content of a Button
Header Content Control
• Content Control Especializado
• Além da propriedade Content tem a propriedade Header
prf . D an ie l O liv eir a 52
Headered content controls:
• Expander
• DataGrid
Items Control
• Contém múltiplos objetos
• Tem uma propriedade items
• ItemsSource prf . D an ie l O liv eir a 53 Items Controls comuns: • TabControl • ListBox • temsControl ItemsSource Items – Podem ser de diferentes tipos Data
Gerenciando coleções de Itens
prf . D an ie l O liv eir a 54Anexar 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 . D an ie l O liv eir a 55Silverlight 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
. D an ie l O liv eir a 56
Silverlight Project Templates
prf . D an ie l O liv eir a 57Text 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 . D an ie l O liv eir a 58
Text Input
• Password prf . D an ie l O liv eir a 59Datagrid
• 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 . D an ie l O liv eir a 60
Datagrid
• Datagrid disponibiliza três tipos de colunas: textbox, checkbox
e template
• Utiliza-se a propriedade Binding para vincular os dados
prf . D an ie l O liv eir a 61
Datagrid
• DataGridCheckBoxColumn prf . D an ie l O liv eir a 62Datagrid
• DataGridTemplateColumn • CellTemplate prf . D an ie l O liv eir a 63ListBox, ComboBox, e
TabControl
• ListBox prf . D an ie l O liv eir a 64ListBox, ComboBox, e
TabControl
• ComboBox prf . D an ie l O liv eir a 65ListBox, ComboBox, e
TabControl
• TabControl prf . D an ie l O liv eir a 66Button
• 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 . D an ie l O liv eir a 67
HyperlinkButton
• Prover recurso de navegação ao se clicar em um botão
prf . D an ie l O liv eir a 68
ToggleButton
• Combinação de recursos do Button e Checkbox
prf . D an ie l O liv eir a 69
Calendar e DatePicker
prf . D an ie l O liv eir a 70Silverlight 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 . D an ie l O liv eir a 71
Silverlight Text
• A forma mais básica para se exibir textos no Silverlight é o
textblock prf . D an ie l O liv eir a 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 . D an ie l O liv eir a 73
Silverlight Text
• TextWrapping prf . D an ie l O liv eir a 74Silverlight Text
• Formatação em linha (Inline Text Formatting)
prf . D an ie l O liv eir a 75
Silverlight Text
• LineBreak prf . D an ie l O liv eir a 76Silverlight Text
• RenderTransform prf . D an ie l O liv eir a 77Silverlight Text
• RenderTransform prf . D an ie l O liv eir a 78Silverlight Text
• Transform Groups prf . D an ie l O liv eir a 79Layout
• 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 . D an ie l O liv eir a 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 . D an ie l O liv eir a 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 . D an ie l O liv eir a 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 . D an ie l O liv eir a 83
Canvas
prf . D an ie l O liv eir a 84StackPanel
• Fixa verticalmente ou horizontalmente o objetos
• Propriedades: Orientation, Width e Height
prf . D an ie l O liv eir a 85
Grid
• Elemento de layout mais versátil
• Pode-se posicionar objetos em linhas e colunas
prf . D an ie l O liv eir a 86
Grid
• ColumnSpan e RowSpan prf . D an ie l O liv eir a 87<Gridx:Name="LayoutRoot" Background="White" ShowGridLines="True"> <Grid.RowDefinitions> <RowDefinition /> <RowDefinition /> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition /> <ColumnDefinition /> </Grid.ColumnDefinitions>
<TextBlockGrid.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>
<TextBlockText="Grid Cell 1"Grid.Row="1"Grid.Column="0" /> <TextBlockText="Grid Cell 1"Grid.Row="1"Grid.Column="1" /> </Grid>
Grid
prf . D an ie l O liv eir a 88Grid
• É possível informar propriedades individuais de cada coluna
prf . D an ie l O liv eir a 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 . D an ie l O liv eir a 90<
asp
:
Silverlight
ID
="Xaml1"
runat
="server"
Source
="~/ClientBin/MySample.xap"
MinimumVersion
=”2.0.31005.0”
Plug-in
prf . D an ie l O liv eir a 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>
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 . D an ie l O liv eir a 92
CUSTOMIZANDO A APARÊNCIA
prf . D an ie l O liv eir a 93Resources
• Definem uma forma simples de reuso de objetos e valores
• Por exemplo: brushes, styles, e control templates
prf . D an ie l O liv eir a 94
VisualState
prf . D an ie l O liv eir a 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 controles
VisualStateManager
• Representa o comportamento visual que ocorre quando o controle transaciona de uma estado para outro.
Definindo recursos
prf . D an ie l O liv eir a 96Pode-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 . D an ie l O liv eir a 97Como referenciar um recurso estático:
PropertyName="{StaticResource ResourceKey}"
<Button Background="{StaticResource blueBrush}" Foreground="{StaticResource whiteBrush}"> Text
Estilos e templates
prf . D an ie l O liv eir a 98Você 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
Aplicando estilos a um controle
prf . D an ie l O liv eir a 99Para 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>
Automação de UI
prf . D an ie l O liv eir a 100UI 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”
Elementos de texto
prf . D an ie l O liv eir a 101TextBlock principal objeto para exibição de
textos em aplictivos Silverlight
XAML
Formatando textos
prf . D an ie l O liv eir a 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 . D an ie l O liv eir a 103
SERVICES
Serviços providos pelo Silverlight
prf . D an ie l O liv eir a 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 . D an ie l O liv eir a 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 . D an ie l O liv eir a 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” prf. Dan
ie l O liv eir a 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 . D an ie l O liv eir a 108
APLICAÇÃO
Recursos para desenvolvimento de aplicações
prf . D an ie l O liv eir a 109
Configuração
• HTML tag prf . D an ie l O liv eir a 110 <div id="silverlightControlHost"><object data="data:application/x-silverlight-2,"
type="application/x-silverlight-2"width="100%"height="100%">
<paramname="source" value="ClientBin/SilverlightApplication2.xap"/> <paramname="onError" value="onSilverlightError" />
<paramname="background"value="white" />
<paramname="minRuntimeVersion"value="3.0.40603.0" /> <paramname="autoUpgrade"value="true" />
<ahref="http://go.microsoft.com/fwlink/?LinkID=149156&v=3.0.40603.0"
style="text-decoration:none">
<imgsrc="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 . D an ie l O liv eir a 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 . D an ie l O liv eir a 112
Configuração
• Eventos • onError • onResize • onLoad • Onfullscreenchanged • onSourceDownloadComplete • onSourceDownloadProgressChanged• Eventos para controle via Javascript
prf . D an ie l O liv eir a 113
Configuração
• Acessando informações do navegador
prf . D an ie l O liv eir a 114
Alerts, Confirms e Prompt
• Alert • Prompt • Confirm prf. D an ie l O liv eir a 115 HtmlPage.Window.Alert("Opa!");string resposta = HtmlPage.Window.Prompt("Informe alguma coisa");
Html Navigate
• Navigate prf . D an ie l O liv eir a 116 HtmlPage.Window.Navigate( newUri("http://www.silverlight.net", UriKind.Absolute),"NavWindow",
Silverlight Control
• Server control prf . D an ie l O liv eir a 117MediaPlayer Control
• Controle para exibição de multimídia nas páginas web
prf . D an ie l O liv eir a 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 . D an ie l O liv eir a 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 . D an ie l O liv eir a 120
Trabalhando com os dados
• Obtendo um XML no servidor prf . D an ie l O liv eir a 121 WebClientclient = newWebClient();client.DownloadStringCompleted += new
DownloadStringCompletedEventHandler(client_DownloadStringCompleted);
UrixmlUri = 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 . D an ie l O liv eir a 122Trabalhando com dados
• Binding
• É possível através do XAML indicar a vinculação entre um
elemento de tela e um dado
prf . D an ie l O liv eir a 123
Trabalhando com dados
• Binding
• Gerando binding dinamicamente: one-time / one-way
prf . D an ie l O liv eir a 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;
Trabalhando com dados
• ItemsControl prf . D an ie l O liv eir a 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);
Trabalhando com dados
• ItemTemplate prf . D an ie l O liv eir a 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 . D an ie l O liv eir a 127<Grid x:Name="LayoutRoot" Background="White"> <StackPanel>
<Slider x:Name="Slider1" Minimum="0" Maximum="100" />
<TextBlock Text="{Binding ElementName=Slider1, Path=Value}" /> </StackPanel>
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
ie l O liv eir a 128
Gerenciando Atualizações
• INotifyPropertyChanged
• Esta interface possibilita o broadcast de eventos de alteração
quando um propriedade de um objeto é alterada
prf . D an ie l O liv eir a 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. prf. D
an ie l O liv eir a 130
Gerenciando Atualizações
• OneWay bindings prf . D an ie l O liv eir a 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 . D an ie l O liv eir a 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 . D an ie l O liv eir a 133
Gerenciando Atualizações
• Tratando exceções prf . D an ie l O liv eir a 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>
<TextBlockText="Destination Name"/>
<TextBlockGrid.Column="1"Text="Population" />
<TextBlockText="{BindingName, Mode=OneWay}" Grid.Row="1" /> <TextBoxText="{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 . D an ie l O liv eir a 135
Usando o Isolated Storage
• Gerenciando o tamanho do repositório
prf . D an ie l O liv eir a 136
Usando o Isolated Storage
• Criando um novo arquivo
prf . D an ie l O liv eir a 137
Usando o Isolated Storage
• Exemplo prf . D an ie l O liv eir a 138void 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 . D an ie l O liv eir a 139
MANAGED CODE X JAVASCRIPT
Interação entre o código gerenciando e não gerenciado
prf . D an ie l O liv eir a 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 . D an ie l O liv eir a 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 . D an ie l O liv eir a 142
Eventos
• O próximo passo é definir uma classe derivada de EventArgs
prf . D an ie l O liv eir a 143
Eventos
• Criando o Handler para a execução do evento
prf . D an ie l O liv eir a 144
Eventos
• ScriptableTypeAttribute
• Atributo para expor classes (tipos) para os scripts das páginas
hospedeiras dos controles Silverlight
prf . D an ie l O liv eir a 145
Eventos
• Registrando o controle para acesso via script
prf . D an ie l O liv eir a 146 public MainPage() { InitializeComponent();
HtmlPage.RegisterScriptableObject("Page", this); }
Eventos
• Script na página prf . D an ie l O liv eir a 147<param name="onload" value="onSilverlightLoad" /> <scripttype="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);
}
Eventos
• Disparando o evento prf . D an ie l O liv eir a 148void 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 . D an ie l O liv eir a 149
<scripttype="text/javascript" language="javascript"> functiononSilverlightLoad(sender, args) {
var plugin = sender.getHost();
varmanagedButton = plugin.content.findName("ManagedButton"); managedButton.addEventListener("MouseMove", managedButtonHover);
}
varmouseX, mouseY;
functionmanagedButtonHover(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; }
Eventos
• Capturando eventos do javascript no code behind
prf . D an ie l O liv eir a 150 public MainPage() { InitializeComponent();
HtmlElement btn = HtmlPage.Document.GetElementById("btnClickHTML");
if (btn != null)
btn.AttachEvent("onclick", HtmlButton_Click); }
voidHtmlButton_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 . D an ie l O liv eir a 151
Navegação
• Pode-se ter uma aplicação como template para navegação,
através de um projeto específico
prf . D an ie l O liv eir a 152
Navegação
• A exibição d janelas popup em silverlight é realizada atraveés
da criação de Child Windows
prf . D an ie l O liv eir a 153
Navegação
• No controle deve-se instanciar a janela child exibi-lá
prf . D an ie l O liv eir a 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 . D an ie l O liv eir a 155
private voidbtnLogin_Click(object sender, RoutedEventArgs e) {
Views.Login _login = newExemploNavegacao.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 . D an ie l O liv eir a 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 . D an ie l O liv eir a 157
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 . D an ie l O liv eir a 158
Navegação
• Navigation Frame prf . D an ie l O liv eir a 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 . D an ie l O liv eir a 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 . D an ie l O liv eir a 161