silverlight training

© Copyright GlobalLogic 2007

1

Microsoft .Net Framework 3.x


2

Agenda

• Introduction to .Net 3.0 (along with 3.5)

• What's new in .Net 3.0 – A developer perspective

– Introduction to XAML

• The WPF, WCF, WF and Cardspace

• Silverlight

• Demos / Hands on

• Questions and Answers


3

• .Net 3.0:

– Net combines the power of the .NET Framework 2.0 with new technologies for building applications that have visually compelling user experiences, seamless communication across technology boundaries, and the ability to support a wide range of business processes.

– NET Framework 3.0 is a superset of the .NET Framework, designed to expose the new functionality in Windows Vista® to the developer through managed classes.

Overview to .Net 3.0

Windows Vista (Longhorn) is tightly integrated with .net 3.0 framework. The Look and feel of Vista is enhanced using the WPF.


4

What's new in .Net 3.0 – A developer perspective

Programming model for Windows .NET Framework 3.0 consists of these basic components:

•.NET Framework 2.0

•Microsoft® Windows® Presentation Foundation (formerly Avalon)

•Microsoft® Windows® Communication Foundation (formerly Indigo)

•Microsoft® Windows® Workflow Foundation

•Windows CardSpace® (formerly code named "Infocard")


5

XAML

• One great benefit of XAML is that it helps to separate design and development, which actually helps to improve collaboration and efficiency between designers and software developers. As the XAML markup for an application's UI remains separate from the remainder of application logic, a designer's exact layout can be saved in XAML and combined with the application without affecting the development process.

• Easily toolable, declarative markup

• Code and content are separate

• Can be rendered in the browser / standalone application

• XPS – XML Paper Specification. Microsoft has integrated XPS-based technologies into the 2007 Microsoft Office system and the Microsoft Windows Vista operating system, but XPS itself is platform independent, openly published, and available royalty-free.


6

XAML

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

XAML

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

C#

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

VB.NET


7

Introduction to XAML

Extensible Application Markup Language

• Microsoft Tools for Designers & Microsoft Tools for Designers & DevelopersDevelopers

• Declarative Programming through Declarative Programming through XAMLXAML

• Third Party Tools (e.g. Aurora by Third Party Tools (e.g. Aurora by Mobiform, ZAM 3D by Electric Rain)Mobiform, ZAM 3D by Electric Rain)Designers designDesigners design

With XAML designers & With XAML designers &

developers can streamline developers can streamline

their collaborationtheir collaborationDevelopers add businessDevelopers add business logiclogic


8

Silverlight

Silverlight is a new cross-browser, cross-platform implementation of the .NET Framework for building and delivering the next generation of media experiences and rich interactive applications (RIA) for the Web. Silverlight unifies the capabilities of the server, the Web, and the desktop, of managed code and dynamic languages, of declarative and traditional programming, and the power of Windows Presentation Foundation (WPF).

Silverlight enables following features:• It is a cross-browser, cross-platform technology. It runs in all popular Web

browsers, including Microsoft Internet Explorer, Flock, Mozilla Firefox, Apple Safari, and Opera, and on Microsoft Windows and Apple Mac OS X.

• It provides a consistent experience no matter where it runs.• It is supported by a very small download that installs in seconds.• It streams video and audio. It scales video quality to everything from mobile

devices to desktop browsers.• It includes compelling graphics that users can manipulate—drag, turn, zoom—

directly in the browser. • It reads data and updates the display, but it doesn't interrupt the user by

refreshing the whole page.


9

Compelling Cross-Platform User Experiences

• Immersive media experiences & RIA• Seamless, fast installation for end

users• Consistent experiences on Mac /

Windows

Flexible programming model with collaborative tools

• Integration with Web technologies• Based on the .NET Framework• Role specific tools for designers /

developers

Efficient, lower cost delivery, and more capable media

• HD to Mobile w/ SMPTE VC-1• Broad media ecosystem• Tools for live and on-demand publishing


10


11

• Highly productive development framework– Multi-language support– Latest developer innovations (e.g. LINQ)– AJAX integration

• Great tools – Visual Studio– Expression Studio

• Cross-platform & cross-browser plugin– Works with Safari, Firefox and Internet Explorer – Mac OS X and Windows– Any web server– Fast, easy install process


12

• 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 are defined using XAML• Media Features

– 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

– Extensive WMV ecosystem


13

Silverlight JavaScript

• Silverlight XAML elements are scriptable via the browser script engine (JavaScript)

• Scriptable objects are obtained via findName– Scriptable objects (elements) can be controlled via

properties and methods– Models JavaScript and HTML DOM interaction– findName is equivalent to document.getElementById()– Supports tree walking via children collection

• Position set using "Canvas.Top" and "Canvas.Left"

Size can be scaled or set via Height/Width


14

Silverlight

How Silverlight offers features:• WPF and XAML. Silverlight includes Windows Presentation Foundation (WPF)

technology, which greatly extends the elements in the browser for creating UI. WPF lets you create graphics, animation, media, and other rich client features, extending browser-based UI beyond what is available with HTML alone. Extensible Application Markup Language (XAML) provides a declarative markup syntax for creating WPF elements.

• Extensions to JavaScript. Silverlight provides extensions to the universal browser scripting language that provide powerful control over the browser UI, including the ability to work with WPF elements.

• Cross-browser, cross-platform support. Silverlight runs the same on all popular browsers (on any platform). You can design and develop your application without having to worry about which browser or platform your users have.

• Integration with existing applications. Silverlight integrates seamlessly with existing JavaScript and ASP.NET AJAX code to complement functionality already created.

• Access to the .NET Framework programming model and to associated tools. Silverlight-based applications may be created using dynamic languages such as Managed JScript and IronPython as well as languages such as C# and Visual Basic. Development tools such as Visual Studio can be leveraged to create Silverlight-based applications.


15

Silverlight

• LINQ. Silverlight includes language-integrated query (LINQ), which enables data access using intuitive native syntax and strongly typed objects in .NET Framework languages.

Server-based resources in ASP.NET can be created to use the AJAX capabilities of ASP.NET to interact with server-based resources without interrupting the user.


16

Silverlight

XAMLXAMLXAMLXAML

Browser Host

Integrated Networking

Stack

DOM Integration

InstallerJavaScript

Engine

Presentation Core

.NET for Silverlight

Inputs

KeyboardMouse

Ink

Media

WMV / VC1WMAMP3

Controls

LayoutEditing

UI Core

2D VectorsAnimation

Text

ImagesTransform

s

DRM

Media

Dynamic Languages

Ruby Python

BCL

Generics

Collections

Web Services

RESTRSS

SOAP

POXJSONPOXJSON

Data

LINQ LINQ-to-XML

WPF for SilverlightExtensible Controls

Common Language RuntimeCommon Language Runtime

ASP.NET AJAX Libs

<asp:xaml><asp:media>

ServerSilverlight

1.0Silverlight

1.0Silverlight

1.1Silverlight

1.1

Legend


17

Silverlight


18

• Creating a custom control– Derive from System.Windows.Controls.Control– Define the look of the control in XAML– Call InitializeFromXaml(xaml) to build the initial

content– Store the return value to manipulate children

• Accessing a custom control from XAML– Namespace declaration locates the control– Use it like a regular control

xmlns:local="clr-namespace:SilverlightApp;assembly=ClientBin/AppBinary.dll

<local:myCustomControl PropertyX="10" FooEvent="OnFooEvent" />

xmlns:local="clr-namespace:SilverlightApp;assembly=ClientBin/AppBinary.dll

<local:myCustomControl PropertyX="10" FooEvent="OnFooEvent" />


19

• Browser based headers/cookies passed with request• Restricted to same domain access in the Alpha

– Cross-domain coming Make the HTTP Request

Process the response

Uri dataLocation = new Uri("http://localhost/trafficdata.xml");BrowserHttpWebRequest request = new BrowserHttpWebRequest(dataLocation);HttpWebResponse response = (HttpWebResponse)request.GetResponse();

Uri dataLocation = new Uri("http://localhost/trafficdata.xml");BrowserHttpWebRequest request = new BrowserHttpWebRequest(dataLocation);HttpWebResponse response = (HttpWebResponse)request.GetResponse();

StreamReader responseReader = new StreamReader(response.GetResponseStream());

string RawResponse = responseReader.ReadToEnd();

StreamReader responseReader = new StreamReader(response.GetResponseStream());

string RawResponse = responseReader.ReadToEnd();


20

• Core XML reading & writing capabilities in the alpha• RAD XLINQ support coming

Initialize the reader

Find a node and read its value

XmlReader xr = XmlReader.Create(new StringReader(RawResponse));XmlReader xr = XmlReader.Create(new StringReader(RawResponse));

xr.ReadToFollowing("Item");string playerNodeText = xr.Value;string playerNameAttribute = xr.GetAttribute("Name");

xr.ReadToFollowing("Item");string playerNodeText = xr.Value;string playerNameAttribute = xr.GetAttribute("Name");


21

• Visual Studio-based Proxy Generator enables strongly typed access

• ASP.NET JSON services supported in the Alpha• WCF and SOAP will be supported in future releases

Server-based web service

Call the Web Service from the client

[WebMethod]public List<Transaction> GetTransactionList() { ... }[WebMethod]public List<Transaction> GetTransactionList() { ... }

proxy = new BankProxy();transactionList = proxy.GetTransactionList().ToList();proxy = new BankProxy();transactionList = proxy.GetTransactionList().ToList();


22

HTML access available in new namespace

Static HtmlPage class provides entry point

Hookup events, call methods, or access properties

using System.Windows.Browser;using System.Windows.Browser;

HtmlPage.Navigate("http://www.microsoft.com");String server = HtmlPage.DocumentUri.Host;HtmlPage.Navigate("http://www.microsoft.com");String server = HtmlPage.DocumentUri.Host;

HtmlElement myButton = HtmlPage.Document.GetElementByID("myButtonID");myButton.AttachEvent("onclick", new EventHandler(this.myButtonClicked));

private void myButtonClicked(object sender, EventArgs e) { ... }

HtmlElement myButton = HtmlPage.Document.GetElementByID("myButtonID");myButton.AttachEvent("onclick", new EventHandler(this.myButtonClicked));

private void myButtonClicked(object sender, EventArgs e) { ... }


23

Mark a property, method or event as [Scriptable]

Register a scriptable object

Access the managed object from script

[Scriptable]public void Search(string Name) { ... }[Scriptable]public void Search(string Name) { ... }

WebApplication.Current.RegisterScriptableObject ("EntryPoint", this);WebApplication.Current.RegisterScriptableObject ("EntryPoint", this);

var control = document.getElementById("SilverlightControl");control.Content.EntryPoint.Search(input.value);var control = document.getElementById("SilverlightControl");control.Content.EntryPoint.Search(input.value);


24

Silverlight

• Silverlight RIA – Light up my web

• Silverlight and ASP .NET , AJAX


25

References

• http://msdn2.microsoft.com/en-us/netframework/default.aspx• http://www.gotdotnet.com/• Community Site: http://silverlight.net • Main Product Site: http://www.microsoft.com/silverlight • MSDN Center: http://msdn.microsoft.com/silverlight • Online Forums: http://silverlight.net/forums• Online SDK: http://msdn2.microsoft.com/bb188266.aspx

• Silverlight Blogs– Tim Sneath: http://blogs.msdn.com/tims – Laurence Moroney: http://blogs.msdn.com/webnext – Adam Kinney: http://adamkinney.com– Jesse Liberty: http://silverlight.net/blogs/jesseliberty/– Tim Heuer: http://timheuer.com– Dave Campbell: http://www.wynapse.com/

• Email: [email protected]


26

Questions and Answers

silverlight training

Business