MSDN & Dattatec: Un recorrido por Silverlight 2 Beta 2

1. miguel.saez@microsoft.com santiago@autocosmos.com
http://blogs.msdn.com/masaez http://weblogs.asp.net/SantiagoLeguiza

2. cross-browser, cross-plataforma, cross-device
para la construcción y entrega de la siguiente generación de
experiencias multimedia y RIA
basadas en .NET
para la Web

3. Silverlight Demos

4. Qué sabes de Silverlight?

5. Arquitectura

6. Designer/Developer Collaboration
=

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

8. Silverlight – XAML (OO)
<Canvas
MouseEnter=quot;OnMouseEnterquot;>
<TextBlock Canvas.Top=quot;30quot; Foreground=quot;#FFFF3333quot;>
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 textoquot;;
Color ratherRed = Color.FromArgb(0xFF, 0xFF, 0x33, 0x33);
t.Foreground = new SolidColorBrush(ratherRed);
canvas.Children.Add(t);

9. Silverlight – XAML (OO)
• Usa nombres para acceder desde código
<Rectangle x:Name=quot;rectquot; />
void OnMouseEnter(object sender, MouseEventArgs e) {
rect.Height = 75;
}

10. Silverlight – XAML (OO)
<Canvas Width=“250” Height=“200”>
<Rectangle Canvas.Top=“25quot; Canvas.Left =“25” Width=“200”
Height=“15” Fill=“Yellow” />
</Canvas>
El Canvas
El Rectángulo

11. Controles – Layout
Container Descripción
<Grid ShowGridLines=quot;Truequot;>
<Grid.ColumnDefinitions>
Posiciona elementos hijos en <ColumnDefinition/>
un espacio
Canvas
absoluto x,y. <ColumnDefinition/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
Posiciona elementos hijos relativos unos a
StackPanel <Rectangle Fill=quot;Redquot; Width=quot;150quot; Height=quot;100quot;
otros en pilas verticales u horizontales.
Grid.Column=quot;1quot; Grid.Row=quot;1quot;/>
</Grid>
Grid Position child elements in rows and columns.

12. Desarrollo RIA
Biblioteca de controles
Canvas
Grid
Popup
StackPanel

13. Templates y Estilos - Demostración
streaming.live.com

14. Demostración
• Controles de Usuario
• Templates y estilos

15. Explicacion Data Binding y WebServices
• + Demo anterior yendo al código.

16. Silverlight Sandbox
• Silverlight lives in the browser Sandbox
• Developers cannot extend the sandbox
• Silverlight extends in a secure way http://catalog.video.msn.com/clientaccesspolicy.xml
• Local storage (isolated storage)
• Similar to cookies <?xml version=quot;1.0quot; encoding=quot;utf-8quot;?>
<access-policy>
<cross-domain-access>
• FileOpen dialog <policy>
<allow-from>
• Sockets <domain uri=quot;*quot;/>
</allow-from>
• Beta 1: Site of origin, port restrictions <grant-to>
<resource path=quot;/quot; include-
• Cross domain HTTP(S) requests subpaths=quot;truequot;/>
</grant-to>
• Support Silverlight and Subset of Flash </policy>
</cross-domain-access>
policy files </access-policy>
• Browser DOM access controled by
page tags and app flags
http://scorbs.com/2008/04/05/silverlight-http-networking-stack-part-1-site-of-origin-communication/

17. Animaciones en Silverlight
• XAML Event Triggers (Declarativos)
<Canvas xmlns=http://schemas.microsoft.com/client/2007
xmlns=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>

18. Animaciones en Silverlight
• Animaciones invocadas por
procedimientos en código
<Canvas xmlns=http://schemas.microsoft.com/client/2007
xmlns=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” function handleClick(sender, args){
Fill=“Blue”
var anim = sender.findName(“grow1”);
Stroke=“Black” />
</Canvas> anim.begin();
}

19. Animaciones en silverlight (2)
Animación
Tipo de
Basica Animación KeyFrames Ejemplo de Uso
Propiedad
(From/To/By)
Animar el Color de
Color ColorAnimation ColorAnimationUsingKeyFrames
una figura.
Animar el ancho, y
Double DoubleAnimation DoubleAnimationUsingKeyFrames
alto de una figura.
Animar la posición
Point PointAnimation PointAnimationUsingKeyFrames
de una figura.

20. Demostración
• Animaciones con Expression Blend

21. Silverlight 2 Runtime Features
• .NET Support
2D, Graphics •
• • C# and VB.NET
Audio, Video
• • Generics
Animations
• LINQ
Text, Text Input •
• XML APIs
Controls •
• HTML Integration
Layout •
• • JSON Serializer
Styles/Templates
• Local storage
Data Binding •
(Isolated)
• Networking
Crypto APIs (AES)
• HTTP/S and Sockets •
• DeepZoom Threading
•
* New in Silverlight 2

22. Recursos
• Silverlight 2 Beta 2 - Development with the .NET Framework
http://msdn.microsoft.com/en-us/library/bb404700(VS.95).aspx
• Deploying Silverlight
http://msdn.microsoft.com/en-us/library/cc189057(VS.95).aspx
• Silverlight Showcase
http://silverlight.net/showcase/
• Silverlight Streaming
http:// streaming.live.com/