12/12/2009

Copyright 2004-2010 Manoj Kumar Sharma. All rights reserved. This presentation is for training purposes only, and cannot be reproduced in any form without an express written permission.

Understanding

MANOJ KUMAR SHARMA Developer Evangelist manoj.sharma@crbiconsultingindia.com

Welcome
Understanding Silverlight 3.0

The objective of this presentation:

To provide you an understanding of Silverlight 3.0

Copyright 2004-2010 Manoj Kumar Sharma. All rights reserved. This presentation is for training purposes only, and cannot be Reproduced in any form without an express written permission.

2 2 of 48

12/12/2009

So, what is .NET 3.0/3.5?

.NET Framework 3.5

LINQ ASP.NET 3.5 CLR Add-in Framework Additional Enhancements

.NET Framework 3.0 + SP1

Windows Presentation Foundation Windows Communication Foundation Windows Workflow Foundation

Windows CardSpace

.NET Framework .NET Framework 2.02.0 + SP1

Copyright 2004-2010 Manoj Kumar Sharma. All rights reserved. This presentation is for training purposes only, and cannot be Reproduced in any form without an express written permission.

3 3 of 48

Introducing WPF
The Presentation Layer (UI): from Yesterday to Tomorrow

Copyright 2004-2010 Manoj Kumar Sharma. All rights reserved. This presentation is for training purposes only, and cannot be Reproduced in any form without an express written permission.

4 4 of 48

12/12/2009

The Presentation Layer: from Yesterday to Tomorrow

Punch-card Request/Response architecture

Copyright 2004-2010 Manoj Kumar Sharma. All rights reserved. This presentation is for training purposes only, and cannot be Reproduced in any form without an express written permission.

5 5 of 48

The Presentation Layer: from Yesterday to Tomorrow

Terminal-based Request/Response architecture

Copyright 2004-2010 Manoj Kumar Sharma. All rights reserved. This presentation is for training purposes only, and cannot be Reproduced in any form without an express written permission.

6 6 of 48

12/12/2009

The Presentation Layer: from Yesterday to Tomorrow

Request/Response architecture for personal computer, both Online and Offline

Copyright 2004-2010 Manoj Kumar Sharma. All rights reserved. This presentation is for training purposes only, and cannot be Reproduced in any form without an express written permission.

7 7 of 48

The Presentation Layer: from Yesterday to Tomorrow

Request/Response architecture of Graphical User Interface (GUI) application talking to mainframe

Copyright 2004-2010 Manoj Kumar Sharma. All rights reserved. This presentation is for training purposes only, and cannot be Reproduced in any form without an express written permission.

8 8 of 48

12/12/2009

The Presentation Layer: from Yesterday to Tomorrow

Web Browserbased Request/Response architecture

Copyright 2004-2010 Manoj Kumar Sharma. All rights reserved. This presentation is for training purposes only, and cannot be Reproduced in any form without an express written permission.

9 9 of 48

The Presentation Layer: from Yesterday to Tomorrow

Sophisticated Browser Architecture

Copyright 2004-2010 Manoj Kumar Sharma. All rights reserved. This presentation is for training purposes only, and cannot be Reproduced in any form without an express written permission.

10 10 of 48

12/12/2009

The Presentation Layer: from Yesterday to Tomorrow

The .NET Framework provides consistent browser, desktop, and server application programming interfaces (APIs)

Copyright 2004-2010 Manoj Kumar Sharma. All rights reserved. This presentation is for training purposes only, and cannot be Reproduced in any form without an express written permission.

11 11 of 48

Components of the .NET Framework

The Windows SDK (earlier known as WinFX API)
Centered on .NET 3.0 Framework (earlier NetFX) Contains .NET 2.0 + WPF + WCF + WF

The .NET Framework WCF

Designed for the needs of Service-Oriented Architecture (SOA) and Software As A Service (SAAS)

WF WPF
Copyright 2004-2010 Manoj Kumar Sharma. All rights reserved. This presentation is for training purposes only, and cannot be Reproduced in any form without an express written permission.

12 12 of 48

12/12/2009

What is Windows Presentation Foundation (WPF)?

User interfaces needs to display video, run animations, use 2D/3D graphics, and work with different document formats. So far, all of these aspects of the user interface have been provided in different ways on Windows: For example, a developer needs to use Windows Forms to build a Windows GUI, or HTML/ASPX/Applets/JavaScript etc. to build a Web Interface, Windows Media Player or software such as Adobe's Flash Player for displaying video, etc. The challenge for developers is to build a coherent user interface for different kinds of clients using diverse technologies which isn't a simple job.

Copyright 2004-2010 Manoj Kumar Sharma. All rights reserved. This presentation is for training purposes only, and cannot be Reproduced in any form without an express written permission.

13 13 of 48

What is Windows Presentation Foundation (WPF)?

The primary goal of WPF (formerly codenamed Avalon) is to address this challenge! By offering a consistent platform for these entire user interface aspects, WPF makes life simpler for developers. By providing a common foundation for desktop clients and browser clients, WPF makes it easier to build applications. It uses two important tools:
XAML XBAP

Copyright 2004-2010 Manoj Kumar Sharma. All rights reserved. This presentation is for training purposes only, and cannot be Reproduced in any form without an express written permission.

14 14 of 48

12/12/2009

What is Windows Presentation Foundation (WPF)?

XAML (eXtensible Application Markup Language)
An XML-based language, XAML allows specifying a user interface declaratively rather than in code. Makes it much easier for user interface design tools like MS Expression Blend, or any text-generator to generate and work with an interface specification based on the visual representation created by a designer. Designers will be able to use such tools to create the look of an interface and then have a XAML definition of that interface generated for them. The developer imports this definition into Visual Studio, then creates the logic the interface requires.

Copyright 2004-2010 Manoj Kumar Sharma. All rights reserved. This presentation is for training purposes only, and cannot be Reproduced in any form without an express written permission.

15 15 of 48

What is Windows Presentation Foundation (WPF)?

XBAP (XAML Browser Application)
It is used to create a remote client that runs inside a Web Browser, using the WPF Runtime on the Client. Built on the same foundation as a stand-alone WPF application, an XBAP allows presenting the same style of user interface within a downloadable browser application. The best part is that the same XAML code can potentially be used for both kinds of applications, which means that developers no longer need different skill sets for desktop and browser clients. The downloaded XBAP from the web server runs in a secure sandbox (like Java applets), and thus it limits what the downloaded application can do.

Copyright 2004-2010 Manoj Kumar Sharma. All rights reserved. This presentation is for training purposes only, and cannot be Reproduced in any form without an express written permission.

16 16 of 48

12/12/2009

The WPF Architecture

Presentation Framework Presentation Core Common Language Runtime milcore DirectX Kernel
Copyright 2004-2010 Manoj Kumar Sharma. All rights reserved. This presentation is for training purposes only, and cannot be Reproduced in any form without an express written permission.

17 17 of 48

WPF: Important Features

Best way to deliver superior user experiences (UX) Improve usability, productivity, and satisfaction Increase developer productivity Expand product relevance Sets new bar for a modern client platform Unified developer platform for applications, documents, and graphics Integrated, vector-based composition engine Support for declarative and procedural programming
Copyright 2004-2010 Manoj Kumar Sharma. All rights reserved. This presentation is for training purposes only, and cannot be Reproduced in any form without an express written permission.

18 18 of 48

12/12/2009

And what is SilverLight then?

SilverLight combines multiple technologies into a single development platform that enables you to select the right tools and the right programming language for your needs. SilverLight offers:
WPF and XAML Extensions to JavaScript, including ability to work with WPF elements Cross-browser, cross-platform support Integration with existing JavaScript and ASP.NET AJAX code Access to.NET Framework programming models like C#, VB, IronPython, etc., and to associated tools like Visual Studio 2008 SilverLight includes LINQ (Language-INtegrated Query), which enables you to program data access using intuitive native syntax and strongly typed objects in .NET Framework languages. You can create server-based resources in ASP.NET and use the AJAX capabilities of ASP.NET to interact, without interrupting the user.

Copyright 2004-2010 Manoj Kumar Sharma. All rights reserved. This presentation is for training purposes only, and cannot be Reproduced in any form without an express written permission.

19 19 of 48

And what is SilverLight then?

So, what is the difference between SilverLight and XBAP:
SilverLight (also known as WPF/E) is meant to be Cross-OS and Cross-Browser Compatible.

Copyright 2004-2010 Manoj Kumar Sharma. All rights reserved. This presentation is for training purposes only, and cannot be Reproduced in any form without an express written permission.

20 20 of 48

10

12/12/2009

And what is SilverLight then?

Interactive experiences for devices and PC platforms Strict subset of Windows Presentation Foundation Lightweight download Programming model uses XAML + JScript Access to all WPF tooling
WPF-based Tools
<XAML> <Button Width="100px"> OK <Button.Background> LightBlue </Button.Background> </Button> </XAML>

Copyright 2004-2010 Manoj Kumar Sharma. All rights reserved. This presentation is for training purposes only, and cannot be Reproduced in any form without an express written permission.

21 21 of 48

And what is SilverLight then?

What the heck is Silverlight?
Web Platform for Rich Interactive Applications
Web Platform is a euphemism for Plug-in Wow factor stuff like vector-based graphics, animations, audio and video integration Cross browser, cross platform (!) Its a stand-alone framework. Not dependant on any prior .NET version. Clients need nothing but the plug-in.

Sounds familiar
Doesnt Macromedia (er Adobe) already give this to us? Its called Flash? Or Flex?
Wellkind of. But SilverLight is better. Trust me.
Copyright 2004-2010 Manoj Kumar Sharma. All rights reserved. This presentation is for training purposes only, and cannot be Reproduced in any form without an express written permission.

22 22 of 48

11

12/12/2009

Why now?
HTML + CSS + JavaScript is too limiting The Browser as a development platform is, well, less than ideal More applications are becoming web-ified, but at the cost of user experience End user expectations are changing. They want richness and interactivity (yes, even in LOBs)

Copyright 2004-2010 Manoj Kumar Sharma. All rights reserved. This presentation is for training purposes only, and cannot be Reproduced in any form without an express written permission.

23 23 of 48

Great
So another platform I have to learn?!!!!!
Sort ofbut you get to leverage a lot of your existing skills
UI parts are based on .NET 3.0 (read XAML) Programming model is JavaScript Feels good to both rich client and web developers

Copyright 2004-2010 Manoj Kumar Sharma. All rights reserved. This presentation is for training purposes only, and cannot be Reproduced in any form without an express written permission.

24 24 of 48

12

12/12/2009

SilverLight Versions
Versions of SilverLight currently available
1.0
Does the basic XAML stuff, but still requires you to work (sorry) JavaScript is the programming modelfeels warm and cozy to web developers ~ 2 MB download

1.1
Does away more XAML-ish stuff (less work for you ) Brings in a managed programming model SilverLight + .NET Framework ~ 4 MB (cross platform)

Copyright 2004-2010 Manoj Kumar Sharma. All rights reserved. This presentation is for training purposes only, and cannot be Reproduced in any form without an express written permission.

25 25 of 48

SilverLight Versions
2.0
Includes refactored version of .NET framework with CLR 3.0. Designed from ground up to support .NET Languages like C# and VB.NET. Supports Dynamic Language Runtime (DLR) for compilation and execution of dynamic languages like IronPython, Managed JScript and IronRuby. With a subset of the WPF programming model and includes support for UI Controls, Layout, Databinding, Documents, Media, Animation and High-quality Video. ~ 4.6 MB download, containing a stripped-down version of the .NET framework in your browser. So there is no need to install the .NET framework on the browser client machines.
Copyright 2004-2010 Manoj Kumar Sharma. All rights reserved. This presentation is for training purposes only, and cannot be Reproduced in any form without an express written permission.

26 26 of 48

13

12/12/2009

.NET 3.5 revisited

.NET Framework 3.5 + SP1

ADO.NET Entity Framework ADO.NET Data Services ASP.NET Dynamic Data ASP.NET Routing Engine WPF & WCF Enhancements

.NET Framework 3.5

LINQ
WF & WCF Enhancements Add-in Framework Additional Enhancements

.NET Framework 3.0 + SP1 SP2

WPF WCF WF
Windows CardSpace

.NET Framework 2.0 + SP1 SP2

Copyright 2004-2010 Manoj Kumar Sharma. All rights reserved. This presentation is for training purposes only, and cannot be Reproduced in any form without an express written permission.

27 27 of 48

SilverLight Versions

Copyright 2004-2010 Manoj Kumar Sharma. All rights reserved. This presentation is for training purposes only, and cannot be Reproduced in any form without an express written permission.

28 28 of 48

14

12/12/2009

SilverLight Vs. Flash

Timeline Animation:
Flash: Frame based. Uses transformation matrix. SilverLight: Uses timeline (vector) based animation.

Support for Shapes:

Flash: Uses a 3rd party library to store shapes. SilverLight: Uses XAML.

Support for Video:

Flash: Supports multiple video formats/codec, however the output is proprietary. SilverLight: Uses industry standard codec. Flash content can be created by using Adobe Flash.
Copyright 2004-2010 Manoj Kumar Sharma. All rights reserved. This presentation is for training purposes only, and cannot be Reproduced in any form without an express written permission.

29 29 of 48

SilverLight Vs. Flash

Tools for Creation:
Flash: Macromedia Flash Developer or CS3 or Swish. SilverLight: Visual Studio 2008 or Expression Blend or XAMLPad.

Support for Programming:

Flash: ActionScript (huge learning curve, not common skill) SilverLight: Developed from ground-up using .NET Languages. SilverLight content can be created using XAML and a .NET language. This way, you can utilize your existing skills-set.

Graphics Support:
Flash: Povides with 2D animation graphics only. SilverLight: Currently No. Next Version Yes.
Copyright 2004-2010 Manoj Kumar Sharma. All rights reserved. This presentation is for training purposes only, and cannot be Reproduced in any form without an express written permission.

30 30 of 48

15

12/12/2009

SilverLight Vs. Flash

The cost of Media Server Licensing in Flash is much more than the cost for SilverLight. Full Screen Video capabilities upto HD (720p) is not available in Flash. Content Type:
Flash: Binary in nature. SilverLight: Textual in nature.

Copyright 2004-2010 Manoj Kumar Sharma. All rights reserved. This presentation is for training purposes only, and cannot be Reproduced in any form without an express written permission.

31 31 of 48

The SilverLight Architecture

Most processing on the Server Most network bandwidth usage
Receive the Request for Page/Resource Place the Request for Page/Resource Response containing Page/Resource received

Web Server Page/Resource

All Processing done on Server to generate requested output

Response containing sent

Browser (Client) Internet

Client works with Page, and either submits current page back to server for additional processing or requests another page/resource

Microsoft ASP.NET Processing

Copyright 2004-2010 Manoj Kumar Sharma. All rights reserved. This presentation is for training purposes only, and cannot be Reproduced in any form without an express written permission.

32 32 of 48

16

12/12/2009

The SilverLight Architecture

Most processing on the Client Least network bandwidth usage
Receive the Request for only needed Resource Place the Request for only needed Resource Response containing only needed Resource received

Web

Response containing only Server needed Resource sent

Processing done on Server to generate requested resource

Browser (Client) Internet

Client works with Page, and only makes a Request to the Server, if necessary.

Microsoft SilverLight Processing

Copyright 2004-2010 Manoj Kumar Sharma. All rights reserved. This presentation is for training purposes only, and cannot be Reproduced in any form without an express written permission.

33 33 of 48

The SilverLight Architecture

SilverLight Presentation Runtime Native DOM API XAML Media Support (Audio/Video) Presentation Core Browser Plug-In Operating System (Windows, Mac)
Copyright 2004-2010 Manoj Kumar Sharma. All rights reserved. This presentation is for training purposes only, and cannot be Reproduced in any form without an express written permission.

JavaScript DOM API

34 34 of 48

17

12/12/2009

Best part It runs on Windows too!

Browsers
Internet Explorer 6 and 7 (Windows) Firefox 1.5.0.8, 2.0+ (Windows and Mac) Safari 2.0.4+ (Mac) Opera (through Mono implementation)

Operating systems
Windows XP SP2, Vista, 2003, 2008 Mac OS X (10.4.8+) both Intel and PowerPC (PPC) Versions Mono Project working on Linux implementation

Copyright 2004-2010 Manoj Kumar Sharma. All rights reserved. This presentation is for training purposes only, and cannot be Reproduced in any form without an express written permission.

35 35 of 48

Major Features
XAML Subset:
2D Graphics (shapes, transformations, clipping, 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

Copyright 2004-2010 Manoj Kumar Sharma. All rights reserved. This presentation is for training purposes only, and cannot be Reproduced in any form without an express written permission.

36 36 of 48

18

12/12/2009

Features: Graphics and Animations

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 defined using XAML

Copyright 2004-2010 Manoj Kumar Sharma. All rights reserved. This presentation is for training purposes only, and cannot be Reproduced in any form without an express written permission.

37 37 of 48

Features: Media
Media Features
No OS dependencies. Everything ships inside the platform
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

Copyright 2004-2010 Manoj Kumar Sharma. All rights reserved. This presentation is for training purposes only, and cannot be Reproduced in any form without an express written permission.

38 38 of 48

19

12/12/2009

Features: 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-lingual Plane Post V1, increased language support
Copyright 2004-2010 Manoj Kumar Sharma. All rights reserved. This presentation is for training purposes only, and cannot be Reproduced in any form without an express written permission.

39 39 of 48

Dont forget: Its still a Web App!

All apps run in the sandbox
Conceptually similar to the HTML DOM sandbox

Apps run just like HTML pages

No elevation prompts No way to get out of the sandbox

Includes some additional functionality:

Safe isolated storage Client based file upload controls Cross domain support in-work

Copyright 2004-2010 Manoj Kumar Sharma. All rights reserved. This presentation is for training purposes only, and cannot be Reproduced in any form without an express written permission.

40 40 of 48

20

12/12/2009

So, how do I
Tools
Developer
Visual Studio 2005 minimum for v1.0 development Visual Studio 2008 SP1 with SilverLight 2 Firebug (HTML, CSS and JS monitoring) Any text editor

Designers
Expression Blend and Design XAML exporters Adobe Illustrator, Office (good for font subsetting), Others

XAML Pad

Copyright 2004-2010 Manoj Kumar Sharma. All rights reserved. This presentation is for training purposes only, and cannot be Reproduced in any form without an express written permission.

41 41 of 48

Microsoft Expression
Complete tool set to build rich experiences Bridging the designer-developer gap Seamless integration with Visual Studio 2008

Graphics Designer

Interactive Designer

Web Designer
42 42 of 48

Copyright 2004-2010 Manoj Kumar Sharma. All rights reserved. This presentation is for training purposes only, and cannot be Reproduced in any form without an express written permission.

21

12/12/2009

And, how do I
In terms of Knowledge:
SilverLight development is similar to HTML development
Presentation format for SilverLight is XAML - XAML is XML (markup) SilverLight V1.0 programming language is JavaScript

SilverLight 1.1 or 2.0

Adds managed programming model running on client-side (aka client-side CLR, even on the Mac)
Use C# (or VB.NET, or any managed language) to code SilverLight instead of JavaScript Managed stack includes a broad set of familiar .NET features (as shown in next slide)

Copyright 2004-2010 Manoj Kumar Sharma. All rights reserved. This presentation is for training purposes only, and cannot be Reproduced in any form without an express written permission.

43 43 of 48

The SilverLight 2.0 Architecture

Browser Host

.NET for Silverlight

Data WPF Extensible Controls BCL Generics Collections Networking REST RSS JSON SOAP
Legend

MS AJAX Library DOM Integration Application Services Deploy Friction-Free Installer AutoUpdater

LINQ

XLINQ DLR

POX

Ruby

Python

CLR Execution Engine V1.1 XAML

Legend

Presentation Core

UI Core Vector Text

Inputs Keyboard Mouse Ink Media VC1 WMA MP3

DRM Media Controls Layout Editing

V1.0

Animation Images

Copyright 2004-2010 Manoj Kumar Sharma. All rights reserved. This presentation is for training purposes only, and cannot be Reproduced in any form without an express written permission.

44 44 of 48

22

12/12/2009

Resources
.NET 3.5 SP1 Changes: http://www.asp.net/downloads/3.5-sp1/Readme/ To see a nice little demo comparing WPF, SilverLight, Flash, Java (Swing), DHTML (JavaScript), etc.: http://www.bubblemark.com/ SilverLight Downloads & Version Comparison: http://silverlight.net/GetStarted/overview.aspx SilverLight Controls Demo: http://silverlight.net/Samples/2b2/SilverlightControls/run/default.html SilverLight Home http://www.silverlight.net SilverLight Samples Home http://silverlight.net/community/communitygallery.aspx WPF Samples http://windowsclient.net/downloads/folders/wpfsamples/default.aspx http://thewpfblog.com http://nibblestutorials.net
Copyright 2004-2010 Manoj Kumar Sharma. All rights reserved. This presentation is for training purposes only, and cannot be Reproduced in any form without an express written permission.

45 45 of 48

Thank You
MANOJ KUMAR SHARMA
manoj.sharma@crbiconsultingindia.com

Developer Evangelist
Copyright 2004-2010 Manoj Kumar Sharma. All rights reserved. This presentation is for training purposes only, and cannot be Reproduced in any form without an express written permission.

46

23