tool development 10 - mvvm, tool chains

Tool DevelopmentChapter 10: MVVM, Tool Chains

Nick Prühs

5 Minute Review Session

• What is the difference between Globalization and Localization?

• Name a few globalization best practices!

• What are the main advantages of unit testing?

• What are the most important limits of unit tests?

• Explain the process of Test Driven Development!

• What are the upsides and downsides of TDD?

2 / 58

Assignment Solution #9

DEMO

3 / 58

Objectives

• To understand the implications of the MVVM pattern

• To get an overview of approaches for tool chains

4 / 58

Model-View-Controller

• Architectural pattern that separates data from its visual representation• Model: Data, such as names, phone numbers, or health

points.

• View: Visual representation of that data, such as console output, UI textfields or health bars.

• Controller: Layer that separates model from view, serving as interface for any interaction with the data.

5 / 58

Model-View-Controller

6 / 58

Model-View-Controller

• Allows exchanging views or modifying the model without breaking existing functionality.• For instance, write console client first and GUI client

after.

• Greatly improves your application architecture through separation of concerns.• Anybody always knows where to look in your code.

7 / 58

Model-View-View Model

• Architectural pattern that separates data from its visual representation• Model: Data, such as names, phone numbers, or health

points.

• View: Visual representation of that data, such as console output, UI textfields or health bars.

• View Model: Responsible for exposing data from the model in such a way that those objects are easily managed and consumed

8 / 58

Model-View-View Model

9 / 58

Model-View-View Model

• Attempts to gain both the advantages of separation of functional development provided by MVC as well as leveraging the advantages of data bindings• binds data as close to the pure application model as

possible

• uses inherent data checking features to validate any incoming data

10 / 58

Where Is The Controller?

• Substituted by bindings• Synchronize the view model and view

• Key enablers of the pattern

• Controller sometimes included anyway• Ongoing area of discussion regarding the standardization

of the MVVM pattern

11 / 58

Drawbacks of MVVM

• Overkill for simple UI operations

• Can result in considerable memory consumption in very large applications

• Where to put event handlers for e.g. button clicks?

12 / 58

Data Conversion

• Sometimes, you might be willing to bind a property to a value of a different type (e.g. Color to Brush)

• WPF allows to you implement the IValueConverterinterface for• changing data from one type to another

• translating data based on cultural information

• modifying other aspects of the presentation

13 / 58

Data Conversion

XAML

14 / 58

<Window x:Class="DataConversionExample.MainWindow"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

xmlns:local="clr-namespace:DataConversionExample"

mc:Ignorable="d"

Title="MainWindow" Height="350" Width="525">

<Window.Resources>

<local:NotConverter x:Key="NotConverter"/>

</Window.Resources>

<CheckBox

Content="Prohibited"

IsChecked="{Binding Allowed, Converter={StaticResource NotConverter}}">

</CheckBox>

</Window>

Data Conversion

C#

15 / 58

class NotConverter : IValueConverter

{

public object Convert(object value, Type targetType, object parameter, CultureInfo culture)

{

bool boolValue;

if (value == null || !bool.TryParse(value.ToString(), out boolValue)) return null;

return !boolValue;

}

public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)

{

return new NotImplementedException();

}

}

Data Validation

• Most of the time, you need to validate that the user has entered the expected information in the correct format.

• Validation checks can be based on type, range, format, or other application-specific requirements.

• WPF data binding allows you to associate ValidationRules with your bindings.

16 / 58

Data Validation

XAML

17 / 58

<Application x:Class="DataValidationExample.App"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"xmlns:local="clr-namespace:DataValidationExample"StartupUri="MainWindow.xaml">

<Application.Resources><ControlTemplate x:Key="ErrorLabel">

<StackPanel><Border BorderBrush="Red" BorderThickness="1">

<AdornedElementPlaceholder Name="MyAdorner" /></Border><TextBlock

Foreground="Red"FontSize="8pt"Text="{Binding ElementName=MyAdorner,Path=AdornedElement.(Validation.Errors)[0].ErrorContent}" />

</StackPanel></ControlTemplate>

</Application.Resources></Application>

Data Validation

XAML

18 / 58

<Window x:Class="DataValidationExample.MainWindow"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

xmlns:local="clr-namespace:DataValidationExample"

mc:Ignorable="d"

Title="MainWindow" Height="350" Width="525">

<TextBox Validation.ErrorTemplate="{StaticResource ErrorLabel}">

<TextBox.Text>

<Binding Path="Name">

<Binding.ValidationRules>

<local:StringNotEmptyValidationRule />

</Binding.ValidationRules>

</Binding>

</TextBox.Text>

</TextBox>

</Window>

Data Validation

C#

19 / 58

public class StringNotEmptyValidationRule : ValidationRule

{

public override ValidationResult Validate(object value, CultureInfo cultureInfo)

{

var s = value as string;

if (s == null || string.IsNullOrEmpty(s))

{

return new ValidationResult(false, "Must not be empty.");

}

return ValidationResult.ValidResult;

}

}

Data Bind for Unity

DEMO

20 / 58

Cancelling Events

• Many of the events in WPF can be cancelled by your code to implement special event handling.

• These events usually are provided twice by WPF, one for the actual event, and one for signaling that the event is about to occur• OnClosing

• OnClosed

21 / 58

Cancelling Events

WPF

22 / 58

<Window x:Class="CancelEventExample.MainWindow"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

xmlns:local="clr-namespace:CancelEventExample"

mc:Ignorable="d"

Title="MainWindow" Height="350" Width="525" Closing="MainWindow_OnClosing">

Cancelling Events

C#

23 / 58

private void MainWindow_OnClosing(object sender, CancelEventArgs e)

{

var result = MessageBox.Show(

"Do you want to save your progress before exiting?",

"Unsaved Data",

MessageBoxButton.YesNo,

MessageBoxImage.Question,

MessageBoxResult.Yes);

if (result == MessageBoxResult.Yes)

{

e.Cancel = true;

// Show save file dialog.

}

}

Tool Chains

• Output of one tool is used as input for another• Photoshop -> Sprite Packer, Texture Compression

• Build Server -> Git, MSbuild, Unity, NUnit

• Visual Studio -> Post-build events

• Excel -> VBA

• Localization

• Unity Editor Scripts

24 / 58

Tool Chains

DEMO

25 / 58

Tool Chains

• Technical Requirements• Command-line parameters

• Non-blocking operation (i.e. must not require user input for proceeding)

• Robust error (code) handling

• User Requirements• Good understanding of file systems and working

directories

• Sometimes: Access to system environment variables

• Sometimes: Understanding of different OS

26 / 58

WPF Designer

DEMO

27 / 58

Review Session

28 / 58

What You Have Learned

Basic development process of good Desktop apps

Importance of good UI and UX design

Developing basic Desktop applications with WPF

How to approach common I/O tasks in .NET

Best practices of file and stream I/O in general

Advanced XML concepts such as XPath and XSLT

Overview of other common text-based file formats

29 / 58

What You Have Learned

How to use reflections to your advantage

How to create reactive UIs with worker threads

How to implement an undo/redo stack

How to interact with the Windows shell

How to globalize and localize WPF applications

How to properly set up automatic tests

How to work in teams using GitFlow

30 / 58

And now…

Go out and make some tools!

31 / 58

References

• Wikipedia. Model View ViewModel. http://en.wikipedia.org/wiki/Model_View_ViewModel, June 23, 2014.

• MSDN. Data Binding Overview. https://msdn.microsoft.com/en-us/library/ms752347(v=vs.110).aspx, May 2015.

• MSDN. IValueConverter interface. https://msdn.microsoft.com/en-us/library/system.windows.data.ivalueconverter(v=vs.110).aspx, May 2015.

32 / 58

Thank you for your attention!

Contact

Mail

dev@npruehs.de

Blog

http://www.npruehs.de

Twitter

@npruehs

Github

https://github.com/npruehs

33 / 58