©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…
Enter the password to open this PDF file:
File name:
-
File size:
-
Title:
-
Author:
-
Subject:
-
Keywords:
-
Creation Date:
-
Modification Date:
-
Creator:
-
PDF Producer:
-
PDF Version:
-
Page Count:
-
Preparing document for printing…
0%
Comments 0
Log in to post a comment