Building Rich Web Experiences using Silverlight and JavaScript for Developers

2. Building Rich Web Experiences using Silverlight and JavaScript for Developers Pete LePage Sr. Product Manager http://blogs.msdn.com/petel

3. Agenda • Overview • What about Rich Internet Applications? • Introduction to Silverlight JavaScript Develoment • Designer and Development Tools • Silverlight Components • Developing with Silverlight

4. Why Rich Internet Applications? • Creating compelling web user experiences • Look Great • Respond Immediately • Uninterrupted flow • Enhance and customize your brand • Users love customization • Give them what they want, how they want • Build an affinity to your brand

5. Why Silverlightv1.0? Broad Reach Richer Media (WMV Investments) Visual Studio Expression Studio

6. Silverlight Sites

7. Silverlight Development with JavaScript • Silverlight development is similar to HTML devevelopment • Presentation format for Silverlight is XAML • XAML is XML (markup) • Silverlight V1.0 programming language is JavaScript • AJAX tricks work with Silverlight • Minimum tools are a text editor and a web browser

8. Developer And Designer Tools • Developers (focus of this session) • Visual Studio 2005 and Visual Studio 2008 • IE Developer Toolbar, Firebug • Any text editor • Designers • Expression Blend and Design • XAML exporters

9. A Simple Demo

10. Silverlight v1.0 Components • Key Components in Silverlight V1.0 • 2D Grapics (shapes, transformations, cliping, masking) • Animations • Input: Mouse and Keyboard • Media (WMV, WMA, MP3) • Imaging (JPG, PNG) • Text (static and flow) • HTTP downloader • XAML Parser (includes CreateFromXAML API) • JavaScript DOM

11. Graphics And Animations In Silverlight • 2D Graphics • Standard shapes, masking and clipping • Transformations: skew, rotate, scale, translate, matrix • Animation Basics • Animations change properties over time • Support linear, discrete and spline animation • Animatable property types: • Double, Color, Point • Animations and graphics are defined using XAML

12. Silverlight JavaScript Basics • Silverlight 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 methods • Models JavaScript and HTML DOM interaction • findName 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

13. Silverlight Media • Media Features • Video: WMV V7, V8, V9, VC-1 • Audio: WMA V7, V8, V9 (standard), MP3 • Multiple options for deploying media • HTTP progressive download • Integration with Windows Media Server • Extensive WMV eco-system

14. Media Demo

15. Silverlight Text • Glyphs • Fixed text • Full Unicode glyph rendering support • Does not support layout (word/line breaking) • TextBlock • Basic layout support • Left-aligned, English based text wrapping • Support font encryption and compression • V1 supports 64K Unicode Basic Multi-langual Plane • Post V1, increased language support

16. Downloader And CreateFromXAML • HTTP Downloader • V1.0 supports HTTP gets (async and sync) • Provides download progress • ZIP packaging • Similar to XMLHTTP • CreateFromXAML • Primary way in V1.0 to dynamically create content • Supports namescopes (for name collisions)

17. Downloader DEMO

18. Roadmap Expression Studio Silverlight Visual Studio

19. Additional Sessions • REMIX • Designing Stunning Sites With Silverlight • Beau Ambur • 13 June, 13:30-14:40 • Room E-F • DevDays • Developing Applications Using Silverlight • Scott Guthrie • Part 1: 14 June, 13:30-14:40 • Part 2: 14 June, 15:00-16:10 • Auditorium

20. Resources • http://www.silverlight.net • http://www.microsoft.com/silverlight • http://msdn.microsoft.com/silverlight • http://silverlight.net/forums • http://msdn2.microsoft.com/en-us/library/bb188266.aspx • http://blogs.msdn.com/mharsh • http://blogs.msdn.com/jstegman