Getting Input From Users

Forms and Controls Getting Input From Users

Principles of Form Design • Make sure the user understands what’s asked for, any why • Clear Labels with carefully chosen vocabulary • Consider text explanations in line • If you can, avoid asking the question at all • Extra questions distract the user from the task at hand • Consider prefilling, auto-completion, good defaults, etc • Help the user recall or choose items • Use lists of items when possible, drop down, list box, etc • Use more advanced display types when possible – imgs, etc • Aid the user with input hints, structured format, etc

Principles of Form Design • Separate physical presentation from the data/programming model • Label, input, label, input is not always the best choice for understandability or visual appeal • Use whitespace, headings, images to your advantage • Do Usability Testing • You need empirical evidence of what works • Developers tend to make poor assumptions • Choose your controls wisely • A drop down suggests a single item choice, a single line text box suggests a short answer, etc

Factors For Control Choice • Available space • User’s aptitude to computer usage • User’s expertise in target domain • Expectations driven by other applications • Available technology

Controls for Binary Section

Controls for Selecting one of N, where N is small

Controls For Selecting One of N Items, Where N is Large

Controls for selecting many of N items

Controls for constructing an unordered list of user entered items

Controls for ordering a list of items

Controls for entering either one line of text, or a one-of-N Choice

Standard text controls • Single-line text field • Multiline text area • Text area with inline tags • Rich-text editor

Controls for Entering Numbers

Controls for Entering Numbers from a Bounded Range

Controls for Entering a SubRange

Controls for Dates or Times

Advanced Controls

Selecting one out of Many • Tough choices

Advanced Chooser Jump to Item navigation - When focus is on tree, typing will go to location, one or more character recognized Inline search offered below. This is obvious to the user. It also lets you cycle up and down through potential matches.

Selecting multiple of Many

Advanced Chooser Jump to Item navigation - When focus is on tree, typing will go to location, one or more character recognized Checkbox Item Selection, superior to multiple row select (ctrl/shift + click) or list builder Selected items are panel in on the right. The allows the user to see the items checked on the left without scrolling up and down. Right hand panel can be manual expanded/collapsed. By default it will self expand if the left hand list is greater than ~20 items. Therefore this paradigm works well for multiple sizes of N.

Ordering a List of Items

Formatting Numbers

Advanced Controls The Calculator is invoked using the calculator icon or by pressing the Pause/Break key and dismissed either by loss of focus or pressing Esc. It provides built-in functions for most arithmetic operations plus memory operations. Pressing the equal sign (=) updates the TextBox content. The leftmost (brown foreground) keys control the “tape”: decrease or increase number of decimals, change the font, or print the “tape”. The Calculator is culture-aware and displays the appropriate decimal separator as well as digit representations. The “tape” is also displayed according to the current thread’s culture. (The Calculator can perform hexadecimal conversions, too: set the ValidationPattern to “x”. The TextBox will display hex while the Calculator will operate in decimal mode.) Simple Calculator Simple Calculator with Printable Tape

Entering a Date

AdvancedControls The TextBox is an exceptionally versatile control. It can be a date picker, a currency editor and as you have seen, it handles complex validations. It can even provide you with a collection of all field errors on a form – more about that later. The next two pages focus on the date picker and currency editor features. The TextBox is culture-aware: it presents formatted content (e.g.: dates and currency values) formatted according to the culture of the current thread and the language of the TextBox. Culture: en-US Culture: ar-SA Culture: jp-JP When not using the pop-up calendar, the date parts can be scrolled using the arrow keys and/or the mouse wheel. When the pop-up calendar is active, the keyboard keys scroll the days (← or → to scroll days and ↑ and ↓ to scroll weeks; PageUp and PageDown to scroll months). The calendar can be invoked by pressing Pause/Break and dismissed using Esc. ValidationType is Date or DateRange, ValidationPattern can be a standard or custom date and/or time format string.

Validation ACTIVE CustomErrorMessage (String) You can pass in to the Validator a more meaningful error message. ErrorText (String): The validation error text, or String.Empty if none. HasCalculator (Boolean): If true and ValidationType is None or Number*, Calculator is loaded, shown HasCalendar (Boolean): If true and ValidationType is None or Date*, Calendar is loaded, shown HasRecall (Boolean): If true, a circular recall queue is instantiated. Size: RecallStackSize in .resx IsRequired (Boolean): If true, the RequiredFieldValidation is enabled Maximum (String): Gets or sets the highest valid value Minimum (String): Gets or sets the lowest valid value ValidateOn (enum): LostFocus (default) or PropertyChanged triggers validation ValidationPattern (String): The validation pattern (mask) dependent on ValidationType ValidationType (enum): None, Number, Date, Length, NumberRange, DateRange, or RegEx Value (object): The value of the input, type is based on the ValidationType Watermark (String): The TextBox’s Watermark (see example below) Number Validation (F2) Watermark Date Validation (d) Required Field Validation ^\d{5}$|^\d{5}-\d{4}$ Number Range Validation

Error Handling The TextBox’sErrorText property contains the text of the current error, or String.Empty if none. .It is a dictionary object where the Key is the name of the control throwing the error and the Value is the text of the error. The ErrorCollection has an attached property called ErrorMessage. Bind each of the validated TextBoxes’ErrorText property to the ErrorMessage attached property of the ErrorCollection. This way, your instance of the ErrorCollection will always have the collection of errors present in your view. XAML rn:ErrorCollection.ErrorMessage="{Binding RelativeSource={RelativeSource Self}, Path=ErrorText}" C# • private ErrorCollectionec = new ErrorCollection(); • ErrorCollection.SetErrorCollection(this, this.ec); • ec.PropertyChanged += new System.ComponentModel.PropertyChangedEventHandler(ec_PropertyChanged); • // You can update some TextBlock with a collection or errors via an event handler, e.g.: • void ec_PropertyChanged(object sender, System.ComponentModel.PropertyChangedEventArgs e) • { • ErrorsTextBlock.Text = String.Empty; • if (null == ec || 0 == ec.errorCollection.Count) • return; • foreach (string key in ec.errorCollection.Keys) • { • if (0 < ErrorsTextBlock.Text.Length) • ErrorsTextBlock.Text += "; "; • ErrorsTextBlock.Text += key + ": " + ec.errorCollection[key]; • } • }

Tooltips The ToolTip follows the Microsoft Fluent UI Guidelines.. • ToolTip Usage: • <rn:TextBox.ToolTip> • <rn:ToolTipHeaderText=“ToolTip Header (Ctrl+Shift+H)” • Content="This is a sample ToolTip (and ScreenTip) style to be used (and/or re-styled) • to suit the needs of the developer.

Its content can span • multiple paragraphs, with the height adjusting to the ToolTip's content.“ • FooterText=“Press F1 for more help.” • Width="200" /> • </rn:TextBox.ToolTip>

Getting Input From Users