Introdução ao Microsoft Silverlight 2.0 - Campus Party Brasil 2009

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.

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

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

XAML (Extensive Application Markup Language) " 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="100"> OK <Button.Background> LightBlue </Button.Background> </Button> XAML Button b1 = new Button(); b1.Content = "OK"; b1.Background = new SolidColorBrush(Colors.LightBlue); b1.Width = 100; C# Dim b1 As New Button b1.Content = "OK" b1.Background = New _ SolidColorBrush(Colors.LightBlue) b1.Width = 100 VB.NET

XAML “ Z ammel” < 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>

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

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.

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

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

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)

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

Ferramentas para usar com XAML
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

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

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

Mouse Events

InkPresenter
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

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

Introdução ao Microsoft Silverlight 2.0 - Campus Party Brasil 2009

by Ramon Durães on Jan 21, 2009

Accessibility

Categories

Upload Details

Usage Rights

2 Embeds 8

Statistics

Introdução ao Microsoft Silverlight 2.0 - Campus Party Brasil 2009 Presentation Transcript

http://www.linkedin.com	7
http://www.slideshare.net	1