1. User Interface Programming in C#: Model-View-Controller Chris North CS 3724: HCI

2. GUI Topics Components GUI layouts Events Graphics Manipulation Animation Databases MVC

3. Review: Direct Manipulation DM Definition? (Shneiderman) DM processing steps? 1. 2.

4. 2 Challenges! User interface design Software architecture design

5. Software Architecture so far… Program State -data structures Paint event -display data Interaction events -modify data

6. Model-View-Controller (MVC) Program State -data structures Paint event -display data Interaction events -modify data Model View Controller

7. Model-View-Controller (MVC) Data model Data displayUser input Model ViewController UI: Data: manipulate refresh events

8. 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

9. Multiple Views Model View Controller View Controller

10. Common Variation Data model Data displayData manipulation logic Model ViewController

11. E.g. C# TreeView Control TreeView control Nodes collection treeView1.Nodes Java: model listeners Model View Controller

12. C# DataBase Controls DataSet class -tables -columns -rows DataGrid control -scroll, sort, edit, … Model View Controller

13. 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

14. 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

15. GUI Topics Components GUI layouts Events Graphics Manipulation Animation Databases MVC