Microsoft Silverlight

Zlatko Filipovski | 14.02.2008

Silverlight | Zlatko Filipovski | 14.02.2008Seite 2

Silverlight

• Übersicht • Teile einer Silverlight Applikation• XAML• Der Code im Hintegrund • Tools• Zusammenfassung

Silverlight | Zlatko Filipovski | 14.02.2008Seite 3

Microsoft Silverlight

„Microsoft Silverlight is a cross-browser, cross-platform plug-in for delivering the next generation of .NET-based media experiences and rich interactive applications (RIAs) for the Web. “

http://msdn2.microsoft.com/en-us/silverlight/

Kleiner Brüder von WMF(Widows Media Foundation)

Eigenschaften:• Funktioniert mit unterschiedlichen Browsern unter Win, Linux und

Mac• Wiedergabe von Rich User Experiences (XAML)• Wiedergabe von Musik und Videos• Klein

Silverlight | Zlatko Filipovski | 14.02.2008Seite 4

Requierments

Silverlight | Zlatko Filipovski | 14.02.2008Seite 5

Die Teile einer Silverlight Applikation

• Silverlight.js

• Der Code in der HTML Seite

• XAML

• Der Code im Hintegrund (.js, .vs, .vb, …)• Der Code im Hintegrund (.js, .vs, .vb, …)

Silverlight | Zlatko Filipovski | 14.02.2008Seite 6

Silverlight.js

Eine Standard JS Datei aus der Silverlight SDK die eine JavaScript Funktion enthält, die die Silverlight Applikation Initialisiert

7500 Zeichen

Silverlight.js

Silverlight | Zlatko Filipovski | 14.02.2008Seite 7

CreateSilverlight.js

Silverlight | Zlatko Filipovski | 14.02.2008Seite 8

HTML

Silverlight | Zlatko Filipovski | 14.02.2008Seite 9

XAML

XAML – Ein deklerative XML basierte Sprache, die Objekte und deren Eigenschaften definiert.

<object><child property="x" property="y"><child.property><child.property>

<class property="u" property="v"/></child.property>

</child><child></child>

</object>

Silverlight | Zlatko Filipovski | 14.02.2008Seite 10

XAML Elemente in Silverlight

• Canvas• Line• TextBlock• Rectangle• Image• Video

Eigenschaften der Elemente

• Width & Height• Canvas.Left & Canvas.Right• Name• Events

Silverlight | Zlatko Filipovski | 14.02.2008Seite 11

XAML Editor - Microsoft Blend 2

Silverlight | Zlatko Filipovski | 14.02.2008Seite 12

Transformationen/Storyboards in XAML

http://mkdcom.com/ria/Transformation/

Silverlight | Zlatko Filipovski | 14.02.2008Seite 13

Events und Storyboard

http://mkdcom.com/ria/Transformation2/

Silverlight | Zlatko Filipovski | 14.02.2008Seite 14

The Code Behind

Silverlight 1.0 (JavaScript) Silverlight 2.0 (C# || VB)

this.button = rootElement.children.getItem(0); Ellipse MyEllipse = this.ellipse;

this.button.addEventListener("MouseLeftButtonUp", MyEllipse.MouseLeftButtonUp += new MouseEventHandler(e_MouseLeftButtonUp);MouseEventHandler(e_MouseLeftButtonUp);

Silverlight.createDelegate(this, this.handleMouseUp));

var mouseEnterAnimation = sender.findName(„Ani"); this.Storyboard1.Begin();

mouseEnterAnimation.begin();

Silverlight | Zlatko Filipovski | 14.02.2008Seite 15

Dynamische Generierung von XAML Elemente

http://mkdcom.com/ria/Dynamic/

Silverlight | Zlatko Filipovski | 14.02.2008Seite 16

Tools

Expression Web

Expression Design

Expression Blend 2 Preview

Expression MediaExpression Media

Visual Studio

Silverlight | Zlatko Filipovski | 14.02.2008Seite 17

Vorteile und Nachteile

Vorteile:• Mehrere kleine Applikationen (Widgets) in eine bereits existierende

Webseite einbauen.• Wenig neuer Code.• Objekt Orientierte Programmierung.

Nachteile:Nachteile:• Hohe Rechnerleistung bei größeren Applikationen.

Silverlight | Zlatko Filipovski | 14.02.2008Seite 18

Vorteile und Nachteile

Silverlight 1.0•Kein Compiler nötig•Nur JavaScript•Kein TypeCast•Media und Grafik orientiert•Jeder kann denn SourceCode sehen

Silverlight 2.0•Hohe Geschwindigkeit •C#, VB, python, ruby•Compiler nötig•Richtige RIA sprache

Silverlight | Zlatko Filipovski | 14.02.2008Seite 19

Beispiel

http://demo.themsteam.com/videopuzzle/