Übersicht - W indows P resentation F oundation - Werkzeug zur Entwicklung grafischer Benutzeroberflächen - deklarative Definition erfolgt mit der Beschreibungs- Sprache: XAML - XAML - Extensible Application Markup Language - XML (Dialekt) Beschreibungsprache für Oberflächen - Oberflächendesigner arbeitet mit XAML - Ziel: Trennung Design und Implementierung Getrenntes Arbeiten von Designer und Entwickler - spezielle Designtools (MS Expression Blend) - Compiler erzeugt aus XAML-Code automatisch Instanzen von Klassen (Bsp.: Klasse Button) Komponenten & Frameworks Seite 1
Design: XAML-Datei <Window x:class="1.window1" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="1" Height="300" Width="300"> <Grid> <TextBox Height="34" Margin="65,34,83,0" Name="textBox1" VerticalAlignment="Top" ></TextBox> <Button Margin="65,122,81,113" Name="button1" Click="button1_Click">Rechne</Button> </Grid> </Window> Implementierung: Csharp-Datei (Funktionalität) public partial class Window1 : System.Windows.Window {public Window1(){ InitializeComponent(); button1.click += new RoutedEventHandler(button1_Click);} public void button1_click(object sender, RoutedEventArgs e) {textbox1.text = "Click";}} Komponenten & Frameworks Seite 2
Merkmale - Benutzeroberfläche wird deklarativ definiert Code separat (ähnelt: ASP Code-Behind-Modell) - Oberfläche verwendbar in - normaler Windowsanwendung (Fenster) - Browser - unterstützt 2D- und 3D-Grafiken - Ausgabe ist vektorbasiert (=> skalierbar) - vielfältige grafische Unterstützung (Video, Bilder, Audio) und sehr gute Datenanbindungsmöglichkeiten Komponenten & Frameworks Seite 3
WinForm oder? - extrem leistungsfähig - Microsoft entwickelt WinForm nicht mehr weiter Entwicklungstools - Visual Studio - Designertool: Expression Blend Komponenten & Frameworks Seite 4
Anwendungstypen - -Anwendung entsprechen Windows-Anwendungen, stellen eigenes Fenster bereit - -Browseranwendung stellen kein eigenes Fenster bereit laufen im Browser - -Benutzersteuerelementebibliothek neues Steuerelement aus bestehenden zusammensetzen - Benutzerdefinierte Steuerelementebiliothek eigene Steuerelemente entwicklen Komponenten & Frameworks Seite 5
-Anwendung - entspricht Windows-Anwendung - Visual Studio erstellt die Dateien: App.xaml Verweis auf Startfenster und Ressourcen App.xaml.cs enthält die Applikations-Klasse App (veröffentlicht Eigenschaften und löst Ereignisse aus) MainWindow.xaml beschreibt Oberfläche und stellt Bezug zu Programmcode her MainWindow.xaml.cs enthält Programmcode zur Oberfläche (Code-Behind) Komponenten & Frameworks Seite 6
Kompilation einer -Anwendung Applikationsklasse Hauptfenster App.xaml App.xaml.cs Window1.xaml Window1.xaml.cs App.g.cs Window1.g.cs Window1.baml.g.resources (Konfiguration) EXE Komponenten & Frameworks Seite 7
XAML - extensible Application Markup Language - deklarative Programmiersprache - Basis: XML - jede XAML-Datei besitzt ein Wurzelelement - -Anwendung: Window - Browser-Anwendung: Page - innerhalb des Wurzelementes erfolgt Beschreibung i. d. R. werden Container (Grid,StackPanel,...) verwendet. Elemente können verschachtelt werden. Komponenten & Frameworks Seite 8
XAML-Elemente - entsprechen -Klassen - Bsp.: Button - Deklaration per XAML <Button Margin="65,122,81,113" Name="button1">Rechne</Button> - Codierung per Programm (nicht als XAML) Button btn = new Button(); Btn.Content = button1 ; this.addchild(btn); AddChild führt die Zuordnung zum übergeordneten Container aus Komponenten & Frameworks Seite 9
Ereignisse - Die Verarbeitung von Benutzerinteraktionen erfolgt über Ereignisse - Basis: Observer-Pattern, Delegaten - Bsp.: Button-Click in XAML <Button Margin="65,122,81,113" Name="button1" Click="button1_Click">Rechne</Button> als Programmcode button1.click += new RoutedEventHandler(button1_Click); - -Elemente können verschachtelt werden Komponenten & Frameworks Seite 10
Verschachtelte Elemente Wie erfolgt die Eventverarbeitung bei verschachtelten Elementen? Bsp.: Klick auf Label Klick mich... Label in Button in Grid in Window Komponenten & Frameworks Seite 11
Ereignistypen - Direkte Events Werden nur von den Elementen verarbeitet bei denen sie aufgetreten sind. - Tunneling-Events weiterreichen von der Wurzel an untergeordnete Elemente - Bubbling-Events weiterreichen an übergeordnete Elemente entspricht der Bearbeitung von Standardevents Komponenten & Frameworks Seite 12
Beispiel: Mouse-Events - GotMouseCapture (Bubble) - MouseEnter(Direct) - MouseLeave (Direct) - PreviewMouseLeftButtonDown(Tunnel) MouseLeftButtonDown(Bubble) - [Preview]MouseMove(Tunnel,Bubble) -... Verarbeitung 1. Verarbeitung der Tunneling-Events 2. Verarbeitung der Bubbling-Events Ereignisse abbrechen: e.handled = true; Komponenten & Frameworks Seite 13
Container - Window - entspricht herkömmlicher WinForm-Technologie - Anwendung durch mehrere Fenster gekennzeichnet - Navigation: öffnen und schliessen von Fenstern - Klasse Window: Container für Steuerelemente - NavigationWindow - entspricht Konzept von Internet-Browsern - Inhalte werden auf mehrere Seiten verteilt - Navigation: Vor und Zurück - Klasse NavigationWindow - von Window abgeleitet - Inhalte durch Page-Objekte beschrieben - System.Windows.Controls.Page kapselt Inhaltsseite, zu der navigiert werden kann Komponenten & Frameworks Seite 14
Layout-Container Anordnung und Darstellung der Elemente wird durch Layout- Container geregelt - i. d. R. relative Positionen - nur Canvas arbeitet mit absoluten Positionen - Layout-Container können verschachtelt werden Layout-Container-Typen - Canvas - StackPanel - WrapPanel - DockPanel - Uniform Grid - Grid Komponenten & Frameworks Seite 15
-Steuerelemente - besitzen tiefe Vererbungshierarchie (siehe unten) - Content Eigenschaft - in Basisklasse ContentControl - Kann genau ein Element vom Typ Object enthalten: - Text oder - beliebiges anderes Steuerelement (Verschachtelung) => vielfältige Gestaltungsmöglichkeiten Komponenten & Frameworks Seite 16
Steuerelemente-Hierarchie Quelle: Visual C#2010 Komponenten & Frameworks Seite 17
Datenbindung - Synchronisation zwischen DatenQuelle und Steuerelement - alle abhängigen Eigenschaften sind datenbindungsfähig - Datenquellen - Eigenschaften anderer Komponenten - XML-Datei - Collection - Datenbank - Klassen - Binding Beschreibt Datenbindung zwischen Quelle und Komponente - DataContext stellt Daten bereit (Bindeglied: Quelle Komponente) Komponenten & Frameworks Seite 18
Beispiel: Synchronisation Textbox <TextBox Height="34" Margin="65,34,83,0" Name="textBox1" VerticalAlignment="Top"> </TextBox> <TextBox Height="23" HorizontalAlignment="Left" Margin="65,82,0,0" Name="textBox2" VerticalAlignment="Top" Width="132"> </TextBox> <Binding ElementName="textBox1" Path="Text" /> - ElementName gibt Namen der Datenquelle an - Path beschreibt die Eigenschaft der Datenquelle Komponenten & Frameworks Seite 19
Silverlight - ermöglicht Ausführung von Rich-Internet-Applications im Browser - plattformunabhängiges WebFramework - verwendet XAML (siehe unten) - Betriebssysteme: Windows und Macintosh - unterstützte Browser: Internet Explorer, Mozilla Firefox, Opera und Safari - Plugin erforderlich (ca. 4 MB, 60% Verbreitungsgrad) - Silverlight Code wird auf dem Client ausgeführt - Linux-Variante: Moonlight - Alternative zu ASP.NET - Konkurrenzprodukt: Adobe Flash Zukunft HTML5? Komponenten & Frameworks Seite 20
XAML Code <UserControl x:class="silverlightapplication1.mainpage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/pres entation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2 008"xmlns:mc="http://schemas.openxmlformats.org/markupcompatibility/2006" mc:ignorable="d" d:designheight="300" d:designwidth="400"> <Grid x:name="layoutroot" Background="White"> <TextBox Height="34" Margin="65,34,83,0" Name="textBox1" VerticalAlignment="Top"></TextBox> <Button Margin="65,122,81,113" Name="button1" Click="button1_Click">Rechne</Button> </Grid> </UserControl> Komponenten & Frameworks Seite 21
Silverlight - Silverlight verwendet XAML zur Deklaration der Oberfläche - XAML ist nicht identisch Silverlight XAML - aber: im wesentlichen übereinstimmend - Unterschiede - Databindung erfolgt unterschiedlich -Bsp.: <Binding ElementName="textBox1" Path="Text" /> - Routed Events werden unterschiedlich modelliert - Silverlight hat keinen Print-Support -... Komponenten & Frameworks Seite 22