Download Java Direct Manipulation

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
Data manipulation logic
Model
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