GUI Development: Goals

1. General GUI programming concepts

User Interface Programming in C#: • GUI components, layouts
• Event-based programming
• Graphics
• Direct Manipulation, Animation
Basics and Events • MVC architectures
• Data-driven UIs
2. C#, .NET
• Windows Forms
• Events, delegates
Chris North •
•
GDI+
Threads
CS 3724: HCI • ADO.net

Goal: learn other languages quickly, same concepts

• VB, Xwin, Java 49, …

C# Background C# Materials
• C# = VB + Java (best of both!)
• Basic statements identical to C++, Java
• MS Visual Studio .Net (2005)
• Object-oriented only!
• main( ) is inside a class • MSDN (integrates with VS)
• No global variables
• “interfaces” • VS Dynamic Help
• No pointers (object references only), safe • Books
• No delete: automatic garbage collection
• MS Visual C# .NET, MS Press
• Error Handling, exceptions (try, catch)
– C# language
• GUI: Windows Forms – Window Forms, GDI+
• Libraries: Data structs, databases, …
• Component-based: (“assembly”) reflection • MSDN online
• No .h files
• Visual Studio
• .NET: CLR, multi-language, web, XML, services, …

1
 GUI Topics Components API
• Components • Properties
• Like member fields
• Events
• Get, set
• Graphics • E.g. Button1.Text = “Press Me”
• Manipulation • Methods
• Like member functions
• Animation • Tell component to do something
• MVC • E.g. Button1.Show( )
• Events
• Like callback functions
• Receive notifications from component
• E.g. Button1.Click(e)

GUI Tree Structure Typical command line program

GUI Internal structure
• Non-interactive program:
Form Form main()
Button containers {
• Linear execution code;
code;
Panel code;
code;
Button code;
Panel code;
code;
code;
code;
code;
Label Label code;
code;
}

2
Interactive command line program Typical GUI program
program: GUI program:
• User input commands • User input commands
main() main()
{ {
decl data storage; decl data storage;
• Non-linear execution initialization code; • Non-linear execution initialization code;

loop create GUI;

• Unpredictable order {
• Unpredictable order register callbacks;
get command;
• Much idle time switch(command) • Much idle time main event loop;
{ }
command1:
code; Callback1() //button1 press
command2: • Event callback procs { code;
code; }
… Callback2() //button2 press
} { code;
} }
} …

GUI Events C# WinApp

App1 C# WinApp:
mouse App2 • “delegates” = callbacks
OK Class{
click
OK • Function pointers decl data storage;
Cancel
constructor(){
Cancel
App2 code: initialization code;
create GUI controls;
OKbtn_click() register callbacks;
App1 { • Java: Listeners }
do stuff; main(){
event } Run(new )
Window loop CancelBtn_click()
{
}
callback1(){
System do different stuff;
do stuff;
}
which App2 App2Form_click() }
input event app? callback2(){
{
device loop event which do other stuff; do stuff;
loop control? } }
…

3
 Delegates
1. Register with a control to receive events
• Give Control a function pointer to your callback function
• this.button1.Click += new EventHandler(this.button1_Click);
2. Receive events from control
• Control will call the function pointer
• private void button1_Click(object sender, EventArgs e){
Graphics
• Screen is like a painter’s canvas
• App must paint its window contents
• GUI components paint themselves
• Anything else: Programmer

1. button1.Click += button1_click( )
1. How to paint?
click 2. When to paint?
Button1 Button1_click()
Button
2. button1_Click( ) callback

Pixels Coordinate System

• Upside-down Cartesian
(0,0) (width,0)

(0,height) (width, height)

• Ywindow = height - Ycartesian

4
 Component Hierarchy Painting Components
• Each component has its own subwindow
• Subwindow = rectangular area within parent component
• Can paint any component
• Has own coordinate system • Panel is good for custom graphics area
• Clipping:
• Can’t paint outside its subwindow
• Can’t paint over child components?
(0,0) Panel Button
Panel
(0,0) Button
Button
(wb, hb)

(wp, hp)

Painting in C# Graphics Primitives

Draw Fill
1. The GDI+ graphics library: • Line (pt1,pt2)
using System.Drawing;
• Lines (pt list)
• Arc (rect)
2. Get the “graphics context” of a component:
• Curves, Bezier (pt list)
Graphics g = myPanel.CreateGraphics( );
• Ellipse (rect)
3. Paint in it: • Rectangle (rect)
g.DrawLine(pen, x1,y1, x2,y2); • Polygon (pt list)
• Image (img, x,y)
• String (string, x,y)
label

5
 Graphics Attributes Color
• Pen (for lines) • Combinations of Red, Green, Blue
• Color, width, dash, end caps, joins, • Alpha value = opacity
• Brush (for filling) • Each in [0, 255]
• Color, Solid, texture, pattern, gradient
• Font, String Format (for strings)
• C#: Color.FromArgb(255, 150, 0)
• Bitmap/Metafile (for images)
• Bmp, gif, jpeg, png, tiff, wmf, …

Color Re-Paint
• Combinations of Red, Green, Blue • Screen is like a painter’s canvas
• Alpha value = opacity • All windows paint on the same surface!
• Windows don’t “remember” whats under them
• Each in [0, 255]
• Need to re-paint when portions are newly
exposed
• C#: Color.FromArgb(255, 150, 0)
• Receive Repaint events
Hokie Orange • Open, resize, bring to front
• When other windows in front move, resize, close

6
 MyApp Open WinExp, Notepad

Close WinExplorer Desktop gets repaint event

Repaint event sent to: Desktop, MyApp

7
 MyApp gets repaint event MyApp gets repaint event

MyApp Form gets repaint event MyApp Form forwards repaint event to Button

Repainting Static Graphics In C#

• Receive “paint” event:
(select the event in VisStudio)
• Repaint event: this.Paint += new PaintEventHandler(this.Form1_Paint);

• Erase (fill with background color) - usually automatically private void Form1_Paint(object sender, PaintEventArgs e){
done by the control Graphics g = e.Graphics;
g.DrawLine(new Pen(Color.Red,10), 10,10,300,300);
• Draw graphics }

• OR: Override the OnPaint method

override void OnPaint(PaintEventArgs e){
base.OnPaint(e); //preserve base class functionality
Graphics g = e.Graphics;
g.DrawLine(new Pen(Color.Red,10), 10,10,300,300);
}

• Can call Refresh( ) to force a repaint

8
 Typical program structure for
Program Structure
Dynamic Graphics
C# WinApp:
• Store data structure of graphics items
Program State Class{
• E.g. user drawn picture in a paint program declare data storage;
-data structures
constructor(){
initialize data storage;
• Paint event: }
Paint event
• Erase window (draw background color) -display data cntrl1_paintevent(e){
• Draw graphics for items in data structure draw graphics from data;
}

Interaction events cntrl2_mouseEvent(e){

• Other user events that alter the graphics items: -modify data
manipulate data;
cntrl1.refresh();
• modify the data structure }
…
• send repaint event by calling Refresh( )

Data structure for graphics items Direct Manipulation

• 2 approaches: Definition: (Shneiderman)
• Store logical contents in a data structure,
then draw graphics based on the data • Visual objects
» E.g. drawing program: lines, shapes, colors, …
» E.g. visualization program: data table • Selection by pointing
• Rapid, incremental, reversible actions
• Store visual contents as an off-screen image (bitmap)
» E.g. pixels • Immediate, continuous feedback
» Then use g.DrawImage( ) in paint event

9
 Typical interaction sequence 1. Hit Testing
• Mouse down, mouse over
• select item by point-n-click: Hit testing
• Which dot did user click on?
MouseDown • Using components:
• Make each dot a simple component, like a Button
• act on item by drag: Dynamic update • Hit testing automatic, each component is a subwindow
• Receive events from components, check event source
MouseMove • rectangular items, not scalable, inherit from UserControl
• Using custom graphics:
• release item • Get click (x,y) from MouseDown event
• Iterate through data structure, test for hit
MouseUp
– E.g: if rect.contains(x,y)
• Data structure for fast lookup?

2. Dynamic Updating Problem

• Dragging, stretching, …
• Dynamic manipulation on top of other graphics
• MouseMove events • Need to preserve (redraw) other graphics
• Using components: • Examples: MacDraw, powerpoint
• mouseDown store x,y click in component
• mouseMove
– Calculate x,y delta
• Simple solution:
– Move component by delta • Call refresh( ) or invalidate( ) while dragging
• Paint( ) event restores other graphics
• Using graphics:
• But: if lots of graphics, too slow & flashing!
• (need to erase it, repaint other graphics, repaint new item)
• Calculate delta, calculate new item location, store
• Call Refresh( )
• Draw new graphics in Paint event

10
 Problem: Flashing Solution: Double buffering

• Ugly flashing when repaint:

• Paint background
• Redraw shapes

Solution: Double buffering Rubber Band (XOR painting)

• Double buffered repaint: • Want multi-selection by stretching a rubber band
• Draw all graphics in temporary off-screen image • Draw rubber band by inverting pixel colors
» Paint background color • drawing with XOR once inverts background colors
» Paint shapes • drawing with XOR twice returns to original look
• Then paint image to Window – No need to refresh( ), fast!

• Bonus: C# can do this for you!
• Form1.DoubleBuffered = true; //VS 2005
• control maintains off-screen image
SetStyle(ControlStyles.DoubleBuffer | //VS 2003
ControlStyles.UserPaint |
ControlStyles.AllPaintingInWmPaint, true);
// in mouseMove event:
// erase previous rect: (must use screen coords, not window coords)
ControlPaint.DrawReversibleFrame(rect, Color.Black, FrameStyle.Dashed);
// <update rect here based on mouse x,y>
// draw new rect:
ControlPaint.DrawReversibleFrame(rect, Color.Black, FrameStyle.Dashed);

11
 Drag-n-Drop Animation
• Drag and Drop API for GUI controls
• Supports data transfer
• Update components/graphics in a loop:
for(int i =0; i<100; i++)
DestControl.AllowDrop = True; button2.Left += 10;

SourceControl_MouseEvent: for(int i =0; i<100; i++)

this.DoDragDrop(data, DragDropEffects.Copy); myGraphicX += 10;
refresh();
DestControl_DragOver(e):
e.Effect = DragDropEffects.Copy;
• but? Loops blocks other events.
DestControl_DragDrop(e):
do something with e.Data.GetData(typeof(String));

Event-based Animation Software Architecture so far…

• Use a Timer control
Program State
• Non-visible control, fires a Tick event at specified intervals
-data structures
• Timer1.Interval = 10 //milliseconds
• Timer1.Enabled = true //starts animation
• in Timer1_Tick( ) event: Paint event
– Update graphics -display data
– Refresh( )
• Timer1.Enabled = false //stops animation
Interaction events
-modify data
• Use doublebuffering

12
 Model-View-Controller (MVC) Model-View-Controller (MVC)

Model
Program State
-data structures
refresh
View Controller
UI:
View Data display events
User input
Paint event
-display data
refresh manipulate

Controller
Interaction events
-modify data
Model
Data: Data model

Advantages? Multiple Views

• Multiple views for a model
• Multi-view applications (overview+detail, brushing,…)
• Different users
• Different UI platforms (mobile, client-side, server-side,…)
• Alternate designs Controller
View
• Multiple models
• Software re-use of parts View
Controller
• Plug-n-play
Model
• Maintenance

13
 E.g. C# TreeView Control C# DataBase Controls

TreeView control
DataGrid control
View -scroll, sort, edit, … View
Controller Controller

treeView1.Nodes

Java: DataSet class

model listeners Nodes collection -tables

Model
-columns Model
-rows

GUI Topics
Components
Events
Graphics
Manipulation
Animation
MVC

14