INF250 Emerging Technologies AUBG, COS dept

1. INF250 Emerging TechnologiesAUBG, COS dept Lecture 28b Building Apps Technologies Part 5 (WPF part 3)

2. Lecture Contents: • Importance of Input Data Validation • Strategies for Validating User Input • WPF: Performing Validation by Using Data Binding • An Example – Customer Info Maintenance

3. Importance of IDV • See John Sharp, ch23-24

4. Validating Data IDV concept is simple enough, but not easy to implement if validation involves cross-checking data the user has entered into two or more controls 4

5. Strategies for Validating User Input • There are many strategies for IDV. • Common technique applied before WPF is to handle the LostFocus event of controls. It is raised when the user moves away from control • It works if the control data is not connected with other data • It does not work if need to cross-check data entered in one control against data entered in another control

6. Strategies for Validating User Input In WPF, you define validation rules as a part of the business model of your app. You reference these rules from XAML description of the UI To do this, you define classes required by the business model and then bind properties of the UI controls to properties exposed by these classes 6

7. Strategies for Validating User Input At run time, WPF creates instances of these classes When you modify data in a control, the data can be automatically copied back to the specified property in the appropriate business model class instance and VALIDATED. 7

8. An Example – Customer Info Maintenance • To record essential customer details incl. • Title (Mr, Mrs, Miss, Ms) • Names (fore name, last name) • Gender (male, female) • IDV: to ensure consistency of user’s input: • All customers should have two names • Values specified for Title and Gender must match

9. An Example – Customer Info Maintenance • Menu • Label, ComboBox • Label, 2 TextBoxes • GroupBox, 2 RadioButtons • Run slnCustomerDetails • App does not currently perform any checking and data typed would have been consistent or inconsistent

10. An Example – Customer Info Maintenance • IMPORTANT: STEPS IN ADDING NECESSARY VALIDATION LOGIC FOR ENFORSING ENTRY OF TWO NAMES • To create a Customer class that can model a customer (required for the business model) • To bind foreName and lastName text boxes at the form to the corresponding properties of the Customer class

11. 1. Create the Customer class • In Solution Explorer > prj name > Add > Class > Customer.cs: class Customer { private string foreName; private string lastName; }

12. Create the Customer class • Add ForeName property to Customer class without Validation Logic public string ForeName { get { return this.foreName; } set { this.foreName = value; } }

13. Create the Customer class Add ForeName property to Customer class public string ForeName { get { return this.foreName; } set { if (String.IsNullOrEmpty(value)) { throw new ApplicationException("Specify a forename for the customer"); } else { this.foreName = value; } } } 13

14. Create the Customer class • Add LastName property to Customer class public string LastName { get { return this.lastName; } set { if (String.IsNullOrEmpty(value)) { throw new ApplicationException("Specify a last name for the customer"); } else { this.lastName = value; } } } // end of property

15. 2. Bind text box controls to properties in Customer class • In XAML pane, add XML namespace declaration to the Window definition xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:cust="clr-namespace:CustomerDetails" Title="Customer Details" Height="273" Width="370" ResizeMode="NoResize"> • With this declaration in place, you can reference the types in the CustomerDetails namespace in the XAML code for the window

16. Bind text box controls to properties in Customer class • In XAML pane, add XML namespace declaration to the Window definition xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:cust="clr-namespace:CustomerDetails" Title="Customer Details" Height="273" Width="370" ResizeMode="NoResize"> • With this declaration in place, you can reference the types in the CustomerDetails namespace in the XAML code for the window

17. Bind text box controls to properties in Customer class • In XAML pane, add Window.Resources element <Window.Resources> <cust:Customer x:Key="customerData" /> </Window.Resources> <Grid> • This resource creates a new instance of the Customer class

18. Bind text box controls to properties in Customer class • In XAML pane, find definition of foreName text box and modify it adding Text property element <TextBox Height="21" Margin="70,74,0,0" Name="foreName" VerticalAlignment="Top" HorizontalAlignment="Left" Width="120" > <TextBox.Text> <Binding Source="{StaticResourcecustomerData}" Path="ForeName" /> </TextBox.Text> </TextBox> • This code binds data displayed in Text property of this text box to the value of the ForeName property of the CustomerData object

19. Bind text box controls to properties in Customer class • In XAML pane, modify definition of binding and add Binding.ValidatiionRules child element <Binding Source="{StaticResource customerData}" Path="ForeName" > <Binding.ValidationRules> <ExceptionValidationRule/> </Binding.ValidationRules> </Binding> • Now you specify the validation that app should perform when user enters data in this control. • ExceptionValidationRule is built-in rule that checks for any exceptions thrown by the app when the data in this control changes

20. Bind text box controls to properties in Customer class • Add the equivalent binding and binding rule to the lastName text box associating it with the LastName property of the CustomerData object

21. Bind text box controls to properties in Customer class • Run the app • Type two names, fill both text boxes • Click Title combo box • IT’s OK • Nothing extraordinary happens

22. Bind text box controls to properties in Customer class Run the app Click foreName text box Delete its contents Click Title combo box It’s not OK This time foreName text box highlighted with a red border 22

23. Bind text box controls to properties in Customer class • How can you get the form to display a meaningful message rather than highlithing the control border with red color indicating that there is a problem with input in a control • Solution is to add a style to display exception messages

24. Add a style to display exception messages • Inthe XAML pane, add a style to Window.Resources element <Style x:Key="errorStyle" TargetType="Control"> <Style.Triggers> <Trigger Property="Validation.HasError" Value="True"> <Setter Property="ToolTip" Value="{Binding RelativeSource={x:Static RelativeSource.Self}, Path=(Validation.Errors)[0].ErrorContent}" /> </Trigger> </Style.Triggers> </Style> • Style contains a trigger that detects when the Validation.HasError property of the control is set to true. • This occurs if a binding validation rule for the control generates an exception • The trigger sets the ToolTip property of the current control to display the text of the exception

25. Add a style to display exception messages • Apply the errorStyle style to the foreName and lastName controls … <TextBox Style="{StaticResource errorStyle}" Height="21" Margin="70,74,0,0" Name="foreName" VerticalAlignment="Top" HorizontalAlignment="Left" Width="120" > … </TextBox> <TextBox Style="{StaticResource errorStyle}" Height="21" HorizontalAlignment="Left" Margin="210,74,0,0" Name="lastName" VerticalAlignment="Top" Width="120" > … </TextBox>

26. Bind text box controls to properties in Customer class Run the app Type two names, fill both text boxes Click Title combo box IT’s OK Nothing extraordinary happens 26

27. Bind text box controls to properties in Customer class Run the app Click foreName text box Delete its contents Click Title combo box It’s not OK This time foreName text box accompanied with a tooltip message 27

28. An Example – Customer Info Maintenance • IMPORTANT: STEPS IN ADDING NECESSARY VALIDATION LOGIC FOR TITLE AND GENDER OF CUSTOMERS • To enhance class that can model a customer • To create converter classes and methods • To bind combo box and radio button controls on the form to the corresponding properties of the Customer class

30. Questions? And/Or Thank You For Your Attention!