Michael Kordahidelicategeniusblog.com

From Rich to Reach

Silverlight 2 and IE8

HTML + JavaScript

dedicated hardware+software

ASP.NET AJAX

browser enriched(silverlight)

desktop app (WPF/XBAP)

SILVERLIGHT 2The Rich

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/

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

Theming: Silverlight Toolkit

http://www.codeplex.com/Silverlight/

Layout containers• Canvas, Grid, StackPanel, Border

Layout properties• Width, MinWidth, MaxWidth, ActualWidth

• Height, MinHeight, MaxHeight, ActualHeight

• Margin and Padding

Layout Controls

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

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

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

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

{{FileName=“Html.html”, FileImageUrl=“html.jpg”},{FileName=“Image.jpg”, FileImageUrl=“jpg.jpg”}}

Data Template:

Data (.NET Object):

Bind using ItemsControl (List Control):

Data Binding

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

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

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

• 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

<DEMO />Silverlight 2

Hot off the press

H.264 supportGPU Hardware Acceleration

3D

3

IE8The Reach

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) 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

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 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

The Gallery

http://www.ieaddons.com

Plug Stuff

Artists in Residence

IE8 Accelerator and Web Slice Competition

Sponsor High profile Accelerators and Web Slices

Michael Kordahimichael.kordahi@microsoft.com

delicategeniusblog.com

© 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.