 2006 Pearson Education, Inc. All rights reserved. 1 14 Graphical User Interface Concepts: Part 2.

 2006 Pearson Education, Inc. All rights reserved. 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

 2006 Pearson Education, Inc. All rights reserved. 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.

 2006 Pearson Education, Inc. All rights reserved. 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

 2006 Pearson Education, Inc. All rights reserved. 6 14.1 Introduction Continue study of GUIs – Menu s Logically organized commands – LinkLabel s Enable user to visit one of several destinations – ListBox – ComboBox es – TreeView Display data hierarchically – TabControl – MDI windows Multiple document interface

 2006 Pearson Education, Inc. All rights reserved. 7 14.2 Menu s Menu s – 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

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

 2006 Pearson Education, Inc. All rights reserved. 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.

 2006 Pearson Education, Inc. All rights reserved. 12 Fig. 14.4 | Setting a menu item’s shortcut keys. Setting modifier keys Select key (modifier and key combination specifies the shortcut key for the menu item)

 2006 Pearson Education, Inc. All rights reserved. 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.

 2006 Pearson Education, Inc. All rights reserved. 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

 2006 Pearson Education, Inc. All rights reserved. 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

 2006 Pearson Education, Inc. All rights reserved. 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.

 2006 Pearson Education, Inc. All rights reserved. 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)

 2006 Pearson Education, Inc. All rights reserved. 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

 2006 Pearson Education, Inc. All rights reserved. 32 Outline DateTimePickerForm.cs (1 of 3) Retrieve the date selected by the user Update outputLabel : Print the 3 rd day after user’s selected date Update outputLabel : Print the 2 nd day after user’s selected date

 2006 Pearson Education, Inc. All rights reserved. 33 Outline DateTimePickerForm.cs (2 of 3) (a)(b) The “minimum” date that can be selected is “today” The “maximum” date that can be selected is a year from “today”

 2006 Pearson Education, Inc. All rights reserved. 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

 2006 Pearson Education, Inc. All rights reserved. 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.

 2006 Pearson Education, Inc. All rights reserved. 41 Outline LinkLabelTestForm. cs (2 of 4) Change the color of the link to show that it has already been clicked before 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

 2006 Pearson Education, Inc. All rights reserved. 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

 2006 Pearson Education, Inc. All rights reserved. 52 14.7 CheckListBox Control CheckListBoxes – Extend ListBox – Include CheckBox es next to each item in the list – Multiple items can be selected – SelectionMode property Only possible values are None and One – Give the user multiple selection or no selection at all Behavior consistent with that of CheckBox es – Event ItemCheck Occurs whenever a user checks or unchecks a CheckedListBox item

 2006 Pearson Education, Inc. All rights reserved. 53 Common Programming Error 14.1 The IDE displays an error message if you attempt to set the SelectionMode property to MultiSimple or MultiExtended in the Properties window of a CheckedListBox. If this value is set programmatically, a runtime error occurs.

 2006 Pearson Education, Inc. All rights reserved. 56 CheckedListBoxTest Form.cs (1 of 3) Outline Retrieve the selected element as a string Add the retrieved element to displayListBox Remove the retrieved element to displayListBox

 2006 Pearson Education, Inc. All rights reserved. 59 14.8 ComboBox Control ComboBox – Combines TextBox features with a drop-down list – Contains a list from which a value can be selected – User can enter text into the TextBox – User can click the down arrow to select from a list of predefined items

 2006 Pearson Education, Inc. All rights reserved. 60 Fig. 14.21 | ComboBox demonstration. Click the down arrow to display items in drop-down list Selecting an item from drop-down list changes text in TextBox portion

 2006 Pearson Education, Inc. All rights reserved. 61 Look-and-Feel Observation 14.4 Use a ComboBox to save space on a GUI. A disadvantage is that, unlike with a ListBox, the user cannot see available items without expanding the drop-down list.

 2006 Pearson Education, Inc. All rights reserved. 65 Outline comboBoxTextForm.Cs (2 of 3) Property that returns the index of the selected element Chooses and draw the appropriate shape based on the user’s selection

 2006 Pearson Education, Inc. All rights reserved. 67 Look-and-Feel Observation 14.5 Make lists (such as ComboBoxes ) editable only if the program is designed to accept user-submitted elements. Otherwise, the user might try to enter a custom item that is improper for the purposes of your application.

 2006 Pearson Education, Inc. All rights reserved. 68 14.9 TreeView Control TreeView – Displays nodes hierarchically in a tree Nodes are objects that contain values and can refer to other nodes – A parent node contains child nodes – Child nodes can be parents to other nodes – Child nodes with the same parent node are considered sibling nodes A tree is a collection of nodes organized in a hierarchical manner – The first parent node of a tree is the root node – The nodes in a TreeView are instances of class TreeNode Each TreeNode has a Nodes collection – Contains a list of other TreeNode s Parent property – Returns a reference to the parent node – Returns null if the node is a root node

 2006 Pearson Education, Inc. All rights reserved. 69 Fig. 14.24 | TreeView displaying a sample tree. Click + to expand node and display child nodes Root node Click - to collapse node and hide child nodes Child nodes (of Manager2)

 2006 Pearson Education, Inc. All rights reserved. 76 Outline TreeViewDirectoryS tructureForm.cs (2 of 4) Create an object of TreeNode for the current directory Append the current directory to the parent directory Continue process for the rest of the subdirectories

 2006 Pearson Education, Inc. All rights reserved. 77 Outline TreeViewDirectoryS tructureForm.cs (3 of 4) Unauthorized access of directories Check to see if the user specified directory exist or not Append directory to directoryTreeView Add the subdirectories

 2006 Pearson Education, Inc. All rights reserved. 79 14.10 ListView Control ListView – Similar to ListBox Both display lists from which the user can select one or more items – Difference between the two classes is that a ListView can display icons next to the list items Allows you to define the images used as icons for ListView items – To display images, an ImageList component is required

 2006 Pearson Education, Inc. All rights reserved. 84 Outline ListViewTestForm.cs (2 of 7) Get the number of selected items Load the parent’s directory Create an object that holds the information for the directory

 2006 Pearson Education, Inc. All rights reserved. 86 Outline ListViewTestForm.cs (4 of 7) Remove all elements from browserListView Add an element to go back to the parent directory Update the current directory information Store all of the current directory’s files and subdirectories Add all the current directory’s subdirectories to ListView Specify which image to use for the directories

 2006 Pearson Education, Inc. All rights reserved. 87 Outline ListViewTestForm.cs (5 of 7) Add all the current directory’s files to ListView Specify which image to use for the files Notify user of unauthorized access

 2006 Pearson Education, Inc. All rights reserved. 88 Outline ListViewTestForm.cs (6 of 7) (a) Specify the images associated with directories and files Initially, load program with the current project’s directory

 2006 Pearson Education, Inc. All rights reserved. 90 Software Engineering Observation 14.2 When designing applications that run for long periods of time, you might choose a large initial delay to improve performance throughout the rest of the program. However, in applications that run for only short periods of time, developers often prefer fast initial loading times and small delays after each action.

 2006 Pearson Education, Inc. All rights reserved. 91 14.11 TabControl Control TabControl – Creates tabbed windows – Specify more information in the same amount of space – Contain TabPage objects Add controls to the TabPage objects Add the TabPage s to the TabControl Only one TabPage is displayed at a time To view different TabPage s click the appropriate tab – Click event Generated when TabPage ’s tab is clicked

 2006 Pearson Education, Inc. All rights reserved. 100 Software Engineering Observation 14.3 A TabPage can act as a container for a single logical group of RadioButtons, enforcing their mutual exclusivity. To place multiple RadioButton groups inside a single TabPage, you should group RadioButtons within Panels or GroupBoxes contained within the TabPage.

 2006 Pearson Education, Inc. All rights reserved. 101 14.12 Multiple Document Interface (MDI) Windows Multiple Document Interface (MDI) – Parent window Main application window Only one in application – Child window Each window inside the application Only one child can be active at a time Cannot also be a parent window As many child windows as you want

 2006 Pearson Education, Inc. All rights reserved. 104 14.12 Multiple Document Interface (MDI) Windows (Cont.) Creating an MDI Form – Create a new Form Set its IsMdiContainer property to true – Create a child Form Add the child Form to the parent – Set its MdiParent property to the parent Form Call the child Form ’s Show method – To add a child Form to a parent, write: ChildFormClass childForm = New ChildFormClass(); childForm.MdiParent = parentForm; childForm.Show();

 2006 Pearson Education, Inc. All rights reserved. 106 Good Programming Practice 14.1 When creating MDI applications, include a menu that displays a list of the open child windows. This helps the user select a child window quickly, rather than having to search for it in the parent window.

 2006 Pearson Education, Inc. All rights reserved. 107 Fig. 14.40 | Minimized and maximized child windows. (a)(b) Parent window icons: minimize,maximize and close Maximized child window icons: minimize, restore and close Parent title bar indicates maximized child Minimized child window icons: restore, maximize and close

 2006 Pearson Education, Inc. All rights reserved. 111 Outline UsingMDIForm.cs (2 of 4) Create another new child form Set this form to be the child form’s parent Show the child form Create another new child form Set this form to be the child form’s parent Show the child form Terminate program

 2006 Pearson Education, Inc. All rights reserved. 115 14.13 Visual Inheritance Visual Inheritance – Enables to achieve visual consistency across applications – All Form s created so far derives from class System.Windows.Forms.Form – Derived Form s contains the functionality of its base class Form Includes any base-class properties, methods, variables and controls – The derived class also inherits all visual aspects Ex: sizing, component layout, spacing between GUI components, colors and fonts

 2006 Pearson Education, Inc. All rights reserved. 120 14.14 User-Defined Controls User-Defined Controls –.NET Framework allow you to create custom controls Appear in the user’s Toolbox Can be added to Forms, Panels or GroupBoxes in the same way that we add other predefined controls – The simplest way to create a custom control is to derive a class from an existing control Useful if you want to add functionality to an existing control

 2006 Pearson Education, Inc. All rights reserved. 121 14.14 User-Defined Controls (Cont.) – Method OnPaint Contained by all controls Called when a component must be redrawn Passed a PaintEventArgs object The derived control’s OnPaint method is called through polymorphism The base class’s OnPaint implementation is not called – Must call it explicitly from the new OnPaint implementation before we execute our custom-paint code Ensure the control will be displayed correctly

 2006 Pearson Education, Inc. All rights reserved. 122 14.14 User-Defined Controls (Cont.) – UserControl Create a new control composed of existing controls Acts as a container for the controls added to it Contains constituent controls – Controls added to a custom control – Does not determine how these constituent controls are displayed – Method OnPaint of the UserControl Cannot be overridden – To control the appearance of each constituent control, you must handle each control’s Paint event The Paint event handler is passed a PaintEventArgs object

 2006 Pearson Education, Inc. All rights reserved. 123 14.14 User-Defined Controls (Cont.) – Create a brand new control by inheriting from class Control Does not define any specific behavior Control handles the items associated with all controls – Ex: events and sizing handles Method OnPaint – Should contain a call to the base class’s OnPaint method – Add code that draws custom graphics inside the overridden OnPaint method

 2006 Pearson Education, Inc. All rights reserved. 126 14.14 User-Defined Controls (Cont.) Share custom controls with other developers (Example: UserControl ) – Create a new Class Library project. – Delete Class1.cs, initially provided with the application. – Right click the project in the Solution Explorer and select Add > User Control. – Inside the project, add controls and functionality to the UserControl. – Build the project. – Create a new Windows application. – Right click the ToolBox and select Choose Items. In the Choose Toolbox Items dialog, click Browse. Browse for the.dll file from the class library created. The item will then appear in the Choose Toolbox Items dialog. If it is not already checked, check this item. Click OK to add the item to the Toolbox. This control can now be added to the Form as if it were any other control.

 2006 Pearson Education, Inc. All rights reserved. 1 14 Graphical User Interface Concepts: Part 2.

Similar presentations

Presentation on theme: " 2006 Pearson Education, Inc. All rights reserved. 1 14 Graphical User Interface Concepts: Part 2."— Presentation transcript:

Similar presentations

About project

Feedback

Log in

Auth with social network:

 2006 Pearson Education, Inc. All rights reserved. 1 14 Graphical User Interface Concepts: Part 2.

Similar presentations

Presentation on theme: " 2006 Pearson Education, Inc. All rights reserved. 1 14 Graphical User Interface Concepts: Part 2."— Presentation transcript:

Similar presentations

About project

Feedback