Tài liệu SilverLight2Programming docx

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 Jav

moonlight/

Devices, Mobile

Devices, Mobile

Silverlight extends your NET Reach.

SilverLight 2.0 contains subset of NET

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

Integration, JavaScript interaction”

• Some good JavaScript frameworks:

• 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 3 rd 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 3 rd 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 18 th 2009.

SilverLight, Flash, JavaScript usage in Hanoi, Vietnam (100 samples)Web technologies usage:

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 3 rd parties

www.componentone.com/SuperProducts/StudioSilverlight/Live+Examples/

• http://www.netikatech.com/

• http://www.vectorlight.net/

SilverLight for Business Applications

• http://www.snapflow.com

• http://www.colaab.com/Index.aspx

• http://www.k2.com/en/displaycontent.aspx?id=973

Presentation Core

.NET for Silverlight

Inputs

Keyboard Mouse Ink

Media

WMV / VC1 WMA MP3

Controls

Layout Editing

Web Services

REST RSS SOAP

POX JSON

Data

LINQ LINQ-to-XML

WPF for Silverlight

Extensible Controls

Common Language Runtime

ASP.NET AJAX Libs

Server, Services

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

We are the first to l earn SilverLig ht 3

in the w orld !

We are the first to l earn SilverLig ht 3

in the w orld !

First developer of

SilverLight 3 !

Declarative Programming Through

XAML

Extensive Application Markup Language

•Toolable, declarative markup

•Code and content are separate ~ Code behind

•Compatible with Windows Presentation Foundation

SolidColorBrush(Colors.LightBlue )

b1.Width = 100

VB.NET

Presentation Core – Graphics

• 2D Graphics

• Vector based (Blend 3 imports Adobe Illustrator)

• Standard shapes and Paths

• 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

• Animations and graphics can be defined using XAML or code

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

• Composition.Rendering is call right before element is

• More advanced animation ShineDraw\ ResilienceRectangle

• SilverLight 2 not yet support animation along curve But you

• Ship with source

• Modeled after WPF controls

• Extensible

• Rich partner ecosystem for

domain specific controls

SilverLight 2 Element Class Diagram

• 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

<Border HorizontalAlignment="Center" BorderBrush="Navy"

Background="#DDF“ BorderThickness="1" Margin="10"

string Image {get;set}

string Model {get;set]

}

• Two way data binding from User interface to business objects

• Notification via INotifyPropertyChanged

• DataContext is inherited via Visual Tree

• Navigates images of any size and resolution optimizing network bandwidth and download size

• Seamless transitions as you zoom and pan

• DeepZoom Composer is free tool to generate DeepZoom effect

Presentation Core - Video

• Video is a first class citizen

•Audio: WMA V7, V8, V9, MP3, WMA 10 Pro

Content protection

• PlayReady DRM for online viewing

SilverLight 3 Video

• Support for Higher Quality Video & Audio With support for native

H.264/Advanced Audio Coding (AAC) Audio, live and on-demand IIS7

Smooth Streaming, full HD (720p+) playback, and an extensible decoder pipeline, Silverlight 3 brings rich, full-screen, stutter-free media

experiences to the desktop New and enhanced media features in

Silverlight 3 include:

• Live and on-demand true HD (720p+) Smooth Streaming IIS Media

Services (formerly IIS Media Pack), an integrated HTTP media delivery platform, features Smooth Streaming which dynamically detects and seamlessly

switches, in real time, the video quality of a media file delivered to Silverlight based on local bandwidth and CPU conditions

• More format choice In addition to native support for VC-1/WMA, Silverlight 3

now offers users native support for MPEG-4-based H.264/AAC Audio, enabling content distributors to deliver high-quality content to a wide variety of

computers and devices

• True HD playback in full-screen Leveraging graphics processor unit (GPU)

hardware acceleration, Silverlight experiences can now be delivered in true screen HD (720p+)

full-• Extensible media format support With the new Raw AV pipeline, Silverlight

can easily support a wide variety of third-party codecs Audio and video can be decoded outside the runtime and rendered in Silverlight, extending format

support beyond the native codecs

• Industry leading content protection Silverlight DRM, Powered by

PlayReady Content Protection enables protected in-browser experiences using AES encryption or Windows Media DRM.

3D Support

• SilverLight 2 not yet, but you can simulate 3D by

programming prepare to learn sin, cos, and geometry project again!

• SilverLight 3 suppors:

• Perspective 3D Graphics Silverlight 3 allows developers

and designers to apply content to a 3D plane Users can

rotate or scale live content in space without writing any

additional code Other effects include creating a queue in 3D and transitions

Demo ShineDraw\

Mix09Challenge

.NET, Base Class Library, Dynamic

CLR

Refactoring NET

Data Collection in SilverLight 2

• LINQ = L anguage IN tegrated Q uery

• Allows query expressions to benefit from compile-time

syntax checking, static typing & Intellisense

• Works on any IEnumerable<T>-based source

• Supports querying of in-memory data sources

• Other LINQ technologies forthcoming:

• XLINQ = LINQ for XML

• DLINQ = LINQ for relational data

var filteredPlayers = from p in players

Dynamic Language Run-time

• Open Source engine and languages

• Script Server (Chiron) for local development

SilverLight Unit Test Framework

• http://code.msdn.microsoft.com/silverlightut/

• Compatible withWindows and Mac Support Safari, Mozilla Firefox, and Internet Explorer.

• Features:

• Unit tests run right inside the web browser

• Enables testing of rich controls and the entire Silverlight platform

• Rich in-browser logging

• Basic asynchronous testing support

Extending the sandbox

(safely)

• Provides native OS experience

• Sandboxed API returns safe filename and readable stream

• Support for multiple files

// Create file dialog

OpenFileDialog ofd= new OpenFileDialog ();

ofd.Filter =

"Text Files (*.txt)|*.txt|All files (*.*)|*.*" ;

if (ofd.ShowDialog() == DialogResult OK) {

Demo Prosise/OpenFileDialogDemo

Isolated Storage

• Stream based access to a private file/directory structure

• Patterned after NET Framework IsolatedStorage classes

• Read and write string or binary data

• Store is per application XAP

• Application code to request size increase

• User prompt to accept quota increase

• Quotas fall into predetermined size slots

• Code must initiate increase size call from within user input/event

Demo ShineDraw\LocalcalStorage

Isolated Storage Quota

Microsoft Confidential

// Use application for storage scope (EG URL where application is from

www.microsoft.com/silverlight/app.xap and any DLLs loaded into this app domain)

IsolatedStorageFile isf = IsolatedStorageFile.GetUserStoreForApplication();

// The application knows it needs at least 5MB of isolated storage space

int spaceNeeded = 524288; // = 512K in bytes

// Check to see how much space is remaining

// The host did not allow the quota increase, meaning we do not have

// enough isolated storage space to do what we want; do not continue.

return ;

}

}

// We have at least 512K of isolated storage space available.

// Proceed with using it

// NOTE it is possible the host allocated more than 512K of space

//

// Find out what the new quota is

Debug.WriteLine( "New quota size " + isf.Quota.ToString() );

Isolated Storage Dictionary

• Dictionary access for settings

• Wraps low level IsolatedStorage

• Values are serialized using the WCF Data Contract serializer

Microsoft Confidential

LocalSettings localSettings = new LocalSettings();

//Add key, value pair

title = (string) localSettings[“Title”];

//Remove key from store

localSettings.Remove(“Price”)

// Explicitly commit settings Also committed when object goes out of scope

localSettings.Save();

HTML and Silverlight

Integration

HTML/AJAX and NET integration

Javascrip

t

.NET language

webpage

HTML Silverlig Silverlig ht ht

HTML

HTML + Silverlight

HTML + Silverlight

webpage

Working with HTML/Javascript

Access the HTML DOM from Managed Code

HTML access available in new namespace

myButton.AttachEvent(" onclick ", new

EventHandler( this myButtonClicked));

{ }

Static HtmlPage class provides entry point

Hookup events, call methods, or access properties

Access Managed Code from

JavaScript

1.- Mark a property, method or event as [Scriptable]

HtmlPage.RegisterScriptableObject ("EntryPoint", this);

HtmlPage.RegisterScriptableObject (" EntryPoint ", this );

2.- Register a scriptable object

3.- Access the managed object from script

Demo BrowserInteraction\CallJavaScript

Networking

Networking

• Asynchronous HTTP requests

• GET/POST

• Access to most headers, cookies,

• Uses browser networking stack

• Caching, authentication, proxy , compression

• For Beta1, site of origin only, cross-domain for RTW

void Connect(AddressFamily family)

{

SocketAsyncEventArgs connectArgs = new SocketAsyncEventArgs();

connectArgs.RemoteEndPoint = new DnsEndPoint(

Byte-range Seeking Support

• Enables seeking to non-downloaded portions of a file

stored on *any* HTTP 1.1-enabled web server.

• Win-win for content distributors and viewers

• Distributors save on bandwidth on non-viewed parts of

media

• Viewers get smaller latencies when seeking

• When Seek is called on the MediaElement

• New byte-range request is made, if needed;

• Silverlight keeps track of downloaded portions of the file;

• Playback continues from new position

• Supported almost everywhere.

• Easy to use, events-based async

• Download string, stream

void DownloadStringCompleted(object sender,

HttpWebRequest/Response ~ AJAX

• Primary API for HTTP/HTTPS

• Greater control (GET & POST, headers, etc)

private void MakeAsyncRequest()

{

HttpWebRequest request = (HttpWebRequest)

WebRequest.Create("http://foo.com/api? token=89");

IAsyncResult asyncResult = request.BeginGetResponse(

new AsyncCallback(ResponseCallback), request);

}

private void ResponseCallback(IAsyncResult ar)

{

HttpWebRequest request = ar.AsyncState as HttpWebRequest;

WebResponse response = request.EndGetResponse(ar);

Stream responseStream = response.GetResponseStream();

// Use stream

}

Cross-domain support

• 2 formats:

• Flash policy file

• Silverlight policy file

<? xml version = " 1.0 " ?>

<! DOCTYPE cross-domain-policy SYSTEM

" domain-policy.dtd " >

< domain uri = " http://customers.shop.com”/> "

< domain uri = " http://partner.com/app.xap " />

</ allow-from >

< grant-to >

< grant path = " /sales/serialnumbers.xml " />

< grant path = " /partners "

• Follows cross-domain policy restrictions

• Generated proxies support data binding

Reference.AddCompletedEventArgs>(client_AddCompl eted);

client.AddAsync( int.Parse(txtA.Text), int.Parse(txtB.Text));

SilverLight call REST

• REST= Representational State Transformation. 

Support 4 basic action GET, PUT, POST, DELETE ~

CRUD

• Two typed of returned formats: XML, JSON

• XML is easy to parse but bandwidth consuming

WebClient rest = new WebClient ();

rest DownloadStringCompleted += new

DownloadStringCompletedEventHandler(rest_DownloadStringComple ted);

rest DownloadStringAsync ( new Uri(flickrApi));

Silver Light for Business Applications

Silver Light for SharePoint

• SilverLight can integrated in SharePoint inside an web part or as custom field type

• http://www.codeplex.com/SL4SP

• http://www.wssdemo.com/pages/silverlight.aspx

• See video demo: