Building Rich Web Experiences using Silverlight and JavaScript for DevelopersJoe StegmanGroup Program ManagerMicrosoft Corporation

AgendaOverviewIntroduction to Silverlight JavaScript DevelomentDesigner and Development ToolsSilverlight ComponentsDeveloping with Silverlight

Why Silverlight V1?Richer Media

(WMV Investments)

Broad Reach

Visual StudioExpression Studio

Silverlight development with JavaScriptSilverlight development is similar to HTML

devevelopmentPresentation format for Silverlight is XAML

XAML is XML (markup)Silverlight V1.0 programming language is JavaScript

AJAX tricks work with SilverlightMinimum tools are a text editor and a web browserFor 1.1 development see:

Dev22/Dev07: Silverlight with .NET (5/1, 8:30 and 10:15)

Getting Started

demo

Designer and Development ToolsDevelopers (focus of this session)

Visual Studio 2005 and OrcasFirebugAny text editor

DesignersExpression Blend and Design

DES02: Building Rich Web Experiences (4/30, 15:00)XAML exporters

Adobe Illustrator, Office (good for font subsetting), Others…

Silverlight V1.0 ComponentsKey Components in Silverlight V1.0

2D Grapics (shapes, transformations, cliping, masking)AnimationsInput: Mouse and KeyboardMedia (WMV, WMA, MP3)Imaging (JPG, PNG)Text (static and flow)HTTP downloaderXAML Parser (includes CreateFromXAML API)JavaScript DOM

Graphics and Animations in Silverlight2D Graphics

Standard shapes, masking and clippingTransformations: skew, rotate, scale, translate, matrix

Animation BasicsAnimations change properties over timeSupport linear, discrete and spline animationAnimatable property types:

Double, Color, PointAnimations and graphics are defined using XAML

The Basics (findName) and an introduction to Graphics and Animations

demo

Silverlight JavaScript BasicsSilverlight XAML elements are scriptable via the browser script engine (JavaScript)Scriptable objects are obtained via findName

Scriptable objects (elements) can be controlled via properties and methodsModels JavaScript and HTML DOM interactionfindName is equivalent to document.getElementById()Supports tree walking via children collection

Position set using "Canvas.Top" and "Canvas.Left"Size can be scaled or set via Height/Width

MediaMedia Features

Video: WMV V7, V8, V9, VC-1Audio: WMA V7, V8, V9 (standard), MP3Multiple options for deploying media

HTTP progressive downloadIntegration with Windows Media Server

Extensive WMV eco-systemRelated Sessions:

XD001: Deep Dive on Silverlight Media (5/1, 14:15)Dev13: Creating and Delivering Rich Media (4/30, 16:30)

Basic Media

demo

TextGlyphs

Fixed textFull Unicode glyph rendering supportDoes not support layout (word/line breaking)

TextBlockBasic layout support

Left-aligned, English based text wrappingSupport font encryption and compressionV1 supports 64K Unicode Basic Multi-langual Plane Post V1, increased language support

Downloader and CreateFromXAMLHTTP Downloader

V1.0 supports HTTP gets (async and sync)Provides download progressZIP packagingSimilar to XMLHTTP

CreateFromXAMLPrimary way in V1.0 to dynamically create contentSupports namescopes (for name collisions)

Text, the Downloader and CreateFromXAML

demo

Using AJAX Techniques

demo

Roadmap

Silverlight 1.0 Beta

Silverlight 1.1

Alpha4/30/07

Silverlight 1.0

Summer 07

Silverlight 1.1 Beta

Q3/07

Silverlight 1.1TBD

Expression

Studio Expression Blend 2

May Preview4/30/07

xMedia

Encoder

Summer 07

xWeb 2August PreviewxBlend 2August Preview

Expression

Studio 2

February 08

Silverlight Tools

Alpha for Visual Studio

“Orcas” Beta

4/30/07

TBD

Silverlight Tools

Beta for Visual Studio

“Orcas”

TBD

Silverlight

Expression

Visual Studio

Resourceshttp://www.silverlight.nethttp://www.microsoft.com/silverlighthttp://msdn.microsoft.com/silverlighthttp://silverlight.net/forumshttp://msdn2.microsoft.com/en-us/library/bb188266.aspxhttp://blogs.msdn.com/mharshhttp://blogs.msdn.com/jstegman

Questions?

Please fill out your evalevaluation

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