CS341: Visual Programming

Study Notes

CS341: Visual Programming - Week 03 (GUI)

Graphical User Interface (GUI): Allows user interaction with software through visual elements like buttons, icons, menus, and windows. Designed for easier accessibility and intuitive use.

Key GUI Components

Windows: Primary containers for content, controls, and other elements. Enable multitasking by allowing multiple views/applications open simultaneously. Can be resized, minimized, maximized, or closed; typically have a title bar with options. Contain other components for organization.
Icons: Small graphical representations of files, applications, actions, or commands. Provide visual shortcuts for recognizable functions/objects. Examples include trash icon for delete, folder icon for directories, and application icon on desktops.
Menus: Organize commands and options in a structured list, typically in a menu bar. Allow users to access functions/options in an organized and hierarchical way. Dropdown menus expand when clicked; context menus appear on right-click, providing options for specific elements. Ribbon menus combine toolbar and menu functions (e.g., MS Office).
Buttons: Interactive elements that perform actions when clicked; used to execute commands or submit user input. Examples are submit buttons for form data and cancel buttons for resetting actions without saving changes. Can include images like a settings gear.
Text Boxes and Input Fields: Allow users to enter text data (forms, search bars, data entry). Can be single-line or multi-line. Include placeholders for guidance and are usually validated for correct format.
Labels: Provide textual descriptions for other elements; clarify components' purposes. Often used to display dynamic information, such as status messages. Placed next to text boxes and input fields.
Checkboxes and Radio Buttons: Controls for selections. Checkboxes allow multiple selections in a group; radio buttons restrict selections to one option within a set.
Dropdowns (Combo Boxes): Allow users to select an option from a displayed list, offering a compact way to show multiple choices without excessive space.
Sliders and Progress Bars: Sliders allow users to select values (volume, brightness, ranges) via a handle. Progress bars visually show ongoing task progress (e.g., downloads, installations).
Tooltips and Dialog Boxes: Tooltips appear on hovering over an element, providing additional information. Dialog boxes are windows that appear to provide information or require user actions. They can be modal (block main window interaction until dismissal, such as confirmation dialogs) or non-modal (allow simultaneous main window interaction).

GUI Design Principles

User-Centered Design: Focus on ease of use and accessibility.
Layout Managers: Manage element positioning and resizing.
Consistency: Maintain uniformity in fonts, colors, and control types.
**Feedback and Responsiveness:**Provide visual feedback for user actions.

Additional Design Principles

Error Handling and Validation: Display clear error messages and validate user input.
Accessibility: Include screen reader support, high-contrast modes, and keyboard navigation features.
Aesthetic and Minimalism: Create a visually appealing and uncluttered interface.

GUI Frameworks

Desktop: Qt (cross-platform, supports C++ and Python), Swing and JavaFX (Java), Windows Forms and WPF (C#).
Web: HTML/CSS and JavaScript, React, Angular, Vue (JavaScript), Bootstrap and Material UI.
Mobile: iOS (UIKit and SwiftUI), Android (XML layouts and Jetpack Compose), Flutter (cross-platform, uses Dart).