Csharp4 MVC
description
Transcript of Csharp4 MVC
User Interface Programming in C#:
Model-View-Controller
Chris North
CS 3724: HCI
GUI Topics
ComponentsGUI layoutsEventsGraphics ManipulationAnimationDatabasesMVC
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?
•
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
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
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
ComponentsGUI layoutsEventsGraphics ManipulationAnimationDatabasesMVC