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 displayUser input Model ViewController UI: Data: manipulate 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 View Controller View Controller

Common Variation Data model Data displayData manipulation logic Model ViewController

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

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

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