Tool Development 01 - Introduction to Tool Development

Tool DevelopmentChapter 01: Introduction to Tool Development

Nick Prühs

About Me

“Best Bachelor“ Computer ScienceKiel University, 2009

Master GamesHamburg University of Applied Sciences, 2011

Lead ProgrammerDaedalic Entertainment, 2011-2012

Co-Founderslash games, 2013

2 / 58

First Things First

• At npruehs.de/teaching you‘ll always find• these slides

• solutions to all assignments

• Ask your questions – any time!

• Each lecture will close with• further reading

• an optional assignment

• Contact me any time at [email protected]!

3 / 58

http://www.npruehs.de/teaching/

mailto:[email protected]

Objectives

• To get an idea of the basic development process of good Desktop applications

• To understand the importance of good UI and UX design

• To learn how to development a basic Desktop application with Windows Presentation Foundation

4 / 58

Motivation

“You wouldn't use a screwdriver on a nail.”

5 / 60

Motivation

• First, you should make the tools!• Save development time

• Can be shipped to players

• Can even be your main business field (Adobe, Nevigo)

6 / 58StarCraft II World Editor

Motivation

• Highly workflow-dependent• Level Editor• Blueprint Editor

• Common Functionality• New• Load & Save• Selection & Inspector• Brush• Perspectives & Zoom• Copy & Paste & Cut• Undo & Redo• Settings• Test Run

7 / 58

Requirements

• Responsiveness• Avoid blocking UI!

8 / 58This should never happen!

Requirements

• Robust error handling• Handle exceptions!

9 / 58

This must never happen. Never, never, never, never, never!

Requirements

• Extensibility

• Adaptive window size

• Backward compatibility

• WYSIWYG

• Localization

• Security Context

10 / 58

Development Process

1. Design1. Define Functional Requirements

2. Analyze Target Group

3. Develop Overall Application Architecture

2. Implement1. Create Prototypes

2. Develop Application

3. Test1. Write Unit Tests

2. Perform Usability Tests

11 / 58

UI Design Guidelines

• Less UI is better UI.• The more functionality that is exposed at any one time,

the more difficult it is for a user to find the functionality that they need.

• Consistent UI is good UI.• Providing a consistent UI enables a user to become more

proficient with an application in a much shorter time.

12 / 58

UX Design Guidelines

• Support the minimum Windows effective resolution of 800x600 pixels.

• Use determinate progress bars for operations that require a bounded amount of time.• Even if that amount of time cannot be accurately

predicted.

• Tab order should flow from left to right, top to bottom.

13 / 58

UX Design Guidelines

• Assign shortcut keys to the most commonly used commands.

• It's rude to interrupt.• When an application displays a dialog box, it forces the

user to stop whatever it is that they are doing and pay attention to something else. If it is possible, remove the need for a dialog box completely by avoiding error cases and other disruptive user experiences.

• And many, many, many, many more… (see References)

14 / 58

Model-View-Controller

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

15 / 58


16 / 58


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

17 / 58

Introduction to Windows Presentation Foundation (WPF) • Presentation system for building Windows client

applications

• Part of the Microsoft .NET Framework

• Both standalone and browser-hosted applications

• Resolution-independent and vector-based rendering engine

18 / 58

Architecture ofWPF Applications• Extensible Application Markup Language

(XAML) markup for defining the application appearance• XML-based markup language

• Used to create windows, dialog boxes, pages, and controls

• Code-Behind for defining the application behavior• Responds to user interaction

• Implements Business Logic

19 / 58

WPF Example #1

XAML<Windowxmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"Title="Window with Button" Width="250" Height="100">



<Button Name="button">Click Me!</Button>

</Window>

20 / 58

Rendered View

WPF Example #2

XAML

21 / 58

<Window

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

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

x:Class="WpfApplication1.MainWindow"

Title="Window with Button"

Width="250" Height="100">

<Button Name="Button" Click="button_Click">Click Me!</Button>

</Window>

WPF Example #2

XAML

22 / 58

<Window







</Window>

WPF Example #2

XAML

23 / 58

<Window







</Window>

WPF Example #2

C#

24 / 58

namespace WpfApplication1

{

public partial class MainWindow

{

public MainWindow()

{

InitializeComponent();

}

void button_Click(object sender, RoutedEventArgs e)

{

MessageBox.Show("Hello, Windows Presentation Foundation!");

}

}

}

WPF Example #2

C#

25 / 58


{


{

public MainWindow()

{


}


{


}

}

}

WPF Example #2

C#

26 / 58


{


{

public MainWindow()

{


}


{


}

}

}

WPF Example #2

C#

27 / 58


{


{

public MainWindow()

{


}


{


}

}

}

WPF Example #2

Rendered View

28 / 58

Excursus: C# Events

• Enable a class or object to notify other classes or objects when something of interest occurs• Class that sends (or raises) the event is called the

publisher.

• Classes that receive (or handle) the event are called subscribers.

29 / 58

C# Events

• Events are declared using delegates.• Similar to “function pointer”

• Type that defines a method signature

• Used to pass methods as arguments to other methods

• Clients give the class delegates to methods that should be called when the event occurs.

• When the event occurs, the delegate(s) given to the class are invoked.

30 / 58

C# Events Example

C#

31 / 58

public class Actor

{

private int health;

public int Health

{

get { return this.health; }

set { this.health = value; }

}

}

C# Events Example

C#

32 / 58

public class Actor

{

private int health;

public delegate void HealthChangedDelegate(int newHealth);

public event HealthChangedDelegate HealthChanged;

public int Health

{

get { return this.health; }

set { this.health = value; }

}

}

C# Events Example

C#

33 / 58

set

{

if (this.health == value)

{

return;

}

this.health = value;

HealthChangedDelegate handler = this.HealthChanged;

if (handler != null)

{

handler(this.health);

}

}

C# Events Example

C#

34 / 58

set

{


{

return;

}




{


}

}

C# Events Example

C#

35 / 58

set

{


{

return;

}




{


}

}

C# Events Example

C#

36 / 58

public class HealthBar

{

public HealthBar(Actor actor)

{

actor.HealthChanged += this.OnHealthChanged;

}

private void OnHealthChanged(int newHealth)

{

// Update health bar...

}

}

WPF Application Class

• Handles startup and lifetime management, shared properties, and shared resources

• Supports both standalone and browser-hosted applications

XAML<Application x:Class="WpfApplication1.App"



StartupUri="MainWindow.xaml" />

37 / 58

WPF Application Class

• Handles startup and lifetime management, shared properties, and shared resources

• Supports both standalone and browser-hosted applications

XAML<Application x:Class="WpfApplication1.App"



StartupUri="MainWindow.xaml" />

38 / 58

WPF Controls

• Basic Controls• Labels• Buttons• Textboxes• Checkboxes, ComboBoxes, RadioButtons• Panels, Boxes, Scrollbars• Menus, Dialog Boxes• Progress Bars, Status Bars

• Advanced Controls• Grids, Lists and Trees• Calendars• Document Viewers (XPS, *sigh*…)• Images, Media Players

39 / 58

Label Control

Text label for a control.

XAML<Label>This is a label.</Label>

Rendered View

40 / 58

Button Control

Button that reacts to the mouse clicks.

XAML<Button Name="ButtonQuit“ Click="ButtonQuit_OnClick">

Quit

</Button>

Rendered View

41 / 58

TextBox Control

Used to display or edit text.

XAML<TextBox Name="TextBoxName" TextChanged="TextBoxName_OnTextChanged">

Please enter your name!

</TextBox>

Rendered View

42 / 58

CheckBox Control

Control that a user can select and clear.

XAML<CheckBox Name="CheckBoxEnabled“ IsChecked="True"

Checked="CheckBoxEnabled_OnChecked“

Unchecked="CheckBoxEnabled_OnUnchecked">

Enabled

</CheckBox>

Rendered View

43 / 58

RadioButton Control

Control that a user can select, but not clear.

XAML<StackPanel>

<RadioButton Name="RadioButtonColorRed" GroupName="Color“ IsChecked="True"

Checked="RadioButtonColorRed_OnChecked">Red</RadioButton>

<RadioButton Name="RadioButtonColorGreen" GroupName="Color“

Checked="RadioButtonColorGreen_OnChecked">Green</RadioButton>

<RadioButton Name="RadioButtonColorBlue" GroupName="Color“

Checked="RadioButtonColorBlue_OnChecked">Blue</RadioButton>

</StackPanel>

44 / 58

RadioButton Control

Control that a user can select, but not clear.

Rendered View

45 / 58

ComboBox Control

Drop-down list that can be shown or hidden by clicking the arrow on the control.

XAML<ComboBox Name="ComboBoxColor" />

C#this.ComboBoxColor.ItemsSource =

new List<string> { "Red", "Green", "Blue" };

46 / 58

ComboBox Control

Drop-down list that can be shown or hidden by clicking the arrow on the control.

Rendered View

47 / 58

WPF UI Layout

• Defined by location and size of all controls

• Has to adapt to changes in window size• This is achieved by relative positioning.

• Determining the final layout is done in two steps:

1. Control tells its parent what location and size it requires.

2. Parent tells the control what space it can have.

48 / 58

WPF UI Layout Example

XAML

49 / 58

<Window




Title="Layout with the DockPanel" Height="143" Width="319">



<DockPanel>

<TextBox DockPanel.Dock="Top">Dock = "Top"</TextBox>

<TextBox DockPanel.Dock="Bottom">Dock = "Bottom"</TextBox>

<TextBox DockPanel.Dock="Left">Dock = "Left"</TextBox>

<TextBox Background="White">This TextBox "fills" the remaining space.</TextBox>

</DockPanel>

</Window>

WPF UI Layout Example

Rendered View

50 / 58

Data Binding in WPF

• Allows users to view and edit data:• Copies data from managed objects into controls, where

the data can be displayed and edited

• Ensures that changes made to data by using controls are copied back to the managed objects

• Core unit of the data binding engine is the Binding class• Binds a control (the binding target) to a data object (the

binding source

51 / 58

Data Binding Example

XAML

52 / 58

<Window



x:Class="WpfApplication1.MainWindow">



<TextBox Name="personNameTextBox" Text="{Binding Path=Name}" />

</Window>


C#

53 / 58


{

public class Person

{

private string name = "No Name";

public string Name

{

get { return this.name; }

set { this.name = value; }

}

}

}


C#

54 / 58


{


{

public MainWindow()

{


// Create Person data source.

Person person = new Person();

// Make data source available for binding.

this.DataContext = person;

}

}

}

Assignment #1

1. Create New Project

1. Download and install Visual Studio Express 2013 for Windows Desktop from http://www.microsoft.com/visualstudio/eng/downloads#d-express-windows-desktop.

2. Create a new WPF application called LevelEditor.

3. Change the title of your MainWindow in theMainWindow.xaml file.

4. Change the size of your main window to 800 x 600 pixels.

55 / 58

http://www.microsoft.com/visualstudio/eng/downloads#d-express-windows-desktop

Assignment #1

2. Model-View-Controller

1. Create three folders in your project named Model, View and Control.

2. Move App.xaml (and App.xaml.cs) to the Controlfolder.

3. Move MainWindow.xaml (and MainWindow.xaml.cs) to the View folder.

4. Update the namespaces and folders of all four filesaccordingly.

5. In the MainWindow constructor, grab a reference toApp via the static Application.Current property.

56 / 58

Assignment #1

3. Quit Button

1. In App.xaml.cs, add a Quit method that calls theapplication Shutdown method.

2. Add a Quit button to MainWindow.xaml.

3. In MainWindow.xaml.cs, implement the Click eventhandler of the button, calling the Quit method of yourApp class.

57 / 58

Assignment #1

4. About Window

1. Create a new window called AboutWindow in your View folder.2. Add some nice information (e.g. your name, application version

number) to that window using the <TextBlock> and<LineBreak/> tags.

3. In App.xaml.cs, add a About method that instantiates a newAboutWindow object and calls its Show method.

4. Add an About button to MainWindow.xaml.5. Change the surronding panel in MainWIndow.xaml from Grid to

DockPanel in order to prevent both buttons from overlapping.6. In MainWindow.xaml.cs, implement the Click event handler of

the button, calling the About method of your App class.

58 / 58

Assignment #1

5. Level Editor Model

1. Add a MapTileType class to your Model folder withtwo properties Name and MovementCost.

2. Add a Vector2I struct to your Model folder with twoproperties X and Y.

3. Add a MapTile class to your Model folder with twoproperties Position and Type.

4. Add a Map class to your Model folder with an arrayproperty Tiles.

59 / 58

References

• MSDN. Overview of the User Interface Development Process.http://msdn.microsoft.com/en-us/library/windows/desktop/ff728828%28v=vs.85%29.aspx, April 2015.

• MSDN. Implementing a User Interface. http://msdn.microsoft.com/en-us/library/windows/desktop/ff728823%28v=vs.85%29.aspx, April 2015.

• MSDN. Top Guidelines Violations. http://msdn.microsoft.com/en-us/library/windows/desktop/dn742479.aspx, April 2015.

• MSDN. Windows Presentation Foundation. http://msdn.microsoft.com/en-us//library/ms754130.aspx , April 2015.

• MSDN. Introduction to WPF. http://msdn.microsoft.com/en-us/library/aa970268.aspx, April 2015.

• MSDN. Delegates (C# Programming Guide).http://msdn.microsoft.com/en-us/library/ms173171.aspx, April 2015.

• MSDN. Events (C# Programming Guide). http://msdn.microsoft.com/en-us/library/awbftdfh.aspx, April 2015.

60 / 58

http://msdn.microsoft.com/en-us/library/windows/desktop/ff728828%28v=vs.85%29.aspx

http://msdn.microsoft.com/en-us/library/windows/desktop/ff728823%28v=vs.85%29.aspx

http://msdn.microsoft.com/en-us/library/windows/desktop/dn742479.aspx

http://msdn.microsoft.com/en-us//library/ms754130.aspx

http://msdn.microsoft.com/en-us/library/aa970268.aspx

http://msdn.microsoft.com/en-us/library/ms173171.aspx

http://msdn.microsoft.com/en-us/library/awbftdfh.aspx

Thank you for your attention!

Contact

Mail

[email protected]

Blog

http://www.npruehs.de

Twitter

@npruehs

Github

https://github.com/npruehs

61 / 58

Tool Development 01 - Introduction to Tool Development

Technology