User Interface Programming in C#:

Model-View-Controller
Chris North
CS 3724: HCI

GUI Topics
Components
GUI layouts
Events
Graphics
Manipulation
Animation
Databases
MVC

Review: Direct Manipulation

DM Definition?

(Shneiderman)

DM processing steps?
1.
2.

2 Challenges!
User interface design

Software architecture design

Software Architecture so far

Program State
-data structures

Paint event
-display data

Interaction events
-modify data

Model-View-Controller (MVC)
Model

Program State
-data structures

View

Paint event
-display data

Controller

Interaction events
-modify data

Model-View-Controller (MVC)

UI:

refresh

View
Data display

Controller

events

refresh

Data:

User input
manipulate

Model

Data model

Advantages?

Advantages?
Multiple views for a model

Multi-view applications (overview+detail, brushing,)

Different users
Different UI platforms (mobile, client-side, server-side,)
Alternate designs

Multiple models
Software re-use of parts
Plug-n-play
Maintenance

Multiple Views

View

Controller
View
Controller
Model

Typical real-world approach

View

Controller

Data display

Model

Data manipulation logic

Data model

E.g. C# TreeView Control

TreeView control

View
Controller
treeView1.Nodes
Java:
model listeners

Nodes collection

Model

C# DataBase Controls
DataGrid control
-scroll, sort, edit,

View
Controller

DataSet class
-tables
-columns
-rows

Model

C# DataBase Access (ADO.net)

OleDB, ODBC, SQLdb,

Steps to get data:
1.
2.
3.
4.

Steps to display data:

dbConnection: connect to DB
dbCommand: SQL query text
dbAdapter: executes query
DataSet: resulting data
Bind to UI control, DataGrid
or Manual data processing

Built-in XML support too

DB

Alternative: DataReader,
retrieve data incrementally

DB Example
Get data:
Using System.Data.OleDb;
// Jet = MS Access DB driver
con = new OleDbConnection("Provider=Microsoft.Jet.OLEDB.4.0;Data Source=c:/mydb.mdb);
cmd = new OleDbCommand("SELECT * FROM mytable, con); // SQL query
adpt = new OleDbDataAdapter(cmd);
data = new DataSet( );
adpt.Fill(data); // execute the query and put result in data

Display data:
dataGrid1.DataSource = data.Tables[0];
// show the table in the grid control
MessageBox.Show(data.Tables[0].Rows[0][5].ToString( )); // or process manually, this is row 0 col 5

GUI Topics
Components
GUI layouts
Events
Graphics
Manipulation
Animation
Databases
MVC