webcast 09/2008 - silverlight 2 beta 2
DESCRIPTION
MSDN & Dattatec: Un recorrido por Silverlight 2 Beta 2TRANSCRIPT
cross-browser, cross-plataforma, cross-devicepara la construcción y entrega de la siguiente generación de
experiencias multimedia y RIA basadas en .NET
para la Web
Silverlight Demos
Qué sabes de Silverlight?
Arquitectura
Designer/Developer Collaboration
=
<Introducción> – XAML• XAML = Extensible Application Markup Language• Lenguaje orientado a objetos• Schema Flexible.• Ejemplos:• Windows Presentation Foundation• Silverlight• Windows Workflow Foundation
• Mas compacto que el código
</Introducción>
Silverlight – XAML (OO)
<Canvas MouseEnter="OnMouseEnter">
<TextBlock Canvas.Top="30" Foreground="#FFFF3333"> Aquí va algún texto </TextBlock>
</Canvas>
<Canvas MouseEnter="OnMouseEnter">
<TextBlock Canvas.Top="30" Foreground="#FFFF3333"> Aquí va algún texto </TextBlock>
</Canvas>
Canvas canvas = new Canvas();canvas.MouseEnter += new MouseEventHandler(OnMouseEnter);
TextBlock t = new TextBlock();t.SetValue(Canvas.TopProperty, 30);t.Text = “Aquí va algún texto";Color ratherRed = Color.FromArgb(0xFF, 0xFF, 0x33, 0x33);t.Foreground = new SolidColorBrush(ratherRed);canvas.Children.Add(t);
Canvas canvas = new Canvas();canvas.MouseEnter += new MouseEventHandler(OnMouseEnter);
TextBlock t = new TextBlock();t.SetValue(Canvas.TopProperty, 30);t.Text = “Aquí va algún texto";Color ratherRed = Color.FromArgb(0xFF, 0xFF, 0x33, 0x33);t.Foreground = new SolidColorBrush(ratherRed);canvas.Children.Add(t);
Silverlight – XAML (OO)
• Usa nombres para acceder desde código
<Rectangle x:Name="rect" /><Rectangle x:Name="rect" />
void OnMouseEnter(object sender, MouseEventArgs e) { rect.Height = 75;}
void OnMouseEnter(object sender, MouseEventArgs e) { rect.Height = 75;}
<Canvas Width=“250” Height=“200”>
<Rectangle Canvas.Top=“25" Canvas.Left =“25” Width=“200” Height=“15” Fill=“Yellow” />
</Canvas>
<Canvas Width=“250” Height=“200”>
<Rectangle Canvas.Top=“25" Canvas.Left =“25” Width=“200” Height=“15” Fill=“Yellow” />
</Canvas>
El Canvas
El Rectángulo
Silverlight – XAML (OO)
Controles – Layout
Container Descripción
Canvas Posiciona elementos hijos en un espacio absoluto x,y.
StackPanel Posiciona elementos hijos relativos unos a otros en pilas verticales u horizontales.
Grid Position child elements in rows and columns.
<Grid ShowGridLines="True"> <Grid.ColumnDefinitions> <ColumnDefinition/> <ColumnDefinition/>
</Grid.ColumnDefinitions> <Grid.RowDefinitions> <RowDefinition/>
<RowDefinition/> </Grid.RowDefinitions>
<Rectangle Fill="Red" Width="150" Height="100"
Grid.Column="1" Grid.Row="1"/>
</Grid>
<Grid ShowGridLines="True"> <Grid.ColumnDefinitions> <ColumnDefinition/> <ColumnDefinition/>
</Grid.ColumnDefinitions> <Grid.RowDefinitions> <RowDefinition/>
<RowDefinition/> </Grid.RowDefinitions>
<Rectangle Fill="Red" Width="150" Height="100"
Grid.Column="1" Grid.Row="1"/>
</Grid>
Desarrollo RIABiblioteca de controles
Canvas Grid Popup StackPanel
Templates y Estilos - Demostración
streaming.live.com
Demostración• Controles de Usuario• Templates y estilos
Explicacion Data Binding y WebServices• + Demo anterior yendo al código.
Silverlight Sandbox• Silverlight lives in the browser
Sandbox• Developers cannot extend the
sandbox• Silverlight extends in a secure way• Local storage (isolated storage)• Similar to cookies
• FileOpen dialog• Sockets• Beta 1: Site of origin, port
restrictions• Cross domain HTTP(S) requests• Support Silverlight and Subset of
Flash policy files• Browser DOM access controled by
page tags and app flags
<?xml version="1.0" encoding="utf-8"?><access-policy> <cross-domain-access> <policy> <allow-from> <domain uri="*"/> </allow-from> <grant-to> <resource path="/" include-subpaths="true"/> </grant-to> </policy> </cross-domain-access></access-policy>
http://catalog.video.msn.com/clientaccesspolicy.xml
http://scorbs.com/2008/04/05/silverlight-http-networking-stack-part-1-site-of-origin-communication/
Animaciones en Silverlight
• XAML Event Triggers (Declarativos)<Canvas xmlns=http://schemas.microsoft.com/client/2007xmlns=http://schemas.microsoft.com/winfx/2006/xaml><Canvas.Triggers><EventTriggers><EventTrigger RoutedEvent=“Canvas.Loaded”><BeginStoryboard>
<Storyboard><DoubleAnimation Storyboard.Targetname=“Rectangle1”
Storyboard.TargetProperty=“(Rectangle.Height)”Duration=“0:00:01” Value=“400” />
</Storyboard></BeginStoryboard></EventTrigger></EventTriggers></Canvas.Triggers>
<Rectangle x:Name=“Rectangle1” Width=“300” Height=“300” Fill=“Blue” Stroke=“Black” />
</Canvas>
<Canvas xmlns=http://schemas.microsoft.com/client/2007xmlns=http://schemas.microsoft.com/winfx/2006/xaml><Canvas.Triggers><EventTriggers><EventTrigger RoutedEvent=“Canvas.Loaded”><BeginStoryboard>
<Storyboard><DoubleAnimation Storyboard.Targetname=“Rectangle1”
Storyboard.TargetProperty=“(Rectangle.Height)”Duration=“0:00:01” Value=“400” />
</Storyboard></BeginStoryboard></EventTrigger></EventTriggers></Canvas.Triggers>
<Rectangle x:Name=“Rectangle1” Width=“300” Height=“300” Fill=“Blue” Stroke=“Black” />
</Canvas>
Animaciones en Silverlight
• Animaciones invocadas por procedimientos en código
<Canvas xmlns=http://schemas.microsoft.com/client/2007xmlns=http://schemas.microsoft.com/winfx/2006/xaml><Canvas.Resources>
<Storyboard x:Name=“Grow1”><DoubleAnimation
Storyboard.Targetname=“Rectangle1” Storyboard.TargetProperty=“(Rectangle.Height)”
Duration=“0:00:01” Value=“400” /></Storyboard>
</Canvas.Resources><Rectangle x:Name=“Rectangle1”
MouseLeftButtonUp=“handleClick” Width=“300” Height=“300” Fill=“Blue”Stroke=“Black” />
</Canvas>
<Canvas xmlns=http://schemas.microsoft.com/client/2007xmlns=http://schemas.microsoft.com/winfx/2006/xaml><Canvas.Resources>
<Storyboard x:Name=“Grow1”><DoubleAnimation
Storyboard.Targetname=“Rectangle1” Storyboard.TargetProperty=“(Rectangle.Height)”
Duration=“0:00:01” Value=“400” /></Storyboard>
</Canvas.Resources><Rectangle x:Name=“Rectangle1”
MouseLeftButtonUp=“handleClick” Width=“300” Height=“300” Fill=“Blue”Stroke=“Black” />
</Canvas>
function handleClick(sender, args){
var anim = sender.findName(“grow1”);
anim.begin();
}
function handleClick(sender, args){
var anim = sender.findName(“grow1”);
anim.begin();
}
Animaciones en silverlight (2)
Tipo de Propiedad
Animación Basica (From/To/By)
Animación KeyFrames Ejemplo de Uso
Color ColorAnimation ColorAnimationUsingKeyFramesAnimar el Color de una figura.
Double DoubleAnimation
DoubleAnimationUsingKeyFrames
Animar el ancho, y alto de una figura.
Point PointAnimation PointAnimationUsingKeyFramesAnimar la posición de una figura.
Demostración• Animaciones con Expression Blend
Silverlight 2 Runtime Features
• 2D, Graphics• Audio, Video• Animations• Text, Text Input• Controls• Layout• Styles/Templates• Data Binding• Networking• HTTP/S and Sockets
• DeepZoom
* New in Silverlight 2
• .NET Support• C# and VB.NET• Generics
• LINQ• XML APIs• HTML Integration
• JSON Serializer• Local storage
(Isolated)• Crypto APIs (AES)• Threading
Recursos• Silverlight 2 Beta 2 - Development with the .NET
Frameworkhttp://msdn.microsoft.com/en-us/library/bb404700(VS.95).aspx• Deploying Silverlighthttp://msdn.microsoft.com/en-us/library/cc189057(VS.95).
aspx• Silverlight Showcasehttp://silverlight.net/showcase/• Silverlight Streaminghttp:// streaming.live.com/