CSCE 121: Introduction to Program Design and Concepts, Honors Dr. J. Michael Moore Spring 2015 Set 15: GUIs 1

CSCE 121: Set 15: Plotting Functions and Data I/O Alternatives Console (screen and keyboard) – Strong contender for technical/professional work – Command-line interface – Menu-driven interface Graphical User Interface (GUI) – Use a GUI library – Matches “feel” of Windows and Mac applications – Event-driven program design 2

CSCE 121: Set 15: Plotting Functions and Data Common GUI Tasks Titles / text – Labels – User instructions and prompts Fields / dialog boxes – Input – Output Buttons – Let the user initiate actions – Let the user select among a set of alternatives 3

CSCE 121: Set 15: Plotting Functions and Data More Common GUI Tasks Display results – Shapes – Text and numbers More advanced (we won’t do this) – Tracking the mouse – Dragging and dropping – Free-hand drawing 4

CSCE 121: Set 15: Plotting Functions and Data GUI Programming Techniques 1.Object-oriented programming – Organize program parts with common interfaces and common actions 2.Event-driven programming – Connect an event (e.g., a mouse click) with a program action (some code) 5

CSCE 121: Set 15: Plotting Functions and Data Layers of Software 6 Our program Our GUI/Graphics interface library FLTK The operating system Graphics GUI facilities Device driver layer Example of a layer Provides services Uses services

CSCE 121: Set 15: Plotting Functions and Data Demo GUI program to draw a series of lines with – 2 buttons (next point and quit) – 2 input boxes (for entering x and y coordinates) – 1 output box (for displaying more recent point) – 1 menu (for choosing line color from 3 choices) User enters x and y coordinates of next point, then hits “next point” button, and program adds this point to the Open_polyline and redraws the shape User can also use menu to change line color at any time Continue until user hits quit button 7

CSCE 121: Set 15: Plotting Functions and Data Questions We saw buttons, input and output boxes, and menu in the window – How do we define them? We clicked on a button and something happened – How do we program that action? – How do we connect that code to the button? We typed something into an input box – How do we get that value into our code? – How do we convert from string to number? We saw output in the output box – How did it get there? Lines appeared in the window – How do we store the lines? – How do we draw them? 8

CSCE 121: Set 15: Plotting Functions and Data Answers We’ll see how to accomplish these tasks using Stroustrup’s interface files and FLTK. 9

CSCE 121: Set 15: Plotting Functions and Data Widgets, Buttons, and Callbacks A Widget is something you see in the window which has an action associated with it A Button is a Widget that displays as a labeled rectangle on the screen, and when you click on the button, a Callback is triggered A Callback connects the button to some function or functions (the action to be performed) 10

CSCE 121: Set 15: Plotting Functions and Data How it Works 11 Our code Window FLTK Attach Button Describe where the button is Describe what the button looks like Register Button’s callback Call “callback” when Button is pressed

CSCE 121: Set 15: Plotting Functions and Data Callback Callbacks connect our code to the lower-level system Connecting functions to widgets is frequently messy in GUIs The lower-level system does not know about the higher-level C++ constructs – Need to bridge this gap For now, view this as just (ugly) boilerplate 12

CSCE 121: Set 15: Plotting Functions and Data Control Inversion Where is the program? It consists of – Setting up the appearance of the window – Responding to the user clicking on widgets int main() { My_window win(/* … */); return gui_main(); // infinite loop in FLTK } 13

CSCE 121: Set 15: Plotting Functions and Data Control Inversion Traditional program: GUI (note how control is “inverted”) 14 Application Input function User responds call prompt User “action” System Application click callback

CSCE 121: Set 15: Plotting Functions and Data Code Walk-Through See sample-gui.cpp 15

CSCE 121: Set 15: Plotting Functions and Data Acknowledgments Slides are based on those for the textbook: 16