Chapter 16 - Chapter 16 Chapter Graphical User Interfaces...

Info iconThis preview shows page 1. Sign up to view the full content.

View Full Document Right Arrow Icon
This is the end of the preview. Sign up to access the rest of the document.

Unformatted text preview: Chapter 16 Chapter Graphical User Interfaces Bjarne Stroustrup www.stroustrup.com/Programming Overview Overview Perspective I/O alternatives GUI Layers of software GUI example GUI code callbacks Stroustrup/Programming 2 I/O alternatives I/O Use console input and output A strong contender for technical/professional work Command line interface Menu driven interface Graphic User Interface Use a GUI Library To match the “feel” of windows/Mac applications When you need drag and drop, WYSIWYG Event driven program design A web browser – this is a GUI library application HTML / a scripting language For remote access (and more) Stroustrup/Programming 3 Common GUI tasks Common Titles / Text Fields / Dialog boxes Names Names Prompts Prompts User instructions Input Output Buttons Let the user initiate actions Let the user select among a set of alternatives e.g. yes/no, blue/green/red, etc. Stroustrup/Programming 4 Common GUI tasks (cont.) Common Display results Shapes Text and numbers Make a window “look right” Style and color Note: our windows look different (and appropriate) on Note: different systems different More advanced More Tracking the mouse Tracking Dragging and dropping Free-hand drawing Stroustrup/Programming 5 GUI GUI From a programming point of view GUI is From based on two techniques based Object-oriented programming For organizing program parts with common interfaces For and common actions and Events For connecting an event (like a mouse click) with a For program action program Stroustrup/Programming 6 Layers of software Layers When we build software, we usually build upon existing When code code Example of a layer • Provides services Our program • Uses services Our GUI/Graphics interface library FLTK The operating system Graphics GUI facilities Device driver layer Stroustrup/Programming 7 GUI example GUI Window with two Buttons, Two In_boxes, and an Out_box two Buttons, In_boxes, Out_box Stroustrup/Programming 8 GUI example GUI Enter a point in the In_boxes Enter In_box Stroustrup/Programming 9 GUI example GUI When you hit next point that point becomes the current When next (x,y) and is displayed in the Out_box Out_box Stroustrup/Programming 10 GUI example GUI Add another point an you have a line Stroustrup/Programming 11 GUI example GUI Three points give two lines Obviously, we are building a polyline Stroustrup/Programming 12 GUI example GUI And so on, until you hit Quit. And Stroustrup/Programming 13 13 So what? And How? So We saw buttons, input boxes and an outbox in a window Click on a button and something happens How do we get that value into our code? How do we convert from a string to numbers? We saw output in the output box How do we program that action? How do we connect our code to the button? You type something into a input box How do we define a window? How do we define buttons? How do we define input and output boxes? How do we get the values there? Lines appeared in our window How do we store the lines? How do we draw them? Stroustrup/Programming 14 So what? And How? (cont.) So We saw output in the output box How do we get the values there? Lines appeared in our window How do we store the lines? How do we draw them? Stroustrup/Programming 15 Mapping Mapping We map our ideas onto the FTLK version of We the conventional Graphics/GUI ideas Stroustrup/Programming 16 16 Define the struct ‘Lines_Window’ Define struct Lines_window : Window // Lines_window inherits from Window Lines_window struct { Lines_window(Point xy, int w, int h, const string& title); // declare Lines_window(Point constructor constructor Open_polyline lines; private: Button next_button; Button quit_button; In_box next_x; In_box next_y; Out_box xy_out; void next(); void void quit(); void // declare some buttons – type Button // declare // declare some i/o boxes // declare // what to do when next_button is pushed what // what to do when quit_botton is pushed what static void cb_next(Address, Address window); // callback for next_button callback static static void cb_quit(Address, Address window); // callback for quit_button callback static }; }; Stroustrup/Programming 17 17 GUI example GUI Window with two Buttons, Two In_boxes, and an Out_box two Buttons, In_boxes, Out_box Stroustrup/Programming 18 The Window constructor The Lines_window::Lines_window(Point xy, int w, int h, const string& title) Lines_window::Lines_window(Point :Window(xy,w,h,title), :Window(xy,w,h,title), // construct/initialize the parts of the window: construct/initialize // location size name action location next_button(Point(x_max()-150,0), 70, 20, "Next point", cb_next), quit_button(Point(x_max()-70,0), 70, 20, "Quit", cb_quit), // quit button quit_button(Point(x_max()-70,0), quit next_x(Point(x_max()-310,0), 50, 20, "next x:"), // io boxes next_x(Point(x_max()-310,0), io next_y(Point(x_max()-210,0), 50, 20, "next y:"), xy_out(Point(100,0), 100, 20, "current (x,y):") { attach(next_button); // attach the parts to the window // attach attach(quit_button); attach(next_x); attach(next_y); attach(xy_out); attach(lines); // attach the open_polylines to the window // attach } Stroustrup/Programming 19 Widgets, Buttons, and Callbacks Widgets, A Widget is something you see in the window which Widget has an action associated with it has A Button is a Widget that displays as a labeled Button rectangle on the screen, and when you click on the button, a Callback is triggered button, A Callback connects the button to some function or Callback functions (the action to be performed) functions Stroustrup/Programming 20 Widgets, Buttons, and Callbacks // A widget is something you see in the window widget // which has an action associated with it which // A Button is a Widget that displays as a labeled rectangle on the screen; Button // when you click on the button, a Callback is triggered // A Callback connects the button to some function struct Button : Widget { Button(Point xy, int w, int h, const string& s, Callback cb) :Widget(xy,w,h,s,cb) { } }; Stroustrup/Programming Stroustrup/Programming 21 21 How it works How Window Describe where the button is Describe what the button looks like Register Button’s callback Attach Button Our code FLTK Call “callback” when Button is pressed Stroustrup/Programming 22 GUI example GUI Add another point an you have a line Stroustrup/Programming 23 Widget Widget A basic concept in Windows and X windows systems Basically anything you can see on the screen and do something Basically with is a widget (also called a "control") with struct Widget { Widget(Point xy, int w, int h, const string& s, Callback cb) :loc(xy), width(w), height(h), label(s), do_it(cb) {} // … connection to FLTK … // connection }; Stroustrup/Programming 24 Button Button A Button is a Widget that displays as a labeled rectangle on the screen; displays rectangle when you click on it, a Callback is triggered struct Button : Widget { Button(Point xy, int w, int h, const string& s, Callback cb) :Widget(xy,w,h,s,cb) { } }; Stroustrup/Programming 25 25 Callback Callback Callbacks are part of our interface to “The system” Connecting functions to widgets is messy in most GUIs It need not be, but “the system” does not “know about” C++ the the style/mess comes from systems designed in/for C/assembler Major systems always use many languages, this is one example of how to cross a Major language barrier language A callback function maps from system conventions back to C++ void Lines_window::cb_quit(Address, Address pw) // Call Lines_window::quit() for the window located at address pw // Call { reference_to<Lines_window>(pw).quit(); // now call our function reference_to<Lines_window>(pw).quit(); // now } Map an address into a reference to the type of object residing at that address – to be explained the following chapters Stroustrup/Programming 26 26 Our “action” code Our // The action itself is simple enough to write // The void Lines_window::quit() { // here we can do just about anything with the Lines_window here hide(); // peculiar FLTK idiom for “get rid of this window” // peculiar } Stroustrup/Programming 27 The next function The // our action for a click (“push”) on the next button // our void Lines_window::next() { int x = next_x.get_int(); int y = next_y.get_int(); lines.add(Point(x,y)); // update current position readout: // update stringstream ss; ss << '(' << x << ',' << y << ')'; xy_out.put(ss.str()); redraw(); // now redraw the screen redraw(); now } Stroustrup/Programming 28 28 In_box In_box // An In_box is a widget into which you can type characters // An // It’s “action” is to receive characters struct In_box : Widget { In_box(Point xy, int w, int h, const string& s) :Widget(xy,w,h,s,0) { } int get_int(); string get_string(); }; int In_box::get_int() { // get a reference to the FLTK FL_Input widget: // get Fl_Input& pi = reference_to<Fl_Input>(pw); Fl_Input& // use it: use return atoi(pi.value()); // get the value and convert return get // it from characters (alpha) to int it lpha) to } Stroustrup/Programming 29 Summary Summary We have seen Action on buttons Interactive I/O Text input Text Text output Graphical output Missing Menu (See Section 16.7) Window and Widget (see Appendix E) Anything to do with tracking the mouse Dragging Hovering Free-hand drawing What we haven’t shown, you can pick up if you need it Stroustrup/Programming 30 Next lecture Next The next three lectures will show how the The standard vector is implemented using basic low-level language facilities. low-level This is where we really get down to the This hardware and work our way back up to a more comfortable and productive level of programming. programming. Stroustrup/Programming 31 ...
View Full Document

Ask a homework question - tutors are online