O slideshow foi denunciado.
Silverlight 2
Smart-Web-Clients with .NET

                      Max Knor
               Developer Evangelist
            ...
What is Silverlight ?
• Browser-Plugin (4,63 MB)
   – Cross-Browser
   – Cross-Platform

• Embedded in an HTML page
      ...
Developing for Silverlight
• XAML for UI-design (Expression Blend)
    <UserControl x:Class="SlApp.Page">
      ...
    </...
Structure of a Silverlight App
  Root                  <object type=
HTML/ASPX                   "application/x-silverligh...
Silverlight 2 - Runtime Features
•   2D, Graphics         • .NET Support
•   Audio, Video            – C# und VB.NET
•   A...
Silverlight 2 - SDK Libraries
• Dynamic Languages
    – JScript
    – IronRuby
    – IronPython
•   Additional Controls
• ...
Silverlight Futures
• Silverlight for Mobile
  – Based on 2.0: RTW in 2009
  – Windows Mobile, Nokia S40/S60


• Moonlight
Build an Application
•   Step 1: Get Data
•   Step 2: Convert XML data to .NET objects
•   Step 3: Build UI
•   Step 4: Sa...
Build an Application
• Step 1: Get Data
  – Network data from site of origin
  – Network data from cross domain (x-domain)...
Silverlight Sandbox
• Silverlight lives in the browser Sandbox
• Developers cannot extend the sandbox
• Silverlight extend...
Build an Application
• Step 1: Get Data
  – Get data from http://catalog.video.msn.com/
  – Secured via a Silverlight poli...
demo
Networking
Build an Application
• Step 1: Get Data
• Step 2: Convert XML data to .NET objects
  – Options:
     • LINQ to XML
     • ...
demo
   Convert XML to Objects
(XML -> List<VideoSource>)
Build an Application
• Step 1: Get Data
• Step 2: Convert XML data to .NET objects
• Step 3: Build Main (Master) View
Build an Application
• Step 1: Get Data
• Step 2: Convert XML data to .NET objects
• Step 3: Build UI
Silverlight 2 Controls
• Canvas, Grid, StackPanel         Silverlight SDK
• FileOpenDialog                   • DataGrid
• ...
demo
Build the UI
Build an Application
•   Step 1: Get Data
•   Step 2: Convert XML data to .NET objects
•   Step 3: Build UI
•   Step 4: Sa...
Local Storage
• „Power-Cookies”
• 10 MB ratio per Application
• More memory on reqest (user consent)

• Persistance past a...
demo
Save last search locally
Build an Application
•   Step 1: Get Data
•   Step 2: Convert XML data to .NET objects
•   Step 3: Build UI
•   Step 4: Sa...
Open File Dialog
• End-Benutzer shares files
• Application gets access via streams (r/o)
• Multi-Selection (!)

• Usage:
 ...
demo
Play local video
HTML-DOM Integration
• Silverlight is hosted within HTML page

• Interop HTML <--> Silverlight important
  – JavaScript: C...
JavaScript --> Silverlight
[ScriptableType]
public class SharedClass
{
  [ScriptableMember()]
  public void SlMethod(strin...
Silverlight --> JavaScript
HtmlElement el =
       HtmlPage.Document.GetElementById("bla");

el.SetAttribute("value", "Hal...
Image Deep Zoom
• Displays large images
• Seamless zooming / postloading

• Only necessary parts of image are loaded

• Be...
Image Deep Zoom
• Deep Zoom Composer cuts
  image in
  256 x 256 tiles

• Creates different zoom
  levels
Deep Zoom – How does it work?
• Lowest resolution displayed first
• Background download of higher quality tiles --
  > fad...
Deep Zoom – How does it work?
• Lowest resolution displayed first
• Background download of higher quality tiles --
  > fad...
Deep Zoom – How does it work?
• Lowest resolution displayed first
• Background download of higher quality tiles --
  > fad...
Image Deep Zoom
• MultiScaleImage Object

• Deep Zoom Composer
Silverlight
• Local execution:
  – Better UX than HTML / AJAX
  – Smart-Client-Development way
• Flexible Deployment (embe...
Start developing for Silverlight
• Visual Studio 2008 + SP1

• Silverlight Developer Package

• Expression Blend 2 + SP1

...
Start developing for Silverlight
• Silverlight Toolkit
• Silverlight Dashboards & Gauges




• Silverlight Contrib
Max Knor
http://www.knor.net/
Building Rich Internet Apps with Silverlight 2
Building Rich Internet Apps with Silverlight 2
Próximos SlideShares
Carregando em…5
×

Building Rich Internet Apps with Silverlight 2

1.886 visualizações

Publicada em

Building Rich Internet Apps with Silverlight 2
Max Knor.

Ráðstefnan 2009

Publicada em: Tecnologia
  • Seja o primeiro a comentar

Building Rich Internet Apps with Silverlight 2

  1. 1. Silverlight 2 Smart-Web-Clients with .NET Max Knor Developer Evangelist Microsoft Austria http://www.knor.net
  2. 2. What is Silverlight ? • Browser-Plugin (4,63 MB) – Cross-Browser – Cross-Platform • Embedded in an HTML page Rich UI • Local Execution and – Smart-Client-Development Flexible deployment • Silverlight 2: integrated Mini-.NET
  3. 3. Developing for Silverlight • XAML for UI-design (Expression Blend) <UserControl x:Class="SlApp.Page"> ... </UserControl> • .NET Code behind (Visual Studio) public partial class Page : UserControl { ... }
  4. 4. Structure of a Silverlight App Root <object type= HTML/ASPX "application/x-silverlight-2-b1" File width="100%“ height="100%“ /> MyApp.XAP YourPage.XAML Resources Assemblies YourPage.CS
  5. 5. Silverlight 2 - Runtime Features • 2D, Graphics • .NET Support • Audio, Video – C# und VB.NET • Animations • LINQ • Text, Text Input • XML APIs • Controls • HTML Integration • Layout – JSON Serializer • Styles/Templates • Local Storage • Data Binding • Crypto APIs (AES) • Networking – HTTP/S & Sockets • Threading
  6. 6. Silverlight 2 - SDK Libraries • Dynamic Languages – JScript – IronRuby – IronPython • Additional Controls • LINQ for XML • XML Serialization • Syndication APIs (RSS)
  7. 7. Silverlight Futures • Silverlight for Mobile – Based on 2.0: RTW in 2009 – Windows Mobile, Nokia S40/S60 • Moonlight
  8. 8. Build an Application • Step 1: Get Data • Step 2: Convert XML data to .NET objects • Step 3: Build UI • Step 4: Save last search locally • Step 5: Access local data
  9. 9. Build an Application • Step 1: Get Data – Network data from site of origin – Network data from cross domain (x-domain) – Local data
  10. 10. 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 – Cross domain HTTP(S) requests • Support Silverlight and Subset of Flash policy files
  11. 11. Build an Application • Step 1: Get Data – Get data from http://catalog.video.msn.com/ – Secured via a Silverlight policy file
  12. 12. demo Networking
  13. 13. Build an Application • Step 1: Get Data • Step 2: Convert XML data to .NET objects – Options: • LINQ to XML • XMLReader • XML Serialization
  14. 14. demo Convert XML to Objects (XML -> List<VideoSource>)
  15. 15. Build an Application • Step 1: Get Data • Step 2: Convert XML data to .NET objects • Step 3: Build Main (Master) View
  16. 16. Build an Application • Step 1: Get Data • Step 2: Convert XML data to .NET objects • Step 3: Build UI
  17. 17. Silverlight 2 Controls • Canvas, Grid, StackPanel Silverlight SDK • FileOpenDialog • DataGrid • Image, MediaElement, • DatePicker, Calendar MultiScaleImage • TabControl, GridSplitter • ListBox, ComboBox • TextBox, PasswordBox Silverlight Toolkit • Button, HyperlinkButton • WrapPanel, DockPanel • CheckBox, RadioButton • NumericUpDown • Slider, ProgressBar, ScrollBar • AutoCompleteBox • TextBlock • TreeView • ToolTip, Popup • ViewBox, Charts
  18. 18. demo Build the UI
  19. 19. Build an Application • Step 1: Get Data • Step 2: Convert XML data to .NET objects • Step 3: Build UI • Step 4: Save last search locally
  20. 20. Local Storage • „Power-Cookies” • 10 MB ratio per Application • More memory on reqest (user consent) • Persistance past application runtime • .NET Isolated Storage APIs
  21. 21. demo Save last search locally
  22. 22. Build an Application • Step 1: Get Data • Step 2: Convert XML data to .NET objects • Step 3: Build UI • Step 4: Save last search locally • Step 5: Access local files
  23. 23. Open File Dialog • End-Benutzer shares files • Application gets access via streams (r/o) • Multi-Selection (!) • Usage: – File Uploads (with WebClient) – Display local files (Image, MediaElement)
  24. 24. demo Play local video
  25. 25. HTML-DOM Integration • Silverlight is hosted within HTML page • Interop HTML <--> Silverlight important – JavaScript: Call Silverlight methods – Silverlight: Access HTML elements and JS
  26. 26. JavaScript --> Silverlight [ScriptableType] public class SharedClass { [ScriptableMember()] public void SlMethod(string arg); } HtmlPage.RegisterScriptableObject("max", sc1); document.getElementById("xaml1") .content.max.SlMethod("bla");
  27. 27. Silverlight --> JavaScript HtmlElement el = HtmlPage.Document.GetElementById("bla"); el.SetAttribute("value", "Hallo"); el.AttachEvent("onclick", csEvent); HtmlPage.Window.Eval("window.alert('Silverlight!');");
  28. 28. Image Deep Zoom • Displays large images • Seamless zooming / postloading • Only necessary parts of image are loaded • Behaviour like „Virtual Earth”
  29. 29. Image Deep Zoom • Deep Zoom Composer cuts image in 256 x 256 tiles • Creates different zoom levels
  30. 30. Deep Zoom – How does it work? • Lowest resolution displayed first • Background download of higher quality tiles -- > faded in smoothly
  31. 31. Deep Zoom – How does it work? • Lowest resolution displayed first • Background download of higher quality tiles -- > faded in smoothly
  32. 32. Deep Zoom – How does it work? • Lowest resolution displayed first • Background download of higher quality tiles -- > faded in smoothly
  33. 33. Image Deep Zoom • MultiScaleImage Object • Deep Zoom Composer
  34. 34. Silverlight • Local execution: – Better UX than HTML / AJAX – Smart-Client-Development way • Flexible Deployment (embedded in websites) • Mini-.NET Framework – Well-Known APIs – XAML Subset of WPF – 4.5 MB vs. 80 MB
  35. 35. Start developing for Silverlight • Visual Studio 2008 + SP1 • Silverlight Developer Package • Expression Blend 2 + SP1 • Deep Zoom Composer
  36. 36. Start developing for Silverlight • Silverlight Toolkit • Silverlight Dashboards & Gauges • Silverlight Contrib
  37. 37. Max Knor http://www.knor.net/

×