Expression Blend for developers

Präsentation zum Thema: "Expression Blend for developers"—  Präsentation transkript:

1 Expression Blend for developers
3/28/2017 8:12 PM Christian Moser Developer und UX-Designer Zühlke Engineering AG Expression Blend for developers © 2007 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

2 Benutzerzentriertes Design
«Products are easily copied – experience is unique. » Howard Schultz, CEO

3 Benutzerzentriertes Design

4 Benutzerzentriertes Design
NWZ-S616F/S iPod nano Rationale Ebene Emotionale Laufzeit Speicher Auflösung Preis 24h Musik 4 Gbyte 320x240Pixel CHF 197.- 33h Musik 4 Gbyte 320x240Pixel CHF 167.-

5 Das Produkt wird zum Erlebnis
Produkte und Dienstleistungen müssen neben den rationalen Vorteilen, emotionale Erlebnisse schaffen, die den Kunden begeistern. Egal welches Produkt - alle Kunden sind Menschen und haben eine User Experience.

6 Welche Skills werden benötigt, um dieses Erlebnis zu schaffen?
Rolle des Entwicklers Abbildung der Softwarearchitektur Implementierung der Businesslogik Erstellen eines funktionalen UI Rolle des Interaction-Designers Grafisches Design des UI Sicherstellen einer guten Usability Einbinden von Multimediainhalten

7 Die Toollandschaft heute
Visio Prototypen Photoshop Dateien Vektorgrafiken und Bitmaps C# Dateien EXE‘s und DLL‘s .resx Dateien Entwickler Designer

8 Konventioneller Designer-Entwickler Workflow
Visio Prototypen Photoshop Dateien Einzele Bitmaps Designer Entwickler

9 Unschönheiten im konventionellen Workflow
Einweg vom Designer zum Entwickler (kein Roundtrip) Medienbruch durch unterschiedliche Dateiformate WinForms Controls lassen sich nicht beliebig stylen Entwickler versucht Design nachzubauen ≠

10 Neue Werkzeuge für den Designer
Webseiten entwickeln und gestalten User Interfaces designen und integrieren Videos schneiden und codieren Vektor- und Bitmapgrafiken erstellen und konvertieren

11 Neue Werkzeuge für den Designer
Blend = Zusammenmixen

12 Verbesserter Workflow mit WPF
<XAML> <XAML> Designer Entwickler

13 Schrittweise Migration des Workflows
Collaboration Modell Designer Entwickler Harvester Modell Designer Entwickler Designer Entwickler Integrator Integrator Modell

14 Von der Theorie zur Praxis
Wir spielen den Roundtrip am Projekt „TechDays Messenger“ durch

15 1. Requirements Engineering

16 Features und Storyboard
TechDays HEROES Benutzername Vorname Nachname Infos zum Benutzer Suche nach Kontakten Kontakte Suchen: Arbeit Gruppierte Kontaktliste Kontakt 1 Vorname Nachname Kontakt 2 Vorname Nachname Freunde Kontakt 3 Vorname Nachname Gruppierungskriterium Umschaltbar Cooles TechDays Skin Kategorie Name

17 2. Vorbereiten der UI-Architektur

18 Konventioneller Ansatz: UI-Logik im Eventhandler
Nachteile dieser Variante View-Logik und View sind stark gekoppelt Die View-Logik kann nicht ohne View getestet werden Unit Testing nicht möglich (Aufwändige UI-Tests nötig) Starre-Anbindung, Designer hat wenig Spielraum

19 Bessere Variante - Das ViewModel Pattern
Lose Koppelung! ViewModel kann ohne View instanziert werden. Komplette UI-Logik im ViewModel Unit-Testing möglich! Model

20 2. Daten und Commands anbinden
Unter Einhaltung des ViewModel-Patterns

21 Best Practices zum losen Anbinden von Aktionen
DataBinding Anbindung beliebiger .NET Objekte Uni- oder Bidirektional Notifikation über INotifyPropertyChanged oder INotifyCollectionChanged Value Converter Wandeln Format von Daten Flexibel zuschaltbar

22 Best Practices zum losen Anbinden von Aktionen
EventHandler Melden UI-Aktionen an das ViewModel Update des ViewModels während Texteingabe Commands Viele Standard-Commands vorhanden Eigene Commands erstellen mit ICommand

23 Anwenden der „Best Practices“ auf unser Projekt
Image to BitmapImage ValueConverter MainWindow_ViewModel DataBinding Contact CurrentUser txtFilter_TextChanged() IList<Contact> ContactList ICommand SortByCategory ICommand SortByName Event Handler DataBinding Arbeit Command Binding Kontakt 1 Vorname Nachname Contact Kontakt 2 Vorname Nachname Firstname Lastname Displayname Age Picture Category View ViewModel

24 Demo

25 4. Styling durch den Designer

26 Darauf sollte der Designer achten
Versionskonflikte vermeiden Expression-Tools haben keine integrierte Source-Verwaltung Ressourcenbewusst designen Aufwändige Effekte vermeiden Grafiken, Styles und Templates auslagern Ressource-Dateien verwenden Lokalisierung

27 Demo

28 Zusammenfassung Die Expression-Tools verbessern den Workflow zwischen Designer und Entwickler deutlich Die Migration des Workflows erfolgt schrittweise Mit dem ViewModel-Pattern wird die View-Logik entkopppelt und per UnitTests testbar. Blend und VS-Designer sind gut, aber XAML-Kenntnisse sind notwenig Buchtipps:

29 3/28/2017 8:12 PM © 2007 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION. © 2007 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.