Silverlight no MIC Summer 2011

Silverlight

Meus contatos• Email: felipe.pimentel@linnsolutions.com• Msn: felipejfp@hotmail.com• Twitter: http://twitter.com/FelipePimentell• Blog: http://felipepimentel.net

Material de estudo

Material de estudo• http://channel9.msdn.com/shows/SilverlightTV/• http://www.silverlight.net/• http://www.microsoft.com/brasil/windows/silverlight/de

fault.mspx

Introdução Silverlight

O que é?

• Microsoft Silverlight is a free, cross-browser, cross-platform plug-in that enables rich internet applications and rich media

experiences on the Web and Desktop.

O que é RIA?• São aplicações web que tem a maioria

das características de uma aplicação desktop, mas que é entregue via browser, plug-in

MICROSOFT INTERNAL CONFIDENTIAL INFORMATION

De um modo mais técnico…

• Rich Internet Applications (RIA)- Vector graphics and animation- Client side storage- Video and audio playback

O que faz?

• Silverlight enables the rapid delivery of a new class of high-quality, safer and more scalable experiences, developed and

designed using familiar tools.

DesignDevelo

p

Consistent Tools & Application Model

Deploy

Browser

ClientUser Experience Continuum

Microsoft .NET Application PlatformDeliver applications across the UX Continuum

Timeline do SilverlightEm números no Brasil• Lançamento do Silverlight em Set

2007• Silverlight 2 - Out 2008 • Silverlight 3 - Jul 2009• Silverlight 4 - Mar 2010• Em 3 anos!• 54,30% da internet no BRA possui dispositivos com o Silverlight 4 instalado!• 11,39% ainda no Silverlight 3• 56,31% no Flash 10.1

fonte: www.riastats.com, 14.09.2010

O que preciso ter para começar a desenvolver com Silverlight 4?

• Visual Studio 2010 • ou Visual Web Developer Express 2010• Silverlight 4 Tools for Visual Studio

2010• Expression Blend 4• Silverlight 4 toolkit

Todos estes passos estão em http://www.silverlight.net/getstarted

SilverlightDesenvolvimento e colaboração

Fonte: Rogério Cordeiro e Fernando Figuera

SilverlightDesenvolvimento e colaboração

Fonte: Rogério Cordeiro e Fernando Figuera

SilverlightDesenvolvimento e colaboração

Fonte: Rogério Cordeiro e Fernando Figuera

SilverlightDesenvolvimento e colaboração

SilverlightDesenvolvimento e colaboração

Fonte: Rogério Cordeiro e Fernando Figuera

SilverlightDesenvolvimento e colaboração

Fonte: Rogério Cordeiro e Fernando Figuera

SilverlightDesenvolvimento e colaboração

designers design developers add business logic

Fonte: Rogério Cordeiro e Fernando Figuera

SilverlightDesenvolvimento e colaboração

designers design developers add business logic

Fonte: Rogério Cordeiro e Fernando Figuera

A próxima grande onda7

Silverlight nativo no Windows Phone 7

Criação rápida de aplicações visuais fantásticas

Metro-themed UI controlsHTML/JavaScript500.000 developers Windows e

WebDesenvolvimento para o

MarketPlacePlataforma Consistente

Windows Phone

Hardware

Elementos de

Hardware

Foco na Qualidade

Criando nosso primeiro projeto Silverlight

Olá Mundo, Apenas!

Templates

Configurações do Projeto

Estrutura inicial

Abrindo o projeto no Blend

• Conhecendo o Blend• Templates• StoryBoard

XAML

XAML (Extensive Application Markup Language)

• Linguagem de marcação para criação de interfaces introduzidas com o Windows Vista

MICROSOFT INTERNAL CONFIDENTIAL INFORMATION

XAML

• Similar to HTML in concept• Language independent• Strong support for data binding• Designer tool friendly

<Canvas Width="300" Height="300" xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> <Ellipse Canvas.Left="20" Canvas.Top="20" Height="200" Width="200" Stroke="Black" StrokeThickness="10" Fill="Yellow" /> <Ellipse Canvas.Left="80" Canvas.Top="80" Height="35" Width="25" Stroke="Black" Fill="Black" /> <Ellipse Canvas.Left="140" Canvas.Top="80" Height="35" Width="25" Stroke="Black" Fill="Black" /> <Path Data="M 70, 150 A 60, 60 0 0 0 170, 150" Stroke="Black" StrokeThickness="15" StrokeStartLineCap="Round" StrokeEndLineCap="Round" /></Canvas>

Code Behind

C# vs XAML• C# •Mais extenso•Mais complexo de ser entendido• Necessita de um desenvolvedor• Ambos• Precisam ser compilados• Case sensitive

Criando elementos no XAML

MICROSOFT INTERNAL CONFIDENTIAL INFORMATION

Naming XAML Elements

• Uses the x:Name (or Name) syntax• Helps to access elements from code• Generates code in InitializeComponent()

method

<Rectangle Canvas.Left="50" Canvas.Top="50" Fill="Yellow" Width="300" Height="200" Stroke="Black" StrokeThickness="10" x:Name="YellowRect" />

Mão na massa• Conhecendo os controles na prática• Composição no XAML• Exemplo: Vídeo dentro de CheckBox

• Integração com VS2010

WCF RIA SERVICE

WCF RIA Services

Simplify n-tier data-driven application developmentThey address the complexity of building n-tier applications with the following components:Framework components • That support patterns

for writing application logic and validation that can be easily used on the presentation tier.

• Client Side LINQ support

Tools• That add to existing

Visual Studio capabilities by linking the client and mid-tier projects in a single solution and by enabling smart code generation in client projects.

Services• That support

commonly used capabilities such as authentication and user settings management

WCF RIA Services Application

Silverlight Application

ASP.NET Application

DataAccess Layer• Entity

Framework• Linq2Sql• ADO.NET• POCO

Database

DomainService• Get…• Insert…• Update…• Delete…

Auto GeneratedProxies Classes• DomainConte

xt• Model Classes

Partial Classes & Methods

LINQ Support

Views• User Controls

Metadata• Attributes

Shared Code• Validators

Shared Code• Validators

ViewModel• State• Operations

De um modo mais macro...

Criando um projeto com WCF RIA Service

Criação de um domínio do Serviço

DomainService• Ele nada mais é do que um serviço WCF encapsulado,

eliminando o contrato (que era exposto no WCF por meio de uma interface, e agora é gerado pelo DomainService, ficando invisível para o desenvolvedor)

• Gera métodos CRUD básicos a partir das entidades, mas permite a customização completa destes métodos

• Traz todo o poder do WCF, mas elimina as dificuldades• Elimina também a necessidade de criar um Service

Host, pois já faz isso por default• A transmissão de mensagens do cliente para o

servidor é feita por Binary Encoding, o que aumenta a segurança e melhora a performance

CRUD no Domain Service

XXX.Medata.cs

XXX.Medata.cs• Utilizar os Data Annotations para validar

dados

[Required][RegularExpression("[A-Z][A-Za-z0-9]*")][StringLength(32)]

Listar com paginação

Detalhes do item escolhido

Atualizar valores no banco

Utilizando validadores e resumos

Validator

Attributes

• Validation• CustomValidation• DataType• EnumDataType• Range• RegularExpression• Required• StringLength

• Other • Exclude• Include• Composition• EnableClientAccess• POCO: Key, Association

• Service• EnableClientAccess• Query • IsDefault• IsComposable• RequestLimit

• OutputCache• Insert• Update• Delete• Invoke• RequiresAuthentication• RequiresRole

Negator

Filtrar informações

Filtrar informações

Filtrar informações

Filtrar informações

Executando Querys• O que é feito no Domain Service é

replicado em um arquivo de saída do lado do cliente

DomainContext context = new DomainContext();            var query = context.GetParadasQuery();

            var operation = context.Load<Parada>(query);            operation.Completed += new EventHandler(operation_Completed);

void operation_Completed(object sender, EventArgs e)        {            var list = ((LoadOperation<Parada>)sender).

Entities.ToList<Parada>();              }

Out of Browser

Criando uma aplicação fora do browser• Rodando a aplicação fora do browser• Arquivo de configuração OutOfBrowserSettings.xml

Controlando a experiência• App possui a propriedade InstallState• Installed• InstallFailed• Installing• NotInstalled

Está rodando fora do browser• IsRunningOutOfBrowser

Instalar aplicação no cliente• Método: Install();

Permissão elevada para que?• Com com integração windows nativa• Chamar webservice sem restrições ou necessidade de

arquivo de access policy• Clipboard, WebCam e Microfone sem perguntar• Lendo e escrevendo em pastas do usuário• Full Screen mode, sem restrições de teclado e sem

pressionar esc para sair

Acessando Folders Especiaisvar music = Directory.EnumerateFiles( Environment.GetFolderPath(Environment.SpecialFolder.MyMusic));

Rodando em full screenif (Application.Current.HasElevatedPermissions){

Application.Current.Host.Content.IsFullScreen = true;}

Utilizando Isolated Storage• Sessão Cross Browser• Assim como Cookie, suporte até 4KB• Não é removido quando limpa histórico do browser

Trabalhando com Isolated StorageIsolatedStorageFile isoFile = IsolatedStorageFile.GetUserStoreForApplication();