1 / 162

Creating Rich Internet Applications with Silverlight

Creating Rich Internet Applications with Silverlight.  Jeff Prosise Cofounder, Wintellect www.wintellect.com. Goals. Build an understanding of Silverlight Come away with lots of practical knowledge and hard-hitting advice

eljah
Download Presentation

Creating Rich Internet Applications with Silverlight

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Creating Rich Internet Applications with Silverlight  Jeff Prosise Cofounder, Wintellect www.wintellect.com

  2. Goals • Build an understanding of Silverlight • Come away with lots of practical knowledge and hard-hitting advice • Know what Silverlight is capable of doing and how to go about doing it • Have fun!

  3. Silverlight • Microsoft's platform for rich, highly interactive Web experiences and RIAs • Cross-platform (browsers and OSes) • Windows, Mac OS, Linux ("Moonlight") • Internet Explorer, Firefox, Safari, and more • XAML-based rendering (subset of WPF XAML) • Implemented as browser plug-in • Quick, easy install experience

  4. Old vs. New (UI vs. UX) Web UI Silverlight UX

  5. Silverlight Versions • Silverlight 1.0 • Shipped September 2007 • XAML rendering and JavaScript API • Silverlight 2 • Shipped October 2008 • Enhanced XAML, .NET Framework, managed code, dynamic languages (e.g., IronRuby)

  6. Silverlight Developer Tools • Visual Studio 2008 SP1 or VWD 2008 SP1 • Silverlight Tools for Visual Studio 2008 SP1 • http://www.microsoft.com/downloads/details.aspx?FamilyId=c22d6a7b-546f-4407-8ef6-d60c8ee221ed • Works with VS 2008 SP1 and VWD 2008 SP1 • Includes Silverlight 2 run-time • Expression Blend 2 SP1 • http://www.microsoft.com/downloads/details.aspx?FamilyId=EB9B5C48-BA2B-4C39-A1C3-135C60BBBE66

  7. Silverlight Architecture

  8. XAML • <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>

  9. The Silverlight 2 CLR ("CoreCLR") • Refactored version of full-size CLR • Same core type system, JIT compiler, etc. • COM interop, remoting, binary serialization, server GC, and other features removed • CAS replaced with transparency model • Multiple CLR instances per process supported • Most globalization support pushed down to OS • Dynamic Language Runtime (DLR) added • Small footprint (< 2MB), cross-platform

  10. Core Base Class Library System.Net System.Net.Sockets System.Windows.Browser System.- Net System.- Windows.- Browser System System.CodeDom.Compiler System.Collections.Generic System.ComponentModel System.Diagnostics System.Text.RegularExpressions System.Linq System.Linq.Expressions System.Runtime.CompilerServices System.Security.Cryptography System System.- Core System System.Collections System.Collections.Generic System.Collections.ObjectModel System.Diagnostics System.Globalization System.IO System.IO.IsolatedStorage System.Reflection System.Reflection.Emit System.Runtime.Serialization System.Runtime.Versioning System.Security System.Security.Cryptography System.Security.Principal System.Text System.Threading System.Xml System.XmlSchema System.Xml.Serialization mscorlib System.- Xml System.Windows System.Windows.Controls System.Windows.Input System.Windows.Interop System.Windows,Markup System.Windows.Media System.Windows.Resources System.Windows.Shapes System.Windows.Threading System.- Windows

  11. Extended Base Class Library

  12. Silverlight 2 Security • All code is "sandboxed" • Sandboxing built on transparency model • Transparent: user code (untrusted) • Security-critical: platform code (can P/Invoke) • Security-safe-critical: platform code (entry points into security-critical code) • For more information: http://blogs.msdn.com/shawnfa/archive/2007/05/09/the-silverlight-security-model.aspx

  13. Transparency Model Application All user code is untrusted and can only call into other ST code or SSC SecurityTransparent Silverlight SSC layer provides gateway to SC code SecuritySafeCritical SC layer P/Invokes into underlying OS SecurityCritical Operating System

  14. demo Hello, Silverlight!

  15. XAML DOM <html> <body> ... <div id="SilverlightDiv"> </div> ... </body> </html> Web page Silverlight control Canvas Canvas TextBlock XAML objects Other Objects

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

  17. Referencing Named Objects • YellowRect.Fill = new SolidColorBrush(Colors.Red);

  18. Input Events • XAML objects input fire events • Mouse events • Keyboard events • Most input events "bubble up" XAML DOM • Also known as "event routing" • Handled property controls routing • OriginalSource property identifies originator • Handlers can be registered declaratively or programmatically

  19. Mouse Events

  20. Handling Mouse Events • private void OnMouseLeftButtonDown(Object sender, • MouseButtonEventArgs e) • { • double x = e.GetPosition(null).X); // X-coordinate • double y = e.GetPosition(null).Y); // Y-coordinate • }

  21. Declarative Handler Registration • // XAML • <Rectangle Canvas.Left="50" Canvas.Top="50" Fill="Yellow" • Width="300" Height="200" Stroke="Black" StrokeThickness="10" • MouseLeftButtonDown="OnClick" /> • // C# • private void OnClick(Object sender, MouseButtonEventArgs e) • { • ((Rectangle)sender).Fill = new SolidColorBrush(Colors.Red); • }

  22. Halting Event Routing • private void OnMouseLeftButtonDown(Object sender, • MouseButtonEventArgs e) • { • e.Handled = true; // Don't bubble any higher • ... • }

  23. Modifier Keys • private void OnMouseLeftButtonDown(Object sender, • MouseButtonEventArgs e) • { • if ((Keyboard.Modifiers & ModifierKeys.Shift) != 0) • { • // Only act if Shift key is pressed • } • }

  24. demo Mouse Input

  25. Layout Controls • Controls for positioning visual objects • Canvas – Arranges objects using absolute positioning (Canvas.Left and Canvas.Top) • StackPanel – Arranges objects in a row or column (StackPanel.Orientation) • Grid – Arranges objects in rows and columns • GridSplitter – Allows Grid rows and columns to be resized interactively

  26. (0,0) (40,40) (80,80) (40,300) (80,340) 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>

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

  28. Shapes • Silverlight supports six shapes Rectangle Ellipse Polygon Line PolyLine Path

  29. Rectangles • <Rectangle Canvas.Left="50" Canvas.Top="50" • Height="200" Width="300" StrokeThickness="10" • Stroke="Black" Fill="Yellow" />

  30. Ellipses • <Ellipse Canvas.Left="50" Canvas.Top="50" • Height="200" Width="300" StrokeThickness="10" • Stroke="Black" Fill="Yellow" />

  31. Paths • <Path Canvas.Left="70" Canvas.Top="100" • Stroke="Black" StrokeThickness="4" Fill="Yellow" • StrokeEndLineCap="Round" StrokeLineJoin="Round" • Data="M 0,0 C 0,100 130,50 380,-60 C 130,100 -70,250 0,0" />

  32. Property Element Syntax • <Rectangle Canvas.Left="50" Canvas.Top="50" • Height="200" Width="300" StrokeThickness="10"> • <Rectangle.Stroke> • <SolidColorBrush Color="Black" /> • </Rectangle.Stroke> • <Rectangle.Fill> • <SolidColorBrush Color="Yellow" /> • </Rectangle.Fill> • </Rectangle>

  33. LinearGradientBrush • <Rectangle Canvas.Left="50" Canvas.Top="50" Stroke="Black" • Height="200" Width="300" StrokeThickness="10"> • <Rectangle.Fill> • <LinearGradientBrush> • <GradientStop Color="Yellow" Offset="0.0" /> • <GradientStop Color="Red" Offset="0.25" /> • <GradientStop Color="Blue" Offset="0.75" /> • <GradientStop Color="LimeGreen" Offset="1.0" /> • </LinearGradientBrush> • </Rectangle.Fill> • </Rectangle>

  34. RadialGradientBrush • <Rectangle Canvas.Left="50" Canvas.Top="50" Stroke="Black" • Height="200" Width="300" StrokeThickness="10"> • <Rectangle.Fill> • <RadialGradientBrushGradientOrigin="0.5,0.5" • Center="0.5,0.5" RadiusX="0.5" RadiusY="0.5"> • <GradientStop Color="Yellow" Offset="0" /> • <GradientStop Color="Red" Offset="0.25" /> • <GradientStop Color="Blue" Offset="0.75" /> • <GradientStop Color="LimeGreen" Offset="1" /> • </RadialGradientBrush> • </Rectangle.Fill> • </Rectangle>

  35. Text • <TextBlockCanvas.Top="20" Canvas.Left="20" FontSize="120" • FontFamily="Georgia" FontStyle="Italic" FontWeight="Bold"> • Silverlight • <TextBlock.Foreground> • <LinearGradientBrush> • <GradientStop Color="Yellow" Offset="0.0" /> • <GradientStop Color="Red" Offset="0.25" /> • <GradientStop Color="Blue" Offset="0.75" /> • <GradientStop Color="LimeGreen" Offset="1.0" /> • </LinearGradientBrush> • </TextBlock.Foreground> • </TextBlock>

  36. Runs • <TextBlockCanvas.Top="20" Canvas.Left="20" FontSize="16" • FontFamily="Georgia"> • <Run>This is plain text</Run> • <LineBreak /> • <Run FontWeight="Bold">This is bold text</Run> • <LineBreak /> • <Run FontStyle="Italic">This is italicized text</Run> • </TextBlock>

  37. Fonts • Default is "Portable User Interface" • Standard fonts used from local computer: • Arial, Arial Black, Comic Sans MS, Courier New, Georgia, Lucida Grande/Lucida Sans Unicode, Times New Roman, Trebuchet MS, Verdana • Custom fonts can be embedded as resources or downloaded on demand • Applied declaratively with FontFamily • Applied programmatically with FontSource

  38. Custom Fonts • <TextBlockFontFamily="MyHandwriting.ttf#ChickenScratch"> • Silverlight • </TextBlock>

  39. Images • <Image Source="Corsair.jpg" • Stretch="None|Fill|Uniform|UniformToFill" /> None Fill Aspect ratio preserved Aspect ratio not preserved Uniform UniformToFill

  40. MediaElement • Audio/video playback in a box • Robust API • Streaming and progressive downloads • HD via VC-1 • DRM via WMDRM and PlayReady

  41. Using MediaElement • // XAML • <MediaElement x:Name="Player" Source="Videos/Flight.wmv" • AutoPlay="False" MediaEnded="OnMediaEnded" /> • // C# • // Start the video • StartButton.Visible = Visibility.Collapsed; • Player.Play(); • private void OnMediaEnded(Object sender, RoutedEventArgs e) • { • StartButton.Visible = Visibility.Visible; • Player.Position = new TimeSpan(0); // Reset to beginning • }

  42. Supported Formats • Video • WMV 1, 2, 3, and A (Advanced) • WMVC1 (VC-1 High Definition) • Coming soon: H.264 (MPEG-4) • Audio • WMA 7, 8, 9, and 10 • MP3 (ISO/MPEG Layer-3) • Coming soon: Advanced Audio Coding (AAC) http://msdn.microsoft.com/en-us/library/cc189080(VS.95).aspx

  43. demo MediaElement

  44. Properties of Visual Elements • Classes representing visual XAML objects inherit many visual properties, including: • Visibility • Cursor • ZIndex (attached, not inherited) • Opacity • OpacityMask • Clip • Most are inherited from UIElement or FrameworkElement

  45. UIElement.Visibility • Controls visibility of XAML objects • Visbility enumeration defines values • Visibility.Visible (default) – Visible • Visibility.Collapsed – Not visible (and no space reserved) • WPF's Visibility.Hidden not supported • For better performance, use Visibility, not opacity, to hide objects

  46. Canvas.ZIndex • <Ellipse Canvas.Left="50" Canvas.Top="50" Stroke="Black" • Height="200" Width="300" StrokeThickness="10" Fill="Red" • Canvas.ZIndex="1" /> • <Ellipse Canvas.Left="200" Canvas.Top="50" Stroke="Black" • Height="200" Width="300" StrokeThickness="10" Fill="Yellow" • Canvas.ZIndex="0" />

  47. UIElement.Opacity • <Ellipse Canvas.Left="50" Canvas.Top="50" Stroke="Black" • Height="200" Width="300" StrokeThickness="10" Fill="Red" • Opacity="0.5" /> • <Ellipse Canvas.Left="200" Canvas.Top="50" Stroke="Black" • Height="200" Width="300" StrokeThickness="10" • Fill="#80FFFF00" />

  48. UIElement.OpacityMask • <Rectangle Canvas.Left="50" Canvas.Top="50" Stroke="Black" • Height="50" Width="500" StrokeThickness="10" Fill="Yellow"> • <Rectangle.OpacityMask> • <LinearGradientBrushStartPoint="0,0" EndPoint="1,0"> • <GradientStop Offset="0" Color="#FF000000" /> • <GradientStop Offset="0.8" Color="#00000000" /> • </LinearGradientBrush> • </Rectangle.OpacityMask> • </Rectangle>

  49. Gradient Reflections <TextBlock ...> <TextBlock.RenderTransform> <ScaleTransformScaleY="-1"/> </TextBlock.RenderTransform> <TextBlock.OpacityMask> <LinearGradientBrushStartPoint="0,0" EndPoint="0,1"> <GradientStop Offset="0.5" Color="#00000000" /> <GradientStop Offset="1" Color="#80000000" /> </LinearGradientBrush> </TextBlock.OpacityMask> </TextBlock>

  50. UIElement.Clip • <Ellipse Canvas.Left="20" Canvas.Top="20" • Fill="SlateBlue" Height="200" Width="200" • Stroke="Black" StrokeThickness="10"> • <Ellipse.Clip> • <RectangleGeometryRect="0, 0, 100, 100" /> • </Ellipse.Clip> • </Ellipse>

More Related