Ein UI in zwei Welten - Controls in HTML5 und WPF. Timo Korinth

Transkript

1 Ein UI in zwei Welten - Controls in HTML5 und WPF Timo Korinth

2 Timo Korinth Lead Developer HTML5 bei maximago Zuvor.NET / WPF Entwicklung

3 Warum überhaupt HTML5 und WPF? Was bedeutet Control-Entwicklung und was sind die Vorteile eines UI- Frameworks? Wie könnte eine übergreifende UI- Entwicklung aussehen? Ist das alles nur Theorie?

4 Warum WPF?

5 Warum WPF? XAML Kein UI mehr im Code zusammenbauen <Border Visibility="Collapsed" BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="{DynamicResource PressedMainInteractionBorder}" Background="{DynamicResource PressedInteractionBackground}"/> <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Margin="{TemplateBinding Padding}" />

6 Warum WPF? XAML MVVM Saubere Trennung von UI und Logik C# UI

7 Warum WPF? XAML MVVM Styles / Templates Einfache Gestaltung von komplexen Controls

8 Warum WPF? XAML MVVM Styles / Templates Rich UI Einfache Gestaltung von Animationen und Übergängen

9 Warum HTML5?

10 Warum dann überhaupt HTML5? WPF läuft nur unter Windows

11 Warum dann überhaupt HTML5? WPF läuft nur unter Windows Rollout nicht immer leicht

12 Warum dann überhaupt HTML5? WPF läuft nur unter Windows Rollout nicht immer leicht WPF ist wenig mobil

13 Warum dann überhaupt HTML5? WPF läuft nur unter Windows Rollout nicht immer leicht WPF ist wenig mobil HTML Hype

14 So oder so Was bedeutet Control-Entwicklung und Was sind die Vorteile eines UI-Frameworks?

15 UI-Framework

16 Dazu erst mal ein paar typische Probleme:

17 Dazu erst mal ein paar typische Probleme: Design vs. Entwicklung Umgesetztes UI stimmt nicht mit den Design- Vorgaben überein vs.

18 Dazu erst mal ein paar typische Probleme: Design vs. Entwicklung Inkonsistenzen im UI Abstände, Größen, Farben etc. unterscheiden sich von View zu View vs.

19 Dazu erst mal ein paar typische Probleme: Design vs. Entwicklung Inkonsistenzen im UI Entwicklung ist langsam Das Rad muss jedes Mal neu erfunden werden und die Entwickler können sich nicht alleine auf die Business Logik konzentrieren

20 Dazu erst mal ein paar typische Probleme: Design vs. Entwicklung Inkonsistenzen im UI Entwicklung ist langsam Themebarkeit meist schwierig Entwicklung und Austausch eines neuen Look & Feel meist sehr aufwendig

21 Wie können solche Probleme vermieden werden?

22 Wie können solche Probleme vermieden werden? Controls kapseln Design und Verhalten Inkl. Farben, Abstände, Größen, Zustände Normal Mouse Over

23 Wie können solche Probleme vermieden werden? Controls kapseln Design und Verhalten Controls kapseln Layout Layout Container als Fundament einer View Application Container Master-Detail Container

24 Wie können solche Probleme vermieden werden? Controls kapseln Design und Verhalten Controls kapseln Layout Controls als Bausteine der Anwendung Views werden durch Controls konfiguriert

25 Wie können solche Probleme vermieden werden? Controls kapseln Design und Verhalten Controls kapseln Layout Controls als Bausteine der Anwendung Control-Design einfach austauschbar Trennung von Control-Aufbau und Design- Parametern

26 Controls in HTML5 und WPF

27 WPF Custom Controls XAML HTML5 / JavaScript AngularJS directives Less

28 JavaScript Cliententwicklung Data Binding MVVM View Composition Directives (Custom Controls)

29 Dynamische Stylesheet Sprache Erweitert CSS um Variablen, Funktionen, Operationen Kompiliert CSS

30 Control Aufbau

31 Logik C# JS

32 Control Logik Definition von Eigenschaften Definition von Zuständen Definition von Events Logik zur Steuerung

33 WPF Control Logik Control Definition [TemplatePart(Name = "WatermarkText", Type = typeof(textblock))] public class ExtTextBox : TextBox Definition von Eigenschaften public static DependencyProperty WatermarkTextProperty = DependencyProperty.Register("WatermarkText", typeof(string), typeof(exttextbox));

34 AngularJS Control Logik Control Definition app.directive('extbutton', function () {... } Definition von Eigenschaften scope: { } content: '@', clicked: '&', isdisabled: '=?'

35 Logik XAML Template HTML

36 Control Template Definition der Bausteine eines Controls Definition der visuellen Zustände Normal Mouse Over Pressed Selected Rahmenelemente

37 WPF Control Template <Border x:name="normalbackground" Background="{DynamicResource NormalInteractionBackground}" CornerRadius="{DynamicResource InteractionMainCornerRadius}" BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="{DynamicResource MainInteractionBorder}" /> <Border x:name="disabledbackground" Visibility="Collapsed" Background="{DynamicResource NormalDisabledInteractionBackground}" CornerRadius="{DynamicResource InteractionMainCornerRadius}" BorderThickness="{DynamicResource InteractionMainBorderThickness}" BorderBrush="{DynamicResource DisabledMainInteractionBorder}" />

38 HTML Control Template <button class="extbutton{{stylecontext}} master" data-ng-class="{'disabled': isdisabled}" type="button" data-ng-disabled="isdisabled" data-ng-click="clicked()" data-tabindex="0"> <span class="slave"> <span>{{content}}</span> <span data-ng-transclude></span> </span> </button>

39 Logik Template XAML Style Less / CSS

40 Style Setzen von Eigenschaften Beeinflusst das Control Template Normal Background Color Mouse Over Background Color Pressed Background Color Selected Background Color

41 WPF Style <Style TargetType="{x:Type Controls:ExtButton}"> <Setter Property="HorizontalContentAlignment" Value="Center" /> <Setter Property="VerticalContentAlignment" Value="Center" /> <Setter Property="BorderThickness" Value="{DynamicResource InteractionMainBorderThickness}" /> <Setter Property="Foreground" Value="{DynamicResource NormalInteractionForeground}" />

42 Less / CSS Style &.master {

43 Probleme mit Styles (in WPF): Nur Zugriff auf definierte Eigenschaften Normal Background Color Mouse Over Background Color Pressed Background Color Selected Background Color

44 Trennung von Control-Aufbau und Design- Parametern

45 Logik Template Resource Dictionary Design Parameter Less

46 Design Parameter Definition von Farben, Größen, Abständen Beeinflusst das Control Template Einheitliche Namensgebung Austauschbar für Bereiche in der Anwendung Wiederverwendbar zwischen WPF und HTML

47 WPF Design Parameter <SolidColorBrush x:key="normalinputbackground" Color="WhiteSmoke" /> <SolidColorBrush x:key="normalinputforeground" Color="#FF666666" /> <SolidColorBrush x:key="mouseoverinputbackground" Color="#FFE2E2E2" /> <SolidColorBrush x:key="mouseoverinputforeground" Color="#FF666666" />

48 Less Design #666666;

49 Logik Template Style Design Parameter Design Parameter Design Parameter

50 Das selbe Control mit verschiedenen Design Parametern für andere Bereiche

51 DEMO

52 FRAGEN?

53 Ich freue mich auf Ihr Feedback! Vielen Dank! Timo Korinth