1 / 129

Graphical User Interface Concepts: Part 2

14. Graphical User Interface Concepts: Part 2. I claim not to have controlled events, but confess plainly that events have controlled me. Abraham Lincoln. Capture its reality in paint! Paul C é zanne.

milo
Download Presentation

Graphical User Interface Concepts: Part 2

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. 14 • Graphical User Interface • Concepts: Part 2

  2. I claim not to have controlled events, but confess plainly that events have controlled me. Abraham Lincoln • Capture its reality in paint! • Paul Cézanne • An actor entering through the door, you’ve got nothing. But if he enters through the window, you’ve got a situation. • Billy Wilder

  3. But, soft! what light through yonder window breaks? It is the east, and Juliet is the sun! William Shakespeare

  4. OBJECTIVES In this chapter you will learn: • To create menus, tabbed windows and multiple document interface (MDI) programs. • To use the ListView and TreeView controls for displaying information. • To create hyperlinks using the LinkLabel control. • To display lists of information in ListBox and ComboBox controls. • To input date and time data with the DateTimePicker. • To create custom controls.

  5. 14.1   Introduction • 14.2   Menus • 14.3   MonthCalendar Control • 14.4   DateTimePicker Control • 14.5   LinkLabel Control • 14.6 ListBox Control • 14.7 CheckedListBox Control • 14.8   ComboBox Control • 14.9   TreeView Control • 14.10   ListView Control • 14.11   TabControl Control • 14.12   Multiple Document Interface (MDI) Windows • 14.13   Visual Inheritance • 14.14   User-Defined Controls • 14.15   Wrap-Up

  6. 14.1 Introduction • Continue study of GUIs • Menus • Logically organized commands • LinkLabels • Enable user to visit one of several destinations • ListBox • ComboBoxes • TreeView • Display data hierarchically • TabControl • MDI windows • Multiple document interface

  7. 14.2 Menus • Menus • Groups of related commands for Windows applications • Integral part of GUIs • Organize commands without “cluttering” the GUI • All menu items can have access shortcuts or hotkeys • Type an ampersand (&) before the character to be underlined • Set the ShortcutKeys property of the appropriate ToolStripMenuItems • Non-top-level menus can also have shortcut keys • Menu items can display check marks • Indicates that multiple options on the menu can be selected at once

  8. Shortcut key Submenu Menu Menu items Disabled command Checked menu item Seperator bar Fig. 14.1| Menus, submenus and menu items

  9. Type menu name in TextBox Main menu bar MenuStrip icon Fig. 14.2 | Editing menus in Visual Studio.

  10. Place & character before a letter to underline it in the menu, so the character can be used as an access shortcut TextBoxes for adding items to the menu Fig. 14.3| Adding ToolStripMenuItems to a MenuStrip.

  11. Look-and-Feel Observation 14.1 • Buttons can have access shortcuts. Place the & symbol immediately before the desired character in the Button’s label. To press the button by using its access key in the running application, the user presses Alt and the underlined character.

  12. Setting modifier keys Select key (modifier and key combination specifies the shortcut key for the menu item) Fig. 14.4| Setting a menu item’s shortcut keys.

  13. Menu item options Fig. 14.5| Menu item options.

  14. Fig. 14.6 | MenuStrip and ToolStripMenuItem properties and an event. (Part 1 of 2.)

  15. Fig. 14.6 | MenuStrip and ToolStripMenuItem properties and an event. (Part 2 of 2.)

  16. Look-and-Feel Observation 14.2 • It is a convention to place an ellipsis ( ) after the name of a menu item that when selected, displays a dialog (e.g. Save As...). Menu items that produce an immediate action without prompting the user for more information (e.g. Save) should not have an ellipsis following their name.

  17. Outline MenuTestForm.cs (1 of 8) Event handler for aboutToolStripMenuItem for when it is selected Provide information through a MessageBox Event handler for exitToolStripMenuItem for when it is selected Terminates program

  18. Outline Clears all checkmarks next to the menu items MenuTestForm.cs (2 of 8) Change the color and check the corresponding menu item

  19. Outline MenuTestForm.cs (3 of 8) Change the color and check the corresponding menu item Change the color and check the corresponding menu item

  20. Outline MenuTestForm.cs (4 of 8) Change the color and check the corresponding menu item Clears all checkmarks next to the menu items

  21. Outline MenuTestForm.cs (5 of 8) Change the font style and check the corresponding menu item Change the font style and check the corresponding menu item

  22. Outline MenuTestForm.cs (6 of 8) Change the font style and check the corresponding menu item Bold the current font style if it is not already; else, un-bold it

  23. (a) (b) Outline MenuTestForm.cs (7 of 8) Italicize the current font style if it is not already; else, un-italicize it

  24. (d) (c) (e) (f) Outline MenuTestForm.cs (8 of 8)

  25. Software Engineering Observation 14.1 • The mutual exclusion of menu items is not enforced by the MenuStrip, even when the Checked property is true. You must program this behavior.

  26. 14.3 MonthCalendar Control • The .NET Framework provides two controls that allow an application to retrieve date and time information • MonthCalendar • Displays a monthly calendar on the Form • The default event for this control is DateChanged • Generated when a new date is selected • DateTimePicker(Section 14.4)

  27. Current day is outlined Selected day is highlighted Fig. 14.8| MonthCalendar control.

  28. Fig. 14.9 | MonthCalendarproperties and an event.

  29. 14.4 DateTimePicker Control • DateTimePicker • Displays the calendar when a down arrow is selected • Retrieve date and time information from user • More customizable than a MonthCalendar • More properties are provided to edit the look and feel of the drop-down calendar • ValueChanged event • Occurs when user selects a date

  30. Fig. 14.10 | DateTimePicker properties and an event. (Part 1 of 2.)

  31. Fig. 14.10 | DateTimePicker properties and an event. (Part 2 of 2.)

  32. Outline DateTimePickerForm.cs (1 of 3) Retrieve the date selected by the user Update outputLabel: Print the 3rd day after user’s selected date Update outputLabel: Print the 2nd day after user’s selected date

  33. (a) (b) Outline The “minimum” date that can be selected is “today” DateTimePickerForm.cs (2 of 3) The “maximum” date that can be selected is a year from “today”

  34. (c) (d) Outline DateTimePickerForm.cs (3 of 3)

  35. 14.5 LinkLabel Control • LinkLabel • Displays links to other resources • Ex: files or Web pages • LinkClicked event • Generated when LinkLabel clicked • Class LinkLabel is derived from class Label • Inherits all of class Label’s functionality Note: @ symbol before a string indicates that all characters should be interpreted literally • Class Process • Method Start • Allows you to execute other programs from an application

  36. Look-and-Feel Observation 14.3 • A LinkLabel is the preferred control for indicating that the user can click a link to jump to a resource such as a Web page, though other controls can perform similar tasks.

  37. LinkLabel on a Form Hand image displays when mouse moves over LinkLabel Fig. 14.12| LinkLabel control in running program.

  38. Fig. 14.13 | LinkLabelproperties and an event. (Part 1 of 2.)

  39. Fig. 14.13 | LinkLabelproperties and an event. (Part 2 of 2.)

  40. Outline LinkLabelTestForm.cs (1 of 4) Change the color of the link to show that it has already been clicked before Open the C: folder

  41. Outline Change the color of the link to show that it has already been clicked before LinkLabelTestForm.cs (2 of 4) Open Internet Explorer and visit the site Change the color of the link to show that it has already been clicked before Open new document in NotePad

  42. Click first LinkLabel to look at contents of C: drive Outline LinkLabelTestForm.cs (3 of 4)

  43. Click second Linklabel to go to Deitel Web site Click on third Linklabel to open Notepad Outline LinkLabelTestForm.cs (4 of 4)

  44. 14.6 ListBox Control • ListBox • Allows user to view and select from multiple items in a list • Static GUI entities • To add and remove items • Call the Add method • Call the AddRange method • Add an array of objects • Call the RemoveAt method • Call the Clear method • Remove all entries • Use the String Collection Editor

  45. ListBox Selected items Scrollbars appear if necessary Checked item CheckedListBox Fig. 14.15| ListBox and CheckedListBox on a Form.

  46. Fig. 14.16 | ListBox properties, methods and an event. (Part 1 of 2.)

  47. Fig. 14.16 | ListBox properties, methods and an event. (Part 2 of 2.)

  48. Fig. 14.17| String Collection Editor.

  49. Outline ListBoxTestForm.cs (1 of 3) Add user’s input as a new element of displayListBox

  50. Outline Remove the selected element from displayListBox ListBoxTestForm.cs (2 of 3) Remove every element from displayListBox Terminate program

More Related