Desenvolvimento Web. Desenvolvimento de aplicações Ricas para Internet em SilverLight

(1)

Desenvolvimento

Web

Desenvolvimento de aplicações Ricas para Internet em SilverLight

(2)

Apresentação

• Daniel Oliveira • E-mail: daniel@danielboliveira.com • Blog: http://danielbarbosa77.wordpress.com/ p rf . D an iel Ol iv ei ra 2

(3)

Introdução

• Aplicações Ricas para Intenet (RIA)

• Aplicações Web que têm os recursos e funcionalidades de aplicações desktop tradicionais

p rf . D an iel Ol iv ei ra 3 Initial Load Asynchronous Calls

(4)

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 p rf . D an iel Ol iv ei ra 4

(5)

Introdução

• Principais vantagens do Silverlight

• Managed Code

• Separação das camadas Desenvolvimento de Aplicações

• Microsoft UI Automation (UIA) Technology • . NET p rf . D an iel Ol iv ei ra 5

(6)

Introdução

• Navegadores • Internet Explorer 6+ • Firefox 1.5+ • Safari 2.0+

• Sistemas Operacionais

• OS X Tiger, Leopard

• Windows Vista, XP, Server 2003, 2000

p rf . D an iel Ol iv ei ra 6

(7)

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 iel Ol iv ei ra 7

(8)

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 p rf . D an iel Ol iv ei ra 8

(9)

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)

(10)

Introdução

• Ferramentas de desenvolvimento

• Microsoft Visual Studio 2008

• Microsoft Expression Encoder

• Microsoft Expression Blend

(11)

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.

(12)

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

(13)

Aplicação Silverlight

(14)

Aplicação Silverlight

(15)

Aplicação Silverlight

Vantagens

 Resource Design  Visual Layers  Storyboard Design Interaction Timeline Storyboards

(16)

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.

(17)

Aplicação Silverlight

• Silverlight Foundation p rf . D an iel Ol iv ei ra 17

(18)

Aplicação Silverlight

• Silverlight Platform p rf . D an iel Ol iv ei 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

(19)

Aplicação Silverlight

• Core Presentation Components

p rf . D an iel Ol iv ei ra 19 Components Input UI Rendering Media Controls Layout Data Binding DRM XAML

(20)

Aplicação Silverlight

Data Base Class Library Windows Communication Foundation Common Language Runtime Windows Presentation Foundation Dynamic Language Runtime

(21)

Aplicação Silverlight

• Recursos de desenvolvimento p rf . D an iel Ol iv ei ra 21

Isolated Storage

Asynchronous Programming

File Management

HTML Interaction

Serialization

Packaging

(22)

Aplicação Silverlight

• XMAL

• Extensible Application Markup Language (XAML) é uma

linguagem declarativa. • XAML é case-sensitive p rf . D an iel Ol iv ei ra 22

(23)

Aplicação Silverlight

• XAML Namescopes

• Armazena a correlação entre os objetos do XAML e suas instâncias equivalentes. p rf . D an iel Ol iv ei ra 23

(24)

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

p rf . D an iel Ol iv ei ra 24 Background Property

(of type Brush)

ColorName Property

(of type String)

Binding Target Binding Source

Button Object MyData Object

(25)

Exercício

Criando uma aplicação em Silverlight

(26)

XAML

(27)

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. D an iel Ol iv ei ra 27 Blend V is u al Stu d io

(28)

XAML

• Exemplo p rf . D an iel Ol iv ei ra 28

(29)

XAML

• Exemplo p rf . D an iel Ol iv ei 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/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

<Grid Background="OldLace" x:Name="LayoutRoot"> Abertura para o elemento de layout de grid

</Grid> Fechamento do elemento de layout de grid

(30)

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

(31)

XAML

• Object / Content Element Syntax

(32)

XAML

• Attribute Element Syntax

(33)

XAML

• Configurando propriedades usando coleções implícitas

(34)

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:

p rf . D an iel Ol iv ei ra 34 Indicando o tipo de Brush

(35)

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. p rf . D an iel Ol iv ei ra 35

(36)

XAML Hierarchy

(37)

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 p rf . D an iel Ol iv ei ra 37

(38)

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

(39)

Eventos

(40)

ARQUITETURA

(41)

Arquitetura

(42)

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 p rf . D an iel Ol iv ei ra 42

(43)

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)

(44)

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 p rf . D an iel Ol iv ei ra 44

(45)

Arquitetura

• Input

• Mouse

• Teclado • Arquivos

• Ink (possibilita o reconhecimento de texto)

(46)

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 p rf . D an iel Ol iv ei ra 46

(47)

CONSTRUINDO UI

(48)

Silverlight Layout System

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

(49)

Page Layout Classes

p rf . D an iel Ol iv ei 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

(50)

Silverlight Object Tree

p rf . D an iel Ol iv ei ra 50 <html> <head><title>Silverlight</title></head> <body> <div id=“pluginHost”> </div> </body> </html> v XAML

HTML/ASP.NET

(51)

Content Control

• Contém um único objeto

• Tem a propriedade Content

Common content controls: • Button

• CheckBox • RadioButton • TextBlock • TextBox

This is text content of a Button

(52)

Header Content Control

• Content Control Especializado

• Além da propriedade Content tem a propriedade Header

Headered content controls: • Expander

• DataGrid •TabControl

(53)

Items Control

• Contém múltiplos objetos

• Tem uma propriedade items

• ItemsSource p rf . D an iel Ol iv ei ra 53 Items Controls comuns: • TabControl • ListBox • temsControl ItemsSource Items – Podem ser de diferentes tipos Data

(54)

Gerenciando coleções de Itens

p rf . D an iel Ol iv ei 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);

(55)

Silverlight Project Templates

(56)

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 p

rf . D an iel Ol iv ei ra 56

(57)

Silverlight Project Templates

(58)

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.

(59)

Text Input

• Password p rf . D an iel Ol iv ei ra 59

(60)

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 p rf . D an iel Ol iv ei ra 60

(61)

Datagrid

• Datagrid disponibiliza três tipos de colunas: textbox, checkbox

e template

• Utiliza-se a propriedade Binding para vincular os dados

(62)

Datagrid

• DataGridCheckBoxColumn p rf . D an iel Ol iv ei ra 62

(63)

Datagrid

• DataGridTemplateColumn • CellTemplate p rf . D an iel Ol iv ei ra 63

(64)

ListBox, ComboBox, e

TabControl

• ListBox p rf . D an iel Ol iv ei ra 64

(65)

ListBox, ComboBox, e

TabControl

• ComboBox p rf . D an iel Ol iv ei ra 65

(66)

ListBox, ComboBox, e

TabControl

• TabControl p rf . D an iel Ol iv ei ra 66

(67)

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 p rf . D an iel Ol iv ei ra 67

(68)

HyperlinkButton

• Prover recurso de navegação ao se clicar em um botão

(69)

ToggleButton

• Combinação de recursos do Button e Checkbox

(70)

Calendar e DatePicker

(71)

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. p rf . D an iel Ol iv ei ra 71

(72)

Silverlight Text

• A forma mais básica para se exibir textos no Silverlight é o

textblock p rf . D an iel Ol iv ei ra 72

(73)

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

(74)

Silverlight Text

• TextWrapping p rf . D an iel Ol iv ei ra 74

(75)

Silverlight Text

• Formatação em linha (Inline Text Formatting)

(76)

Silverlight Text

• LineBreak p rf . D an iel Ol iv ei ra 76

(77)

Silverlight Text

• RenderTransform p rf . D an iel Ol iv ei ra 77

(78)

Silverlight Text

• RenderTransform p rf . D an iel Ol iv ei ra 78

(79)

Silverlight Text

• Transform Groups p rf . D an iel Ol iv ei ra 79

(80)

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 p rf . D an iel Ol iv ei ra 80

(81)

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

(82)

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. p rf . D an iel Ol iv ei ra 82

(83)

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) p rf . D an iel Ol iv ei ra 83

(84)

Canvas

(85)

StackPanel

• Fixa verticalmente ou horizontalmente o objetos

• Propriedades: Orientation, Width e Height

(86)

Grid

• Elemento de layout mais versátil

• Pode-se posicionar objetos em linhas e colunas

(87)

Grid

• ColumnSpan e RowSpan p rf . D an iel Ol iv ei ra 87

<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>

(88)

Grid

(89)

Grid

• É possível informar propriedades individuais de cada coluna

p rf . D an iel Ol iv ei 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>

(90)

Plug-in

<

asp

:

Silverlight

ID="Xaml1"

runat="server"

Source="~/ClientBin/MySample.xap"

MinimumVersion=”2.0.31005.0”

(91)

Plug-in

p rf . D an iel Ol iv ei 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"/>

<img src="http://go.microsoft.com/fwlink/?LinkId=108181"

alt="Get Microsoft Silverlight" style="border-style: none"/> </a>

(92)

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. p rf . D an iel Ol iv ei ra 92

(93)

CUSTOMIZANDO A APARÊNCIA

(94)

Resources

• Definem uma forma simples de reuso de objetos e valores

• Por exemplo: brushes, styles, e control templates

(95)

VisualState

• 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.

(96)

Definindo recursos

p rf . D an iel Ol iv ei ra 96 Pode-se definir recursos de várias maneiras:

• Application scope (App.xaml) • Page scope

• Element-level scope

XAML

<UserControl.Resources>

(97)

Referenciando recursos

p rf . D an iel Ol iv ei ra 97 Como referenciar um recurso estático:

PropertyName="{StaticResource ResourceKey}"

<Button Background="{StaticResource blueBrush}" Foreground="{StaticResource whiteBrush}"> Text

(98)

Estilos e templates

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

(99)

Aplicando estilos a um controle

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>

(100)

Automação de UI

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”

(101)

Elementos de texto

TextBlock principal objeto para exibição de

textos em aplictivos Silverlight

XAML

(102)

Formatando textos

p rf . D an iel Ol iv ei ra 102 A formatação de texto é realizada com as seguintes

propriedades: Foreground, TextWrapping, e TextDecorations

(103)

SERVICES

Serviços providos pelo Silverlight

(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)

(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 p rf . D an iel Ol iv ei ra 105

(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. D

an iel Ol iv ei ra 106

(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

(108)

APLICAÇÃO

Recursos para desenvolvimento de aplicações

(109)

Configuração

• HTML tag p rf . D an iel Ol iv ei ra 109 <div id="silverlightControlHost">

<objectdata="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>

(110)

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

(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.

(112)

Configuração

• Eventos • onError • onResize • onLoad • Onfullscreenchanged • onSourceDownloadComplete • onSourceDownloadProgressChanged

• Eventos para controle via Javascript

(113)

Configuração

• Acessando informações do navegador

(114)

Alerts, Confirms e Prompt

• Alert • Prompt • Confirm prf . D an iel Ol iv ei ra 114

HtmlPage.Window.Alert("Opa!");

string resposta = HtmlPage.Window.Prompt("Informe alguma coisa");

(115)

Html Navigate

• Navigate p rf . D an iel Ol iv ei ra 115

HtmlPage.Window.Navigate( newUri("http://www.silverlight.net", UriKind.Absolute),

"NavWindow",

(116)

Silverlight Control

• Server control p rf . D an iel Ol iv ei ra 116

(117)

MediaPlayer Control

• Controle para exibição de multimídia nas páginas web

(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

(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

(120)

Trabalhando com os dados

• Obtendo um XML no servidor p rf . D an iel Ol iv ei ra 120

WebClient client = newWebClient();

client.DownloadStringCompleted += new

DownloadStringCompletedEventHandler(client_DownloadStringCompleted);

Uri xmlUri = newUri("dados.xml", UriKind.Relative); client.DownloadStringAsync(xmlUri);

void client_DownloadStringCompleted(object sender, DownloadStringCompletedEventArgs e) { if (e.Error == null) { txtXML.Text = e.Result; } }

(121)

Trabalhando com dados

(122)

Trabalhando com dados

• Binding

• É possível através do XAML indicar a vinculação entre um elemento de tela e um dado

(123)

Trabalhando com dados

• Binding

• Gerando binding dinamicamente: one-time / one-way

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;

(124)

Trabalhando com dados

• ItemsControl p rf . D an iel Ol iv ei 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);

(125)

Trabalhando com dados

• ItemTemplate p rf . D an iel Ol iv ei ra 125 <Grid x:Name="LayoutRoot" Background="White">

<ItemsControl.ItemTemplate> <DataTemplate>

</StackPanel> </DataTemplate> </ItemsControl.ItemTemplate> </ItemsControl> </StackPanel> </Grid>

(126)

Trabalhando com dados

• Element-to-Element Binding p rf . D an iel Ol iv ei ra 126 <Grid x:Name="LayoutRoot" Background="White">

</StackPanel> </Grid>

(127)

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. D

an iel Ol iv ei ra 127

(128)

Gerenciando Atualizações

• INotifyPropertyChanged

• Esta interface possibilita o broadcast de eventos de alteração quando um propriedade de um objeto é alterada

(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 iel Ol iv ei ra 129

(130)

Gerenciando Atualizações

• OneWay bindings p rf . D an iel Ol iv ei ra 130 <Grid x:Name="LayoutRoot" Background="White">

<TextBlock>Start Timer</TextBlock> </Button>

<TextBlock>Elapsed Island Time:</TextBlock>

</StackPanel> </StackPanel> </Grid>

(131)

Gerenciando Atualizações

• TwoWay Binding p rf . D an iel Ol iv ei ra 131 <Grid x:Name="LayoutRoot" Background="White">

<TextBlock>Start Timer</TextBlock> </Button>

<TextBlock>Elapsed Island Time:</TextBlock>

</StackPanel>

<TextBlock>Timer Name:</TextBlock>

</StackPanel> </StackPanel> </Grid>

(132)

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.

(133)

Gerenciando Atualizações

• Tratando exceções p rf . D an iel Ol iv ei 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>

<TextBox Text="{Binding Population, Mode=TwoWay,

ValidatesOnExceptions=true, NotifyOnValidationError=true}"

VerticalAlignment="Top" Grid.Column="1" Grid.Row="1" Width="200" />

(134)

Usando o Isolated Storage

• A classe IsolatedStorageFile provê um conjunto de métodos

estáticos para auxiliar o uso desse recurso.

(135)

Usando o Isolated Storage

• Gerenciando o tamanho do repositório

(136)

Usando o Isolated Storage

• Criando um novo arquivo

(137)

Usando o Isolated Storage

• Exemplo p rf . D an iel Ol iv ei ra 137 void MainPage_Loaded(object sender, RoutedEventArgs e)

{

_store = IsolatedStorageFile.GetUserStoreForApplication(); CheckAvailableSpace();

CreateFile();

ReadDestinations();

LayoutRoot.DataContext = _destinations; }

(138)

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.

(139)

MANAGED CODE X JAVASCRIPT

Interação entre o código gerenciando e não gerenciado

(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. p rf . D an iel Ol iv ei ra 140

(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

(142)

Eventos

• O próximo passo é definir uma classe derivada de EventArgs

(143)

Eventos

• Criando o Handler para a execução do evento

(144)

Eventos

• ScriptableTypeAttribute

• Atributo para expor classes (tipos) para os scripts das páginas

hospedeiras dos controles Silverlight

(145)

Eventos

• Registrando o controle para acesso via script

p rf . D an iel Ol iv ei ra 145 public MainPage() { InitializeComponent();

HtmlPage.RegisterScriptableObject("Page", this); }

(146)

Eventos

• Script na página p rf . D an iel Ol iv ei ra 146 <param name="onload" value="onSilverlightLoad" />

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);

}

(147)

Eventos

• Disparando o evento p rf . D an iel Ol iv ei ra 147

void btnLogin_Click(object sender, RoutedEventArgs e) {

User user = new User(); user.Name = "Daniel"; user.Password = "123"; OnUserSelected(user); }

(148)

Eventos

• Via javascript é possível interagir diretamente com objetos

gerenciados p rf . D an iel Ol iv ei ra 148

<scripttype="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; }

(149)

Eventos

• Capturando eventos do javascript no code behind

p rf . D an iel Ol iv ei 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!"); }

(150)

Navegação

• Em um mesmo arquivo XAP podemos ter vários controles

Silverlight • Páginas • Child Windows p rf . D an iel Ol iv ei ra 150

(151)

Navegação

• Pode-se ter uma aplicação como template para navegação,

através de um projeto específico

(152)

Navegação

• A exibição d janelas popup em silverlight é realizada atraveés

da criação de Child Windows

(153)

Navegação

• No controle deve-se instanciar a janela child exibi-lá

p rf . D an iel Ol iv ei ra 153 private void btnLogin_Click(object sender, RoutedEventArgs e)

{

Views.Login _login = new ExemploNavegacao.Views.Login(); _login.Show();

(154)

Navegação

• Sendo classes os controles de janelas filhas pode-se utilizar

atributos para passar informações

private void btnLogin_Click(object sender, RoutedEventArgs e) {

Views.Login _login = new ExemploNavegacao.Views.Login(); _login.LoginUsuario = "algumacoisa@qualquercoisa.com"; _login.Show();

(155)

Navegação

• Através da propriedade DialogResult, controla-se o

cancelamento ou não da ação

private void OKButton_Click(object sender, RoutedEventArgs e) {

this.DialogResult = true; }

private void CancelButton_Click(object sender, RoutedEventArgs e) {

this.DialogResult = false; }

(156)

Navegação

• A chamada do método Show() é assíncrona

p rf . D an iel Ol iv ei 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()); }

(157)

Navegação

• Silverlight Navigation Application

(158)

Navegação

• Navigation Frame p rf . D an iel Ol iv ei 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 asButton;

String goToPage = navigationButton.Tag.ToString();

this.Frame.Navigate(new Uri(goToPage, UriKind.Relative)); }

(159)

Navegação

• Tratamento global de erros (app.xaml)

p rf . D an iel Ol iv ei 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();

} }