1 / 86

Introduction to Graphical User Interface Concepts

Understand the basics of GUIs, event handling models, control properties, layout designs, and various GUI components like labels, text boxes, buttons, group boxes, and panels.

fmelissa
Download Presentation

Introduction to Graphical User Interface Concepts

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. Chapter 12 - Graphical User Interface Concepts: Part 1 Outline 12.1 Introduction 12.2 Windows Forms 12.3 Event-Handling Model 12.3.1 Basic Event Handling 12.4 Control Properties and Layout 12.5 Labels, TextBoxes and Buttons 12.6 GroupBoxes and Panels 12.7 CheckBoxes and RadioButtons 12.8 PictureBoxes 12.9 Mouse Event Handling 12.10 Keyboard Event Handling

  2. 12.1  Introduction • Graphical user interface • Allow interaction with program visually • Give program distinct look and feel • Built from window gadgets • Is an object, accessed via keyboard or mouse

  3. 12.1  Introduction Button Menu Label Menu Bar TextBox Scrollbar Fig. 12.1 Sample Internet Explorer window with GUI components.

  4. 12.1  Introduction

  5. 12.2  Windows Forms • Windows Forms • Create GUIs for programs • Element on the desktop • Represented by: • Dialog • Window • MDI window

  6. 12.2  Windows Forms • Component • Class that implements IComponent interface • Lacks visual parts • Control • Component with graphical part • Such as button or label • Are visible • Event • Generated by movement from mouse or keyboard • Event handlers performs action • Specifics written by programmer

  7. 12.2  Windows Forms Fig. 12.3 Components and controls for Windows Forms.

  8. 12.2  Windows Forms

  9. 12.3  Event-Handling Model • GUIs are event driven • Event handlers • Methods that process events and perform tasks • Associated delegate • Objects that reference methods • Contain lists of method references • Must have same signature • Intermediaries for objects and methods • Signature for control’s event handler

  10. calls Handler 1 for event E calls Object A raises event E Delegate for event E Handler 2 for event E Handler 3 for event E 12.3  Event-Handling Model Fig. 12.5 Event-handling model using delegates.

  11. 12.3.1 Basic Event Handling • Event handler • Must have same signature as corresponding delegate • Two object references are passed in • ControlName_EventName • Must be registered with delegate object • Add event handlers to the delegate’s invocation list • New delegate object for each event handler • Event multicasting • Have multiple handlers for one event • Order called for event handlers is indeterminate

  12. 12.3.1 Basic Event Handling Events icon List of events supported by control Selected event Current even handler (none) Event description Fig. 12.6 Events section of the Properties window.

  13. Form1.h1 of 3 Outline

  14. Outline Form1.h2 of 3

  15. Outline Form1.h3 of 3

  16. Outline Form1.cpp1 of 1

  17. 12.3.1 Basic Event Handling Class name List of events Fig. 12.9 List of Form events.

  18. 12.3.1 Basic Event Handling Event name Event delegate Event argument class Fig. 12.10 Details of Click event.

  19. 12.4  Control Properties and Layout • Common properties • Derive from class Control • Text property • Specifies the text that appears on a control • Focus method • Transfers the focus to a control • Becomes active control • TabIndex property • Order in which controls are given focus • Automatically set by Visual Studio .NET • Enable property • Indicate a control’s accessibility

  20. 12.4  Control Properties and Layout • Visibility control • Hide control from user • Or use method Hide • Anchor property • Anchoring control to specific location • Constant distance from specified location • Unanchored control moves relative to the position • Docking allows control to spread itself along and entire side • Both options refer to the parent container • Size structure • Allow for specifying size range • MinimumSize and MaximumSize property

  21. 12.4  Control Properties and Layout

  22. 12.4  Control Properties and Layout After resize Before resize Constant distance to left and top sides Fig. 12.12 Anchoring demonstration.

  23. 12.4  Control Properties and Layout Darkened bar indicates to which wall control is anchored Click down-arrow in Anchor property to display anchoring window Fig. 12.13 Manipulating the Anchor property of a control.

  24. 12.4  Control Properties and Layout Control expands along top portion of the form Fig. 12.14 Docking demonstration.

  25. 12.4  Control Properties and Layout

  26. 12.5  Labels, TextBoxes and Buttons • Labels • Provide text instruction • Read only text • Defined with class Label • Derived from class Control • Textbox • Class TextBox • Area for text input • Password textbox

  27. 12.5  Labels, TextBoxes and Buttons • Button • Control to trigger a specific action • Checkboxes or radio buttons • Derived from ButtonBase

  28. 12.5  Labels, TextBoxes and Buttons

  29. 12.5  Labels, TextBoxes and Buttons

  30. 12.5  Labels, TextBoxes and Buttons

  31. Outline Form1.h1 of 5

  32. Outline Form1.h2 of 5

  33. Outline Form1.h3 of 5

  34. Outline Form1.h4 of 5

  35. Outline Form1.h5 of 5

  36. Outline Form1.cpp1 of 1

  37. 12.6  GroupBoxes and Panels • Arrange components on a GUI • GroupBoxes can display a caption • Text property determines its caption • Panels can have scrollbar • View additional controls inside the Panel

  38. 12.6  GroupBoxes and Panels

  39. 12.6  GroupBoxes and Panels

  40. 12.6  GroupBoxes and Panels Controls inside panel panel panel scrollbars Fig. 12.23 Creating a Panel with scrollbars.

  41. Outline Form1.h1 of 4

  42. Outline Form1.h2 of 4

  43. Outline Form1.h3 of 4

  44. Outline Form1.h4 of 4

  45. Outline Form1.cpp1 of 1

  46. Fig. 12.25 GroupBox and Panel demonstration.

  47. 12.7  CheckBoxes and RadioButtons • State buttons • On/off or true/false state • Derived from class ButtonBase • CheckBox • No restriction on usage • RadioButton • Grouped together • Only one can be true • Mutually exclusive options

  48. 12.7  CheckBoxes and RadioButtons

  49. Outline Form1.h1 of 3

  50. Outline Form1.h2 of 3

More Related