View
2.723
Download
2
Embed Size (px)
DESCRIPTION
Session for beginners that covers the basics of Microsoft Silverlight for developers.
Citation preview
JumpStart: Silverlight
Clint EdmonsonArchitect EvangelistMicrosoftEmail: [email protected]: http://www.notsotrivial.netTwitter: @clinted
What is Silverlight?
Silverlight Experience
Rich Internet Applications• Cross platform, cross-browser, cross device plug-in• Fast, seamless installation• Vector based layout and
animation engine• Productive design &
development environments
Refactored subset of .NET & WPF
Development Tools
Development Tools•XamlPad•XamlPadX•Kaxaml• Silverlight Spy• Expression Blend• See my and Denny’s sessions later today for more!
•Visual Studio 2008 + Silverlight SDK
Anatomy of a Silverlight Application
Silverlight Component
(XAML, .NET)
AJAX Control(Script)
ASP.NET AJAX Server Control
Silverlight on the Server• Silverlight works with any server• Only requirement is to serve up XAML, assemblies etc.• Leverage JavaScript to improve experience
• ASP.NET AJAX adds further integration to the experience• <asp:xaml>• <asp:media>• More coming…
Silverlight Architecture
XAML
Browser Host
Integrated Networking
Stack
DOM Integration
InstallerJavaScript
Engine
Presentation Core
.NET for Silverlight
Inputs
KeyboardMouse
Ink
Media
WMV / VC1WMAMP3
Controls
LayoutEditing
UI Core
2D VectorsAnimation
Text
ImagesTransform
s
DRM
Media
Dynamic Languages
Ruby Python
BCL
GenericsCollections
Web Services
RESTRSS
SOAP
POXJSON
Data
LINQ LINQ-to-XML
WPF for SilverlightExtensible Controls
Silverlight Common Language Runtime
ASP.NET AJAX
<asp:xaml><asp:media>
Server
XAML Primer
Declarative Programming Through XAML
Extensible Application Markup Language•Toolable, declarative markup•Code and content are separate•Compatible with Windows Presentation
Foundation
<Button Width="100"> OK <Button.Background> LightBlue </Button.Background></Button>
XAML
Button b1 = new Button();b1.Content = "OK";b1.Background = new SolidColorBrush(Colors.LightBlue);b1.Width = 100;
C#
Dim b1 As New Buttonb1.Content = "OK"b1.Background = New _ SolidColorBrush(Colors.LightBlue)b1.Width = 100
VB.NET
Control Libraries
Controls
• 60 Native Controls
• Open Source Toolkit
• Rich third party ecosystem for domain specific controls
• Canvas, Grid, & StackPanel will become your new best
friends
Data Binding
Databinding• Two way data binding from User interface to business
objects • Notification via INotifyPropertyChanged• DataContext is inherited via Visual Tree
• From XAML <TextBlock Text="{Binding Nasdaq.Points, Mode=OneWay}"/>
• From code Binding binding = new Binding("Nasdaq.Points");binding.Mode = BindingMode.OneWay;TextBlock tb = new TextBlock();tb.SetBinding(TextBlock.TextProperty, binding);
Data Templates
DataTemplate
<DataTemplate x:Key="carTemplate"> <Border BorderBrush="Blue" BorderThickness="2" Background="LightGray" Margin="10" Padding="15,15,15,5"> <StackPanel> <Image HorizontalAlignment="Center" Source="{Binding Path=Image}" /> <Border HorizontalAlignment="Center" BorderBrush="Navy" Background="#DDF“ BorderThickness="1" Margin="10" Padding="3"> <TextBlock FontSize="18" TextContent="{Binding Path=Model}" /> </Border> </StackPanel> </Border></DataTemplate>
class Car{ string Image {get;set} string Model {get;set]}
Advanced Features
Flexible User Experience Options• Seamless installation & auto-update•Change download progress look & feel• Full screen mode•Out of Browser Experience• Start menu & desktop shortcuts• Internet connection detection
Styling• Resource definition templates to define look & feel
Templating • Replace the ‘parts’ that define the look of a control to
create a completely different look, but behavior is the same.
Isolated Storage• Stream based access to a private file/directory structure• Patterned after .NET Framework IsolatedStorage classes• Read and write string or binary data• Store is per application XAP• Application code to request size increase
• User prompt to accept quota increase• Quotas fall into predetermined size slots• Code must initiate increase size call from within user
input/event
OpenFileDialog, SaveFileDialog• Provides native OS experience• Sandboxed API returns safe filename and readable
stream• Support for multiple files
// Create file dialogOpenFileDialog ofd= new OpenFileDialog();ofd.Filter = "Text Files (*.txt)|*.txt|All files (*.*)|*.*";if (ofd.ShowDialog() == DialogResult.OK) {
HTML/AJAX and .NET integration
Javascript
.NETlanguage
webpage
HTMLSilverlig
ht
HTMLHTML +
Silverlight
webpage
Access the HTML DOM from Managed Code
HTML access available in new namespace
HtmlPage.Navigate("http://www.microsoft.com");String server = HtmlPage.DocumentUri.Host;
HtmlPage.Navigate("http://www.microsoft.com");String server = HtmlPage.DocumentUri.Host;
using System.Windows.Browser;using System.Windows.Browser;
HtmlElement myButton = HtmlPage.Document.GetElementByID("myButtonID");myButton.AttachEvent("onclick", new EventHandler(this.myButtonClicked));
private void myButtonClicked(object sender, EventArgs e) { ... }
HtmlElement myButton = HtmlPage.Document.GetElementByID("myButtonID");myButton.AttachEvent("onclick", new EventHandler(this.myButtonClicked));
private void myButtonClicked(object sender, EventArgs e) { ... }
Static HtmlPage class provides entry point
Hookup events, call methods, or access properties
Access Managed Code from JavaScript1.- Mark a property, method or event as [Scriptable]
HtmlPage.RegisterScriptableObject ("EntryPoint", this);HtmlPage.RegisterScriptableObject ("EntryPoint", this);
[ScriptableMember]public void Search(string Name) { ... }
[ScriptableMember]public void Search(string Name) { ... }
var control = document.getElementById("SilverlightControl");control.Content.EntryPoint.Search(input.value);
var control = document.getElementById("SilverlightControl");control.Content.EntryPoint.Search(input.value);
2.- Register a scriptable object
3.- Access the managed object from script
Streaming Media ExperienceCost effective, high quality video for all major browsers• Based on WMA and WMV ecosystem• Media processing tools provided for live and on-
demand publishing• Supports HD video encoding• Scales gracefully to lower end hardware• Digital Rights Management support
DeepZoom• Navigates images of any size and resolution
optimizing network bandwidth and download size. • Seamless transitions as you zoom and pan.
Easy Line of Business AppsCost effective, high quality video for all major browsers• Navigation Framework• RIA Data Services
Designer + DeveloperExperience
Designer/Developer Collaboration
=
Desktop
Media& RIA
Server, Services
Tooling
DesignerLook, behavior, brand,and emotional connection
DeveloperFunction, deployment, data,
security, operational integrity
Server Win7
XAML
Next Steps…• Community Site: http://silverlight.net • Main Product Site:
http://www.microsoft.com/silverlight • MSDN Center: http://msdn.microsoft.com/silverlight • Online Forums: http://silverlight.net/forums• Online SDK:
http://msdn2.microsoft.com/bb188266.aspx
• Top Silverlight Blogs• Tim Sneath: http://blogs.msdn.com/tims • Mike Harsh: http://blogs.msdn.com/mharsh • Joe Stegman: http://blogs.msdn.com/jstegman • Laurence Moroney: http://blogs.msdn.com/webnext • Ernie Booth: http://blogs.msdn.com/ebooth
• Follow @MSExpression on Twitter
Thank you!
Clint EdmonsonArchitect EvangelistMicrosoftEmail: [email protected]: http://www.notsotrivial.netTwitter: @clinted
Networking
Networking • Asynchronous HTTP requests• GET/POST • Access to most headers, cookies,
• Uses browser networking stack • Caching, authentication, proxy , compression
Web Services• SOAP 1.1 • Basic profile• A few restrictions (e.g. SOAP Faults not supported)
• Asynchronous invocation• Follows cross-domain policy restrictions• Generated proxies support data binding
Sockets • TCP only • Asynchronous API • No explicit bind and no listen/accept support • Restricted ports (4502-4534) • Cross Domain based on provisioning server
void Connect(AddressFamily family){ SocketAsyncEventArgs connectArgs = new SocketAsyncEventArgs(); connectArgs.RemoteEndPoint = new DnsEndPoint( Application.Current.Host.Source.Host, 4502); connectArgs.Completed += new EventHandler<SocketAsyncEventArgs>(OnConnectCompleted); socket = new Socket(family, SocketType.Stream, ProtocolType.Tcp); if (!socket.ConnectAsync(connectArgs)) OnConnectCompleted(socket, connectArgs);}
Cross-domain support • 2 formats: • Flash policy file• Silverlight policy file
<?xml version="1.0"?><!DOCTYPE cross-domain-policy SYSTEM "http://www.macromedia.com/xml/dtds/cross-domain-policy.dtd"><cross-domain-policy> <allow-access-from domain="*" /></cross-domain-policy>
Cross-domain.xml
clientaccesspolicy.xml
<?xml version="1.0"?><access-policy> <cross-domain-access> <policy> <allow-from> <domain uri="http://customers.shop.com”/>" <domain uri="http://partner.com/app.xap"/> </allow-from> <grant-to> <grant path="/sales/serialnumbers.xml" /> <grant path="/partners" include-subpaths="false"/> </grant-to> </policy> </cross-domain-access></access-policy>