Innovation Days 2008: RIA & IE8

0 %
100 %
Information about Innovation Days 2008: RIA & IE8
Technology

Published on December 1, 2008

Author: chlong

Source: slideshare.net

Description

4 of 6: Michael Kordahi presents RIA and IE8
http://www.delicategeniusblog.com

 

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

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)

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

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%

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/

AutoCompleteBox

NumericUpDown

Viewbox

Expander

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

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

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)

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(&quot; Item &quot;); string playerNodeText = xr.Value; string playerNameAttribute = xr.GetAttribute(&quot; Name &quot;); 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

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

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 …

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(&quot; http://www.microsoft.com &quot;); String server = HtmlPage.DocumentUri.Host; using System.Windows.Browser; HtmlElement myButton = HtmlPage.Document.GetElementByID(&quot; myButtonID &quot;); myButton.AttachEvent(&quot; onclick &quot;, 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 (&quot; EntryPoint &quot;, this); [Scriptable] public void Search(string Name) { ... } var control = document.getElementById(&quot; SilverlightControl &quot;); 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

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

<DEMO /> Silverlight 2

Silverlight 2

Hot off the press H.264 support GPU Hardware Acceleration 3D 3

H.264 support

GPU Hardware Acceleration

3D

IE8 The Reach

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

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=&quot;X-UA-Compatible&quot; value=&quot;IE=7&quot; /> </customHeaders> </httpProtocol> JavaScript: document.documentMode Meta tag: <meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=7&quot;>

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=&quot;X-UA-Compatible&quot; value=&quot;IE=7&quot; />

</customHeaders>

</httpProtocol>

JavaScript: document.documentMode

Meta tag: <meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=7&quot;>

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

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

//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=&quot;1.0&quot; encoding=&quot;utf-8&quot; ?> <os:openServiceDescription xmlns:os=&quot;http://www.microsoft.com/schemas/openservicedescription/1.0&quot;> <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=&quot;Map&quot;> <os:activityAction context=&quot;selection&quot;> <os:execute method=&quot;get“ action=&quot;http://maps.live.com/default.aspx?where1={selection}&quot; /> <os:preview method=&quot;get&quot; action=&quot;http://maps.live.com/geotager.aspx&quot;> <os:parameter name=&quot;b&quot; value=&quot;{selection}&quot; /> <os:parameter name=&quot;clean&quot; value=&quot;true&quot; /> <os:parameter name=&quot;w&quot; value=&quot;320&quot; /> <os:parameter name=&quot;h&quot; value=&quot;240&quot; /> <os:parameter name=&quot;format&quot; value=&quot;full&quot; /> </os:preview> </os:activityAction> </os:activity> </os:openServiceDescription>

<?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot; ?>

<os:openServiceDescription xmlns:os=&quot;http://www.microsoft.com/schemas/openservicedescription/1.0&quot;>

<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=&quot;Map&quot;>

<os:activityAction context=&quot;selection&quot;>

<os:execute method=&quot;get“ action=&quot;http://maps.live.com/default.aspx?where1={selection}&quot; />

<os:preview method=&quot;get&quot; action=&quot;http://maps.live.com/geotager.aspx&quot;>

<os:parameter name=&quot;b&quot; value=&quot;{selection}&quot; />

<os:parameter name=&quot;clean&quot; value=&quot;true&quot; />

<os:parameter name=&quot;w&quot; value=&quot;320&quot; />

<os:parameter name=&quot;h&quot; value=&quot;240&quot; />

<os:parameter name=&quot;format&quot; value=&quot;full&quot; />

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

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=&quot;dg_recent_comments&quot;> <abbr></abbr> <?php if (function_exists('get_recent_comments')) { ?> <li><h2 class=&quot;entry-title&quot;><?php _e('Recent Comments:'); ?></h2> <ul><?php get_recent_comments(); ?></ul> </li> <?php } ?> </div> <div class=&quot;hslice&quot; id=&quot;dg_recent_comments&quot;> <abbr class=&quot;ttl&quot; title=&quot;60&quot; ></abbr> <?php if (function_exists('get_recent_comments')) { ?> <li class=&quot;entry-content&quot; ><h2 class=&quot;entry-title&quot; ><?php _e('Recent Comments:'); ?></h2> <ul><?php get_recent_comments(); ?></ul> </li> <?php } ?> </div>

<div id=&quot;dg_recent_comments&quot;>

<abbr></abbr>

<?php if (function_exists('get_recent_comments')) { ?>

<li><h2 class=&quot;entry-title&quot;><?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

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

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

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

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

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.

Add a comment

Related presentations

Related pages

From Rich to ReachSilverlight 2 and IE8

From Rich to ReachSilverlight 2 and IE8. HTML + JavaScript. dedicated hardware+software. ASP.NET AJAX. ... © 2008 Microsoft Corporation. All rights reserved.
Read more

2008 – Page 2 – John McClelland's Blog

John McClelland's Blog John McClelland ... 2008 0 ★ ★ ★ ★ ★ ★ ... Abstract This series of articles takes a look at the current state of RIA ...
Read more

Tag: Architect Council - blogs.msdn.microsoft.com

Tag: Architect Council Innovation/Showcase on Internet Explorer 8 and Silverlight 3. Join us at Microsoft’s Internet Explorer 8 and Silverlight 3 ...
Read more

Executive Keynotes, Day 2: Microsoft 2008 | News Center

... to deliver our best platform and experience innovation and ... for our work in IE8 ... whether it’s a server app, a client app, or a RIA ...
Read more

IE Compatibility View | IoT User Interface

AJAX World RIA Conference & Expo - October 20-22, 2008, ... IE Compatibility View. ... In an era of historic innovation fueled by unprecedented access to ...
Read more

Silverlight 4 Briefing - Technology - documents.mx

... (2008 Beijing and 2010 Vancouver), Netflix, BlockBuster, ... New architecture enables future innovation ... RIA eBay Sidebar Ie8.ebay.com/sidebar.
Read more

Microsoft | ZDNet

Microsoft. The fiercely ... Microsoft is wearing the innovation crown these days. October 19, 2016 by David Gewirtz in Innovation. Microsoft's new ...
Read more

Microsoft to drop Internet Explorer? No chance! - SitePoint

Microsoft to drop Internet Explorer? No chance! ... and worry about innovation on ... that on near any very modern RIA/web app type site the logs ...
Read more