[PDF] - P P Programming With Programming With i i Wi h Wi h Graphical PDF Document

SLIDE 1

10/15/2007 1

P i Wi h P i Wi h Programming With Programming With Graphical User Interfaces Graphical User Interfaces

No Experience Required! No Experience Required!

Online at: Online at: http://www.alternitz.com/ http://www.alternitz.com/ CCSC2007/ CCSC2007/

SLIDE 2

10/15/2007 2

Programming With Graphical Programming With Graphical User Interfaces User Interfaces

Presented by Presented by Michael

Michael Panitz Panitz

Cascadia Cascadia Community College Community College

Based on materials created by Based on materials created by Kelvin Sung

Kelvin Sung University of Washington, Bothell

University of Washington, Bothell

Java Tutorial by Java Tutorial by Ruth Anderson

Ruth Anderson

University of Washington, Seattle University of Washington, Seattle

C++ tutorial created by William C++ tutorial created by William Frankhouser Frankhouser y C# tutorial created by Ethan C# tutorial created by Ethan Verrall Verrall

(Dr. (Dr. Sung’s Sung’s students) University of Washington, Bothell students) University of Washington, Bothell

Credits Credits

All quotes are from Kelvin

All quotes are from Kelvin Sung’s Sung’s book book, , “E i l C f B ildi I i E i l C f B ildi I i “Essential Concepts for Building Interactive Essential Concepts for Building Interactive Computer Graphics Applications Computer Graphics Applications”, ”, which will be which will be available for purchase starting soon available for purchase starting soon

SLIDE 3

10/15/2007 3

Goal of the tutorial Goal of the tutorial

Understand the underlying concepts, and

Understand the underlying concepts, and become comfortable with 1 GUI API become comfortable with 1 GUI API

GUI API: Your choice of Java (Swing), C++

GUI API: Your choice of Java (Swing), C++ (MFC), or C# ( (MFC), or C# (WinForms WinForms) )

GUI == “Graphical User Interface”

API == “Application Programming Interface”

API == “Application Programming Interface” pp g g pp g g

Understand the principles of modern,

Understand the principles of modern, event event-

driven, GUI

driven, GUI-

based,

based, interactive programming interactive programming

What is a GUI What is a GUI-

based app?

based app?

“a collection of routines that are driven by

“a collection of routines that are driven by asynchronous, external events” asynchronous, external events” y , y ,

Ex: user presses a keyboard button, or the user clicks on

Ex: user presses a keyboard button, or the user clicks on a button with the mouse, or a timer goes off, etc a button with the mouse, or a timer goes off, etc

The routines are organized around GUI elements

Ex: Clicking on the onscreen representation of a button

Ex: Clicking on the onscreen representation of a button runs the routine for that button’s “button clicked” event runs the routine for that button’s “button clicked” event

It is (normally) possible to reuse your event handlers (by

It is (normally) possible to reuse your event handlers (by parameterizing parameterizing them) them)

Thus, the routines are often called “event handlers”

In Windows, elements are called

In Windows, elements are called controls controls, on Unix/X11, , on Unix/X11, elements are called elements are called widgets widgets

SLIDE 4

10/15/2007 4

Attributes of a good GUI: Attributes of a good GUI: User’s Perspective User’s Perspective

Visually Pleasing

Semantically Meaningful

Elements have obvious meaning

Elements’ (re)actions support that meaning

Ex: When a button has been clicked, but the mouse

Ex: When a button has been clicked, but the mouse button has not yet been released, the button’s picture button has not yet been released, the button’s picture looks ‘depressed’, like a real button would looks ‘depressed’, like a real button would

Attributes of a good GUI: Attributes of a good GUI: Programmer’s Perspective Programmer’s Perspective

1.

1. Service to allow registration of Event Handling

Service to allow registration of Event Handling routines routines routines routines

2.

2. GUI elements provide useful default behavior

GUI elements provide useful default behavior

Ex: ‘depress when clicked’ animation, without

Ex: ‘depress when clicked’ animation, without programmer doing any work programmer doing any work

3.

3. GUI elements can be customized

GUI elements can be customized

Ex: I want

Ex: I want this this button to button to also also change colors when change colors when depressed (then revert to normal color when the depressed (then revert to normal color when the user releases the mouse button) user releases the mouse button)

Ex: Custom event handling routines

Ex: Custom event handling routines

SLIDE 5

10/15/2007 5

Attributes of a good GUI: Attributes of a good GUI: Programmer’s Perspective Programmer’s Perspective

4. 4.

GUI elements maintain useful state information GUI elements maintain useful state information

Ex: slider bar remembers where the ‘thumb’ is

Ex: slider bar remembers where the ‘thumb’ is

Ex: slider bar remembers where the thumb is

Ex: slider bar remembers where the thumb is

The application’s core logic can poll the element for this

The application’s core logic can poll the element for this info info

5. 5.

GUI Elements each have a unique ID GUI Elements each have a unique ID

So that our application’s core logic can access the GUI

So that our application’s core logic can access the GUI elements elements

6

GUI f k id t b t GUI f k id t b t

6. 6.

GUI framework provides a easy to use, but GUI framework provides a easy to use, but sophisticated, set of types for control variables sophisticated, set of types for control variables

In Object Oriented programming, this would be a set of

In Object Oriented programming, this would be a set of classes, so that one can make use of the Button class’s full classes, so that one can make use of the Button class’s full-

featured, yet easy to use, functionality

featured, yet easy to use, functionality

How to create a GUI app How to create a GUI app

1. 1. Layout the front Layout the front-

end

end

Old S h l ff h h Old S h l ff h h

Old School: map stuff out on graph paper, then

Old School: map stuff out on graph paper, then hand hand-

code all the GUI elements

code all the GUI elements

Current: Use a GUI builder program that presents

Current: Use a GUI builder program that presents you with a ‘view of your program’, that allows you you with a ‘view of your program’, that allows you to ‘draw’ the buttons, check boxes, etc, etc directly to ‘draw’ the buttons, check boxes, etc, etc directly

nto your window(s)
nto your window(s)

2. 2. Connect the front Connect the front-

end to the back

end to the back-

end

end

Linkage: external modules compiled in at link

Linkage: external modules compiled in at link-

time,

time,

vs. the IDE modifying the same files as the
vs. the IDE modifying the same files as the

programmer programmer

SLIDE 6

10/15/2007 6

Structuring a GUI App Structuring a GUI App

Front

Front-

end: an event is triggered

end: an event is triggered (user clicks a button, timer

(user clicks a button, timer

i h di h dl i h di h dl

goes off, etc), goes off, etc), causing the corresponding event handler

causing the corresponding event handler to run to run

Event handler then causes the core/internal

Event handler then causes the core/internal application state to be changed application state to be changed

The application’s core logic will then adjusts any

The application s core logic will then adjusts any

The application s core logic will then adjusts any relevant GUI elements (in order to represent the relevant GUI elements (in order to represent the current state of the application visually) current state of the application visually)

Now: Onto Language Now: Onto Language-

Specific

Specific Tutorials!! Tutorials!!

SLIDE 7

10/15/2007 7

#1: Demystifying Files #1: Demystifying Files

C#2005: ‘split files’

C#2005: ‘split files’ thingee thingee

All: Major idea of

All: Major idea of subclassing subclassing an existing an existing (window/frame/dialog) class (window/frame/dialog) class

E.g.: overriding virtual methods

C++ S i C++ S i i i MFC i i f i i MFC i i f

C++: Semi

C++: Semi-interesting MFC transition from interesting MFC transition from procedural procedural-

land to OO

land to OO-

land

land

#2: Control Variables, App State #2: Control Variables, App State

Count & display the number of times that a

Count & display the number of times that a b h b li k d b h b li k d button has been clicked button has been clicked

SLIDE 8

10/15/2007 8

#3: More Complex Elements: #3: More Complex Elements: Slider Bars Slider Bars

C++: ‘binding’ between raw variables, and the

C++: ‘binding’ between raw variables, and the GUI l GUI l GUI elements GUI elements

#4: Events not caused by the user #4: Events not caused by the user

Timer event: every X units of time, this event

Timer event: every X units of time, this event ill b i d (b h OS) ill b i d (b h OS) will be triggered (by the OS) will be triggered (by the OS)

There is a limit to how often this can be run

SLIDE 9

10/15/2007 9

#5: Input AND Output elements #5: Input AND Output elements

Programmatic control over GUI elements

#6: Creating new GUI elements #6: Creating new GUI elements

In the Windows world, this is referred to as

In the Windows world, this is referred to as i ‘ l’ i ‘ l’ creating a ‘custom control’ creating a ‘custom control’

SLIDE 10

10/15/2007 10

#7: Separating elements into a #7: Separating elements into a library library

MFC: .LIB (static linkage) vs. .DLL (dynamic

MFC: .LIB (static linkage) vs. .DLL (dynamic li k ) li k ) linkage) linkage)

C#: Commonly done using DLLs. Relatively

C#: Commonly done using DLLs. Relatively easy to do easy to do

Java: .JAR files

#8: Container Elements #8: Container Elements

More