This session demonstrates building a rich interactive application (RIA) using Silverlight. We cover how to use Microsoft Visual Studio to create applications, how to create UI using XAML markup and code, how to build a custom control, how to retrieve data from a Web service, znc how to manipulate data with XML and LINQ. (This is the second in a two-part series.)

2. Nick Kramer
Jamie Cool
.NET Framework Team
.NET Framework Team
Microsoft Corporation
Microsoft Corporation
nkramer@microsoft.com
jamiec@microsoft.com

3. Tons of stuff – 2+ talks worth!
Part 2
Part 1
HTTP Networking + XML
Silverlight + .NET Overview
Web Services
Getting Started
LINQ
Working with UI
HTML Integration
Building custom controls
Rounding it out

4. Web deployment
Need a ubiquitous platform
Need a secure sandboxed environment
Rich UI experiences beyond server generated HTML
Need a highly capable UI model
Signifigant client-side application logic
Need a highly productive development environment

5. Highly productive development Framework
Multi-language support, like C# & VB
Contains the latest innovation from Microsoft (ex. LINQ)
AJAX integration
Great tools with Visual Studio & Expression
Cross-platform & cross-browser plugin
Works with Safari, Firefox and IE on MAC & Windows
Fast, easy install process

6. Browser Host .NET for Silverlight
WPF
Data Networking
MS AJAX
Extensible Controls REST
LINQ XLINQ
POX
Library
RSS
BCL
DLR JSON
DOM
Generics Collections SOAP
Ruby Python
Integration
Legend
CLR Execution Engine
Application V1.1
Services
Legend
XAML
V1.0
Deploy
Presentation
Inputs
UI Core DRM
Keyboard Mouse Ink
Friction-Free Media
Core
Text
Vector
Installer Media Controls
Animation Images
Auto- Layout Editing
VC1 WMA MP3
Updater

7. .NET for Silverlight is a factored subset of full .NET
Desktop ~50 MB (Windows only)
Silverlight + .NET Alpha ~ 4 MB (cross platform)
Additional pieces of .NET available in a pay-for-play model
Same core development Framework
The shared apis & technologies are the same
The tools are the same
Highly compatible
Minimal changes needed to move from Silverlight to Desktop
However, not binary compatible by default

8. All apps run in the sandbox
Conceptually similar to the HTML DOM sandbox
Apps run just like HTML pages – just click a URL
No elevation prompts.
No way to get out of the sandbox
Includes some additional functionality:
Safe isolated storage
Client based file upload controls
Cross domain support in-work

10. Install the following:
Silverlight V1.1 Alpha
Visual Studio “Orcas” Beta 1
Silverlight Tools Alpha for Visual Studio quot;Orcasquot; Beta 1
Expression Blend 2 May Preview
ASP.NET Futures
Everything you need is at www.silverlight.net
Links to downloads & docs
VS object browser a great way to view APIs

11. A .NET silverlight app includes at least:
A root html file - Default.htm
Script load files - CreateSilverlight.js & Silverlight.js
A root xaml & assembly - YourApp.xaml & YourApp.dll
A .NET Silverlight app is also likely to include:
Other application libraries (your's, Microsoft's or 3rd parties)
Application resources (ex. xaml) – optionally embedded in assembly
Packaging
Loose file support in Alpha 1
Zip package support planned

14. XAML = eXtensible Application Markup Language
Flexible XML document schema
Examples: WPF, Silverlight, Workflow Foundation
More compact than code
Enables rich tooling support
While still preserving good readability and hand-coding within
text editors

15. <Canvas
xmlns=quot;http://schemas.microsoft.com/client/2007quot;
>
<TextBlock FontSize=quot;32quot; Text=quot;Hello worldquot; />
</Canvas>
Hello world

16. <TextBlock FontSize=quot;32quot; Text=quot;Hello worldquot; />
=
TextBlock t = new TextBlock();
t.FontSize = 32;
t.Text = quot;Hello worldquot;;

17. Is a Drawing Surface
Children have relative positions:
<Canvas Width=quot;250quot; Height=quot;200quot;>
<Rectangle Canvas.Top=quot;25quot; Canvas.Left=quot;25quot;
Width=quot;200quot; Height=quot;150quot; Fill=quot;Yellowquot; />
</Canvas>
The Canvas
The Rectangle

18. Position relative to first Canvas parent:
<Canvas Background=quot;Light Grayquot;>
<Canvas Canvas.Top=quot;25quot; Canvas.Left=quot;25quot;
Width=quot;150quot; Height=quot;100quot;
Background=quot;Redquot;>
<Ellipse Canvas.Top=quot;25quot;
Canvas.Left=quot;25quot;
Width=quot;150quot;
Height=quot;75quot;
Fill=“Whitequot; />
</Canvas>
</Canvas>

19. <Canvas>
<Rectangle/>
</Canvas>
=
Canvas canvas = new Canvas();
Rectangle rectangle = new Rectangle();
canvas.Children.Add(rectangle);

20. <Canvas>
<Rectangle Canvas.Top=quot;25quot;/>
</Canvas>
Top property only make sense inside a Canvas
When we add new layouts, do we add new properties to
Rectangle?
Solution: attached properties!

21. <Rectangle Canvas.Top=quot;25quot; Canvas.Left=quot;25quot;/>
=
Rectangle rectangle = new Rectangle();
rectangle.SetValue(Canvas.TopProperty, 25);
rectangle.SetValue(Canvas.LeftProperty, 25);

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

24. <TextBlock Text=quot;Hello Worldquot;>
<TextBlock.RenderTransform>
<RotateTransform Angle=quot;45quot; />
</TextBlock.RenderTransform>
</TextBlock>

25. Property values can be complex objects
Use “property elements” to represent them in XML
<SomeClass.SomeProperty>

26. <TextBlock>
<TextBlock.RenderTransform>
<RotateTransform Angle=quot;45quot; />
</TextBlock.RenderTransform>
</TextBlock>
=
TextBlock block = new TextBlock;
RotateTransform transform = new RotateTransform();
Transform.Angle = 45;
block.RenderTransform = transform;

28. MouseMove KeyUp
MouseEnter KeyDown
MouseLeave GotFocus
MouseLeftButtonDown LostFocus
MouseLeftButtonUp Loaded

29. <Canvas xmlns=quot;…quot; xmlns:x=quot;…quot;
MouseEnter=quot;OnMouseEnterquot;>
</Canvas>
=
Canvas canvas = new Canvas();
canvas.MouseEnter += OnMouseEnter;
// or more explicitly:
canvas.MouseEnter += new MouseEventHandler(OnMouseEnter);

30. <Canvas xmlns=quot;…quot; xmlns:x=quot;…quot;
Height=quot;100quot; Width=quot;100quot; Background=quot;Redquot;
x:Name=“canvas”
/>
</Canvas>
Private Sub something _
(ByVal o As Object, ByVal e As MouseEventArgs) _
Handles canvas.MouseEnter
rectangle.Fill = New SolidColorBrush(Colors.Green)
End Sub

31. <Canvas xmlns=quot;…quot; xmlns:x=quot;…quot;
Height=quot;100quot; Width=quot;100quot; Background=quot;Redquot;
MouseEnter=quot;OnMouseEnterquot;
/>
</Canvas>
void OnMouseEnter(object sender, MouseEventArgs e) {
…
}

32. Name your xaml element so you can use it in code
<Rectangle x:Name=“rect”/>
void OnMouseEnter(object sender, MouseEventArgs e) {
rect.Height = 75;
}

33. Custom Element = custom class
(Markup = object model)
Use XML namespaces
<prefix:CustomClass/>
XML namespace declaration tells where to find class
xmlns:prefix=
quot;clr-namespace:SomeNamespace;
assembly=SomeAssembly.dllquot;

35. Derive from Control
Eg, public class MyControl : Control
Define the look of the control in xaml
Call InitializeFromXaml(xaml)
Remember the return value

36. Have a public parameterless constructor
Eg, public MyControl()
Create public properties
Create public events

38. In terms of graphics/UI/XAML:
v1.1 =
v1.0
+ managed code (CLR)
+ XAML extensibility
+ Control class (user control)
+ sample controls

39. 1.1 alpha 1.1 thinking WPF
Button Sample Yes Yes
TextBox (edit) No Yes Yes
Scrollbar Sample Yes Yes
Slider Sample Yes Yes
ListBox Sample Yes Yes
CheckBox No Yes Yes
RadioButton No Yes Yes
ComboBox No Yes Yes

40. 1.1 alpha 1.1 thinking WPF
TreeView No No Yes
3rd party
Accordion No No
3rd party
DataGrid No No
UserControl Yes Yes Yes

41. 1.1 alpha 1.1 thinking WPF
Canvas Yes Yes Yes
Grid (table) No Yes Yes
StackPanel No Yes Yes
Viewbox No Yes Yes

42. 1.1 alpha 1.1 thinking WPF
Mouse events Partial Yes Yes
Keyboard Partial Yes Yes
events
<.Resources> Partial Yes Yes
Data binding No Yes Yes
styling No Yes Yes

43. 1.1 alpha 1.1 thinking WPF
3D No No Yes
Hardware No No Yes
acceleration
Out of browser No No Yes
Off-line No No Yes
Cross-platform Yes Yes No

45. HTTP Networking + XML
Web Services
LINQ
HTML Integration
Rounding it out
Resources

47. Browser based headers/cookies passed with request
Restricted to same domain access in the Alpha
Cross-domain coming
Make the HTTP Request
Uri dataLocation = new Uri(quot;http://localhost/playerdata.xmlquot;);
BrowserHttpWebRequest request = new BrowserHttpWebRequest(dataLocation);
HttpWebResponse response = (HttpWebResponse)request.GetResponse();
Process the response
StreamReader responseReader = new
StreamReader(response.GetResponseStream());
string RawResponse = responseReader.ReadToEnd();

48. Core XML reading & writing capabilities in the alpha
RAD XLINQ support coming
Initialize the reader
XmlReader xr = XmlReader.Create(new StringReader(RawResponse));
Find a node & read it’s value
xr.ReadToFollowing(quot;Playerquot;);
string playerNodeText = xr.Value;
string playerNameAttribute = xr.GetAttribute(quot;Namequot;);

51. VS based Proxy Generator enables strongly typed access
ASP.NET JSON services supported in the Alpha
WCF & SOAP support coming
The Web Service to Call
[WebMethod]
public List<Player> GetPlayerList() { ... }
Call the Web Service from the client
baseballService = new BaseballData();
playerList = baseballService.GetPlayerList().ToList();

52. Sync & Async web services supported in the Alpha
General purpose RAD async support coming
Start the async web service call
baseballService.BeginGetPlayerList(
new AsyncCallback(OnPlayerDataLoaded), null);
Handle the web service completion event
private void OnPlayerDataLoaded(IAsyncResult iar)
{
playerList = baseballService.EndGetPlayerList(iar).ToList();
}

54. Works with any Web server
Only requirement is to serve Silverlight files to the browser
Ex. xaml, assemblies, resources
ASP.NET is a great platform for Silverlight applications
Use ASP.NET & WCF services from Silverlight
Integrate Media into an ASPX page
Integrate Silverlight content into an ASPX page
Leverage ASP.NET AJAX Extensions and ASP.NET Futures
(May 2007)
Other integration points under way…

56. LINQ = Language INtegrated Query
Allows query expressions to benefit from compile-time
syntax checkking, static typing & Intellisense
Works on any IEnumerable<T> based info source
Return all players with 20+ home runs, sorted
var filteredPlayers = from p in players
where p.HomeRuns > 20
orderby p.HomeRuns descending
select p;

57. Supports querying on in memory datasources
Other LINQ technologies forthcoming:
XLINQ = LINQ for XML
Query, parse, create XML
DLINQ = LINQ for relational data
Query, edit, create relational data

60. HTML access availble in new namespace
using System.Windows.Browser;
Static HtmlPage class provides entry point
HtmlPage.Navigate(quot;http://www.microsoft.comquot;);
String server = HtmlPage.DocumentUri.Host;
Hookup events, call methods, or access properties
HtmlElement myButton = HtmlPage.Document.GetElementByID(quot;myButtonIDquot;);
myButton.AttachEvent(quot;onclickquot;, new EventHandler(this.myButtonClicked));
private void myButtonClicked(object sender, EventArgs e) { ... }

61. Mark a property, method or event as Scriptable:
[Scriptable]
public void Search(string Name) { … }
Register a scriptable object:
WebApplication.Current.RegisterScriptableObject(quot;BaseballDataquot;, this);
Access the managed object from script:
var control = document.getElementById(quot;Xaml1quot;);
control.Content.BaseballData.Search(input.value);

62. Other interesting HTML integration scenarios:
Persisent links
Fwd/Back Integration
Notes:
Simple type marshalling only in the Alpha
Complex type support on the way

65. Enables debugging of Silverlight code on the MAC
Requires a proxy client installed on the MAC
Proxy & setup instructions can be found at:
C:Program FilesMicrosoft Visual Studio
9.0SilverlightMacIntel
Proxy must be running prior to browser activation

67. Dynamic Languages
Javascript, Python, Ruby
Application Services
Isolated Storage
Safe File Open
ASP.NET Integration
Find out more about these technologies in upcoming sessions…

68. Talk Time
Tues – 11:45
Just Glue It! Dynamic Languages in Silverlight
Tues – 11:45
Developing ASP.NET AJAX Controls with Silverlight
Deep Dive on Silverlight Media Integration Tues - 2:15
Wens – 9:45
Extending the Browser Programming Model with
Silverlight
Wens – 11:30
Building Rich, Interactive E-commerce Applications
Using ASP.NET and Silverlight

69. Give us feedback
Features you like?
Features you don’t?
What do you want to build?
What existing code & skills will you leverage?

71. Font, size, and color for text have been formatted for you
in the Slide Master
Use the color palette shown below
See next slide for additional guidelines
Sample Fill Sample Fill Sample Fill
Sample Fill Sample Fill Sample Fill

72. Name
Title
Group

74. Name
Title
Group

75. Name
Title
Group

78. © 2007 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.
The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions,
it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation.
MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

79. Backup

80. Silverlight
Factored CLR Execution engine .NET Framework
Full type system (generics, WPF HTML Bridge
collections, etc..) App Model & Services
Framework Libraries
Factored Framework libraries DLR
XML NET (Ruby, Pyt
hon)
Leightweight subset of .NET for LINQ
BCL
V1.1
web applications Execution Engine
Extensible Platform
Presentation and Media Runtime
V1
Updater denables a model for agile Controls
evolutoin of the platform Inputs (Key, Mouse, Ink) Browser
Sandboxed assemblies can be Hosting
Media (VC1, WMA, MP3)
deployed with the application UI Core (Text, Vector, Animation)
Friction-free Installer & Updater