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 ControllerUI:

Data:

manipulaterefresh

refresh

events

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

ViewController

View

Controller

Common Variation

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

ViewController

C# DataBase Controls

DataSet class -tables -columns -rows

DataGrid control -scroll, sort, edit, …

Model

ViewController

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