Transcript Silverlight 2

Michael Kordahi
delicategeniusblog.com
From Rich to Reach
Silverlight 2 and IE8
dedicated
hardware+software
desktop app
(WPF/XBAP)
browser enriched
(silverlight)
ASP.NET AJAX
HTML +
JavaScript
The Rich
SILVERLIGHT 2
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)
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
Media: Bitrate Throttling
• No bandwidth control with
traditional HTTP downloads
• Drop-off point in videos:
• Microsoft.com ~ 40%
• Typical video site < 20%
Media: Bitrate Throttling
Controls: Built-In
Controls: Silverlight Toolkit
AutoCompleteBox
NumericUpDown
Viewbox
Expander
ImplicitStyleManager
Charting
TreeView
DockPanel
WrapPanel
Label
HeaderedContentControl
HeaderedItemsControl
http://www.codeplex.com/Silverlight/
UI Customization
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
Theming: Silverlight Toolkit
http://www.codeplex.com/Silverlight/
Layout Controls
Layout containers
• Canvas, Grid, StackPanel, Border
Layout properties
• Width, MinWidth, MaxWidth, ActualWidth
• Height, MinHeight, MaxHeight, ActualHeight
• Margin and Padding
Network
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)
Asynchronous Support
Asynchronous web services supported
Start the async web service call
proxy.BeginGetTransactionList(
new AsyncCallback(OnTransactionDataLoaded), null);
Handle the web service completion event
private void OnTransactionDataLoaded(IAsyncResult iar)
{
transactionList = proxy.EndGetTransactionList(iar).ToList();
}
XmlReader & XmlWriter
Core XML reading & writing capabilities
LINQ to XML
Initialise the reader
XmlReader xr = XmlReader.Create(new StringReader(RawResponse));
Find a node and read its value
xr.ReadToFollowing("Item");
string playerNodeText = xr.Value;
string playerNameAttribute = xr.GetAttribute("Name");
LINQ
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
Return all players with more than twenty home runs, sorted
var filteredPlayers = from p in players
where p.HomeRuns > 20
orderby p.HomeRuns descending
select p;
Data Binding
Data Template:
Data (.NET Object):
{{FileName=“Html.html”, FileImageUrl=“html.jpg”},
{FileName=“Image.jpg”, FileImageUrl=“jpg.jpg”}}
Bind using ItemsControl (List Control):
Silverlight Sandbox
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 …
Access the HTML DOM from Managed Code
HTML access available in new namespace
using System.Windows.Browser;
Static HtmlPage class provides entry point
HtmlPage.Navigate("http://www.microsoft.com");
String server = HtmlPage.DocumentUri.Host;
Hookup events, call methods, or access properties
HtmlElement myButton =
HtmlPage.Document.GetElementByID("myButtonID");
myButton.AttachEvent("onclick", new
EventHandler(this.myButtonClicked));
private void myButtonClicked(object sender, EventArgs e)
{ ... }
Access Managed Code from JavaScript
Mark a property, method or event as [Scriptable]
[Scriptable]
public void Search(string Name) { ... }
Register a scriptable object
WebApplication.Current.RegisterScriptableObject
("EntryPoint", this);
Access the managed object from script
var control = document.getElementById("SilverlightControl");
control.Content.EntryPoint.Search(input.value);
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
Silverlight 2
<DEMO />
Hot off the press
3
H.264 support
GPU Hardware Acceleration
3D
The Reach
IE8
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
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)

IE8 Standards
•IE=8
IE7 Emulation
•IE=7
IE5 Compatible
•IE=5
Highest Possible
•IE=edge
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">
Compatibility View
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()
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>
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 …
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>
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
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
Developer Tools
JavaScript Debugger
Execution 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
The Gallery
http://www.ieaddons.com
Plug Stuff
Michael Kordahi
[email protected]
delicategeniusblog.com
Artists in Residence
IE8 Accelerator and Web Slice Competition
Sponsor High profile Accelerators and Web Slices
© 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.