Graphical User Interface Chapter 6: Event-Driven Programming
Transcript of Graphical User Interface Chapter 6: Event-Driven Programming
![Page 1: Graphical User Interface Chapter 6: Event-Driven Programming](https://reader030.fdocuments.us/reader030/viewer/2022020700/61f566444a68a20ca54ff644/html5/thumbnails/1.jpg)
Graphical User Interface
Chapter 6: Event-Driven
Programming
Editor
Dr Taha Hussein RassemFaculty of Computer Systems and Software
Engineering [email protected]
![Page 2: Graphical User Interface Chapter 6: Event-Driven Programming](https://reader030.fdocuments.us/reader030/viewer/2022020700/61f566444a68a20ca54ff644/html5/thumbnails/2.jpg)
Chapter Description
• Aims
To understand the concept of sequential Programming
To understand the concept of event-Driven Programming
To differentiate between the sequential Programming and event-Driven Programming.
• Expected Outcomes
Able to understand the concept of sequential Programming and event-Driven Programming.
Able to understand the practical aspect in design process to create a better and effective used of product or service.
• References
Wilbert O. Galitz, The Essential Guide to User Interface Design: An Introduction to GUI Design Principles and Techniques, John Wiley & Sons Inc, 2007.
Jenifer Tidwell, Designing Interfaces, O'Reilly, 2011
Jeff Johnson, Designing with the Mind in Mind: Simple Guide to Understanding User Interface Design Rules , Morgan Kaufman Publisher, 2010
![Page 3: Graphical User Interface Chapter 6: Event-Driven Programming](https://reader030.fdocuments.us/reader030/viewer/2022020700/61f566444a68a20ca54ff644/html5/thumbnails/3.jpg)
Chapter Content
Dialog box
Sequential Programming
Events
Event-Driven Programming
![Page 4: Graphical User Interface Chapter 6: Event-Driven Programming](https://reader030.fdocuments.us/reader030/viewer/2022020700/61f566444a68a20ca54ff644/html5/thumbnails/4.jpg)
Dialog box
![Page 5: Graphical User Interface Chapter 6: Event-Driven Programming](https://reader030.fdocuments.us/reader030/viewer/2022020700/61f566444a68a20ca54ff644/html5/thumbnails/5.jpg)
![Page 6: Graphical User Interface Chapter 6: Event-Driven Programming](https://reader030.fdocuments.us/reader030/viewer/2022020700/61f566444a68a20ca54ff644/html5/thumbnails/6.jpg)
Graphical User Interface
6Stroustrup/Programming
![Page 7: Graphical User Interface Chapter 6: Event-Driven Programming](https://reader030.fdocuments.us/reader030/viewer/2022020700/61f566444a68a20ca54ff644/html5/thumbnails/7.jpg)
GUI example
What inside the window ???? 2 Buttons, 2 In boxes, an Out_box.
7Stroustrup/Programming
![Page 8: Graphical User Interface Chapter 6: Event-Driven Programming](https://reader030.fdocuments.us/reader030/viewer/2022020700/61f566444a68a20ca54ff644/html5/thumbnails/8.jpg)
GUI example
Enter a point in the In_boxes.
8Stroustrup/Programming
![Page 9: Graphical User Interface Chapter 6: Event-Driven Programming](https://reader030.fdocuments.us/reader030/viewer/2022020700/61f566444a68a20ca54ff644/html5/thumbnails/9.jpg)
GUI example
hit next point -----> the current (x,y) will be displayed in the Out_box .
9Stroustrup/Programming
![Page 10: Graphical User Interface Chapter 6: Event-Driven Programming](https://reader030.fdocuments.us/reader030/viewer/2022020700/61f566444a68a20ca54ff644/html5/thumbnails/10.jpg)
GUI example
Adding another point -------> a line .
10Stroustrup/Programming
![Page 11: Graphical User Interface Chapter 6: Event-Driven Programming](https://reader030.fdocuments.us/reader030/viewer/2022020700/61f566444a68a20ca54ff644/html5/thumbnails/11.jpg)
GUI example
Three points give two lines Obviously, we are building a polyline .
11Stroustrup/Programming
![Page 12: Graphical User Interface Chapter 6: Event-Driven Programming](https://reader030.fdocuments.us/reader030/viewer/2022020700/61f566444a68a20ca54ff644/html5/thumbnails/12.jpg)
GUI example
And so on, until you hit Quit .
12Stroustrup/Programming
![Page 13: Graphical User Interface Chapter 6: Event-Driven Programming](https://reader030.fdocuments.us/reader030/viewer/2022020700/61f566444a68a20ca54ff644/html5/thumbnails/13.jpg)
GUI Concepts
![Page 14: Graphical User Interface Chapter 6: Event-Driven Programming](https://reader030.fdocuments.us/reader030/viewer/2022020700/61f566444a68a20ca54ff644/html5/thumbnails/14.jpg)
Anatomy of a Window
Title bar
Menu
Toolbar
Client area
Status bar
![Page 15: Graphical User Interface Chapter 6: Event-Driven Programming](https://reader030.fdocuments.us/reader030/viewer/2022020700/61f566444a68a20ca54ff644/html5/thumbnails/15.jpg)
Event driven programming
![Page 16: Graphical User Interface Chapter 6: Event-Driven Programming](https://reader030.fdocuments.us/reader030/viewer/2022020700/61f566444a68a20ca54ff644/html5/thumbnails/16.jpg)
Event
![Page 17: Graphical User Interface Chapter 6: Event-Driven Programming](https://reader030.fdocuments.us/reader030/viewer/2022020700/61f566444a68a20ca54ff644/html5/thumbnails/17.jpg)
![Page 18: Graphical User Interface Chapter 6: Event-Driven Programming](https://reader030.fdocuments.us/reader030/viewer/2022020700/61f566444a68a20ca54ff644/html5/thumbnails/18.jpg)
![Page 19: Graphical User Interface Chapter 6: Event-Driven Programming](https://reader030.fdocuments.us/reader030/viewer/2022020700/61f566444a68a20ca54ff644/html5/thumbnails/19.jpg)
![Page 20: Graphical User Interface Chapter 6: Event-Driven Programming](https://reader030.fdocuments.us/reader030/viewer/2022020700/61f566444a68a20ca54ff644/html5/thumbnails/20.jpg)
![Page 21: Graphical User Interface Chapter 6: Event-Driven Programming](https://reader030.fdocuments.us/reader030/viewer/2022020700/61f566444a68a20ca54ff644/html5/thumbnails/21.jpg)
![Page 22: Graphical User Interface Chapter 6: Event-Driven Programming](https://reader030.fdocuments.us/reader030/viewer/2022020700/61f566444a68a20ca54ff644/html5/thumbnails/22.jpg)
Sequential programming
![Page 23: Graphical User Interface Chapter 6: Event-Driven Programming](https://reader030.fdocuments.us/reader030/viewer/2022020700/61f566444a68a20ca54ff644/html5/thumbnails/23.jpg)
EVENT-DRIVEN PROGRAMMING
![Page 24: Graphical User Interface Chapter 6: Event-Driven Programming](https://reader030.fdocuments.us/reader030/viewer/2022020700/61f566444a68a20ca54ff644/html5/thumbnails/24.jpg)
The event driven paradigm
![Page 25: Graphical User Interface Chapter 6: Event-Driven Programming](https://reader030.fdocuments.us/reader030/viewer/2022020700/61f566444a68a20ca54ff644/html5/thumbnails/25.jpg)
Further readings:
1. http://www.hed.swin.edu.au/design/tutorials/other/design/
2. http://www.ciplex.com/article.php?article_id=102
3. http://webdesign.about.com/od/webdesignbasics/a/aa052807.htm
4. http://www.allgraphicdesign.com/whatisgraphicdesign.html
5. http://www.digital-web.com/articles/principles_of_design/
6. http://webdesign.about.com/od/webdesignbasics/Basics_of_Web_Design.htm
7. **http://www.smashingmagazine.com/index.php/2008/01/31/10-principles-of-effective-web-design/