Innovation Days 2008: RIA & IE8

Michael Kordahi delicategeniusblog.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 2

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

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

XmlReader & XmlWriter 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

LINQ

LINQ = L anguage IN tegrated Q uery

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

Data Binding {{FileName=“Html.html”, FileImageUrl=“html.jpg”}, {FileName=“Image.jpg”, FileImageUrl=“jpg.jpg”}} Data Template: Data (.NET Object): 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 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 Managed Code from JavaScript 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

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

Hot off the press

H.264 support

GPU Hardware Acceleration

3D

3

IE8

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

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

Deploying Accelerators

//check if service is already installed

window.external.IsServiceInstalled

(http://maps.live.com/livemaps.xml);

//if false, display button to add service

window.external.AddService

(http://maps.live.com/liveMaps.xml) ;

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>

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

Artists in Residence

IE8 Accelerator and Web Slice Competition

Sponsor High profile Accelerators and Web Slices

Michael Kordahi [email_address] 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.