Tài liệu SilverLight2Programming docx

Programming Silverlight 2+1
Trịnh Minh Cường

Blog: />

Microsoft Silverlight
cross-browser (IE, FireFox, Safari)
cross-platform (Moonlight on Linux)
cross-device
Plug-in for building and delivering the
next generation of

.NET based
media experiences
and
rich interactive applications
/>
for the

Web


Silverlight is a .NET technology
SilverLight 2.0 contains subset of .NET

Server
& Services

Desktop

.NET

Browser

Devices,
Mobile

Silverlight extends your .NET Reach.


SilverLight vs Adobe Flash
• Flash is born in 1996, already 13 years old. Current version Adobe Flash CS4,
version 10. Written in C++.
• SilverLight ver 1.0 (2007), 2.0 (Oct 2008). 2 years old. Written in C++, C#, .NET
• Flash’s strong points:
• Large market share (~85%). Many samples and source codes. Friendly to web
and graphics designer.
• Motion tween, time-line story board, vector graphics.
• Flash’s weak points:
• ActionScript 3.0 is ECMA script, not powerful programming language. Easy to
learn but difficult to develop advanced application: data binding, algorithm,
collections manipulation.
• Flash format is licensed.
• Hard to debug. 
• SilverLight’s strong and weak points:
• See the page “Why SilverLight”


SilverLight vs JavaScript, AJAX
• JavaScript is a script language to manipulate HTML elements.
• SilverLight 1.0 use JavaScript as programming language

• SilverLight 2.0 can invoke a JavaScript function, a JavaScript can
invoke function in SilverLight. See demo later
• SilverLight make asynchronous request~ AJAX calling
• JavaScript can interact with every DOM elements in web browser.
• SilverLight also interact with DOM. See section “Browser Integration,
JavaScript interaction”

• Some good JavaScript frameworks:
• Jquery
• Mootools
•

Notes: In Javascript, we can use Canvas object to draw vector graphics. See more at
/>

Silverlight and WPF
• Silverlight is a subset of WPF
• Plus a few extra web features and its own codecs

• Reuse strategy
• Same skills
• Same tools
• Same XAML and UI
• Silverlight code should run on WPF with minor changes

• Some cool features of WPF are not yet implemented in
SilverLight 2
• 3D support
• Animation along curve path
• Applying template

SilverLight + WPF vs Adobe AIR vs JavaFX
• Since Adobe AIR and JavaFX are designed to develop Rich Internet Application
on desktop, browser and mobile, WPF and SilverLight are teamed up in
comparison.

• 5 online surveys from Oct 2008 to Feb 2009:
• 70-85% Vietnamese developers are familiar with Visual Studio, C#
or VB.net
• 35% Visual Studio 2005, 28% Visual Studio 2008 16% older version
Visual Studio
• 80% of applications are Line of Business, RDBMS centric.
• 90-98% VN enterprises are using XP, Vista, Windows 7 in client
PCs.


Why SilverLight ?
• SilverLight’s strong points:
• Friendly to .NET programmers. Visual Studio, Express Blend .
• XAML is cool. It is XML, it can be easily generated. Soon many 3rd tools will
appear.
• Rapidly and continuously evolve with WPF. Initially, its code name was
WPF/e ~ WPF everywhere.
• Future: will be integrated into MS Office and other products
• Strong 3rd parties community: ComponentOne, Infrasgistic, Telerik,
• Suitable for Line of Business Applications
• SilverLight 2 ’s weak points:
• Not yet support motion tween, and Animation along curve path.
• Not support 3D

• Don’t be panic, SilverLight 3.0 to be announced in March 18th 2009.


SilverLight, Flash, JavaScript usage in Hanoi, Vietnam (100 samples)
Web technologies usage:
ASP.net 2.0 34%
ASP.net 3.5 23%
SharePoint 12%
PHP 13%
Ruby On Rails 1%
Java 5%
Other 12%

Web client technologies usage:
Flash 33%
JavaScript 22%
SilverLight 2.0 13%
SilverLight 1.0 4%
Other 14%

Programming Languages:
C# 40%
JavaScript 33%
VB.net 19%
ActionScript 9%
How Flash is used in Vietnam:
Use tool to generate ready made
effect 38%
Use template in the Internet and
modify 36%

Copy all 7%
Self coding 19%


Demo of 3rd parties
• http://
www.componentone.com/SuperProducts/StudioSilverlight/Live+Exampl
es/
• />• />• />• />

SilverLight for Business Applications
•



•

/>
•

/>

Silverlight Architecture
Data
LINQ

LINQ-to-XML

Dynamic Languages

Ruby

.NET for Silverlight

WPF for Silverlight

Python

Extensible Controls

Web Services
REST
RSS
SOAP

BCL
Generics Collection

POX
JSON

Server
ASP.NET
AJAX Libs
<asp:xaml>
<asp:media>

Common Language Runtime
XAML
UI Core

2D Vectors
Animation
Text

Images
Transforms

Inputs

Media

Controls

DRM

Keyboard
Mouse
Ink

WMV / VC1
WMA
MP3

Layout
Editing

Media

Presentation Core

Integrated
Networking
Stack

Browser Host

DOM
Integration

Installer

JavaScript
Engine

Silverlight 1
Silverlight 2

Legend


Tooling

Server

Vista

Desktop
Server, Services

XAML

Designer

Developer

Look, behavior, brand,
and emotional connection

Function, deployment, data,
security, operational integrity

Media
& RIA


SilverLight 3.0 and Blend 3.0 beta
• SilverLight 3.0 and Blend 3.0 beta is released in March 18th.
• I will show you some cool features of SilverLight 3.0 beta and
Blend 3.0 beta.
First developer of
SilverLight 3 !

the first
We are n
to lear
ight 3 in
SilverL
world !
t he

Declarative Programming Through XAML
Extensive Application Markup Language
•Toolable, declarative markup
•Code and content are separate ~ Code behind
•Compatible with Windows Presentation Foundation

XAML
<Button Width="100"> OK
<Button.Background>
LightBlue
</Button.Background>
</Button>

C#
Button b1 = new Button();
b1.Content = "OK";
b1.Background = new
SolidColorBrush(Colors.LightBlue);
b1.Width = 100;

VB.NET
Dim b1 As New Button
b1.Content = "OK"
b1.Background = New _
SolidColorBrush(Colors.LightBlue)
b1.Width = 100


Presentation Core – Graphics

• 2D Graphics
• Vector based (Blend 3 imports Adobe Illustrator)
• Standard shapes and Paths
• Masking and clipping

Prosise/Magnifier

• Transformations: skew, rotate, scale, translate, matrix
• Demo transformation VideoSound/VideoClip, Prosise/SpineAndZoom

• Animation Basics
• Time-based
• Support linear, discrete and spline animation
• Animatable property types:
• Double, Color, Point


Story board – frame based animation
Use Expression Blend to create StoryBoard
• Set properties of object at each key frame.
• Demo Animations\OpacityAnimation, Animations\MovingTruck


Time based animation
• Using DispatcherTimer to trigger tick event. Put animation routine in
tick event handler. See ShineDraw\ImageRotation3D
• Composition.Rendering is call right before element is rendered . See
Animation\FallingSnow
CompositionTarget.Rendering += new EventHandler(PendulumDemo);
• More advanced animation ShineDraw\ ResilienceRectangle

• SilverLight 2 not yet support animation along curve. But you can do
by programming. See demo CurvePathAnimation


Controls
• Controls in SilverLight is look-less.
• Microsoft ships the basic set of
controls
• Ship with source
• Modeled after WPF controls
• Extensible

• Rich partner ecosystem for domain
specific controls


SilverLight 2 Element Class Diagram


Styling
• Property bag setting to define look & feel


Templating
• Replace the ‘parts’ that define the look of a control to create a
completely different look, but behavior is the same.

Demo StyleTemplates\VSMTour

SilverLight 3 Control Tool Kit Demo

Program Files/Microsoft SDKs/Silverlight/v3.0/Toolkit/March 2009/Samples/default.htm


Data Templates
class Car
{
string Image {get;set}
string Model {get;set]
}
DataTemplate

<DataTemplate x:Key="carTemplate">
Margin="10" Padding="15,15,15,5">
<StackPanel>
<Image HorizontalAlignment="Center" Source="{Binding Path=Image}" />
Background="#DDF“ BorderThickness="1" Margin="10" Padding="3">
<TextBlock FontSize="18" TextContent="{Binding Path=Model}" />
</Border>
</StackPanel>
</Border>
</DataTemplate>


Databinding
• Two way data binding from User interface to business objects

• Notification via INotifyPropertyChanged
• DataContext is inherited via Visual Tree
• From XAML
• <TextBlock Text="{Binding Nasdaq.Points, Mode=OneWay}"/>

• From code binding = new Binding("Nasdaq.Points");
Binding
binding.Mode = BindingMode.OneWay;
TextBlock tb = new TextBlock();
tb.SetBinding(TextBlock.TextProperty, binding);

Demo SilverLightToolKit/DataForm