• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Tool Development 01 - Introduction to Tool Development
 

Tool Development 01 - Introduction to Tool Development

on

  • 785 views

Chapter 01 of the lecture Tool Development taught at SAE Institute Hamburg.

Chapter 01 of the lecture Tool Development taught at SAE Institute Hamburg.

Introduction to tool development, MVC, UX design, WPF and C# delegates and events.

Statistics

Views

Total Views
785
Views on SlideShare
785
Embed Views
0

Actions

Likes
0
Downloads
6
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Tool Development 01 - Introduction to Tool Development Tool Development 01 - Introduction to Tool Development Presentation Transcript

    • Tool Development Chapter 01: Introduction to Tool Development Nick Prühs June 4, 2014
    • About Me “Best Bachelor“ Computer Science Kiel University, 2009 Master Games Hamburg University of Applied Sciences, 2011 Lead Programmer Daedalic Entertainment, 2011-2012 Co-Founder slash 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 dev@npruehs.de! 3 / 58
    • 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 • First, you should make the tools! • Save development time • Can be shipped to players • Can even be your main business field (Adobe, Nevigo) 5 / 58
    • 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 6 / 58
    • Requirements • Responsiveness • Avoid blocking UI! 7 / 58This should never happen!
    • Requirements • Robust error handling • Handle exceptions! 8 / 58 This must never happen. Never, never, never, never, never!
    • Requirements • Extensibility • Adaptive window size • Backward compatibility • WYSIWYG • Localization • Security Context 9 / 58
    • Development Process 1. Design 1. Define Functional Requirements 2. Analyze Target Group 3. Develop Overall Application Architecture 2. Implement 1. Create Prototypes 2. Develop Application 3. Test 1. Write Unit Tests 2. Perform Usability Tests 10 / 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. 11 / 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. 12 / 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) 13 / 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. 14 / 58
    • Model-View-Controller 15 / 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. 16 / 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 17 / 58
    • Architecture of WPF 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 18 / 58
    • WPF Example #1 XAML <Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" Title="Window with Button" Width="250" Height="100"> <!-- Add button to window. --> <Button Name="button">Click Me!</Button> </Window> 19 / 58 Rendered View
    • WPF Example #2 XAML 20 / 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 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 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 C# 23 / 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# 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 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# 26 / 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 Rendered View 27 / 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. 28 / 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. 29 / 58
    • C# Events Example C# 30 / 58 public class Actor { private int health; public int Health { get { return this.health; } set { this.health = value; } } }
    • C# Events Example C# 31 / 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# 32 / 58 set { if (this.health == value) { return; } this.health = value; HealthChangedDelegate handler = this.HealthChanged; if (handler != null) { handler(this.health); } }
    • 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 { if (this.health == value) { return; } this.health = value; HealthChangedDelegate handler = this.HealthChanged; if (handler != null) { handler(this.health); } }
    • C# Events Example C# 35 / 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" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" StartupUri="MainWindow.xaml" /> 36 / 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" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" StartupUri="MainWindow.xaml" /> 37 / 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 38 / 58
    • Label Control Text label for a control. XAML <Label>This is a label.</Label> Rendered View 39 / 58
    • Button Control Button that reacts to the mouse clicks. XAML <Button Name="ButtonQuit“ Click="ButtonQuit_OnClick"> Quit </Button> Rendered View 40 / 58
    • TextBox Control Used to display or edit text. XAML <TextBox Name="TextBoxName" TextChanged="TextBoxName_OnTextChanged"> Please enter your name! </TextBox> Rendered View 41 / 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 42 / 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> 43 / 58
    • RadioButton Control Control that a user can select, but not clear. Rendered View 44 / 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" }; 45 / 58
    • ComboBox Control Drop-down list that can be shown or hidden by clicking the arrow on the control. Rendered View 46 / 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. 47 / 58
    • WPF UI Layout Example XAML 48 / 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="Layout with the DockPanel" Height="143" Width="319"> <!-- DockPanel to layout four text boxes. --> <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 49 / 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 50 / 58
    • Data Binding Example XAML 51 / 58 <Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" x:Class="WpfApplication1.MainWindow"> <!-- Bind the TextBox to the data source (TextBox.Text to Person.Name). --> <TextBox Name="personNameTextBox" Text="{Binding Path=Name}" /> </Window>
    • Data Binding Example C# 52 / 58 namespace WpfApplication1 { public class Person { private string name = "No Name"; public string Name { get { return this.name; } set { this.name = value; } } } }
    • Data Binding Example C# 53 / 58 namespace WpfApplication1 { public partial class MainWindow { public MainWindow() { InitializeComponent(); // 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/downloa ds#d-express-windows-desktop. 2. Create a new WPF application called LevelEditor. 3. Change the title of your MainWindow in the MainWindow.xaml file. 4. Change the size of your main window to 800 x 600 pixels. 54 / 58
    • 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 Control folder. 3. Move MainWindow.xaml (and MainWindow.xaml.cs) to the View folder. 4. Update the namespaces and folders of all four files accordingly. 5. In the MainWindow constructor, grab a reference to App via the static Application.Current property. 55 / 58
    • Assignment #1 3. Quit Button 1. In App.xaml.cs, add a Quit method that calls the application Shutdown method. 2. Add a Quit button to MainWindow.xaml. 3. In MainWindow.xaml.cs, implement the Click event handler of the button, calling the Quit method of your App class. 56 / 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 new AboutWindow 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. 57 / 58
    • Assignment #1 5. Level Editor Model 1. Add a MapTileType class to your Model folder with two properties Name and MovementCost. 2. Add a Vector2I struct to your Model folder with two properties X and Y. 3. Add a MapTile class to your Model folder with two properties Position and Type. 4. Add a Map class to your Model folder with an array property Tiles. 58 / 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, June 2014. • MSDN. Implementing a User Interface. http://msdn.microsoft.com/en- us/library/windows/desktop/ff728823%28v=vs.85%29.aspx, June 2014. • MSDN. Top Guidelines Violations. http://msdn.microsoft.com/en- us/library/windows/desktop/dn742479.aspx, June 2014. • MSDN. Windows Presentation Foundation. http://msdn.microsoft.com/en-us//library/ms754130.aspx , June 2014. • MSDN. Introduction to WPF. http://msdn.microsoft.com/en- us/library/aa970268.aspx, June 2014. • MSDN. Delegates (C# Programming Guide). http://msdn.microsoft.com/en-us/library/ms173171.aspx, June 2014. • MSDN. Events (C# Programming Guide). http://msdn.microsoft.com/en- us/library/awbftdfh.aspx, June 2014. 59 / 58
    • Thank you for your attention! Contact Mail dev@npruehs.de Blog http://www.npruehs.de Twitter @npruehs Github https://github.com/npruehs 60 / 58