desenvolvimento web - danielbarbosa77.files.wordpress.com · dados dinâmico trazido asp e asp.net...

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

Apresentação

• Daniel Oliveira

• E-mail: [email protected]

• Blog: http://danielbarbosa77.wordpress.com/

prf

. Dan

iel O

livei

ra

2

mailto:[email protected]

http://danielbarbosa77.wordpress.com/

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


prf

. Dan

iel O

livei

ra

13


prf

. Dan

iel O

livei

ra

14


prf

. Dan

iel O

livei

ra

15

Vantagens Resource Design

Visual Layers

Storyboard Design

Interaction

Timeline

Storyboards


• 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


• Silverlight Foundation

prf

. Dan

iel O

livei

ra

17


• 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


• Core Presentation Components

prf

. Dan

iel O

livei

ra

19

Components

Input

UI Rendering

Media

Controls

Layout

Data Binding

DRM

XAML


prf

. Dan

iel O

livei

ra

20

Data Base Class

Library

Windows

Communication

Foundation

Common

Language

Runtime

Windows

Presentation

Foundation

Dynamic

Language

Runtime


• Recursos de desenvolvimento

prf

. Dan

iel O

livei

ra

21

Isolated Storage

Asynchronous Programming

File Management

HTML Interaction

Serialization

Packaging


• XMAL

• Extensible Application Markup Language (XAML) é uma linguagem declarativa.

• XAML é case-sensitive

prf

. Dan

iel O

livei

ra

22


• XAML Namescopes

• Armazena a correlação entre os objetos do XAML e suas instâncias equivalentes.

prf

. Dan

iel O

livei

ra

23


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


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


prf

. Dan

iel O

livei

ra

121


• 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


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


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


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


• 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


• 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


• 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


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


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


• 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


• 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


• Gerenciando o tamanho do repositório

prf

. Dan

iel O

livei

ra

135


• Criando um novo arquivo

prf

. Dan

iel O

livei

ra

136


• 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 = "[email protected]"; _login.Show(); }

Navegação

• Através da propriedade DialogResult, controla-se o cancelamento ou não da ação

prf

. Dan

iel O

livei

ra

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 = "[email protected]"; _login.Closed += new EventHandler(_login_Closed); _login.Show(); } void _login_Closed(object sender, EventArgs e) { HtmlPage.Window.Alert(((Views.Login)sender).DialogResult.ToString()); }

Navegação

• Silverlight Navigation Application

prf

. Dan

iel O

livei

ra

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

desenvolvimento web - danielbarbosa77.files.wordpress.com · dados dinâmico trazido asp e asp.net...

Documents