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: daniel@danielboliveira.com

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

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

Introdução

• Principais vantagens do Silverlight

• Managed Code

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

• Microsoft UI Automation (UIA) Technology

• . NET

Introdução

• Navegadores

• Internet Explorer 6+

• Firefox 1.5+

• Safari 2.0+

• Sistemas Operacionais

• OS X Tiger, Leopard

• Windows Vista, XP, Server 2003, 2000

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

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

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)

Introdução

• Ferramentas de desenvolvimento

• Microsoft Visual Studio 2008

• Microsoft Expression Encoder

• Microsoft Expression Blend

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.

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

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.

• Silverlight Foundation

• Silverlight Platform

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

Components

UI Rendering

Controls

Layout

Data Binding

Data Base Class

Library

Windows

Communication

Foundation

Common

Language

Runtime

Windows

Presentation

Foundation

Dynamic

Language

Runtime

• Recursos de desenvolvimento

Isolated Storage

Asynchronous Programming

File Management

HTML Interaction

Serialization

Packaging

• XMAL

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

• XAML é case-sensitive

• XAML Namescopes

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

• TypeConverters

• Por padrão o Silverlight realiza conversão entre tipos de dados

• Caso não seja possível ocorre um erro

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

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

al Stud

• Exemplo

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

• 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

• Object / Content Element Syntax

• Attribute Element Syntax

• Configurando propriedades usando coleções implícitas

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

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.

XAML Hierarchy

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

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

Eventos

ARQUITETURA

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

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)

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

Arquitetura

• Input

• Mouse

• Teclado

• Arquivos

• Ink (possibilita o reconhecimento de texto)

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

CONSTRUINDO UI

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 G’day Mate!

Page Layout Classes

• 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

<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

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

Headered content controls:

• Expander

• DataGrid

•TabControl

Items Control

• Contém múltiplos objetos

• Tem uma propriedade items

• ItemsSource

Items Controls comuns:

• TabControl

• ListBox

• temsControl

ItemsSource

Items – Podem

ser de diferentes

Gerenciando coleções de Itens

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

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

Silverlight Project Templates

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.

Text Input

• Password

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

Datagrid

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

• Utiliza-se a propriedade Binding para vincular os dados

Datagrid

• DataGridCheckBoxColumn

Datagrid

• DataGridTemplateColumn

• CellTemplate

ListBox, ComboBox, e TabControl • ListBox

ListBox, ComboBox, e TabControl • ComboBox

ListBox, ComboBox, e TabControl • TabControl

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

HyperlinkButton

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

ToggleButton

• Combinação de recursos do Button e Checkbox

Calendar e DatePicker

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.

Silverlight Text

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

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

Silverlight Text

• TextWrapping

Silverlight Text

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

Silverlight Text

• LineBreak

Silverlight Text

• RenderTransform

Silverlight Text

• RenderTransform

Silverlight Text

• Transform Groups

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

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

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.

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)

Canvas

StackPanel

• Fixa verticalmente ou horizontalmente o objetos

• Propriedades: Orientation, Width e Height

• Elemento de layout mais versátil

• Pode-se posicionar objetos em linhas e colunas

• ColumnSpan e RowSpan

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

• É possível informar propriedades individuais de cada coluna

Plug-in

<asp:Silverlight ID="Xaml1" runat="server" Source="~/ClientBin/MySample.xap" MinimumVersion=”2.0.31005.0” Width="100%" Height="100%" />

Plug-in

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.

CUSTOMIZANDO A APARÊNCIA

Resources

• Definem uma forma simples de reuso de objetos e valores

• Por exemplo: brushes, styles, e control templates

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.

VisualTransition

Definindo recursos

Pode-se definir recursos de várias maneiras:

• Application scope (App.xaml)

• Page scope

• Element-level scope

<UserControl.Resources>

</UserControl.Resources >

Referenciando recursos

Como referenciar um recurso estático:

PropertyName="{StaticResource ResourceKey}"

<Button Background="{StaticResource blueBrush}"

Foreground="{StaticResource whiteBrush}">

</Button>

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

•Promover a aparência consistente de controles

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>

</Style>

</UserControl.Resources>

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”

AutomationProperties.Name=“First Name“ />

Elementos de texto

TextBlock principal objeto para exibição de

textos em aplictivos Silverlight

Renderizado

Formatando textos

A formatação de texto é realizada com as seguintes

propriedades: Foreground, TextWrapping, e

TextDecorations

SERVICES

Serviços providos pelo Silverlight

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)

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

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”

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

APLICAÇÃO

Recursos para desenvolvimento de aplicações

Configuração

• HTML tag

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

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.

Configuração

• Eventos

• onError

• onResize

• onLoad

• Onfullscreenchanged

• onSourceDownloadComplete

• onSourceDownloadProgressChanged

• Eventos para controle via Javascript

Configuração

• Acessando informações do navegador

Alerts, Confirms e Prompt

• Alert

• Prompt

• Confirm

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

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

bool resposta = HtmlPage.Window.Confirm("Confirma alguma coisa");

Html Navigate

• Navigate

HtmlPage.Window.Navigate( new Uri("http://www.silverlight.net", UriKind.Absolute), "NavWindow", "toolbars=no,address=no,width=800,height=600");

Silverlight Control

• Server control

MediaPlayer Control

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

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

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

Trabalhando com os dados

• Obtendo um XML no servidor

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

• Binding

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

• 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; txtNome.SetBinding(TextBlock.TextProperty, nomeBinding);

• ItemsControl

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

• Element-to-Element Binding

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

• INotifyPropertyChanged

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

• 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

l Oliv

• OneWay bindings

<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

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

• Tratando exceções

Usando o Isolated Storage

• A classe IsolatedStorageFile provê um conjunto de métodos estáticos para auxiliar o uso desse recurso.

• Gerenciando o tamanho do repositório

• Criando um novo arquivo

• Exemplo

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.

MANAGED CODE X JAVASCRIPT

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

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.

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

Eventos

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

Eventos

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

Eventos

• ScriptableTypeAttribute

• Atributo para expor classes (tipos) para os scripts das páginas hospedeiras dos controles Silverlight

Eventos

• Registrando o controle para acesso via script

public MainPage() { InitializeComponent(); HtmlPage.RegisterScriptableObject("Page", this); }

Eventos

• Script na página

Eventos

• Disparando o evento

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

Eventos

• Capturando eventos do javascript no code behind

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

Navegação

• Pode-se ter uma aplicação como template para navegação, através de um projeto específico

Navegação

• A exibição d janelas popup em silverlight é realizada atraveés da criação de Child Windows

Navegação

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

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

private void btnLogin_Click(object sender, RoutedEventArgs e) { Views.Login _login = new ExemploNavegacao.Views.Login(); _login.LoginUsuario = "algumacoisa@qualquercoisa.com"; _login.Show(); }

Navegação

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

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

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

Navegação

• Navigation Frame

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

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

silverlight 4 e expression blend 4

desenvolvimento ria com silverlight 4

code camp 2009 multimedia y silverlight

treinamento ajax modulo javascript

ajax em java

introdução a ajax

silverlight desde o file - new project

community webcast: portal silverlight brasil - criando...

novidades sobre o silverlight 4

get to know silverlight

introdução ao ajax - ifrn

ajax (asyncronous javascript and xml possibilitando...

silverlight pack

silverlight in wcf ria services

como configurar plugin silverlight

aplicacoes web com ajax

adotando silverlight 2.0 - v1 - exercicios

desenvolvendo em camadas com silverlight

fundamentos do ajax o que é ajax? · • ajax é o...

palestra de silverlight no devbrasil summit 11