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.

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

Benutzerzentriertes Design

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.-

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.

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

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

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

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 ≠

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

Neue Werkzeuge für den Designer Blend = Zusammenmixen

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

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

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

1. Requirements Engineering

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

2. Vorbereiten der UI-Architektur

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

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

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

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

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

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

Demo

4. Styling durch den Designer

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

Demo

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:

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.