1 / 57

Building RIA’s With Silverlight 2

Building RIA’s With Silverlight 2. Gill Cleeren Microsoft Regional Director MVP ASP.NET Software Architect Ordina Belgium gill.cleeren @ ordina.be www.snowball.be – www.codeflakes.net. Agenda. Rich Internet Applications Getting Started with Silverlight 2 on .net

linnea
Download Presentation

Building RIA’s With Silverlight 2

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. Building RIA’sWith Silverlight 2 Gill CleerenMicrosoft Regional Director MVP ASP.NET Software Architect Ordina Belgium gill.cleeren@ordina.be www.snowball.be – www.codeflakes.net

  2. Agenda • Rich Internet Applications • GettingStartedwith Silverlight 2 on .net • Silverlight 2 deepdive: • Controls • Layout • Brushes and transformations • Networking • Databinding • Styles and content templates • Deepzoom • Showcase • Summary

  3. A littlehistory Q2 08 Silverlight 2 Beta 2 Silverlight 1.0 & Silverlight 1.1

  4. Rich Internet Application (RIA) &Silverlight

  5. Characteristics of an RIA • Web deployment • Broad client reach • Secure sandboxed environment • Rich UI experiences beyond server generated HTML • Highly capable UI model • Signifigant client-side application logic • Highly productive development environment

  6. Microsoft Silverlight is a cross-browser, cross-platform implementation of .NET for building and delivering the next generation of media experiences & rich interactive applications for the Web.

  7. .NET + Silverlight • Cross-platform & cross-browser plugin • Works with Safari, Firefox and IE on Mac & Windows • Will work with FireFox, Konquerer and Opera on Linux • 4.3MB with a fast, easy install process • Highly productive development Framework • Multi-language support – VB, C#, JavaScript, Python, Ruby • Rich class library of functionality that can be used • Great tools with Visual Studio & Expression

  8. .NET for Silverlight & the Desktop • .NET for Silverlight is a subset of the full .NET Framework • Targetted support for RIA and Media scenarios • Common core .NET development model • Common APIs across both browser and desktop scenarios • Common WPF UI programming model across both • Development and Designer tools are the same • Compatible subset of WPF UI framework

  9. Getting Started with .NET on Silverlight

  10. What You'll Need: • Install the following: • Silverlight 2 Beta1 (orbeta 2, available in June) • Silverlight Tools for Visual Studio 2008 Beta 1 • Expression Blend 2.5 March Preview • Everything you need is at www.silverlight.net • Links to downloads & docs • VS object browser a great way to view APIsoruse Reflector

  11. Building Hello World demo

  12. Controls

  13. Controls <Button x:Name=“MyButton” Content=“Push Me” Width=“150” Height=“50” /> Button b = new Button(); b.Width = 150; b.Height = 50; b.Content = “Push Me"; Re-usable UI elements that encapsulate UI and behavior and enable re-use and composition

  14. Some Built-in Beta1 Controls • High-Level Controls: • Calendar • DataGrid • Slider • DateTimePicker • Shapes: • Ellipse • Rectangle • Line • TextBlock • Path • Core Controls: • Border • Image • MediaElement • MultiScaleImage • ToolTip • ScrollViewer • Navigation Controls: • HyperlinkButton • Popup • Form Controls: • TextBox • Button • Toggle/Repeat Button • CheckBox • RadioButton • ListBox • Layout Controls: • StackPanel • Grid / GridSplitter • Canvas

  15. x:Name <Button x:Name=“MyButton”/> public void Page_Loaded(sender, MouseEventArgs e) { MyButton.Content = “Push Me!”; } • Name your controls so you can use it in code • Visual Studio automatically declares field for all x:name elements

  16. Wiring Up Event Handlers <Button x:Name=“MyButton” Content=“Push Me” Click=“MyButton_Click“/> public void MyButton_Click(object sender, RoutedEventArgs e) { // todo: add code } • Event handlers can be wired up declaratively in XAML: • Or explictly within the code-behind file • VB – using the "Handles" keyword • C# -- programmatically within the Page_Loaded event handler

  17. Controls demo

  18. Layout

  19. Layout • Silverlight and WPF support concept of Layout Panels • Canvas • StackPanel • Grid • Layout system is customizable • TilePanel • RadialPanel • Etc.

  20. The Canvas The Rectangle Canvas <Canvas Width="250" Height="200"> <Rectangle Canvas.Top="25" Canvas.Left="25" Width="200" Height="150" Fill="Yellow" /> </Canvas> Is a Drawing Surface Children have relative positions

  21. StackPanel <StackPanel Orientation="Vertical"> <Button>Button 1</Button> <Button>Button 2</Button> </StackPanel>

  22. Grid Panel <Grid> <Grid.ColumnDefinitions> <ColumnDefinition Width="*"/> <ColumnDefinition Width="100"/> </Grid.ColumnDefinitions> <Grid.RowDefinitions> <RowDefinition Height="75"/> <RowDefinition Height="*"/> <RowDefinition Height="85"/> </Grid.RowDefinitions> <Button Grid.Column="1" Grid.Row="1" Content=“Button 1" Margin="8,8,8,8"/> <Button Grid.Column="1" Grid.Row="2" Content=“Button 2" Margin="8,8,8,8"/> </Grid>

  23. Layout demo

  24. Brushes & transformations

  25. Brushes • Determines how objects are painted • For painting objects (e.g. Fill) • For painting of lines (e.g. Stroke) • Brush options include: • Solid color brushes • Gradient brushes • Image brushes • Video brushes

  26. Brushes <Rectangle Width="200" Height="150" > <Rectangle.Fill> <SolidColorBrush Color="Black" /> </Rectangle.Fill> </Rectangle> <Rectangle Width="200" Height="150" Fill="Black" /> <Rectangle Width="200" Height="150" Fill="#FFFFFF" /> • <SolidColorBrush /> • Support creation by name • 141 named colors supported (e.g. Blue, Red, Green) • Supports #FFFFFF or #FFFFFFFF syntax as well

  27. Brushes <Rectangle Width="200" Height="150"> <Rectangle.Fill> <LinearGradientBrushStartPoint="0,0" EndPoint="1,1"> <LinearGradientBrush.GradientStops> <GradientStop Color=“Blue" Offset="0" /> <GradientStop Color="Black" Offset="1" /> </LinearGradientBrush.GradientStops> </LinearGradientBrush> </Rectangle.Fill> </Rectangle> • <LinearGradientBrush /> • Start and Stop are to set angle as numbers • Gradient Stops are the different color points

  28. Transformations • All elements support them • Transform Types • <RotateTransform /> • <ScaleTransform /> • <SkewTransform /> • <TranslateTransform /> • Moves • <MatrixTransform /> • Scale, Skew and Translate Combined

  29. Transformations <TextBlock Text="Hello World"> <TextBlock.RenderTransform> <RotateTransform Angle="45" /> </TextBlock.RenderTransform> </TextBlock> Hello World

  30. Brushes and transformations demo

  31. Networking

  32. Rich Networking Options Available HTTP WS* / SOAP REST RSS Sockets Cross Domain Networking Support Available

  33. Networking demo

  34. Databinding

  35. Databinding • Enable clean view/model separation and binding • Change UI presentation wtihout code-behind modifications • Works with any object that implements IEnumerable • Arrays, Lists, Collections, etc. • Binding Expressions can be one way or two way • INotifyPropertyChange change notifications supported

  36. Databinding demo

  37. Styles &content templates

  38. Styles • Allow look and feel of a control to be defined externally • Conceptually similar to Stylesheets with HTML • Support encapsulating style properties and control templates • Control templates particularly powerful (will see soon) • Can be defined either within UI XAML files or App.xaml • App.xaml allows use across all files in application

  39. Styles

  40. Styles

  41. Styles

  42. Content Templates • Allow the visual tree of a control to be completely replaced and/or customized however you want • Override not only the look and style – but also the feel • Interaction behaviors, animations, etc. • Enable clean designer/developer workflow

  43. Styles and content templates demo

  44. Deep Zoom

  45. Image Deep Zoom • Provides seamless viewing & zooming of huge images • Loads only the data necessary to show the part of an image the user is viewing • Effectively turns a large image into an efficiently scaling vector

  46. Image Deep Zoom • Preprocessing tool breaks image into 256 x 256 tiles • Then generates pyramids of tiles at lower resolutions

  47. Deep Zoom – How does it work? • When the image is displayed on the client the lowest resolution tiles are shown first • Then as the higher quality tiles are downloaded, they are smoothly blended in

  48. Deep Zoom – How does it work? • When the image is displayed on the client the lowest resolution tiles are shown first • Then as the higher quality tiles are downloaded, they are smoothly blended in

  49. Deep Zoom – How does it work? • When the image is displayed on the client the lowest resolution tiles are shown first • Then as the higher quality tiles are downloaded, they are smoothly blended in

  50. Image Deep Zoom • Exposed through the MultiScaleImage • Preprocessing tool outputs image tiles and XML description file

More Related