http://blogs.msdn.

com/pietrobr | Pietro Brambati

Contents

http://blogs.msdn.com/pietrobr | Pietro Brambati

Inorder to understand Silverlight, we have to understand what is Web development, RIA, and Web2.0

http://blogs.msdn.com/pietrobr | Pietro Brambati

I tro d u cti n to W e b n o D e ve l p m e n t o
Desktop
Desktop Applications

Smooth, dynamic, and fine grained

interaction model Asynchronous content retrieval

Rich

Web
Web Applications

Ubiquitous client (Browser) Device independent Wide Reach

Reach
http://blogs.msdn.com/pietrobr | Pietro Brambati

Introduction to RIA
RIAs
Provide the look and feel of a desktop application. Allow users to contribute information, such as knowledge articles, pictures, music, and videos. Provide Rich User eXperience (Rich UX). Are based on the concept of Web 2.0.

http://blogs.msdn.com/pietrobr | Pietro Brambati

Introducing RIAs(Contd.)
Rich UX is achieved through:
Rich user interface: Information on the Web pages is presented with a rich, attractive, and intuitive look and feel. Highly interactive websites: Websites contain sliders to change data, calendar gadgets to schedule tasks, and media players to watch videos and slide shows. Dynamically responsive Web applications: Websites provide quick response to users actions. Wide reach: Web applications can be accessed by desktops, Web browsers, and mobile devices.
http://blogs.msdn.com/pietrobr | Pietro Brambati

What is Web 2.0?

http://blogs.msdn.com/pietrobr | Pietro Brambati

Its a business idea

User centric

Its a design style

Users create the content

Its a set of technologies

Users control the content

Its a marketing approach Users share the content

D e m o : I tro d u ci g R I s n n A

http://blogs.msdn.com/pietrobr | Pietro Brambati

W h a t i S i ve rl g h t s l i
M i so ft S i ve rl g h t i a cro ss-b ro w se r, cro l i s cro ss-p l tfo rm i p l m e n ta ti n o f . N E T a m e o fo r b u i d i g a n d d e l ve ri g th e n e xt l n i n g e n e ra ti n o f m e d i e xp e ri n ce s & ri o a e ch i te ra cti a p p l ca ti n s fo r th e W e b . n ve i o S L u si g ve cto r g ra p h i , i a g e s, n cs m a n i a ti n , a n d m u l m e d i . m o ti a

http://blogs.msdn.com/pietrobr | Pietro Brambati

Silverlight
The Silverlight platform allows you to develop rich and interactive applications for the Web. Users today use the Internet to read, share information, photos, videos, and sound files, make online business transactions, and socialize. Therefore, developers focus on building rich user interfaces and performancecentric websites. Allows creation of interactive and visually stunning graphics that users can manipulate directly in their Web browser.
http://blogs.msdn.com/pietrobr | Pietro Brambati

Installing Silverlight

http://blogs.msdn.com/pietrobr | Pietro Brambati

Features of Silverlight
Is based on XAML, a markup language, which enables you to design the elements that make up the applications content region. Compelling Cross-Platform User Experiences. Flexible programming model with collaborative tools. Efficient, low cost delivery, and more capable media. Integrating Silverlight with ASP.NET Pages. Server Side XAML Generation.

http://blogs.msdn.com/pietrobr | Pietro Brambati

Silverlight Architecture
Browser Host

Framework
Data WPF WCF

Integr ated Networ king Stack

LIN Q

XML
DLR

Extensible Controls Gen eri cs

BCL

Applic ation Servic es

Ins tal ler

. NE T fo r Si lv er li gh t Pr es en ta ti on Co re

Rub y

Pyt hon

Col lec tio ns

SOA P JSO N RSS

MS AJAX Librar y HTML DOM Integrati on

CLR Execution Engine

XAML
UI Core Inputs DRM

Vect or Anim atio n

Text Imag es

Keybo ard

Mou se
Media

Ink

Media La yo ut
Controls

VC1

WMA

MP3

Edit ing

http://blogs.msdn.com/pietrobr | Pietro Brambati

Silverlight Processing
Being a client-side technology, processes the applications on the client machine and decreases server resource utilization. Improves the Web experience on the client machine. When Silverlight is used, and a change is needed to the rich content, a new XAML file is generated server-side. The next time the user browses to the page, this XAML is downloaded, and the experience is updated without any reinstallation.

http://blogs.msdn.com/pietrobr | Pietro Brambati

Silverlight Class Library

System System.Collections System.Collections.Generic System.Diagnostics System.Globalization System.IO System.IO.IsolatedStorage System.Reflection System.Security System.Security.Cryptography System.Text System.Threading

System.Windows

System.Windows System.Windows.Controls System.Windows.Input System.Windows.Interop System.Windows.Media System.Windows.Shapes System.Windows.Threading

mscorlib

System.Windows.Browser

System.Windows.Browser

System
System System.Collections.Generic System.ComponentModel System.Diagnostics System.Text.RegularExpressions

System.Core System.Xml
System.Xml System.XmlSchema System.Xml.Serialization

System.Linq System.Linq.Expressions System.Runtime.CompilerServices

http://blogs.msdn.com/pietrobr | Pietro Brambati

Silverlight Developer's Toolkit

Minimum
Any Text Editor Any Web Server

V Silverlight Expression Maximum Productivityisual Studio 2008 Extensions for Visual Studio Suite

ASP.NET 3.5

http://blogs.msdn.com/pietrobr | Pietro Brambati

Application of Silverlight
Creating Animations, Games in web page. Enabling business application development. Webcam and microphone support allow sharing of video and audio in applications such as chat and customer service. Silverlight runs across all platforms and major browsers. Deep Zoom allows you to easily knit the collection of large images together and view it in the browser.

http://blogs.msdn.com/pietrobr | Pietro Brambati

Moonlight
Moonlight is an open source implementation of Microsoft Silverlight for Unix systems. Moonlight you can access videos, applications and content created for Silverlight on Linux. In collaboration with Microsoft, Novell released the version 1.0 of Moonlight for major Linux systems including openSUSE, SUSE Linux Enterprise, Fedora, Red Hat, Ubuntu, and likely other system as well Silverlight Runtime for Linux Latest version Moonlight 2.99.0.8-i586.xpi

http://blogs.msdn.com/pietrobr | Pietro Brambati

Silverlight /Moonlight
Browser Plug-In
OS Support
Windows OS Mac OS X Linux

Browser Support
Internet Explorer 5.5+ Mozilla FireFox 1+ Safari

http://blogs.msdn.com/pietrobr | Pietro Brambati

Implementation
Microsoft Expression Blend:
Is a user interface design tool for creating graphical interfaces for web and desktop applications. Is an interactive What You See Is What You Get (WYSIWYG) front end for designing XAML-based interfaces for Silverlight. Auto-generates XAML code in the background.

http://blogs.msdn.com/pietrobr | Pietro Brambati

Microsoft Expression Blend:

http://blogs.msdn.com/pietrobr | Pietro Brambati

Silverlight Layouts
One of the most important considerations while developing an application is deciding on its user interface (UI). Your application must render consistent content across all platforms and browsers. The Silverlight applications include the following core layout models for displaying content:
StackPanel Layout Grid Layout Canvas Layout

http://blogs.msdn.com/pietrobr | Pietro Brambati

XAML
XAML
eXtensible Application Markup Language The Design Language of Silverlight. Tools will create XAML or Can be Hand coded

BAML
Binary Application Markup Language Binary Representation of XAML More Efficient

http://blogs.msdn.com/pietrobr | Pietro Brambati

XAML Compilation
BAML 000110101 101010001 101010 C#/VB.Net

Combine

Partial class

ile mp Co
XAML <window />

Co m pi l e

Interpret SL App

http://blogs.msdn.com/pietrobr | Pietro Brambati

XAML Compilation
XAML compilation involves three things.
Converting a XAML file into a special binary format. Embedding the converted content as a binary resource in the assembly being built. Connecting XAML and procedural code.

http://blogs.msdn.com/pietrobr | Pietro Brambati

XAML example
Creating a button using XAML

XAML

Designer styles & adds interaction in Blend

XAML markup language defines UI

http://blogs.msdn.com/pietrobr | Pietro Brambati

.NET code handles interaction

Understanding Expression Deep Zoom Composer

Deep Zoom composer is a software from Microsoft that enables you to embed high resolution images in your Web pages without modification. Deep Zoom allows you to arrange a collection of large images inside a Silverlight control called MultiScaledImage. Deep Zoom allows you to easily knit the collection of large images together and view it in the browser. Deep Zoom allows you to zoom deep into the images and view the minutest of details. View the following Silverlight-based website developed by using Deep Zoom Composer:

Demo Deep Zoom Composer

http://blogs.msdn.com/pietrobr | Pietro Brambati

Introducing Timelines and Keyframes Timeline:

Time duration for which an animation lasts on the storyboard in a Silverlight application. Managed by a Storyboard. Animations inherited from Timeline object.

Animation in Silverlight

Keyframes:
Define begin and end points of the visual transition of the animations Set on the timelines to mark the property changes of the elements, such as rectangle, ellipse, or polygon

http://blogs.msdn.com/pietrobr | Pietro Brambati

Types of Animation
Identifying Various Types of Animations in Silverlight There are two types of animation classes in Silverlight:

Timeline animation : DoubleAnimation, PointAnimation, and ColorAnimation. Keyframe animation : DoubleAnimationUsingKeyFrames, PointAnimationUsingKeyFrames, and ColorAnimationUsingKeyFrames.

http://blogs.msdn.com/pietrobr | Pietro Brambati

Demo Animation

Advantages of Silverlight
Cross-Platform User Experiences Flexible Programming Model with Collaboration Tools Connected to Data, Servers, and Services Search-engine friendly. Silverlight does NOT need to be hosted in IIS, any web server will do. Silverlight executed in the client browser. Low Cost, High Quality Media

http://blogs.msdn.com/pietrobr | Pietro Brambati

Disadvantages of Silverlight
No support for auto-content scrolling of a container. User needs the Silverlight-Plugin/MoonlightPlugin. Silverlight is that it can't be easily reused. Right Click mouse event is not yet implemented.

http://blogs.msdn.com/pietrobr | Pietro Brambati

Silverlight Future Development

Silverlight is much more than a browser technology. There are three areas of investment for Silverlight outside the browser: the desktop, the all mobile device, and the living room. Multitouch support enables a range of gestures and touch interactions to be integrated into user experiences.

http://blogs.msdn.com/pietrobr | Pietro Brambati

Examples:
Demo:Book Controls in Silverlight

http://blogs.msdn.com/pietrobr | Pietro Brambati

Summary
Silverlight provides a powerful way to display data and media in a rich medium. Web Browser plugin delivering:
Rich Media Experiences Rich Internet Applications Cross-browser, Cross-platform

http://blogs.msdn.com/pietrobr | Pietro Brambati

http://blogs.msdn.com/pietrobr | Pietro Brambati