User Interface Programming in C#: Model-View-Controller Chris North CS 3724: HCI.
-
Upload
elijah-fletcher -
Category
Documents
-
view
219 -
download
1
Transcript of User Interface Programming in C#: Model-View-Controller Chris North CS 3724: HCI.
![Page 1: User Interface Programming in C#: Model-View-Controller Chris North CS 3724: HCI.](https://reader030.fdocuments.us/reader030/viewer/2022032805/56649efa5503460f94c0c8a5/html5/thumbnails/1.jpg)
User Interface Programming in C#:
Model-View-Controller
Chris North
CS 3724: HCI
![Page 2: User Interface Programming in C#: Model-View-Controller Chris North CS 3724: HCI.](https://reader030.fdocuments.us/reader030/viewer/2022032805/56649efa5503460f94c0c8a5/html5/thumbnails/2.jpg)
GUI Topics
• Components
• GUI layouts
• Events
• Graphics
• Manipulation
• Animation
• Databases
• MVC
![Page 3: User Interface Programming in C#: Model-View-Controller Chris North CS 3724: HCI.](https://reader030.fdocuments.us/reader030/viewer/2022032805/56649efa5503460f94c0c8a5/html5/thumbnails/3.jpg)
Review: Direct Manipulation
• DM Definition? (Shneiderman)
•
•
•
•
• DM processing steps?• 1.
• 2.
![Page 4: User Interface Programming in C#: Model-View-Controller Chris North CS 3724: HCI.](https://reader030.fdocuments.us/reader030/viewer/2022032805/56649efa5503460f94c0c8a5/html5/thumbnails/4.jpg)
2 Challenges!
• User interface design
• Software architecture design
![Page 5: User Interface Programming in C#: Model-View-Controller Chris North CS 3724: HCI.](https://reader030.fdocuments.us/reader030/viewer/2022032805/56649efa5503460f94c0c8a5/html5/thumbnails/5.jpg)
Software Architecture so far…
Program State -data structures
Paint event-display data
Interaction events-modify data
![Page 6: User Interface Programming in C#: Model-View-Controller Chris North CS 3724: HCI.](https://reader030.fdocuments.us/reader030/viewer/2022032805/56649efa5503460f94c0c8a5/html5/thumbnails/6.jpg)
Model-View-Controller (MVC)
Program State -data structures
Paint event-display data
Interaction events-modify data
Model
View
Controller
![Page 7: User Interface Programming in C#: Model-View-Controller Chris North CS 3724: HCI.](https://reader030.fdocuments.us/reader030/viewer/2022032805/56649efa5503460f94c0c8a5/html5/thumbnails/7.jpg)
Model-View-Controller (MVC)
Data model
Data display User input
Model
View ControllerUI:
Data:
manipulaterefresh
refresh
events
![Page 8: User Interface Programming in C#: Model-View-Controller Chris North CS 3724: HCI.](https://reader030.fdocuments.us/reader030/viewer/2022032805/56649efa5503460f94c0c8a5/html5/thumbnails/8.jpg)
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
![Page 9: User Interface Programming in C#: Model-View-Controller Chris North CS 3724: HCI.](https://reader030.fdocuments.us/reader030/viewer/2022032805/56649efa5503460f94c0c8a5/html5/thumbnails/9.jpg)
Multiple Views
Model
ViewController
View
Controller
![Page 10: User Interface Programming in C#: Model-View-Controller Chris North CS 3724: HCI.](https://reader030.fdocuments.us/reader030/viewer/2022032805/56649efa5503460f94c0c8a5/html5/thumbnails/10.jpg)
Common Variation
Data model
Data display Data manipulation logic
Model
View Controller
![Page 11: User Interface Programming in C#: Model-View-Controller Chris North CS 3724: HCI.](https://reader030.fdocuments.us/reader030/viewer/2022032805/56649efa5503460f94c0c8a5/html5/thumbnails/11.jpg)
E.g. C# TreeView Control
TreeView control
Nodes collection
treeView1.Nodes
Java:model listeners
Model
ViewController
![Page 12: User Interface Programming in C#: Model-View-Controller Chris North CS 3724: HCI.](https://reader030.fdocuments.us/reader030/viewer/2022032805/56649efa5503460f94c0c8a5/html5/thumbnails/12.jpg)
C# DataBase Controls
DataSet class -tables -columns -rows
DataGrid control -scroll, sort, edit, …
Model
ViewController
![Page 13: User Interface Programming in C#: Model-View-Controller Chris North CS 3724: HCI.](https://reader030.fdocuments.us/reader030/viewer/2022032805/56649efa5503460f94c0c8a5/html5/thumbnails/13.jpg)
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
![Page 14: User Interface Programming in C#: Model-View-Controller Chris North CS 3724: HCI.](https://reader030.fdocuments.us/reader030/viewer/2022032805/56649efa5503460f94c0c8a5/html5/thumbnails/14.jpg)
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
![Page 15: User Interface Programming in C#: Model-View-Controller Chris North CS 3724: HCI.](https://reader030.fdocuments.us/reader030/viewer/2022032805/56649efa5503460f94c0c8a5/html5/thumbnails/15.jpg)
GUI Topics
• Components
• GUI layouts
• Events
• Graphics
• Manipulation
• Animation
• Databases
• MVC