1. Chapter 2: GUI API
Chapter 2

2. GUI API Software Library Support Event Driven Programming
Front end – for users and
Back end – for us programmers
Via GUI Elements
Chapter 2

3. GUI Application – Front end
Building the front end: GUI Element Layout
BAD NEWS!! HTML5 does not have front end builder! 
Chapter 2

4. GUI Element Elements for interacting with users
E.g., A Window: for containing buttons and mouse
E.g., Buttons for user to click-on
Chapter 2

5. GUI Elements: User Perspective
Virtual IO devices
For users to express their wishes (to our applications)
Relate to past experiences
Visually pleasing: icons that looks like a real button
3D looking, shows depressed (or change color)
Semantically meaningful: A button that behaves like a real button:
clicked and something will happen
Chapter 2

6. GUI Application – Back end
“responding” to the front-end GUI Elements
Chapter 2

7. GUI Elements: Programmer perspective
Unique ID:
To identify the element (in programming code)
Behavior:
Default: e.g., check-box shows a check-mark
Customizable:
e.g., check-box disappears after checked
Semantic State Information:
E.g., check box: checked (true) or not checked (false)
E.g., slider bar: has a current value
We must worry about how to access this information
Chapter 2

8. GUI Elements: Programmer perspective … continue
Abstraction representation:
our program interacts with data type
E.g., CButton, CSliderBar
Event Service (Handler) Registration
How to register for events and services
E.g., when clicked on checked box, call this function
Control Variables (referred to as Model)
Variables in our program representing the front-end GUI elements
Chapter 2

9. Relation to previous lecture:
Previously: Event driven programming
Application State (persistent variables)
Design Workflow (events)
User intuitive actions to change the application state
With Workflows
Design event service routines (to update the application state)
Register event services
Complete solution!
But … how to implement this solution?
GUI API!
Chapter 2

10. GUI API: must support … Front end design: GUI builder Backend:
HTML5 DOES NOT have this!!
Backend:
Control variables (or ng-Model)
Mechanism for linking GUI element to control variables
Event Service (Handler) Registrations
Callback functions
Chapter 2

11. GUI API Example: MFC Front end: Resource Editor
Integrated in Visual Studio IDE
Chapter 2