• Teile einer Silverlight Applikation

(1)

(2)

Silverlight

• Übersicht

• Teile einer Silverlight Applikation

• XAML

• Der Code im Hintegrund

• Tools

• Zusammenfassung

(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

(4)

Requierments

(5)

Die Teile einer Silverlight Applikation

• Silverlight.js

• Der Code in der HTML Seite

• XAML

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

(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

(7)

CreateSilverlight.js

(8)

HTML

(9)

XAML

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

<object>

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

<child.property>

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

</child.property>

</child>

<child>

</child>

</object>

(10)

XAML Elemente in Silverlight

• Canvas

• Line

• TextBlock

• Rectangle

• Image

• Video

Eigenschaften der Elemente

• Width & Height

• Canvas.Left & Canvas.Right

• Name

• Events

(11)

XAML Editor - Microsoft Blend 2

(12)

Transformationen/Storyboards in XAML

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

(13)

Events und Storyboard

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

(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();

(15)

Dynamische Generierung von XAML Elemente

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

(16)

Tools

Expression Web Expression Design

Expression Blend 2 Preview Expression Media

Expression Media

Visual Studio

(17)

Vorteile und Nachteile

Vorteile:

• Mehrere kleine Applikationen (Widgets) in eine bereits existierende Webseite einbauen.

• Wenig neuer Code.

• Objekt Orientierte Programmierung.

Nachteile:

• Hohe Rechnerleistung bei größeren Applikationen.

(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

(19)

Beispiel

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