User Interface Programming in C Basics and Events

User Interface Programming in C#: Basics and Events Chris North CS 3724: HCI

GUI Development: Goals 1. General GUI programming concepts • • • GUI components, layouts Event-based programming Graphics Direct Manipulation, Animation MVC architectures Data-driven UIs 2. C#, . NET • • • Windows Forms Events, delegates GDI+ Threads ADO. net Goal: learn other languages quickly, same concepts • VB, Xwin, Java 49, …

C# Background • C# = VB + Java (best of both!) • Basic statements identical to C++, Java • Object-oriented only! • main( ) is inside a class • No global variables • • “interfaces” No pointers (object references only), safe No delete: automatic garbage collection Error Handling, exceptions (try, catch) GUI: Windows Forms Libraries: Data structs, databases, … Component-based: (“assembly”) reflection • No. h files • Visual Studio • . NET: CLR, multi-language, web, XML, services, …

C# Materials • • MS Visual Studio. Net (2005) MSDN (integrates with VS) VS Dynamic Help Books • MS Visual C#. NET, MS Press – C# language – Window Forms, GDI+ • MSDN online

Getting Started • • Visual Studio New Application Drag-n-drop GUI builder Code editor Properties Methods Events Examples: Pop-up, Run-away button

Visual Studio. Net designer controls Properties, events

Components API • Properties • Like member fields • Get, set • E. g. Button 1. Text = “Press Me” • Methods • Like member functions • Tell component to do something • E. g. Button 1. Show( ) • Events • Like callback functions • Receive notifications from component • E. g. Button 1. Click(e)

Anatomy of a C# Win. App namespace My. Windows. Application 1 { public class My. Form 1 : System. Windows. Form { // inherit from Form base class public My. Form 1( ) // constructor, calls Initialize. Component( ) private void Initialize. Component( ) // VS auto-generated GUI code protected override void Dispose( bool disposing ) // standard method to clean up resources static void Main( ) { // App starts here! Application. Run(new My. Form 1( )); // create a new My. Form 1 and run the main event loop }

Adding GUI Controls public class My. Form 1 : System. Windows. Form { private System. Windows. Forms. Button button 1; … // member variables for each GUI control private void Initialize. Component( ) // VS auto-generated GUI code // create GUI controls: this. button 1 = new System. Windows. Forms. Button( ); // set properties of GUI controls: this. button 1. Text = "button 1"; // add controls to their parent or Form: this. Controls. Add. Range( new System. Windows. Forms. Control[] {this. button 1} ); }

GUI Tree Structure GUI Form Button Internal structure Form containers Panel Label Button

GUI Layout Management • Fixed position: • X, Y location • W, H size • Anchor: • Maintain distance to: Top, Left, Bottom, Right • Dock: • Fill space in: Top, Left, Bottom, Right, Fill • Auto. Scroll: • Scrolling control panels • Z-Order: • Front to back order

Layout Combinations Button Text. Box

Layout Combinations Button Form x, y Dock: top Dock: Fill Panel Text. Box Button

Java: Layout Managers null Flow. Layout none, programmer sets x, y, w, h Left to right, Top to bottom Border. Layout n w c s e Card. Layout One at a time Grid. Layout Grid. Bag. Layout JButton

Events

Typical command line program • Non-interactive • Linear execution program: main() { code; code; code; }

Interactive command line program • User input commands • Non-linear execution • Unpredictable order • Much idle time program: main() { decl data storage; initialization code; loop { } } get command; switch(command) { command 1: code; command 2: code; … }

Typical GUI program • User input commands • Non-linear execution • Unpredictable order • Much idle time GUI program: main() { decl data storage; initialization code; create GUI; register callbacks; } • Event callback procs main event loop; Callback 1() { code; } Callback 2() { code; } … //button 1 press //button 2 press

GUI Events App 1 mouse click OK App 2 OK Cancel App 2 code: App 1 event loop Window System input device event loop which app? App 2 event loop which control? OKbtn_click() { do stuff; } Cancel. Btn_click() { do different stuff; } App 2 Form_click() { do other stuff; }

C# Win. App • “delegates” = callbacks • Function pointers • Java: Listeners C# Win. App: Class{ decl data storage; constructor(){ initialization code; create GUI controls; register callbacks; } main(){ Run(new ) } callback 1(){ do stuff; } callback 2(){ do stuff; } …

Delegates 1. Register with a control to receive events • • Give Control a function pointer to your callback function this. button 1. Click += new Event. Handler(this. button 1_Click); 2. Receive events from control • • Control will call the function pointer private void button 1_Click(object sender, Event. Args e){ 1. button 1. Click += button 1_click( ) click Button 1 2. button 1_Click( ) Button 1_click() callback

GUI Topics ü Components ü GUI layout ü Events • Graphics • Manipulation • Animation • Databases • MVC