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)
Program State
-data structures
Paint event
-display data
Interaction events
-modify data
Model
View
Controller
Model-View-Controller (MVC)
Data model

Data display

User input
Model
View Controller
UI:
Data:
manipulate
refresh
refresh
events
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
Model
View
Controller
View
Controller
Typical real-world approach
Data model

Data display

Data manipulation logic
Model
View Controller
E.g. C# TreeView Control
TreeView control
Nodes collection
treeView1.Nodes
Java:
model listeners
Model
View
Controller
C# DataBase Controls
DataSet class
-tables
-columns
-rows
DataGrid control
-scroll, sort, edit,
Model
View
Controller
C# DataBase Access (ADO.net)
OleDB, ODBC, SQLdb,
Steps to get data:
1. dbConnection: connect to DB
2. dbCommand: SQL query text
3. dbAdapter: executes query
4. DataSet: resulting data
Steps to display 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