PPT - Department of Software and Information Systems

©Zachary Wartell
-

11/3/2013

1

2D Graphical User Interface
APIs


Revision 1.3


Copyright 2006, Dr. Zachary Wartell, UNCC,

All Rights Reserved

©Zachary Wartell
-

11/3/2013

2

2D GUI APIs

•
API/Library for device input and graphical output

–
WIMP (Windows,Icons,Menu,Pointer)


•
Examples:

–
MS Windows: Win32 GUI, MFC, .Net C#

–
Java
Swing

&
AWT


–
MacOS

–
Unix: X11, XToolkit, Motif, ….

–
Cross platform

•
QT (TrollTech)

•
wxWindows

•
FLTK

•
GLUT

(miniature GUI API)




….dozens and dozens more….




©Zachary Wartell
-

11/3/2013

3

2D GUI API: A Software Component

Eye

Brain

Display

Input Device

Body

CG System Software

OS

CG 3D API

CG GUI (2D)
API

Application

Software

General

Computing Hardware


Graphics Computing


Hardware

Image Synthesis

©Zachary Wartell
-

11/3/2013

4

Design Parameters in 2D GUIs

•
What is variety and sophistication of widgets?

•
How are widgets composed together?

•
What input mode modes are supported?

•
callbacks

–
how are they implemented?

–
how are they registered?

–
what are there granularities?

•
How do events propagate through widget hierarchy?

•
What data structures are used to represent events?

•
How do you handle background processing?

•
How do you do your own drawing to a window?

–
What about animation?







©Zachary Wartell
-

11/3/2013

5

Widget hierarchy

•
widget
–

root super class, rectangular region in
display, has changeable appearance, has
methods for drawing itself and reacting to events

–
java.awt.component
,
FLTK Widget
, X11 Widget, .Net
Form, etc.

•
class hierarchy
–

labels, buttons, dials, sliders,
menu, composition widget, canvas widget

–
FLTK Widget Hierarchy

©Zachary Wartell
-

11/3/2013

6

FLTK Examples (from FLTK distribution package)

•
radio
–

buttons including “radio” buttons

•
valuators
–

map GUI input to real number

•
tile
–

subclass of Fl_Group

•
scroll
-

subclass of Fl_Group

•
..etc..


(Go play with FLTK examples!)

©Zachary Wartell
-

11/3/2013

7

Windows/Widgets

•
widgets composed in hierarchy (tree) of
parent/child relationship using composition or
grouping widget classes

Main Window

MenuBar

DrawArea

ToolGroup

SelectButton

PencilButton

FillButton

Canvas

©Zachary Wartell
-

11/3/2013

8

Input Modes

•
request mode (non
-
GUI)
–

program requests input and waits until it
is received

–
C language ‘scanf’ from standard input


•
sample mode

(GUI)

–

program tests for input. If input’s available
perform some action, but don’t wait for it.




if (IsKeyPressed(‘P’)) { computePI(); }


.....



position = GetMousePosition();


drawPixel(position);


•
event mode

(GUI)

–

program asks GUI Library to call an application
function when a particular input event occurs.


GUI Library asynchronously collects input events in a queue and
calls application’s function when (1) target event occurs and (2) GUI
Library is not performing it’s own internal computation.

©Zachary Wartell
-

11/3/2013

9

Callbacks and Event Handling

•
event handling

–

programming mechanism used by
application programmer to tell a library what to do when
some event occurs

•
callback function

–

a function written by application
programmer that library calls in response to some event.



Common steps:


1) register callback function, explicit registeration:

•
arguments:

1) callback function address

2) specification of under what circumstances (an event) library
should call function

3) arbitrary data to pass to function when library calls it

•
some

OOP API’s don’t require explicit registration

2) call library’s main loop

3)

(some time later)
library calls callback, callback
executes, callback returns to internal library code



©Zachary Wartell
-

11/3/2013

10

void MyApp::handle_error


(


int error_num,


ErrorCallbackData data


)


{ …. }

void MyApp::handle_net_msg


(


Message m,


MsgCallbackData data


)


{ …. }

Callbacks and Event Handling

void main (…) {


…


Library::register_callback (


MyApp::handle_error, ERROR_EVENT,


&myErrorCallbackData);


Library::register_callback (


MyApp::handle_network_message,


NETWORK_MESSAGE_EVENT,


NULL);


…


Library::run_application();


}

Library Code (internal, i.e. hidden from app. programmer)

loop {


/* do all the stuff this library does …. */


…..


event=detect_event()


call_application_functions_triggered_by_event(event);

}

Application Code

©Zachary Wartell
-

11/3/2013

11

Callback API Characteristics

•
Different GUI libraries’ callback handling differ in
these characteristics:

–
callback registration approach

–

may use
different approaches for different types of
events

–
callback event granularity

–

how specific an
event is associate with a given callback?

–
callback object granularity

–

for GUI API: Is
callback registered for specific window or for
entire application?


©Zachary Wartell
-

11/3/2013

12

Callback Registration Approaches

1) call library’s register function (previous slide)

2) initialize array variable whose elements map
events to callback functions

3) OOP + constructor automated:

–
constructor automatically registers certain class
methods as callbacks

–
developer’s sub
-
classes implement callback code




4) OOP + explicit registration


-

java.util.EventListener,
java.awt.util.ActionListener



class Window


{


virtual whenMouseMove (int x, int y);


virtual whenKeyPress (KeyCode c);


virtual whenMouseButtonPress (Button b);


}

©Zachary Wartell
-

11/3/2013

13

GUI Event Types

•
input device: key press, key release, mouse
motion

•
window: resize, move, expose (“needs redraw”),
mouse enter, mouse leave

•
widget class specific: value change, menu
select, scroll up

©Zachary Wartell
-

11/3/2013

14

Event Propagation

•
If child widget doesn’t handle event, should the
event be passed up to parent widget?

Main Window

MenuBar

DrawArea

ToolGroup

SelectButton

PencilButton

FillButton

Canvas

©Zachary Wartell
-

11/3/2013

15

Generic GUI Library Code

void main (…) {


GUI::initialize();


win = MyApp::create_main_window();


can = MyApp::create_canvas();



GUI::when(win,KEY_PRESS,’Q’,MyApp::quit);


GUI::when(can,MOUSE_MOVE,MyApp::moveBrush);


GUI::when(can,WINDOW_EXPOSED,


MyApp::redrawPainting);




GUI::run_application();


}

GUI Library (Internal)

loop {


event=gather_input_device_events()


redraw_all_windows_menus_etc(event);


call_application_functions_triggered_by_event(event);


call_application_custom_redraw_functions();


}

Application Code

callbacks

void MyApp::quit (…)


{ …. }

void MyApp::moveBrush(…)


{ …. }


void MyApp::redrawPainting


{


/* redraw painting area */


}

©Zachary Wartell
-

11/3/2013

16

Default: widget draw callback not called continuously

•
GUI library shouldn’t unnecessarily call every widget’s
draw function, especially for built
-
in classes!


•
library calls widget draw callback ‘when needed’ only

–
window open event

–
expose event


•
if developer is drawing his own graphics into a widget,
W, then GUI library must be informed to treat W specially

–
developer can control when widget is redrawn

–
animation requires mechanism to
continuously

trigger

W’s draw callback

©Zachary Wartell
-

11/3/2013

17

GLUT Event Handling

•
callback details
–

C function pointer, explicit registration, medium event
granularity, coarse object granularity (only one window!)


void keyboard (GLint key, GLint mx, GLint my)


{…
respond to keyboard input…
}

void mouse (GLint button, GLint action, GLint mx, GLint my)



{…
respond to mouse input
… }

void display (void)



{
... draw my OpenGL stuff….

}


void main (......)


{


…


glutMouseFunc(mouse);


glutKeyboardFunc(keyboard);


glutDisplayFunc(display);


…


}


•

calling
glutPostRedisplay()
triggers GLUT internal loop to call redraw
function during next loop iteration




©Zachary Wartell
-

11/3/2013

18

FLTK Event Handling: Uses 3 Approaches

1)
mouse, keyboard,
most

window events
: use a
C++ virtual member function callback approach:


Fl_Widget::handle(int event)


2)
widget specific events
: use explicit callback
registration

–
one callback per FLTK widget

void Fl_Widget::callback(Fl_Callback*,void*=0)


–
triggering event determined by
Fl_When

void Fl_Widget::when(Fl_When)






©Zachary Wartell
-

11/3/2013

19

3)
window redraw event
: use a C++ virtual member
function callback approach:


Fl_Widget::draw()


–
for built
-
in widgets FLTK library draws widget

–
if application needs to draw arbitrary stuff (2D or
3D OpenGL), create subclass and override






Fl_Widget::draw()

–
call
Fl_Widget::redraw()
to trigger FLTK to call
::draw()
during next main loop iteration

FLTK Event Handling: Uses 3 Approaches

©Zachary Wartell
-

11/3/2013

20

Java AWT Event Handling
-

EventListener

•
java.awt.event.EventListener interface

–
input events and most window events

–
explicit registration, medium granularity, per widget


•
related callbacks are grouped into java interfaces
derived from EventListener.


interface
GLEventListener {


void

init (GLDrawable);



void

display (GLDrawable);


void

reshape(GLDrawable drawable,


int

x,
int

y,
int

width,
int

height);


}

•
AWT component explicitly registers listener:


glCanvas.addGLEventListener(new

MyGLEventListener());




Java AWT Event Handling
-

ActionListener

•
java.awt.event.ActionListener

–
super
-
interface EventListener

–
widget class specific events

–
explicit registration, medium granularity, per widget

•
Basics

1) Declare event handler


public class MyClass implements ActionListener {…

2) Register


someComponent.addActionListener(instanceOfMyClass);


3) Write callback code



public void actionPerformed(ActionEvent e) {



...//code that reacts to the action...


}

©Zachary Wartell
-

11/3/2013

21

Java AWT triggering redraw

•
java.awt.component
-

void
repaint
()

–
general


•
javax.media.opengl.GLDrawable
-

void
display
()

–
specific to OpenGL, but avoid for this course

©Zachary Wartell
-

11/3/2013

22

©Zachary Wartell
-

11/3/2013

23

Event Data Structure
–

variations I and II

•
What is data structure of API’s “Event”?

I) C struct & union: (X11,XT,Motif)


struct EventBase




{




EventType type;


}


struct MouseMotion


{


EventType type;




int x, y;



…etc…


}



union Event


{





EventType type;





struct MouseMotion mouseMouse;





…list all types of events…





}

II)
C++ struct: could reuse C struct & union or use class
hierarchy (wxWidgets, MFC (?))

©Zachary Wartell
-

11/3/2013

24

Event Data Structure
–

variation III

III) int or enum: (Win32 GUI, FLTK)

•
int/enum only specifies type of event

•
data related to specific type of event must be queried using
separate functions

©Zachary Wartell
-

11/3/2013

25

Background/Idle Processing
–

Single
-
thread

•
GUI library’s main loop is hidden from
developer; GUI library calls application’s
callbacks in response to events.


•
Single
-
thread background processing :

–
library supports an “idle callback”

–
GUI library will call the idle callback function
when library isn’t busy doing its other tasks


FLTK:


void Fl::add_idle(void (*cb)(void*),void*=0);

GLUT:


void glutIdleFunc(void (*func)(void));




Background/Idle Processing
–

Multi
-
threaded

•
GUI application automatically has two threads:

–
internal GUI thread
-

event processing and
redrawing

•
executes library’s main loop (internal event processing &
redrawing, application callbacks, application draw functions)

•
GUI libraries often support idle callback for this thread too…


–
standard application thread

•
cannot draw here!

•
may contain developer code for application logic, but…

–
then thread synchronization is required for objects shared
accessed by both threads!

©Zachary Wartell
-

11/3/2013

26

Multi
-
threaded
–

Idle Callback

•
idle callback executes in event thread!


Java
Example
:


SwingUtilities.invokeLater(new Runnable()


{ public void run() { myCallback();


}}));


but to repeat callback you must re
-
register the callback


public void myCallback(){


//… do stuff…


// re
-
register




SwingUtilities.invokeLater(new Runnable()


{ public void run() { myCallback();}}));

}

©Zachary Wartell
-

11/3/2013

27

©Zachary Wartell
-

11/3/2013

28

Example: Animation using idle processing

void main (
…
) {


GUI::initialize();


…. initialize application objects/variables, event callbacks, and GUI widgets ….


GUI::idle_callback(MyApp::idle_function);


GUI::run_application();


}

GUI Library (Internal)

loop {
…. see slide 14 …
}

Application Code

void MyApp::idle_function (
…
) {


…update application obj.’s/var.’s based on time past since last calling this function


GUI::request_widget_redraw (myDrawingWidget);


}



void MyDrawingWidget::draw(
…
) {


…call drawing API to draw the visual representations of the application objects...


}

void MyDrawingWidget::whenMouseMove(
…
) {


…update the application obj.’s/var.’s based on mouse motion event…


GUI::request_widget_redraw (myDrawingWidget);


}




1

3,26

2,4,6,8,10…25,27

5,7,9…

spontaneous

call (expose event, etc.)

©Zachary Wartell
-

11/3/2013

29

Revision

Revision 1.1 various improvements to grammer and structure


-

added slide on Event data structure


-

added slide for running a few FLTK examples

Revision 1.2

1.
typos

2.
added slide 20


Revision 1.3


1.

added “Design Parameters” slide


2.

misc. improvements


.


Revisions… to inefficient to maintain this. See SVN logs…