Chapter 16 Graphical User Interfaces - ecology lab

Chapter 16 Graphical User Interfaces - ecology lab

Chapter 16 Graphical User Interfaces John Keysers Modifications of Slides by Bjarne Stroustrup www.stroustrup.com/Programming Overview Perspective I/O alternatives GUI Layers of software GUI example GUI code

callbacks Stroustrup/Programming 2 I/O alternatives 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 Titles / Text Names Prompts User instructions Fields / Dialog boxes 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.) Display results Shapes Text and numbers Make a window look right Style and color Note: our windows look different (and appropriate) on different systems

More advanced Tracking the mouse Dragging and dropping Free-hand drawing Stroustrup/Programming 5 GUI From a programming point of view GUI is based on two techniques Object-oriented programming For organizing program parts with common interfaces and common actions

Events For connecting an event (like a mouse click) with a program action Stroustrup/Programming 6 Layers of software When we build software, we usually build upon existing 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 Window with two Buttons, two In_boxes, and an Out_box

Stroustrup/Programming 8 GUI example Enter a point in the In_boxes Stroustrup/Programming 9 GUI example When you hit Next point that point becomes the current

(x,y) and is displayed in the Out_box Stroustrup/Programming 10 GUI example Add another point and you have a line Stroustrup/Programming 11 GUI example Three points give two lines

Obviously, we are building a polyline Stroustrup/Programming 12 GUI example And so on, until you hit Quit. Stroustrup/Programming 13 So what? And How? We saw buttons, input boxes and an outbox in a window

How do we define a window? How do we define buttons? How do we define input and output boxes? Click on a button and something happens 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 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 get the values there?

Lines appeared in our window How do we store the lines? How do we draw them? Stroustrup/Programming 14 How it works Window Describe where the button is Describe what the button looks like Register Buttons callback Attach Button

Our code FLTK Call callback when Button is pressed Stroustrup/Programming 15 How it works A bit more detail Window Describe where the button is

Describe what the button looks like Register Buttons callback Attach Button Our Code FLTK Window Setup Code Callback Handling Code Call callback when Button is pressed Stroustrup/Programming

16 Initial Setup/Programming Program Sets up Window/Layouts Program sets up Callback Functions System Runs: Startup WINDOW Main Program Executes:

Callbacks are registered Window is Created Program Sets up Window/Layouts Program sets up Callback Functions System Runs Begin Loop WINDOW Main Program: Infinite Loop

Window/Layouts Callback Functions System Runs User Interacts WINDOW Main Program: Infinite Loop Window/Layouts Callback Functions

User Interacts With Widget in Window System Runs Callback is Made WINDOW Main Program: Main Program Calls Appropriate Callback Window/Layouts

Callback Functions User Interacts With Widget in Window System Runs Callback Executes WINDOW Main Program: Main Program Calls Appropriate Callback

Callback Function Executes Window/Layouts Callback Functions System Runs Callback Finishes WINDOW Main Program: Main Program Calls Appropriate Callback Callback Function

Finishes Window/Layouts Callback Functions System Runs See Results WINDOW Main Program: Main Program Updates Window

Window/Layouts Callback Functions System Runs Return to Loop WINDOW Main Program: Infinite Loop Window/Layouts Callback Functions Mapping

We map our ideas onto the FTLK version of the conventional Graphics/GUI ideas Stroustrup/Programming 26 Define class Lines_window struct Lines_window : Window // Lines_window inherits from Window { Lines_window(Point xy, int w, int h, const string& title); // declare constructor

Open_polyline lines; private: Button next_button; // declare some buttons type Button Button quit_button; In_box next_x; // declare some i/o boxes In_box next_y; Out_box xy_out; void next(); void quit(); // what to do when next_button is pushed // what to do when quit_botton is pushed

static void cb_next(Address, Address window); // callback for next_button static void cb_quit(Address, Address window); // callback for quit_button }; Stroustrup/Programming 27 GUI example Window with two Buttons, two In_boxes, and an Out_box Stroustrup/Programming 28

The Lines_window constructor Lines_window::Lines_window(Point xy, int w, int h, const string& title) :Window(xy,w,h,title), // construct/initialize the parts of the window: // location size name action 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 next_x(Point(x_max()-310,0), 50, 20, "next x:"), // io boxes 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(quit_button); attach(next_x); attach(next_y); attach(xy_out); attach(lines); // attach the open_polylines to the window } Stroustrup/Programming 29

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; // 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 30

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) Stroustrup/Programming 31 GUI example

Add another point and you have a line Stroustrup/Programming 32 Widget A basic concept in Windows and X windows systems Basically anything you can see on the screen and do something with is a widget (also called a control by Microsoft) 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 }; Stroustrup/Programming 33 Button A Button is a Widget that displays as a labeled rectangle on the screen; 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 34 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 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 language barrier

A callback function maps from system conventions back to C++ Stroustrup/Programming 35 Our action code // The action itself is simple enough to write void Lines_window::quit() { // here we can do just about anything with the Lines_window hide(); // peculiar FLTK idiom for get rid of this window }

Stroustrup/Programming 37 The next point function // our action for a click (push) on the next point button 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: stringstream ss; ss << '(' << x << ',' << y << ')'; xy_out.put(ss.str());

redraw(); // now redraw the screen } Stroustrup/Programming 38 In_box // An In_box is a widget into which you can type characters // Its 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: Fl_Input& pi = reference_to(pw); // use it: return atoi(pi.value()); // get the value and convert // it from characters (alpha) to int } Stroustrup/Programming 39

Control Inversion But where is the program? Our code just responds to the user clicking on our widgets No loops? No if-then-else? The program is simply int main () { Lines_window win(Point(100,100),600,400,lines); return gui_main(); // an infinite loop } Stroustrup/Programming 40

Control Inversion Application call Input function prompt User responds Application callback System click User action Stroustrup/Programming

41 Summary We have seen Action on buttons Interactive I/O Text input 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 havent shown, you can pick up if you need it Stroustrup/Programming 42 Next lecture

The next three lectures will show how the standard vector is implemented using basic low-level language facilities. This is where we really get down to the hardware and work our way back up to a more comfortable and productive level of programming. Stroustrup/Programming 43

Recently Viewed Presentations

  • Letter Writing Lesson 1 - Weebly

    Letter Writing Lesson 1 - Weebly

    Respond to the senders questions by writing a letter. Check all 4 parts to a letter are there including your questions and information. Early Finishers: Draw and colour a picture that goes with your letter.
  • The Mole - Okaloosa County School District

    The Mole - Okaloosa County School District

    Molar Mass is the mass in grams of one mole of substance. One mole of substance is identified by a single element or a single chemical formula for that compound. Na - one mole of sodium. 2Na or Na. 2...
  • ภาพนิ่ง 1 - WordPress.com

    ภาพนิ่ง 1 - WordPress.com

    Today we're going to talk about Integrated Resource Planning or IRP, which is a tool that can help with this challenge. These objectives may change over time as the country reaches different stages of development.
  • Psychology

    Psychology

    Learning Objectives 2 of 2. 14.10 Compare and contrast behavioral, social cognitive, and biological explanations for depression and other disorders of mood. 14.11 Identify the symptoms and risk factors associated with anorexia nervosa, bulimia nervosa, and binge-eating disorder.
  • Prepositions - Kyrene School District

    Prepositions - Kyrene School District

    Prepositional Phrase = preposition (P) + object of preposition (OP). The . preposition. is the . first word . in the phrase and the . object of the preposition. is the . last word . in the phrase. Sometimes there...
  • Systems Analysis &amp; Design, Tenth Edition

    Systems Analysis & Design, Tenth Edition

    Review each primary use case to determine the possible variations of flow through the use case. The context-level data flow diagram could act as a starting point for creating a use case. When diagramming a use case, start by asking...
  • The Policy Stages Framework &amp; Use at DOH

    The Policy Stages Framework & Use at DOH

    Windows don't stay open long. Policy entrepreneurs can push their solutions when windows of opportunity open. Make the critical couplings when policy windows open. Political connections and negotiating skills add to ability to move policy forward
  • Capsulotomy - Phaco Training

    Capsulotomy - Phaco Training

    Cystotome or double bent 26 G needle used. ... Polishing of anterior capsule easier. In PC rent - anterior capsule utilised for IOL support ... Shape and size of capsulotomy must take into account the phacoemulsification technique planned and the...