User Interface Programming in C ModelViewController Chris North

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? • 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 Model

Common Variation View Controller Data display Model Data manipulation logic Data model

E. g. C# Tree. View Control Tree. View control View Controller tree. View 1. Nodes Java: model listeners Nodes collection Model

C# Data. Base Controls Data. Grid control -scroll, sort, edit, … View Controller Data. Set class -tables -columns -rows Model

C# Data. Base Access (ADO. net) • • Ole. DB, ODBC, SQLdb, … Steps to get data: 1. 2. 3. 4. • Steps to display data: • • • db. Connection: connect to DB db. Command: SQL query text db. Adapter: executes query Data. Set: resulting data Bind to UI control, Data. Grid or Manual data processing Built-in XML support too DB Alternative: Data. Reader, retrieve data incrementally

DB Example • Get data: Using System. Data. Ole. Db; // “Jet” = MS Access DB driver con = new Ole. Db. Connection("Provider=Microsoft. Jet. OLEDB. 4. 0; Data Source=c: /mydb. mdb”); cmd = new Ole. Db. Command("SELECT * FROM mytable”, con); // SQL query adpt = new Ole. Db. Data. Adapter(cmd); data = new Data. Set( ); adpt. Fill(data); // execute the query and put result in ‘data’ • Display data: data. Grid 1. Data. Source = data. Tables[0]; // show the table in the grid control Message. Box. Show(data. Tables[0]. Rows[0][5]. To. String( )); // or process manually, this is row 0 col 5

GUI Topics • • Components GUI layouts Events Graphics Manipulation Animation Databases MVC