You are on page 1of 46

Microsoft Silverlight

An Introduction

Rajesh Lal ( connectrajesh@hotmail.com )


What is Silverlight?

Technology Overview

Architecture Silverlight & Flash

Silverlight Media Business Model

Creating a Silverlight application


What is Silverlight?

Definition

Why it’s time for Silverlight

Silverlight Background

Difference between 1.0 and 1.1


Definition

Silverlight is a cross-browser, cross-platform plug-in for


delivering the next generation of media experiences and
rich interactive applications(RIA) for the Web
Silverlight is a cross-browser, cross-platform plug-in*
* An auxiliary program that works with a software package to enhance its capability. For example, plug-
ins used in Photoshop to add a filter for some special effect. Other examples of Plug-ins are Macromedia
Flash, Digital Video Express(Divx) Player plug-in, Windows Media Player etc.
Why it’s time for Silverlight
Run on all popular browsers and OS

Consistent experience irrespective of platform

Supports AJAX methodology for rich Internet

applications

Includes compelling graphics, 2D vector &

animation

Streams video/audio and scales video quality from

mobile device to 720 HDTV video modes

Small download 4 MB
SilverLight background

Silverlight is the cross platform version of the Windows


Presentation Foundation (WPF) used in Vista and was
formerly code named "WPF/Everywhere" (WPF/E).
SilverLight background
Silverlight, is a subset of
Windows Presentation
Foundation(WPF) which is a
part of .NET 3.0 in Windows
Vista
Windows Presentation Foundation is the user
interface subsystem in Windows Vista code
name ‘Avalon’. It’s a part of the .NET
Framework 3.0 programming interface (API).

Windows Presentation Foundation (WPF) takes


advantage of advanced 3D graphics (not in
Silverlight) capabilities in modern machines. The
"Aero" interface provides transparent, glass-like
window borders.
Rich versus Reach
SilverLight 1.0, 1.1 & road
Silverlight 1.1 is the REAL DEAL
ahead
Silverlight 1.0
XAML + JavaScript

Silverlight 1.1
Includes an implementation of the CLR,
so any .NET language can be used to
write code

Released
Microsoft Silverlight 1.0 Release To Web
(RTW) for Mac & Windows September 2007

Microsoft Silverlight 1.1 Alpha – September


2007

Microsoft Silverlight 1.1 Beta – Q3 2007

Microsoft Silverlight 1.1 RTW – TBD


Technology Overview

Silverlight technologies

Programming language XAML, C# or JavaScript

Tools of Development

XAML Tools
Technology Cloud
Programming Language

XAML- core of Silverlight for Rich User interface


All other - for programming logic
XAML- eXtensible Application Markup
XAML?
Language
An XML-based set of tags used to describe
objects and events when programming
applications

Hello World XAML !


<Canvas
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/pres
entation"
Width="640" Height="480“ Background=“Aliceblue“ >
<TextBlock Text="Hello World"/>
</Canvas>
XAML / C #/ JavaScript
Button b1 = new Button();
Compile and Run
b1.Content = "OK";
b1.Background = new
SolidColorBrush(Colors.LightBlue);
b1.Width = 100;

<Button Width="100">
OK Load, Parse, Display
<Button.Background>
LightBlue
</Button.Background>
</Button>
Tools of Development
Microsoft Expression Studio is a suite of
design and media applications from
Microsoft aimed at developers and
designers.

Microsoft Expression Web - WYSIWYG website


designer and HTML editor. ( Microsoft FrontPage )

Microsoft Expression Blend - Visual user interface


builder for Windows Presentation Foundation
applications.
(For SilverLight)

Microsoft Expression Design - Raster and vector


graphics editor.

Microsoft Expression Media - Digital asset and media XAMLPad


manager. XAML editor/Viewer
Part of Windows SDK
Microsoft Expression Encoder - VC-1 content
professional encoder.
Tools for Developer and
Designer

XAML
JavaScrip
t
.NET

Developer Designer
Visual Studio 2008
Microsoft Expression Blend
XAML Tools

• XAMLPad
• Aurora XAML Editor (Mobiform)
• MyXaml
• Expression Tools
• Micrsoft Visual Studio
Architecture Silverlight & Flash

Silverlight Architecture

Comparison Flash & Silverlight

Silverlight 1.0 and 1.1

.NET Framework 2.0 / 3.0


Comparison with Flash
.NET 2.0 or 3.0

.NET Framework 2.0 – VS 2005 – Windows XP

.NET Framework 3.0 – Windows Vista (WPF)

.NET Framework 3.5 ?


Language Integrated Query (LINQ) and data awareness.

ASP.NET AJAX

New Web protocol support for AJAX, JSON, REST, POX, RSS, ATOM.
.NET Framework
2.0 .NET Framework 2.0
VB C# J# 3.0 .NET Framework 3.0
・・・

CLS / CTS

Windows Windows Windows


Windows
PresentationCommunication Workflow
CardSpace
Windows Foundation Foundation Foundation
ASP.NET (WCS)
Forms (WPF) (WCF) (WF)

ADO.NET

Common Language Runtime (CLR)

Windows Vista 、 Windows XP 、 Windows Server 2003


SilverLight 1.0 &1.1
Silverlight Business Model
Silverlight Media
Silverlight MEDIA Feature

Self-contained media playback


Customizable transport controls
Non-rectangular, semi-transparent video with overlays
Windows Media Services support Live and on demand streaming
Media markers / script commands
ASX Playlist support
Closed captioning support with Expression Media Encoder
Bandwidth throttling with IIS 7.0
Content protection (DRM Silverlight 1.1)
Alpha video (Silverlight 1.1)
Silverlight Media
The following file formats are accepted by the mediaElement
(regardless of the file extension):
Video: WMV v7, v8, v9, VC-1
Audio: WMA v7, v8, v9 (standard), MP3
Opportunities with Video on
the web
Compelling Web User Experience

Delivering media without going


broke

User generated content

Monetization with Ads


Silverlight Business Model
Compelling Web User Experience

Vector Graphics
Animation
ASP.AJAX
Silverlight Business Model
Delivering media without going
broke

Video delivery trend


Silverlight Business Model
Windows Media Services

Why stream?
Live Streaming
Fast Streaming
Logging
Caching and
Proxying
Silverlight Business Model

User generated content


Monetization with Ads

Silverlight Support

- Rich media based server application


- Save status of media playback
- Searchable - text based (XAML)
Silverlight Business Model

Silverlight Streaming by Windows Live

http://silverlight.live.com/
http://www.microsoft.com/silverlight/streaming.aspx
No server maintenance
Cached in edge servers worldwide
4 GB storage
Free!
Low Cost, High Quality Output

RECAP
Hosted Streaming Media
• 4 GB of free hosting and streaming
• Global scale
• Up to High Definition Output
Media Server Support
• You can self-host your streaming services
• Very competitive pricing
Customized skinning of your Silverlight Media control
Branding, customized looks and feels and non-traditional
shapes are all possible
Creating a Silverlight
application
Creating a Silverlight
application

Silverlight 1.0 – XAML + JavaScript Silverlight 1.1 – XAML +


C#
Creating a Silverlight
application

Silverlight 1.0 – XAML + JavaScript

COMPLETE DOM LEVEL 1


integration
Index.htm
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Hello World</title>

<script type="text/javascript" src="Silverlight.js"></script>


<script type="text/javascript"
src="CreateSilverlight.js"></script>
<script type="text/javascript" src="code.js"></script>
<style type="text/css">
.silverlightHost {
height: 480px;
width: 640px;
}
</style>
</head>

<body>
<div id="SilverlightControlHost" class="silverlightHost">
<script type="text/javascript">
createSilverlight();
</script>
</div>
</body>
</html>

Silverlight 1.0 – XAML + JavaScript


CreateSilverlight.js

function createSilverlight()
{
Silverlight.createObjectEx({
source: "HelloWorld.xaml",
parentElement:
document.getElementById("SilverlightControlHost"),
id: "SilverlightControl",
properties: {
width: "100%",
height: "100%",
version: "1.0“
},
events: {
onLoad: handleLoad
}
});
}

CreateSilverlight– Script file with logic to instantiate Silverlight


control
Code.js

var SilverlightControl;
var theTextBlock;
function handleLoad(control, userContext, rootElement)
{
SilverlightControl = control;
theTextBlock = SilverlightControl.content.findName("txt");
theTextBlock.addEventListener("MouseLeftButtonDown",
"txtLClicked");
}

function txtLClicked(sender, args)


{
theTextBlock.Text = "Silverlight Rocks!";
}

Code.js – Script file containing program logic


HelloWorld.XAML

<Canvas
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="640" Height="480"
Background="White"
x:Name="Page"
>
<TextBlock Width="195" Height="42" Canvas.Left="28"
Canvas.Top="35" Text="Hello World!" TextWrapping="Wrap"
x:Name="txt"/>
</Canvas>

XAML File –Canvas for Control


Start Building
• Steps
• Download Visual Studio 2008 Beta 2
• Install the Silverlight SDK 1.0 /1.1 alpha
• Download the Trial version of Expression Studio

• Tutorials
• http://designwithsilverlight.com/
• Silverlight: Laurence Moroney's Blog
• http://www.nibblestutorials.net/
• http://blogs.msdn.com/canux/archive/2007/08/01/silverlight-resources.aspx
• http://www.ddjsilverlight.com/resources/
• http://blogs.msdn.com/gavingear/archive/2007/06/07/how-to-create-an-ink-enable

• http://silverlight.net/quickstarts
• http://www.microsoft.com/silverlight/

You might also like