CS341 Visual Programming (OOP in Visual Programming) PDF

CS341: Visual Programming WEEK-05: OOP in Visual Programming Reda M. Hussien Assistant Professor of Information Systems FACULTY OF COMPUTERS AND INFORMATION Kafr El-Shiekh University Table of Contents 1 Object-Oriented Programming in Visual Programming 2 Using OOP Concepts in C# for Custom Controls Encapsulation Inheritance Polymorphism Abstraction Composition Reda M. Hussien CS341: Visual Programming 12 November 2024 1 / 23 Introduction to OOP in Visual Programming Object-Oriented Programming (OOP) in visual programming involves using graphical elements to represent classes, objects, and other OOP concepts. This can simplify programming by allowing direct manipulation of visual representations. Classes and Objects: Represented as blocks or icons. Encapsulation: Data fields and methods nested within blocks. Inheritance: Linking or duplicating class blocks to show inheritance relationships. Polymorphism: Overriding base class methods through editing blocks. Abstraction: Hiding complex implementations behind simplified visual interfaces. Reda M. Hussien CS341: Visual Programming 12 November 2024 2 / 23 Overview of Custom Controls in C# Custom controls in C# allow for reusable UI components with encapsulated logic. Using OOP concepts like encapsulation, inheritance, polymorphism, and abstraction, developers can create flexible and modular controls. Encapsulation Inheritance Polymorphism Abstraction Composition Reda M. Hussien CS341: Visual Programming 12 November 2024 3 / 23 Encapsulation Example: Custom Button with Hover Effect 1 using System ; 2 using System. Drawing ; 3 using System. Windows. Forms ; 4 5 public class CustomButton : Button 6 { 7 private Color hoverColor = Color. LightBlue ; 8 public Color HoverColor 9 { 10 get { return hoverColor ; } 11 set { hoverColor = value ; } 12 } Reda M. Hussien CS341: Visual Programming 12 November 2024 4 / 23 13 protected override void OnMouseEnter ( EventArgs e ) 14 { 15 base. OnMouseEnter ( e ) ; 16 this. BackColor = hoverColor ; 17 } 18 protected override void OnMouseLeave ( EventArgs e ) 19 { 20 base. OnMouseLeave ( e ) ; 21 this. BackColor = SystemColors. Control ; 22 } 23 } Reda M. Hussien CS341: Visual Programming 12 November 2024 5 / 23 Explanation: The ’hoverColor’ field is encapsulated within the ’CustomButton’ class and exposed through the ’HoverColor’ property, containing the hover color behavior within the control. Reda M. Hussien CS341: Visual Programming 12 November 2024 6 / 23 Reda M. Hussien CS341: Visual Programming 12 November 2024 7 / 23 Inheritance Example: Enhanced TextBox with Watermark 1 using System ; 2 using System. Drawing ; 3 using System. Windows. Forms ; 4 public class WatermarkTextBox : TextBox 5 { 6 private string watermarkText = " Enter text here " ; 7 private Color watermarkColor = Color. Gray ; 8 public string WatermarkText 9 { 10 get { return watermarkText ; } 11 set { watermarkText = value ; Invalidate () ; } 12 } Reda M. Hussien CS341: Visual Programming 12 November 2024 8 / 23 13 protected override void OnPaint ( PaintEventArgs e ) { 14 base. OnPaint ( e ) ; 15 if ( string. IsNullOrEmpty ( this. Text ) ) 16 { 17 using ( Brush brush = new SolidBrush ( watermarkColor ) ) 18 { 19 e. Graphics. DrawString ( watermarkText , this. Font , brush , new PointF (0 , 0) ) ; 20 } 21 } 22 } 23 } Reda M. Hussien CS341: Visual Programming 12 November 2024 9 / 23 Explanation: Inherits from ’TextBox’ class to add watermark functionality, encapsulated within the ’WatermarkText’ property. Reda M. Hussien CS341: Visual Programming 12 November 2024 10 / 23 Reda M. Hussien CS341: Visual Programming 12 November 2024 11 / 23 Polymorphism Example: Blinking Label 1 using System ; 2 using System. Drawing ; 3 using System. Windows. Forms ; 4 public class BlinkingLabel : Label 5 { 6 private Timer blinkTimer ; 7 private bool isBlinking ; 8 private Color originalColor ; 9 public BlinkingLabel () { 10 blinkTimer = new Timer { Interval = 500 }; 11 blinkTimer. Tick += (s , e ) = > ToggleBlink () ; 12 } Reda M. Hussien CS341: Visual Programming 12 November 2024 12 / 23 13 public bool IsBlinking { 14 get { return isBlinking ; } 15 set { 16 isBlinking = value ; 17 if ( isBlinking ) { 18 originalColor = this. ForeColor ; 19 blinkTimer. Start () ; 20 } else { 21 blinkTimer. Stop () ; 22 this. ForeColor = originalColor ; 23 } 24 } 25 } Reda M. Hussien CS341: Visual Programming 12 November 2024 13 / 23 26 private void ToggleBlink () 27 { 28 this. ForeColor = this. ForeColor == Color. Red ? originalColor : Color. Red ; 29 } 30 } Reda M. Hussien CS341: Visual Programming 12 November 2024 14 / 23 Explanation: ’BlinkingLabel’ overrides the ’ForeColor’ property dynamically to simulate blinking behavior using polymorphism. Reda M. Hussien CS341: Visual Programming 12 November 2024 15 / 23 Reda M. Hussien CS341: Visual Programming 12 November 2024 16 / 23 Abstraction Example: Base Entry Control 1 using System ; 2 using System. Drawing ; 3 using System. Windows. Forms ; 4 public abstract class BaseEntryControl : Control 5 { 6 protected TextBox inputTextBox ; 7 public string Value 8 { 9 get { return inputTextBox. Text ; } 10 set { inputTextBox. Text = value ; } 11 } 12 Reda M. Hussien CS341: Visual Programming 12 November 2024 17 / 23 13 public abstract bool ValidateInput () ; 14 15 public BaseEntryControl () 16 { 17 inputTextBox = new TextBox { Location = new Point (0 , 0) , Width = 200 }; 18 Controls. Add ( inputTextBox ) ; 19 } 20 } Reda M. Hussien CS341: Visual Programming 12 November 2024 18 / 23 1 public class Em ailEntry Control : BaseEntryControl 2 { 3 public override bool ValidateInput () 4 { 5 return Value. Contains ( " @ " ) ; 6 } 7 } 8 public class Ph oneEntry Control : BaseEntryControl 9 { 10 public override bool ValidateInput () { 11 return long. TryParse ( Value , out _ ) ; 12 } 13 } Reda M. Hussien CS341: Visual Programming 12 November 2024 19 / 23 Explanation: ’BaseEntryControl’ defines common behavior for data entry controls, with validation logic abstracted and implemented in derived classes. Reda M. Hussien CS341: Visual Programming 12 November 2024 20 / 23 Composition Example: Search Box 1 using System ; 2 using System. Drawing ; 3 using System. Windows. Forms ; 4 5 public class SearchBox : UserControl { 6 private TextBox searchTextBox ; 7 private Button searchButton ; 8 9 public string SearchText { 10 get { return searchTextBox. Text ; } 11 set { searchTextBox. Text = value ; } 12 } Reda M. Hussien CS341: Visual Programming 12 November 2024 21 / 23 13 14 public event EventHandler SearchClicked ; 15 16 public SearchBox () { 17 searchTextBox = new TextBox { Location = new Point (0 , 0) , Width = 150 }; 18 searchButton = new Button { Text = " Search " , Location = new Point (160 , 0) }; 19 20 searchButton. Click += (s , e ) = > SearchClicked ?. Invoke ( this , EventArgs. Empty ) ; 21 22 Controls. Add ( searchTextBox ) ; Reda M. Hussien CS341: Visual Programming 12 November 2024 22 / 23 23 Controls. Add ( searchButton ) ; 24 } 25 } Explanation: ’SearchBox’ control combines a ’TextBox’ and ’Button’, providing a search UI component through composition. Reda M. Hussien CS341: Visual Programming 12 November 2024 23 / 23 CS341: Visual Programming WEEK-04: GUI (Graphical User Interface) Reda M. Hussien Assistant Professor of Information Systems FACULTY OF COMPUTERS AND INFORMATION Kafr El-Shiekh University Table of Contents 1 Layout Managers 2 Feedback and Responsiveness 3 Error Handling and Validation 4 Key Components of a GUI 5 GUI Layout and Design Principles 6 Types of GUI Frameworks 7 Advantages and Challenges of GUIs 8 GUI Components 9 Detailed GUI Components 10 Summary 11 Conclusion Reda M. Hussien CS341: Visual Programming 29 October 2024 1 / 36 What is a GUI? A Graphical User Interface (GUI) allows users to interact with software applications through visual elements like buttons, icons, menus, and windows. GUIs are designed to make technology more accessible by providing an intuitive and visually organized environment. Reda M. Hussien CS341: Visual Programming 29 October 2024 2 / 36 Key Components Windows: Primary containers for content and controls. Icons: Small graphic representations of objects or actions. Menus: Structured lists of commands and options. Buttons: Trigger actions or commands. Text Boxes and Input Fields: Accept user input data. Reda M. Hussien CS341: Visual Programming 29 October 2024 3 / 36 Additional Components Labels: Provide descriptions for other elements. Checkboxes and Radio Buttons: Allow multiple and single choices, respectively. Dropdowns (Combo Boxes): Select one option from a list. Sliders and Progress Bars: Adjust values and show progress. Tooltips and Dialog Boxes: Show additional information and alerts. Reda M. Hussien CS341: Visual Programming 29 October 2024 4 / 36 Design Principles User-Centered Design: Focus on ease of use and accessibility. Layout Managers: Handle element positioning and resizing. Consistency: Maintain uniformity in fonts, colors, and control types. Feedback and Responsiveness: Provide visual feedback for user actions. Reda M. Hussien CS341: Visual Programming 29 October 2024 5 / 36 Additional Design Principles Error Handling and Validation: Display clear error messages and validate input. Accessibility: Include screen reader support, high-contrast modes, and keyboard navigation. Aesthetic and Minimalism: Create a visually appealing and uncluttered interface. Reda M. Hussien CS341: Visual Programming 29 October 2024 6 / 36 Desktop GUI Frameworks Qt: Cross-platform, supports C++ and Python. Swing and JavaFX (Java): Libraries for cross-platform desktop applications. Windows Forms and WPF (C#): GUI frameworks for Windows desktop applications. Reda M. Hussien CS341: Visual Programming 29 October 2024 7 / 36 Web GUI Frameworks HTML/CSS and JavaScript: Core technologies for web-based GUIs. React, Angular, Vue: JavaScript frameworks for interactive web interfaces. Bootstrap and Material UI: Pre-designed component libraries for responsive design. Reda M. Hussien CS341: Visual Programming 29 October 2024 8 / 36 Mobile GUI Frameworks iOS (UIKit and SwiftUI): Apple’s frameworks for iOS applications. Android (XML layouts and Jetpack Compose): Frameworks for Android apps. Flutter: Cross-platform framework for iOS and Android, using Dart. Reda M. Hussien CS341: Visual Programming 29 October 2024 9 / 36 Advantages of GUIs Ease of Use: Reduces the need for technical knowledge. Visual Appeal: Increases engagement and satisfaction. Efficiency: Allows quick navigation and task completion. Accessibility: Accommodates users with different abilities. Reduced Learning Curve: Easier for new users to learn. Reda M. Hussien CS341: Visual Programming 29 October 2024 10 / 36 Challenges of GUIs Complexity in Design and Development: Requires extensive testing. System Resource Requirements: Higher resource consumption. Adaptability: Ensuring compatibility across devices and screen sizes. Reda M. Hussien CS341: Visual Programming 29 October 2024 11 / 36 GUI Components Graphical User Interface (GUI) components are essential elements that enable user interaction with software applications. Each component has a specific role and functionality to enhance usability and make the interface intuitive. This presentation will detail the main GUI components and their purpose. Reda M. Hussien CS341: Visual Programming 29 October 2024 12 / 36 Windows Definition: Windows are the primary visual containers in GUIs, housing content, controls, and other elements. Purpose: Allow multiple views or applications to be open simultaneously, enabling users to multitask. Features: Can be resized, minimized, maximized, or closed. Usually have a title bar with options for minimizing, maximizing, and closing. Contain other components such as panels, frames, or child windows for organization. Reda M. Hussien CS341: Visual Programming 29 October 2024 13 / 36 Reda M. Hussien CS341: Visual Programming 29 October 2024 14 / 36 Icons Definition: Icons are small graphical representations of files, applications, actions, or commands. Purpose: Provide a visual shorthand for functions or objects, making them easily recognizable. Usage Examples: A trash can icon for the delete function. A folder icon representing a directory. An app icon on a desktop or home screen. Reda M. Hussien CS341: Visual Programming 29 October 2024 15 / 36 Reda M. Hussien CS341: Visual Programming 29 October 2024 16 / 36 Menus Definition: Menus organize commands and options into a structured list, typically placed in a menu bar. Purpose: Allow users to access functions and options in an organized and hierarchical way. Types of Menus: Dropdown Menus: Expandable lists that appear when clicked. Context Menus: Activated on right-click, providing options related to a specific element. Ribbon Menus: Used in applications like MS Office, combining toolbar and menu functions. Reda M. Hussien CS341: Visual Programming 29 October 2024 17 / 36 Reda M. Hussien CS341: Visual Programming 29 October 2024 18 / 36 Reda M. Hussien CS341: Visual Programming 29 October 2024 19 / 36 Reda M. Hussien CS341: Visual Programming 29 October 2024 20 / 36 Buttons Definition: Buttons are interactive elements that perform actions when clicked. Purpose: Execute commands or submit user input. Examples of Buttons: Submit Button: Sends form data for processing. Cancel Button: Exits or resets an action without saving changes. Icon Buttons: Combine an image with a function, e.g., a settings gear. Reda M. Hussien CS341: Visual Programming 29 October 2024 21 / 36 Reda M. Hussien CS341: Visual Programming 29 October 2024 22 / 36 Text Boxes and Input Fields Definition: Text boxes allow users to enter textual data or information. Purpose: Used in forms, search bars, and data entry fields for user input. Characteristics: Can be single-line or multi-line. May include placeholders to guide users on the expected input. Often validated to ensure correct data format (e.g., email, password). Reda M. Hussien CS341: Visual Programming 29 October 2024 23 / 36 Reda M. Hussien CS341: Visual Programming 29 October 2024 24 / 36 Labels Definition: Labels provide textual descriptions or information about other elements. Purpose: Help users understand the function of adjacent controls or fields. Usage: Placed next to text boxes or input fields to clarify their purpose. Often used to display dynamic information, such as status messages. Reda M. Hussien CS341: Visual Programming 29 October 2024 25 / 36 Reda M. Hussien CS341: Visual Programming 29 October 2024 26 / 36 Checkboxes and Radio Buttons Definition: Checkbox and radio buttons are controls for making selections from options. Purpose: Enable users to make multiple (checkbox) or single (radio button) selections. Differences: Checkbox: Allows multiple selections in a group. Radio Button: Restricts selection to one option in a set. Reda M. Hussien CS341: Visual Programming 29 October 2024 27 / 36 Reda M. Hussien CS341: Visual Programming 29 October 2024 28 / 36 Dropdowns (Combo Boxes) Definition: Dropdown menus (or combo boxes) allow users to select an option from a list. Purpose: Provide a compact way to show multiple options without occupying much screen space. Usage Examples: Country selection in a registration form. Font or text style selection in a text editor. Reda M. Hussien CS341: Visual Programming 29 October 2024 29 / 36 Reda M. Hussien CS341: Visual Programming 29 October 2024 30 / 36 Sliders and Progress Bars Sliders: Enable users to select values within a range by sliding a handle along a track. Commonly used for adjusting volume, brightness, or setting ranges. Progress Bars: Visually indicate the progress of an ongoing task. Used in file downloads, installations, or loading screens. Reda M. Hussien CS341: Visual Programming 29 October 2024 31 / 36 Reda M. Hussien CS341: Visual Programming 29 October 2024 32 / 36 Tooltips and Dialog Boxes Tooltips: Small pop-ups that appear on hovering over an element, providing additional information. Dialog Boxes: Windows that appear to convey information or require user interaction. Usage of Dialogs: Modal Dialogs: Block access to the main window until dismissed, e.g., confirmation dialogs. Non-Modal Dialogs: Allow interaction with the main window while open. Reda M. Hussien CS341: Visual Programming 29 October 2024 33 / 36 Reda M. Hussien CS341: Visual Programming 29 October 2024 34 / 36 Summary of GUI Components GUI components play distinct roles in enhancing usability and interaction. Proper arrangement and consistent design of these elements contribute to an intuitive user experience. Key components like windows, icons, menus, buttons, and text boxes form the foundation of most GUIs. Reda M. Hussien CS341: Visual Programming 29 October 2024 35 / 36 Conclusion GUIs bridge the gap between technical functionality and user accessibility. Effective GUI design improves user satisfaction, accessibility, and creates a more interactive experience. Reda M. Hussien CS341: Visual Programming 29 October 2024 36 / 36 CS341: Visual Programming WEEK-03: GUI (Graphical User Interface) Reda M. Hussien Assistant Professor of Information Systems FACULTY OF COMPUTERS AND INFORMATION Kafr El-Shiekh University Table of Contents 1 Introduction to GUI 2 Key Components of a GUI 3 GUI Layout and Design Principles 4 Types of GUI Frameworks 5 Advantages and Challenges of GUIs 6 GUI Components 7 Detailed GUI Components 8 Summary 9 Conclusion Reda M. Hussien CS341: Visual Programming 29 October 2024 1 / 36 Introduction to GUI What is a GUI? A Graphical User Interface (GUI) allows users to interact with software applications through visual elements like buttons, icons, menus, and windows. GUIs are designed to make technology more accessible by providing an intuitive and visually organized environment. Reda M. Hussien CS341: Visual Programming 29 October 2024 2 / 36 Key Components Windows: Primary containers for content and controls. Icons: Small graphic representations of objects or actions. Menus: Structured lists of commands and options. Buttons: Trigger actions or commands. Text Boxes and Input Fields: Accept user input data. Reda M. Hussien CS341: Visual Programming 29 October 2024 3 / 36 Additional Components Labels: Provide descriptions for other elements. Checkboxes and Radio Buttons: Allow multiple and single choices, respectively. Dropdowns (Combo Boxes): Select one option from a list. Sliders and Progress Bars: Adjust values and show progress. Tooltips and Dialog Boxes: Show additional information and alerts. Reda M. Hussien CS341: Visual Programming 29 October 2024 4 / 36 Design Principles User-Centered Design: Focus on ease of use and accessibility. Layout Managers: Handle element positioning and resizing. Consistency: Maintain uniformity in fonts, colors, and control types. Feedback and Responsiveness: Provide visual feedback for user actions. Reda M. Hussien CS341: Visual Programming 29 October 2024 5 / 36 Additional Design Principles Error Handling and Validation: Display clear error messages and validate input. Accessibility: Include screen reader support, high-contrast modes, and keyboard navigation. Aesthetic and Minimalism: Create a visually appealing and uncluttered interface. Reda M. Hussien CS341: Visual Programming 29 October 2024 6 / 36 Desktop GUI Frameworks Qt: Cross-platform, supports C++ and Python. Swing and JavaFX (Java): Libraries for cross-platform desktop applications. Windows Forms and WPF (C#): GUI frameworks for Windows desktop applications. Reda M. Hussien CS341: Visual Programming 29 October 2024 7 / 36 Web GUI Frameworks HTML/CSS and JavaScript: Core technologies for web-based GUIs. React, Angular, Vue: JavaScript frameworks for interactive web interfaces. Bootstrap and Material UI: Pre-designed component libraries for responsive design. Reda M. Hussien CS341: Visual Programming 29 October 2024 8 / 36 Mobile GUI Frameworks iOS (UIKit and SwiftUI): Apple’s frameworks for iOS applications. Android (XML layouts and Jetpack Compose): Frameworks for Android apps. Flutter: Cross-platform framework for iOS and Android, using Dart. Reda M. Hussien CS341: Visual Programming 29 October 2024 9 / 36 Advantages of GUIs Ease of Use: Reduces the need for technical knowledge. Visual Appeal: Increases engagement and satisfaction. Efficiency: Allows quick navigation and task completion. Accessibility: Accommodates users with different abilities. Reduced Learning Curve: Easier for new users to learn. Reda M. Hussien CS341: Visual Programming 29 October 2024 10 / 36 Challenges of GUIs Complexity in Design and Development: Requires extensive testing. System Resource Requirements: Higher resource consumption. Adaptability: Ensuring compatibility across devices and screen sizes. Reda M. Hussien CS341: Visual Programming 29 October 2024 11 / 36 GUI Components Graphical User Interface (GUI) components are essential elements that enable user interaction with software applications. Each component has a specific role and functionality to enhance usability and make the interface intuitive. This presentation will detail the main GUI components and their purpose. Reda M. Hussien CS341: Visual Programming 29 October 2024 12 / 36 Windows Definition: Windows are the primary visual containers in GUIs, housing content, controls, and other elements. Purpose: Allow multiple views or applications to be open simultaneously, enabling users to multitask. Features: Can be resized, minimized, maximized, or closed. Usually have a title bar with options for minimizing, maximizing, and closing. Contain other components such as panels, frames, or child windows for organization. Reda M. Hussien CS341: Visual Programming 29 October 2024 13 / 36 Reda M. Hussien CS341: Visual Programming 29 October 2024 14 / 36 Icons Definition: Icons are small graphical representations of files, applications, actions, or commands. Purpose: Provide a visual shorthand for functions or objects, making them easily recognizable. Usage Examples: A trash can icon for the delete function. A folder icon representing a directory. An app icon on a desktop or home screen. Reda M. Hussien CS341: Visual Programming 29 October 2024 15 / 36 Reda M. Hussien CS341: Visual Programming 29 October 2024 16 / 36 Menus Definition: Menus organize commands and options into a structured list, typically placed in a menu bar. Purpose: Allow users to access functions and options in an organized and hierarchical way. Types of Menus: Dropdown Menus: Expandable lists that appear when clicked. Context Menus: Activated on right-click, providing options related to a specific element. Ribbon Menus: Used in applications like MS Office, combining toolbar and menu functions. Reda M. Hussien CS341: Visual Programming 29 October 2024 17 / 36 Reda M. Hussien CS341: Visual Programming 29 October 2024 18 / 36 Reda M. Hussien CS341: Visual Programming 29 October 2024 19 / 36 Reda M. Hussien CS341: Visual Programming 29 October 2024 20 / 36 Buttons Definition: Buttons are interactive elements that perform actions when clicked. Purpose: Execute commands or submit user input. Examples of Buttons: Submit Button: Sends form data for processing. Cancel Button: Exits or resets an action without saving changes. Icon Buttons: Combine an image with a function, e.g., a settings gear. Reda M. Hussien CS341: Visual Programming 29 October 2024 21 / 36 Reda M. Hussien CS341: Visual Programming 29 October 2024 22 / 36 Text Boxes and Input Fields Definition: Text boxes allow users to enter textual data or information. Purpose: Used in forms, search bars, and data entry fields for user input. Characteristics: Can be single-line or multi-line. May include placeholders to guide users on the expected input. Often validated to ensure correct data format (e.g., email, password). Reda M. Hussien CS341: Visual Programming 29 October 2024 23 / 36 Reda M. Hussien CS341: Visual Programming 29 October 2024 24 / 36 Labels Definition: Labels provide textual descriptions or information about other elements. Purpose: Help users understand the function of adjacent controls or fields. Usage: Placed next to text boxes or input fields to clarify their purpose. Often used to display dynamic information, such as status messages. Reda M. Hussien CS341: Visual Programming 29 October 2024 25 / 36 Reda M. Hussien CS341: Visual Programming 29 October 2024 26 / 36 Checkboxes and Radio Buttons Definition: Checkbox and radio buttons are controls for making selections from options. Purpose: Enable users to make multiple (checkbox) or single (radio button) selections. Differences: Checkbox: Allows multiple selections in a group. Radio Button: Restricts selection to one option in a set. Reda M. Hussien CS341: Visual Programming 29 October 2024 27 / 36 Reda M. Hussien CS341: Visual Programming 29 October 2024 28 / 36 Dropdowns (Combo Boxes) Definition: Dropdown menus (or combo boxes) allow users to select an option from a list. Purpose: Provide a compact way to show multiple options without occupying much screen space. Usage Examples: Country selection in a registration form. Font or text style selection in a text editor. Reda M. Hussien CS341: Visual Programming 29 October 2024 29 / 36 Reda M. Hussien CS341: Visual Programming 29 October 2024 30 / 36 Sliders and Progress Bars Sliders: Enable users to select values within a range by sliding a handle along a track. Commonly used for adjusting volume, brightness, or setting ranges. Progress Bars: Visually indicate the progress of an ongoing task. Used in file downloads, installations, or loading screens. Reda M. Hussien CS341: Visual Programming 29 October 2024 31 / 36 Reda M. Hussien CS341: Visual Programming 29 October 2024 32 / 36 Tooltips and Dialog Boxes Tooltips: Small pop-ups that appear on hovering over an element, providing additional information. Dialog Boxes: Windows that appear to convey information or require user interaction. Usage of Dialogs: Modal Dialogs: Block access to the main window until dismissed, e.g., confirmation dialogs. Non-Modal Dialogs: Allow interaction with the main window while open. Reda M. Hussien CS341: Visual Programming 29 October 2024 33 / 36 Reda M. Hussien CS341: Visual Programming 29 October 2024 34 / 36 Summary of GUI Components GUI components play distinct roles in enhancing usability and interaction. Proper arrangement and consistent design of these elements contribute to an intuitive user experience. Key components like windows, icons, menus, buttons, and text boxes form the foundation of most GUIs. Reda M. Hussien CS341: Visual Programming 29 October 2024 35 / 36 Conclusion GUIs bridge the gap between technical functionality and user accessibility. Effective GUI design improves user satisfaction, accessibility, and creates a more interactive experience. Reda M. Hussien CS341: Visual Programming 29 October 2024 36 / 36 CS341: Visual Programming WEEK-02: Event-Driven Programming Reda M. Hussien Assistant Professor of Information Systems FACULTY OF COMPUTERS AND INFORMATION Kafr El-Shiekh University Table of Contents 1 Event-Driven Programming Concepts 2 Key components in event-driven programming 3 Handling User Input and Responding to Events 4 Benefits of Event-Driven Programming in Handling User Input Reda M. Hussien CS341: Visual Programming 21 October 2024 1 / 28 Event-Driven Programming Concepts Event-driven programming Event-driven programming is a programming paradigm in which the flow of the program is determined by events such as user actions (mouse clicks, key presses), sensor outputs, or messages from other programs. Instead of executing sequentially, an event-driven application responds to events asynchronously. This approach is common in graphical user interfaces (GUIs), real-time systems, and networking applications. Reda M. Hussien CS341: Visual Programming 21 October 2024 2 / 28 Key components in event-driven programming Key components in event-driven programming Key components in event-driven programming include 1 Event handlers, 2 Delegates, and 3 Events. Reda M. Hussien CS341: Visual Programming 21 October 2024 3 / 28 1. Event Handlers An event handler is a function or method in a program that gets called in response to a specific event. It defines the actions that should occur when the event is triggered. Event handlers are commonly used in GUIs to respond to user actions, such as clicking a button or typing in a text field. Reda M. Hussien CS341: Visual Programming 21 October 2024 4 / 28 Characteristics of Event Handlers Asynchronous Execution: Event handlers run asynchronously in response to events, meaning they execute when an event occurs, not in the normal program flow. Specificity: Each event handler is designed to handle a specific event or a group of related events. Loose Coupling: Event handlers allow loose coupling between the event source (such as a button click) and the event response (the logic that executes when the button is clicked). This improves modularity in the codebase. Reda M. Hussien CS341: Visual Programming 21 October 2024 5 / 28 In a C# Windows Forms application, an event handler could be set up to handle a button click: 1 private void Button_Click ( object sender , EventArgs e ) 2 { 3 MessageBox. Show ( " Button clicked ! " ) ; 4 } In this example, ’Button_Click’ is an event handler that executes whenever the specified button is clicked. Reda M. Hussien CS341: Visual Programming 21 October 2024 6 / 28 2. Delegates delegate is a type-safe function pointer in languages like C# and CSharp. It defines a method signature and can be used to pass methods as arguments to other methods. Delegates are critical in event-driven programming because they define the method signature that an event handler must follow to respond to an event. Reda M. Hussien CS341: Visual Programming 21 October 2024 7 / 28 Characteristics of Delegates Type-Safe: Delegates ensure that the method signature matches the expected event handler signature, preventing runtime errors. Encapsulation of Methods: Delegates allow methods to be passed around and invoked indirectly, which is key for decoupling the event source from the event handler. Multicasting: In languages like C#, delegates can be multicast, meaning multiple methods can be invoked by the same delegate. Reda M. Hussien CS341: Visual Programming 21 October 2024 8 / 28 In C#, a delegate could be defined and used to refer to a method that matches its signature: 1 public delegate void MyDelegate ( string message ) ; 2 public void PrintMessage ( string msg ) 3 { 4 Console. WriteLine ( msg ) ; 5 } 6 MyDelegate del = PrintMessage ; 7 del ( " Hello , world ! " ) ; // Invokes PrintMessage via delegate Reda M. Hussien CS341: Visual Programming 21 October 2024 9 / 28 3. Events An event in programming is an action or occurrence that can trigger responses in the form of event handlers. Events are central to event-driven systems because they notify the application when something significant has happened, allowing it to respond. Events are built on delegates in languages like C# and provide a more structured way to implement event-driven behavior. Reda M. Hussien CS341: Visual Programming 21 October 2024 10 / 28 Characteristics of Events Triggered by External Factors: Events are typically triggered by external factors, such as user actions (clicks, key presses), system conditions (timeouts), or hardware interactions. Based on Delegates: Events are often implemented using delegates, where the event publisher defines a delegate that can be subscribed to by event handlers. Subscription Model: Events follow a subscription model, where one or more event handlers can subscribe to an event, and when the event occurs, all subscribers are notified. Reda M. Hussien CS341: Visual Programming 21 October 2024 11 / 28 In C#, an event might be defined and used as follows: 1 public delegate void MyEventHandler ( string message ) ; 2 public event MyEventHandler MessageReceived ; 3 public void SendMessage ( string msg ) 4 { 5 if ( MessageReceived != null ) 6 MessageReceived ( msg ) ; 7 } In this example, ‘MessageReceived‘ is an event based on the ‘MyEventHandler‘ delegate. When the ‘SendMessage‘ method is called, it raises the event if there are any subscribers (event handlers) attached. Reda M. Hussien CS341: Visual Programming 21 October 2024 12 / 28 Handling User Input and Responding to Events Handling User Input and Responding to Events Handling user input and responding to events is one of the core functionalities of event-driven programming, especially in GUI applications, web applications, and real-time systems. The user interacts with the interface, and the application reacts to those interactions via event handlers. Reda M. Hussien CS341: Visual Programming 21 October 2024 13 / 28 1. Capturing User Input User input refers to actions such as key presses, mouse clicks, touch gestures, or data entered into forms. Event-driven systems typically have event listeners or sensors monitoring user input. For example, in a desktop GUI application, user inputs are captured as events that are handled by event listeners or handlers: Mouse Events: Clicking, double-clicking, hovering, dragging, etc. Keyboard Events: Key press, key release, etc. Touch Events: Swipe, pinch, tap (in mobile applications). Reda M. Hussien CS341: Visual Programming 21 October 2024 14 / 28 2. Responding to Events Once the user input is captured, the system needs to respond by executing the appropriate event handler. The response could be: Updating the UI (e.g., showing a message, changing the layout, highlighting a field). Processing the input (e.g., sending form data to the server). Triggering further actions (e.g., opening a file, starting a download). Reda M. Hussien CS341: Visual Programming 21 October 2024 15 / 28 In a Windows Forms application, handling a button click event to display a message might look like this: 1 // Create event handler 2 private void myButton_Click ( object sender , EventArgs e ) 3 { 4 MessageBox. Show ( " Hello , World ! " ) ; 5 } 6 // Subscribe the button ’s Click event to the handler 7 myButton. Click += new EventHandler ( myButton_Click ) ; Here, when the button (‘myButton‘) is clicked, the ‘myButton_Click‘ event handler will respond by displaying a message box. Reda M. Hussien CS341: Visual Programming 21 October 2024 16 / 28 Benefits of Event-Driven Programming in Handling User Input Benefits of Event-Driven Programming in Handling User Input 1 Improved Interactivity: The ability to immediately respond to user actions enhances the interactivity and responsiveness of an application. 2 Decoupling: Event-driven programming separates the logic of what triggers an action (event) from how the action is handled (event handler), leading to a cleaner, more modular design. 3 Scalability: The event model supports multiple handlers for the same event and makes it easy to extend functionality without altering the core logic. Reda M. Hussien CS341: Visual Programming 21 October 2024 17 / 28 Conclusion Event-driven programming is an essential paradigm for building interactive systems. By leveraging event handlers, delegates, and events, it allows applications to respond dynamically to user input, system changes, and external stimuli. Whether it’s a user clicking a button or a network message being received, event-driven programming ensures that applications can react in real-time, providing a flexible, modular, and responsive experience. Reda M. Hussien CS341: Visual Programming 21 October 2024 18 / 28 title 1 2 < html > 3 < head > 4 < title > My Web Page 5 < meta charset = " UTF -8 " > 6 7 < body > 8 < h1 > Welcome to My Web Page 9 This is a paragraph of text. 10 Visit Example 11 12 Reda M. Hussien CS341: Visual Programming 21 October 2024 19 / 28 What Are Prime Numbers? Definition A prime number is a number that has exactly two divisors. Example 2 is prime (two divisors: 1 and 2). 3 is prime (two divisors: 1 and 3). 4 is not prime (three divisors: 1, 2, and 4). Reda M. Hussien CS341: Visual Programming 21 October 2024 20 / 28 title 2 is prime (two divisors: 1 and 2). Reda M. Hussien CS341: Visual Programming 21 October 2024 21 / 28 title 2 is prime (two divisors: 1 and 2). 3 is prime (two divisors: 1 and 3). Reda M. Hussien CS341: Visual Programming 21 October 2024 21 / 28 title 2 is prime (two divisors: 1 and 2). 3 is prime (two divisors: 1 and 3). 4 is not prime (three divisors: 1, 2, and 4). Reda M. Hussien CS341: Visual Programming 21 October 2024 21 / 28 There Is No Largest Prime Number Theorem There is no largest prime number. Proof. 1 Suppose p were the largest prime number. 4 But q + 1 is greater than 1, thus divisible by some prime number not in the first p numbers. Reda M. Hussien CS341: Visual Programming 21 October 2024 22 / 28 There Is No Largest Prime Number Theorem There is no largest prime number. Proof. 1 Suppose p were the largest prime number. 2 Let q be the product of the first p numbers. 4 But q + 1 is greater than 1, thus divisible by some prime number not in the first p numbers. Reda M. Hussien CS341: Visual Programming 21 October 2024 22 / 28 There Is No Largest Prime Number Theorem There is no largest prime number. Proof. 1 Suppose p were the largest prime number. 2 Let q be the product of the first p numbers. 3 Then q + 1 is not divisible by any of them. 4 But q + 1 is greater than 1, thus divisible by some prime number not in the first p numbers. Reda M. Hussien CS341: Visual Programming 21 October 2024 22 / 28 There Is No Largest Prime Number Theorem There is no largest prime number. Proof. 1 Suppose p were the largest prime number. 2 Let q be the product of the first p numbers. 3 Then q + 1 is not divisible by any of them. 4 But q + 1 is greater than 1, thus divisible by some prime number not in the first p numbers. The proof used reductio ad absurdum. Reda M. Hussien CS341: Visual Programming 21 October 2024 22 / 28 What’s Still To Do? Answered Questions How many primes are there? Open Questions Is every even number the sum of two primes? Reda M. Hussien CS341: Visual Programming 21 October 2024 23 / 28 What’s Still To Do? Answered Questions How many primes are there? Open Questions Is every even number the sum of two primes? Reda M. Hussien CS341: Visual Programming 21 October 2024 24 / 28 What’s Still To Do? Answered Questions Open Questions How many primes are there? Is every even number the sum of two primes? Reda M. Hussien CS341: Visual Programming 21 October 2024 25 / 28 [Goldbach, 1742] Christian Goldbach. A problem we should try to solve before the ISPN ’43 deadline, Letter to Leonhard Euler, 1742. Reda M. Hussien CS341: Visual Programming 21 October 2024 26 / 28 In a C# Windows Forms application, an event handler could be set up to handle a button click: 1 public class HelloWorld { 2 public static void main ( String [] args ) { 3 System. out. println ( " Hello , World ! " ) ; 4 } 5 } In this example, ’Button_Click’ is an event handler that executes whenever the specified button is clicked. Reda M. Hussien CS341: Visual Programming 21 October 2024 26 / 28 In a C# Windows Forms application, an event handler could be set up to handle a button click: 1 function y = squareThisNumber ( x ) 2 y = x ^2; 3 end 4 5 result = squareThisNumber (5) ; 6 disp ( result ) ; In this example, ’Button_Click’ is an event handler that executes whenever the specified button is clicked. Reda M. Hussien CS341: Visual Programming 21 October 2024 27 / 28 In a C# Windows Forms application, an event handler could be set up to handle a button click: 1 SELECT name , age FROM users WHERE age > 18 ORDER BY name ASC ; In this example, ’Button_Click’ is an event handler that executes whenever the specified button is clicked. Reda M. Hussien CS341: Visual Programming 21 October 2024 28 / 28 CS341: Visual Programming WEEK-01: Introduction to Visual Programming Reda M. Hussien Assistant Professor of Information Systems FACULTY OF COMPUTERS AND INFORMATION Kafr El-Shiekh University Table of Contents 1 Overview of Visual Programming Concepts 2 Good Graphical User Interface (GUI) Design 3 Introduction to Integrated Development Environments (IDE) 4 First C# Windows Forms Application 5 Common Controls in Windows Forms Reda M. Hussien CS341: Visual Programming 7 October 2024 1 / 20 What is Visual Programming? Visual Programming is a paradigm where users create programs by manipulating graphical elements. It uses drag-and-drop tools, pre-built controls, and visual representations to simplify development. Ideal for users new to programming as it abstracts many lower-level coding complexities. Reda M. Hussien CS341: Visual Programming 7 October 2024 2 / 20 Key Concepts of Visual Programming Graphical User Interface (GUI) Design: Design windows, forms, and controls like buttons, labels, textboxes. Event-Driven Programming: Applications react to user actions (e.g., button clicks, text input) by triggering events. Abstraction and Modularity: Simplifies complex tasks by abstracting code into reusable components. Drag-and-Drop Interface: Quickly build apps by dragging pre-built components onto a canvas. Reda M. Hussien CS341: Visual Programming 7 October 2024 3 / 20 Good Graphical User Interface (GUI) Design Good GUI design is essential for creating interfaces that are: Intuitive: Users can understand the interface without prior training. User-Friendly: Reduces complexity and frustration. Efficient: Helps users accomplish tasks quickly with minimal effort. Reda M. Hussien CS341: Visual Programming 7 October 2024 4 / 20 1. Intuitive GUI Design Explanation: An intuitive interface is one that users can understand naturally, without the need for guidance. Predictability: Users know what will happen when interacting with the interface. Familiarity: Uses common icons, layouts, and design patterns (e.g., save icon, back arrow). Clear Feedback: Immediate feedback for user actions (e.g., button clicks, error messages). Reda M. Hussien CS341: Visual Programming 7 October 2024 5 / 20 2. User-Friendly GUI Design Explanation: A user-friendly interface is one that reduces complexity and confusion, helping users achieve their goals with ease. Simple Navigation: Logical flow of steps, minimal clicks to achieve tasks. Clear Labels and Instructions: Buttons, menus, and instructions are easy to understand. Consistency: Similar actions or elements behave the same way across the interface. Reda M. Hussien CS341: Visual Programming 7 October 2024 6 / 20 3. Efficient GUI Design Explanation: An efficient interface minimizes the time and effort required for users to complete tasks. Optimized Workflows: Common tasks are streamlined and easy to complete. Shortcuts and Automation: Provide keyboard shortcuts and automated suggestions (e.g., auto-complete). Minimal Load Times: Ensure that actions and page transitions happen quickly without delay. Reda M. Hussien CS341: Visual Programming 7 October 2024 7 / 20 What is an IDE? An Integrated Development Environment (IDE) is a software suite that provides tools for development. Visual Studio is one of the most popular IDEs, particularly for Windows-based applications. Supports multiple programming languages including C#, VB.NET, C++, and more. Reda M. Hussien CS341: Visual Programming 7 October 2024 8 / 20 Figure: Visual Studio 2013 Ultimate IDE Reda M. Hussien CS341: Visual Programming 7 October 2024 9 / 20 Key Features of Visual Studio Code Editor: Syntax highlighting, IntelliSense (code suggestions), error detection. Design View (Drag-and-Drop): Visually design application interfaces. Debugger: Step through code, set breakpoints, inspect variable values. Solution Explorer: Organize project files, easy navigation and management. Integrated Compilers: One-click compiling and building. Reda M. Hussien CS341: Visual Programming 7 October 2024 10 / 20 What is Windows Forms? Windows Forms is part of the.NET framework for building rich desktop applications. Provides a platform to create user-friendly interfaces by dragging and dropping controls onto a form. Controls are configured to interact with users and other program components. Reda M. Hussien CS341: Visual Programming 7 October 2024 11 / 20 Steps to Create a C# Windows Forms Application 1 Launch Visual Studio: Create a new project by selecting "Windows Forms App" in C#. 2 Create the Form: A blank form is automatically generated. 3 Add Controls: Drag and drop controls like buttons, labels, textboxes. 4 Write Code: Double-click a control to write code for events like button clicks. 5 Run the Application: Click "Start" to test functionality and appearance. Reda M. Hussien CS341: Visual Programming 7 October 2024 12 / 20 Reda M. Hussien CS341: Visual Programming 7 October 2024 13 / 20 Reda M. Hussien CS341: Visual Programming 7 October 2024 14 / 20 Reda M. Hussien CS341: Visual Programming 7 October 2024 15 / 20 Reda M. Hussien CS341: Visual Programming 7 October 2024 16 / 20 Reda M. Hussien CS341: Visual Programming 7 October 2024 17 / 20 Listing 1: Sample Code public class HelloWorld { public static void main ( String [] args ) { // Prints " Hello , World " in the terminal window. System. out. println ( " Hello , World " ) ; } } Reda M. Hussien CS341: Visual Programming 7 October 2024 18 / 20 Steps to Create a C# Windows Forms Application Reda M. Hussien CS341: Visual Programming 7 October 2024 19 / 20 Common Controls in Windows Forms Button: Triggers actions when clicked. Label: Displays static text. Textbox: Allows user text input. Checkbox: Select or deselect an option. Radio Button: Select one option from a group. Listbox: Displays a list of items, users can select one or more. ComboBox: Dropdown list to select an item. Reda M. Hussien CS341: Visual Programming 7 October 2024 20 / 20

CS341 Visual Programming (OOP in Visual Programming) PDF

Document Details

Tags

Related

Summary

Full Transcript

Upgrade to continue