User Interface Programming in C

1
User Interface Programming in CBasics and
Events

• Chris North
• CS 3724 HCI

2
GUI Development Goals

• General GUI programming concepts
• GUI components, layouts
• Event-based programming
• Graphics
• Direct Manipulation, Animation
• MVC architectures
• Data-driven UIs
• C, .NET
• Windows Forms
• Events, delegates
• GDI
• Threads
• ADO.net
• Goal learn other languages quickly, same
  concepts
• VB, Xwin, Java 49,

3
C Background

• C VB Java (best of both!)
• Basic statements identical to C, Java
• Object-oriented only!
• main( ) is inside a class
• No global variables
• interfaces
• No pointers (object references only), safe
• No delete automatic garbage collection
• Error Handling, exceptions (try, catch)
• GUI Windows Forms
• Libraries Data structs, databases,
• Component-based (assembly) reflection
• No .h files
• Visual Studio
• .NET CLR, multi-language, web, XML, services,

4
C Materials

• MS Visual Studio .Net (2005)
• MSDN (integrates with VS)
• VS Dynamic Help
• Books
• MS Visual C .NET, MS Press
• C language
• Window Forms, GDI
• MSDN online

5
Getting Started

• Visual Studio
• New Application
• Drag-n-drop GUI builder
• Code editor
• Properties
• Methods
• Events

Examples Pop-up, Run-away button
6
Visual Studio .Net
designer
controls
Properties, events
7
Components API

• Properties
• Like member fields
• Get, set
• E.g. Button1.Text Press Me
• Methods
• Like member functions
• Tell component to do something
• E.g. Button1.Show( )
• Events
• Like callback functions
• Receive notifications from component
• E.g. Button1.Click(e)

8
Anatomy of a C WinApp
namespace MyWindowsApplication1 public class
MyForm1 System.Windows.Forms.Form // inherit
from Form base class public MyForm1( ) //
constructor, calls InitializeComponent( )
private void InitializeComponent( ) // VS
auto-generated GUI code protected override
void Dispose( bool disposing ) // standard
method to clean up resources static void
Main( ) // App starts here! Application.Run
(new MyForm1( )) // create a new MyForm1 and
run the main event loop
9
Adding GUI Controls
public class MyForm1 System.Windows.Forms.Form
private System.Windows.Forms.Button
button1 // member variables for each GUI
control private void InitializeComponent( )
// VS auto-generated GUI code // create GUI
controls this.button1 new System.Windows.Forms
.Button( ) // set properties of GUI
controls this.button1.Text "button1" //
add controls to their parent or
Form this.Controls.AddRange( new
System.Windows.Forms.Control this.button1
)
10
GUI Tree Structure
GUI
Internal structure
Form
Form
Button
containers
Panel
Panel
Button
Label
Label
11
GUI Layout Management

• Fixed position
• X,Y location
• W,H size
• Anchor
• Maintain distance to Top, Left, Bottom, Right
• Dock
• Fill space in Top, Left, Bottom, Right, Fill
• AutoScroll
• Scrolling control panels
• Z-Order
• Front to back order

12
Layout Combinations
Button
Button
TextBox
13
Layout Combinations
Button
Button

Form
x,y
Panel
Dock top
TextBox
Dock Fill
14
Java Layout Managers
FlowLayout
GridLayout
null
Left to right, Top to bottom
none, programmer sets x,y,w,h
GridBagLayout
BorderLayout
CardLayout
n
c
One at a time
JButton
e
w
s
15
Events
16
Typical command line program

• Non-interactive
• Linear execution

program main() code code code code co
de code code code code code code cod
e
17
Interactive command line program
program main() decl data storage initializa
tion code loop get command switch(comm
and) command1 code command2 c
ode

• User input commands
• Non-linear execution
• Unpredictable order
• Much idle time

18
Typical GUI program
GUI program main() decl data
storage initialization code create
GUI register callbacks main event
loop Callback1() //button1 press code Cal
lback2() //button2 press code

• User input commands
• Non-linear execution
• Unpredictable order
• Much idle time
• Event callback procs

19
GUI Events
App1
App2
mouseclick
OK
OK
Cancel
Cancel
App2 code OKbtn_click() do
stuff CancelBtn_click() do different
stuff App2Form_click() do other stuff
App1 event loop
WindowSystem event loop
App2 event loop
whichapp?
inputdevice
whichcontrol?
20
C WinApp
C WinApp Class decl data storage
constructor() initialization code create GUI
controls register callbacks
main() Run(new ) callback1() do
stuff callback2() do stuff

• delegates callbacks
• Function pointers
• Java Listeners

21
Delegates

• Register with a control to receive events
• Give Control a function pointer to your callback
  function
• this.button1.Click new EventHandler(this.button
  1_Click)
• Receive events from control
• Control will call the function pointer
• private void button1_Click(object sender,
  EventArgs e)

1. button1.Click button1_click( )
click
Button1
Button1_click() callback
2. button1_Click( )
22
GUI Topics

• Components
• GUI layout
• Events
• Graphics
• Manipulation
• Animation
• Databases
• MVC