Introdução ao Silverlight 2.0 Ramon Durães MVP, Especialista em Visual Studio Team System http://www.ramonduraes.net Preparando o ambiente: http://tinyurl.com/6v3f6b

O que é o Silverlight ? Microsoft Silverlight é uma implementação cross browser, cross-platform do .NET destinada a construção e distribuição da próxima geração de mídia e aplicações ricas para a Web.

Microsoft Silverlight é uma implementação cross browser, cross-platform do .NET destinada a construção e distribuição da próxima geração de mídia e aplicações ricas para a Web.

? New Web()

Demo d= new Demo(); “ Video”, “Negócios”, “Games”,”ZOOM ;”

Rich Interactive Applications (RIA) Video Aplicações de negócio Publicidade Aplicações moveis Games Search engine optimization (SEO)

Video

Aplicações de negócio

Publicidade

Aplicações moveis

Games

Search engine optimization (SEO)

Instalando i= new Instalando() ; “ Plugin”; *Windows Update / Windows Live Tools*

Colaboração Designer/Developer =

Colaboração Designer-Developer Designers-Interface com Usuário Atravéz do XAML designers e desenvolvedores podem ter extrema colaboração Desenvovedor-Lógica de Negócios

Atravéz do XAML designers e desenvolvedores podem ter extrema colaboração

XAML (Extensive Application Markup Language) &quot; Z ammel” Padrão baseado no XML. Separação de código e conteúdo. UI / DataBind / Event / Objects. Storyboard, Rotations / Animations, Effects. <Button Width=&quot;100&quot;> OK <Button.Background> LightBlue </Button.Background> </Button> XAML Button b1 = new Button(); b1.Content = &quot;OK&quot;; b1.Background = new SolidColorBrush(Colors.LightBlue); b1.Width = 100; C# Dim b1 As New Button b1.Content = &quot;OK&quot; b1.Background = New _ SolidColorBrush(Colors.LightBlue) b1.Width = 100 VB.NET

Padrão baseado no XML.

Separação de código e conteúdo.

UI / DataBind / Event / Objects.

Storyboard, Rotations / Animations, Effects.

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

Colocando um ID nos objetos XAML Atributo x:Name muito similar ao identificador do ASP.NET < Rectangle Canvas.Left=&quot;50&quot; Canvas.Top=&quot;50&quot; Fill=&quot;Yellow“ Width=&quot;300&quot; Height=&quot;200&quot; Stroke=&quot;Black&quot; StrokeThickness=&quot;10&quot; x:Name=“ MeuRetangulo &quot; /> Esse objeto agora pode ser referenciando no código fonte (VB.NET / C#).

Atributo x:Name muito similar ao identificador do ASP.NET

Demo d= new Demo() “ XAML” , “Hello World”

Controlando o Layout Definindo o posicionamento dos objetos Canvas - Posicionamento absoluto em uma linha / coluna(Canvas.Left and Canvas.Top) StackPanel - Posicionamento em uma linha ou coluna(StackPanel.Orientation) Grid – Posicionamento usando linhas e colunas. GridSplitter – Permite o redimensionamento de linhas e colunas.

Definindo o posicionamento dos objetos

Canvas - Posicionamento absoluto em uma linha / coluna(Canvas.Left and Canvas.Top)

StackPanel - Posicionamento em uma linha ou coluna(StackPanel.Orientation)

Grid – Posicionamento usando linhas e colunas.

GridSplitter – Permite o redimensionamento de linhas e colunas.

Canvas <Canvas Width=&quot;300&quot; Height=&quot;560&quot; xmlns=&quot;... xmlns:x=&quot;...&quot;> <Canvas Canvas.Left=&quot;40&quot; Canvas.Top=&quot;40&quot; Width=&quot;220&quot; Height=&quot;220&quot;> <Ellipse Canvas.Left=&quot;40&quot; Canvas.Top=&quot;40&quot; Height=&quot;140&quot; Width=&quot;140&quot; /> </Canvas> <Canvas Canvas.Left=&quot;40&quot; Canvas.Top=&quot;300&quot; Width=&quot;220&quot; Height=&quot;220&quot;> <Ellipse Canvas.Left=&quot;40&quot; Canvas.Top=&quot;40&quot; Height=&quot;140&quot; Width=&quot;140&quot; /> </Canvas> </Canvas> (40,40) (0,0) (40,300) (80,80) (80,340)

StackPanel <StackPanel Orientation=&quot;Horizontal|Vertical&quot;> <Rectangle Width=&quot;100&quot; Height=&quot;60&quot; Fill=&quot;Red&quot; Margin=&quot;10&quot; /> <Rectangle Width=&quot;100&quot; Height=&quot;60&quot; Fill=&quot;Green&quot; Margin=&quot;10&quot; /> <Rectangle Width=&quot;100&quot; Height=&quot;60&quot; Fill=&quot;Blue&quot; Margin=&quot;10&quot; /> <Rectangle Width=&quot;100&quot; Height=&quot;60&quot; Fill=&quot;Yellow&quot; Margin=&quot;10&quot; /> </StackPanel> Orientation=&quot;Horizontal&quot; Orientation=&quot;Vertical&quot;

<StackPanel Orientation=&quot;Horizontal|Vertical&quot;>

<Rectangle Width=&quot;100&quot; Height=&quot;60&quot; Fill=&quot;Red&quot; Margin=&quot;10&quot; />

<Rectangle Width=&quot;100&quot; Height=&quot;60&quot; Fill=&quot;Green&quot; Margin=&quot;10&quot; />

<Rectangle Width=&quot;100&quot; Height=&quot;60&quot; Fill=&quot;Blue&quot; Margin=&quot;10&quot; />

<Rectangle Width=&quot;100&quot; Height=&quot;60&quot; Fill=&quot;Yellow&quot; Margin=&quot;10&quot; />

</StackPanel>

Suporte Shapes (Rectangle,Ellipse,Polygon,Line,PolyLine,Path) Brush (LinearGradientBrush, RadialGradientBrush) Text Fonts (Embarcadas juntos com o XAP) Images (Stretch=None|Fill|Uniform|UniformToFill) MediaElement (Audio / Video)

Shapes (Rectangle,Ellipse,Polygon,Line,PolyLine,Path)

Brush (LinearGradientBrush, RadialGradientBrush)

Text

Fonts (Embarcadas juntos com o XAP)

Images (Stretch=None|Fill|Uniform|UniformToFill)

MediaElement (Audio / Video)

Silverlight é um “micro” .NET Framework

Silverlight e .NET: Juntos Alta produtividade no desenvolvimento Suporte a várias linguagens (C#; VB.NET …) Language integrated Query (LINQ) Integração com JavaSCript / HTML / DOM / AJAX / ASP.NET / JSON / WCF / Web Services / Asynchronous Support . Otimas ferramentas Visual Studio Expression Studio Cross-platform & cross-browser plugin Funciona Chorme ,Safari, Firefox e Internet Explorer Mac OS, Windows e Linux Funciona em qualquer servidor Web Instalação rápida e fácil do plugin Básico Qualquer editor de texto Qualquer servidor Web

Alta produtividade no desenvolvimento

Suporte a várias linguagens (C#; VB.NET …)

Language integrated Query (LINQ)

Integração com JavaSCript / HTML / DOM / AJAX / ASP.NET / JSON / WCF / Web Services / Asynchronous Support .

Otimas ferramentas

Visual Studio

Expression Studio

Cross-platform & cross-browser plugin

Funciona Chorme ,Safari, Firefox e Internet Explorer

Mac OS, Windows e Linux

Funciona em qualquer servidor Web

Instalação rápida e fácil do plugin

Básico

Qualquer editor de texto

Qualquer servidor Web

Ferramentas para usar com XAML BLEND KAXAML ECLIPSE

BLEND

KAXAML

ECLIPSE

Core UI Capabilities Vector Based Graphics 2D graphics Primitives (ellipse, rectangle, path etc) Composition engine Transforms Brushes Text Ink Animation system Media Video Audio

Vector Based Graphics

2D graphics

Primitives (ellipse, rectangle, path etc)

Composition engine

Transforms

Brushes

Text

Ink

Animation system

Media

Video

Audio

Access the HTML DOM from Managed Code HTML access available in new namespace HtmlPage.Navigate(&quot; http://www.microsoft.com &quot;); String server = HtmlPage.DocumentUri.Host; using System.Windows.Browser; HtmlElement myButton = HtmlPage.Document.GetElementByID(&quot; myButtonID &quot;); myButton.AttachEvent(&quot; onclick &quot;, new EventHandler( this .myButtonClicked)); private void myButtonClicked( object sender, EventArgs e) { ... } Static HtmlPage class provides entry point Hookup events, call methods, or access properties

HTML access available in new namespace

Access Managed Code from JavaScript Mark a property, method or event as [Scriptable] WebApplication.Current.RegisterScriptableObject (&quot; EntryPoint &quot;, this ); [Scriptable] public void Search( string Name) { ... } var control = document.getElementById(&quot; SilverlightControl &quot;); control.Content.EntryPoint.Search(input.value); Register a scriptable object Access the managed object from script

Mark a property, method or event as [Scriptable]

Mouse Events

InkPresenter Usando tinta para escrever

Usando tinta para escrever

InkPresenter i= new InkPresenter () “ Mouse””

Silverlight Toolkit Conjunto de novos controles disponíveis com código fonte para ampliar mais ainda o poder do Silverlight Preparando o ambiente: http://tinyurl.com/6v3f6b

Conjunto de novos controles disponíveis com código fonte para ampliar mais ainda o poder do Silverlight

Cartão de visita OBRIGADO!!!! Perguntas? Ramon Durães http://www.ramonduraes.net Aprenda mais em : http://www.desenvolvendoparaweb.net Preparando o ambiente: http://tinyurl.com/6v3f6b