Michael Kordahi delicategeniusblog.com From Rich to Reach Silverlight 2 and IE8.
-
Upload
bethanie-fowler -
Category
Documents
-
view
215 -
download
0
Transcript of Michael Kordahi delicategeniusblog.com From Rich to Reach Silverlight 2 and IE8.
![Page 1: Michael Kordahi delicategeniusblog.com From Rich to Reach Silverlight 2 and IE8.](https://reader035.fdocuments.us/reader035/viewer/2022062423/5697c0281a28abf838cd6f33/html5/thumbnails/1.jpg)
![Page 2: Michael Kordahi delicategeniusblog.com From Rich to Reach Silverlight 2 and IE8.](https://reader035.fdocuments.us/reader035/viewer/2022062423/5697c0281a28abf838cd6f33/html5/thumbnails/2.jpg)
Michael Kordahidelicategeniusblog.com
![Page 3: Michael Kordahi delicategeniusblog.com From Rich to Reach Silverlight 2 and IE8.](https://reader035.fdocuments.us/reader035/viewer/2022062423/5697c0281a28abf838cd6f33/html5/thumbnails/3.jpg)
From Rich to Reach
Silverlight 2 and IE8
![Page 4: Michael Kordahi delicategeniusblog.com From Rich to Reach Silverlight 2 and IE8.](https://reader035.fdocuments.us/reader035/viewer/2022062423/5697c0281a28abf838cd6f33/html5/thumbnails/4.jpg)
HTML + JavaScript
dedicated hardware+software
ASP.NET AJAX
browser enriched(silverlight)
desktop app (WPF/XBAP)
![Page 5: Michael Kordahi delicategeniusblog.com From Rich to Reach Silverlight 2 and IE8.](https://reader035.fdocuments.us/reader035/viewer/2022062423/5697c0281a28abf838cd6f33/html5/thumbnails/5.jpg)
SILVERLIGHT 2The Rich
![Page 6: Michael Kordahi delicategeniusblog.com From Rich to Reach Silverlight 2 and IE8.](https://reader035.fdocuments.us/reader035/viewer/2022062423/5697c0281a28abf838cd6f33/html5/thumbnails/6.jpg)
![Page 7: Michael Kordahi delicategeniusblog.com From Rich to Reach Silverlight 2 and IE8.](https://reader035.fdocuments.us/reader035/viewer/2022062423/5697c0281a28abf838cd6f33/html5/thumbnails/7.jpg)
![Page 8: Michael Kordahi delicategeniusblog.com From Rich to Reach Silverlight 2 and IE8.](https://reader035.fdocuments.us/reader035/viewer/2022062423/5697c0281a28abf838cd6f33/html5/thumbnails/8.jpg)
Media: Supported Media File Formats
Video Formats
WMV (VC-1, v.7, v.8, and v.9)
Audio Formats
WMA (v.7, v.8, and v.9), MP3
WMA 10 Pro (new in SL2)
![Page 9: Michael Kordahi delicategeniusblog.com From Rich to Reach Silverlight 2 and IE8.](https://reader035.fdocuments.us/reader035/viewer/2022062423/5697c0281a28abf838cd6f33/html5/thumbnails/9.jpg)
More Media
Adaptive Streaming• Encode multiple bitrates• Silverlight switches based on CPU and
Network load• Extensible (BYO algorithm)
DRM• DRM9/10• PlayReady
Server side playlists
![Page 10: Michael Kordahi delicategeniusblog.com From Rich to Reach Silverlight 2 and IE8.](https://reader035.fdocuments.us/reader035/viewer/2022062423/5697c0281a28abf838cd6f33/html5/thumbnails/10.jpg)
Media: Bitrate Throttling
• No bandwidth control with traditional HTTP downloads
• Drop-off point in videos:• Microsoft.com ~ 40%• Typical video site < 20%
![Page 11: Michael Kordahi delicategeniusblog.com From Rich to Reach Silverlight 2 and IE8.](https://reader035.fdocuments.us/reader035/viewer/2022062423/5697c0281a28abf838cd6f33/html5/thumbnails/11.jpg)
Media: Bitrate Throttling
![Page 12: Michael Kordahi delicategeniusblog.com From Rich to Reach Silverlight 2 and IE8.](https://reader035.fdocuments.us/reader035/viewer/2022062423/5697c0281a28abf838cd6f33/html5/thumbnails/12.jpg)
Controls: Built-In
![Page 13: Michael Kordahi delicategeniusblog.com From Rich to Reach Silverlight 2 and IE8.](https://reader035.fdocuments.us/reader035/viewer/2022062423/5697c0281a28abf838cd6f33/html5/thumbnails/13.jpg)
Controls: Silverlight Toolkit
AutoCompleteBox NumericUpDown Viewbox Expander
ImplicitStyleManager Charting TreeView DockPanel
WrapPanel Label HeaderedContentControl HeaderedItemsControl
http://www.codeplex.com/Silverlight/
![Page 14: Michael Kordahi delicategeniusblog.com From Rich to Reach Silverlight 2 and IE8.](https://reader035.fdocuments.us/reader035/viewer/2022062423/5697c0281a28abf838cd6f33/html5/thumbnails/14.jpg)
Silverlight is designed for UI flexibility
Customize the look of an application without changing it’s behavior
2 levels of customization:
• Styling: Small visual changes on an element (Font, background color, etc)
• Skinning: Replacing an element’s entire visual tree
UI Customization
![Page 15: Michael Kordahi delicategeniusblog.com From Rich to Reach Silverlight 2 and IE8.](https://reader035.fdocuments.us/reader035/viewer/2022062423/5697c0281a28abf838cd6f33/html5/thumbnails/15.jpg)
Theming: Silverlight Toolkit
http://www.codeplex.com/Silverlight/
![Page 16: Michael Kordahi delicategeniusblog.com From Rich to Reach Silverlight 2 and IE8.](https://reader035.fdocuments.us/reader035/viewer/2022062423/5697c0281a28abf838cd6f33/html5/thumbnails/16.jpg)
Layout containers• Canvas, Grid, StackPanel, Border
Layout properties• Width, MinWidth, MaxWidth, ActualWidth
• Height, MinHeight, MaxHeight, ActualHeight
• Margin and Padding
Layout Controls
![Page 17: Michael Kordahi delicategeniusblog.com From Rich to Reach Silverlight 2 and IE8.](https://reader035.fdocuments.us/reader035/viewer/2022062423/5697c0281a28abf838cd6f33/html5/thumbnails/17.jpg)
Cross Domain Policy Support (Silverlight and Flash policy files)
Socket Support
Background network treading (asynchronous data)
• Socket and HTTP
Duplex Communication (ServerPush)
• Using WCF
• Instant Apps, Monitoring, Chat etc
ADO.NET Data Services
• ADO.NET Data Services ships in .NET 3.5 SP1
• Silverlight has client access bits (REST)
Network
![Page 18: Michael Kordahi delicategeniusblog.com From Rich to Reach Silverlight 2 and IE8.](https://reader035.fdocuments.us/reader035/viewer/2022062423/5697c0281a28abf838cd6f33/html5/thumbnails/18.jpg)
Asynchronous web services supported
proxy.BeginGetTransactionList( new AsyncCallback(OnTransactionDataLoaded),
null);
private void OnTransactionDataLoaded(IAsyncResult iar){ transactionList = proxy.EndGetTransactionList(iar).ToList();}
Start the async web service call
Handle the web service completion event
Asynchronous Support
![Page 19: Michael Kordahi delicategeniusblog.com From Rich to Reach Silverlight 2 and IE8.](https://reader035.fdocuments.us/reader035/viewer/2022062423/5697c0281a28abf838cd6f33/html5/thumbnails/19.jpg)
Core XML reading & writing capabilities
LINQ to XML
XmlReader xr = XmlReader.Create(new StringReader(RawResponse));
xr.ReadToFollowing("Item");string playerNodeText = xr.Value;string playerNameAttribute = xr.GetAttribute("Name");
Initialise the reader
Find a node and read its value
XmlReader & XmlWriter
![Page 20: Michael Kordahi delicategeniusblog.com From Rich to Reach Silverlight 2 and IE8.](https://reader035.fdocuments.us/reader035/viewer/2022062423/5697c0281a28abf838cd6f33/html5/thumbnails/20.jpg)
LINQ = Language INtegrated Query • Allows query expressions to benefit from compile-time
syntax checking, static typing & Intellisense
• Works on any IEnumerable<T>-based source
Supports querying of in-memory data sources
var filteredPlayers = from p in players where p.HomeRuns > 20 orderby p.HomeRuns descending select p;
Return all players with more than twenty home runs, sorted
LINQ
![Page 21: Michael Kordahi delicategeniusblog.com From Rich to Reach Silverlight 2 and IE8.](https://reader035.fdocuments.us/reader035/viewer/2022062423/5697c0281a28abf838cd6f33/html5/thumbnails/21.jpg)
{{FileName=“Html.html”, FileImageUrl=“html.jpg”},{FileName=“Image.jpg”, FileImageUrl=“jpg.jpg”}}
Data Template:
Data (.NET Object):
Bind using ItemsControl (List Control):
Data Binding
![Page 22: Michael Kordahi delicategeniusblog.com From Rich to Reach Silverlight 2 and IE8.](https://reader035.fdocuments.us/reader035/viewer/2022062423/5697c0281a28abf838cd6f33/html5/thumbnails/22.jpg)
Silverlight lives in the browser Sandbox
Developers cannot extend the sandbox
Silverlight extends in a secure way• Local storage (isolated storage)
• Cookies on roids
• 1 MB
• Extendable by user initiation
• FileOpen dialog …
Silverlight Sandbox
![Page 23: Michael Kordahi delicategeniusblog.com From Rich to Reach Silverlight 2 and IE8.](https://reader035.fdocuments.us/reader035/viewer/2022062423/5697c0281a28abf838cd6f33/html5/thumbnails/23.jpg)
HTML access available in new namespace
HtmlPage.Navigate("http://www.microsoft.com");String server = HtmlPage.DocumentUri.Host;
using System.Windows.Browser;
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 the HTML DOM from Managed Code
![Page 24: Michael Kordahi delicategeniusblog.com From Rich to Reach Silverlight 2 and IE8.](https://reader035.fdocuments.us/reader035/viewer/2022062423/5697c0281a28abf838cd6f33/html5/thumbnails/24.jpg)
Mark a property, method or event as [Scriptable]
WebApplication.Current.RegisterScriptableObject ("EntryPoint", this);
[Scriptable]public void Search(string Name) { ... }
var control = document.getElementById("SilverlightControl");control.Content.EntryPoint.Search(input.value);
Register a scriptable object
Access the managed object from script
Access Managed Code from JavaScript
![Page 25: Michael Kordahi delicategeniusblog.com From Rich to Reach Silverlight 2 and IE8.](https://reader035.fdocuments.us/reader035/viewer/2022062423/5697c0281a28abf838cd6f33/html5/thumbnails/25.jpg)
• 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
Deep Zoom
![Page 26: Michael Kordahi delicategeniusblog.com From Rich to Reach Silverlight 2 and IE8.](https://reader035.fdocuments.us/reader035/viewer/2022062423/5697c0281a28abf838cd6f33/html5/thumbnails/26.jpg)
<DEMO />Silverlight 2
![Page 27: Michael Kordahi delicategeniusblog.com From Rich to Reach Silverlight 2 and IE8.](https://reader035.fdocuments.us/reader035/viewer/2022062423/5697c0281a28abf838cd6f33/html5/thumbnails/27.jpg)
Hot off the press
H.264 supportGPU Hardware Acceleration
3D
3
![Page 28: Michael Kordahi delicategeniusblog.com From Rich to Reach Silverlight 2 and IE8.](https://reader035.fdocuments.us/reader035/viewer/2022062423/5697c0281a28abf838cd6f33/html5/thumbnails/28.jpg)
IE8The Reach
![Page 29: Michael Kordahi delicategeniusblog.com From Rich to Reach Silverlight 2 and IE8.](https://reader035.fdocuments.us/reader035/viewer/2022062423/5697c0281a28abf838cd6f33/html5/thumbnails/29.jpg)
Internet Explorer 8
Standards Interoperability Improvements• CSS 2.1, HTML 4.01, HTML 5 DOM Storage, etc. • Multiple rendering modes support, Acid2 test passes!
New Features• Accelerators (The artist formerly known as Activities)• WebSlices• Visual Search• Favorites bar • AJAX Improvements• Automatic crash recovery• Security Features
Platform Enhancements• Performance improvements• Developer tools
![Page 30: Michael Kordahi delicategeniusblog.com From Rich to Reach Silverlight 2 and IE8.](https://reader035.fdocuments.us/reader035/viewer/2022062423/5697c0281a28abf838cd6f33/html5/thumbnails/30.jpg)
Versioning and IE Modes
Compatibility Modes IE8 Standard (default) – CSS 2.1-compliant IE7 Emulation – backward compatibility with IE7 IE5 Compatible – IE5 rendering behavior
Mode Switches (Opt-in) HTTP header: X-UA-Compatible: IE=7
– For example, Web.Config in IIS7:<httpProtocol> <customHeaders> <clear /> <add name="X-UA-Compatible" value="IE=7" /> </customHeaders> </httpProtocol>
JavaScript: document.documentMode Meta tag: <meta http-equiv="X-UA-Compatible" content="IE=7">
•IE=8IE8 Standards
•IE=7IE7 Emulation
•IE=5IE5 Compatible
•IE=edgeHighest Possible
![Page 31: Michael Kordahi delicategeniusblog.com From Rich to Reach Silverlight 2 and IE8.](https://reader035.fdocuments.us/reader035/viewer/2022062423/5697c0281a28abf838cd6f33/html5/thumbnails/31.jpg)
Compatibility View
![Page 32: Michael Kordahi delicategeniusblog.com From Rich to Reach Silverlight 2 and IE8.](https://reader035.fdocuments.us/reader035/viewer/2022062423/5697c0281a28abf838cd6f33/html5/thumbnails/32.jpg)
Accelerators
Contextual Menu Options• Based on content selection• “look up” & “send to” external services• In-place content preview
Implementation• OpenService Activity XML descriptor
http://www.microsoft.com/schemas/openservicedescription/1.0
• HTTP GET/POST• JavaScript integration
window.external.AddService() & IsServiceInstalled()
![Page 33: Michael Kordahi delicategeniusblog.com From Rich to Reach Silverlight 2 and IE8.](https://reader035.fdocuments.us/reader035/viewer/2022062423/5697c0281a28abf838cd6f33/html5/thumbnails/33.jpg)
OpenService Format
<?xml version="1.0" encoding="utf-8" ?> <os:openServiceDescription
xmlns:os="http://www.microsoft.com/schemas/openservicedescription/1.0"> <os:homepageUrl>http://maps.live.com</os:homepageUrl> <os:display> <os:name>Map with Live Maps</os:name> <os:icon>http://maps.live.com/favicon.ico</os:icon> </os:display> <os:activity category="Map"> <os:activityAction context="selection"> <os:execute method="get“
action="http://maps.live.com/default.aspx?where1={selection}" /> <os:preview method="get" action="http://maps.live.com/geotager.aspx"> <os:parameter name="b" value="{selection}" />
<os:parameter name="clean" value="true" /> <os:parameter name="w" value="320" /> <os:parameter name="h" value="240" /> <os:parameter name="format" value="full" />
</os:preview> </os:activityAction> </os:activity></os:openServiceDescription>
![Page 34: Michael Kordahi delicategeniusblog.com From Rich to Reach Silverlight 2 and IE8.](https://reader035.fdocuments.us/reader035/viewer/2022062423/5697c0281a28abf838cd6f33/html5/thumbnails/34.jpg)
Web Slices
Page Content Subscription• RSS-based subscriptions to portions of a Web page• Favorites Bar with update notification• Content-hover discovery• In-place content preview
Implementation• Enabled by adding HTML annotations• hAtom Microformat and Web Slice format• Refresh interval configurable
Sample HTML Annotations …
![Page 35: Michael Kordahi delicategeniusblog.com From Rich to Reach Silverlight 2 and IE8.](https://reader035.fdocuments.us/reader035/viewer/2022062423/5697c0281a28abf838cd6f33/html5/thumbnails/35.jpg)
Add Web Slice delicategeniusblog.com
<div id="dg_recent_comments"><abbr></abbr><?php if (function_exists('get_recent_comments')) { ?> <li><h2 class="entry-title"><?php _e('Recent Comments:'); ?></h2> <ul><?php get_recent_comments(); ?></ul> </li><?php } ?> </div>
<div class="hslice" id="dg_recent_comments"><abbr class="ttl" title="60"></abbr><?php if (function_exists('get_recent_comments')) { ?> <li class="entry-content"><h2 class="entry-title"><?php _e('Recent
Comments:'); ?></h2> <ul><?php get_recent_comments(); ?></ul> </li><?php } ?> </div>
![Page 36: Michael Kordahi delicategeniusblog.com From Rich to Reach Silverlight 2 and IE8.](https://reader035.fdocuments.us/reader035/viewer/2022062423/5697c0281a28abf838cd6f33/html5/thumbnails/36.jpg)
Web Slice Format
• hAtom Microformat describes a feed & items
• Web Slice builds on hAtom
– hAtom can represent static content
– Web Slice is dynamic content
• Web Slice reuses properties on hAtom
– Adds optional properties for subscribing
• ttl – time-to-live value
• feedurl – alternative path to get updates
• endtime – When the feed item is no longer relevant
– Can be applied to an hAtom
![Page 37: Michael Kordahi delicategeniusblog.com From Rich to Reach Silverlight 2 and IE8.](https://reader035.fdocuments.us/reader035/viewer/2022062423/5697c0281a28abf838cd6f33/html5/thumbnails/37.jpg)
Developer Tools
Built-In Developer Tools• Dynamic toggling of rendering modes• 3 modes – HTML, CSS, JavaScript
HTML & CSS Explorer• Exposes internal representation of DOM tree
and CSS styles• Real-time editing and rendering• Element-based style explorer• CSS file-based view in CSS mode
![Page 38: Michael Kordahi delicategeniusblog.com From Rich to Reach Silverlight 2 and IE8.](https://reader035.fdocuments.us/reader035/viewer/2022062423/5697c0281a28abf838cd6f33/html5/thumbnails/38.jpg)
Developer Tools
JavaScript DebuggerExecution control• line and context-based breakpoints• Step into, over, out, continue; break all (pause)
Variable Inspection• Scope sensitive (local, global, etc.)• Set watch variables
Call Stack Manipulation• Dynamic call stack traversal
Custom Script Execution• Immediate tab
![Page 39: Michael Kordahi delicategeniusblog.com From Rich to Reach Silverlight 2 and IE8.](https://reader035.fdocuments.us/reader035/viewer/2022062423/5697c0281a28abf838cd6f33/html5/thumbnails/39.jpg)
The Gallery
http://www.ieaddons.com
![Page 40: Michael Kordahi delicategeniusblog.com From Rich to Reach Silverlight 2 and IE8.](https://reader035.fdocuments.us/reader035/viewer/2022062423/5697c0281a28abf838cd6f33/html5/thumbnails/40.jpg)
Plug Stuff
Artists in Residence
IE8 Accelerator and Web Slice Competition
Sponsor High profile Accelerators and Web Slices
Michael [email protected]
delicategeniusblog.com
![Page 41: Michael Kordahi delicategeniusblog.com From Rich to Reach Silverlight 2 and IE8.](https://reader035.fdocuments.us/reader035/viewer/2022062423/5697c0281a28abf838cd6f33/html5/thumbnails/41.jpg)
![Page 42: Michael Kordahi delicategeniusblog.com From Rich to Reach Silverlight 2 and IE8.](https://reader035.fdocuments.us/reader035/viewer/2022062423/5697c0281a28abf838cd6f33/html5/thumbnails/42.jpg)
© 2008 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.