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 (2002, 2003) 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

Visual Studio.Net controls designer Properties, events

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

Anatomy of a C# WinApp namespace MyWindowsApplication1 { public class MyForm1 : System.Windows.Forms.Form { // inherit from Form base class public MyForm1( ) // constructor, calls InitializeComponent( ) private void InitializeComponent( ) // 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 MyForm1( )); // create a new MyForm1 and run the main event loop }

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

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

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 AutoScroll: Scrolling control panels Z-Order: Front to back order

Layout Combinations Button TextBox

Layout Combinations Form Panel Button JTextArea Dock: top Dock: Fill x,y

Java: Layout Managers Left to right, Top to bottom c n s ew FlowLayoutGridLayout BorderLayout none, programmer sets x,y,w,h null One at a time CardLayout GridBagLayout JButton

Events

Typical command line program Non-interactive Linear execution program: main() { 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) { command1: code; command2: code; … }

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

GUI Events Window System event loop App1 OK Cancel App2 code: OKbtn_click() { do stuff; } CancelBtn_click() { do different stuff; } App2Form_click() { do other stuff; } mouse click input device App1 event loop App2 event loop which app? which control? App2 OK Cancel

C# WinApp C# WinApp: Class{ decl data storage; constructor(){ initialization code; create GUI controls; register callbacks; } main(){ Run(new ) } callback1(){ do stuff; } callback2(){ do stuff; } … “delegates” = callbacks Function pointers Java: Listeners

Delegates 1.Register with a control to receive events Give Control a function pointer to your callback function this.button1.Click += new EventHandler(this.button1_Click); 2.Receive events from control Control will call the function pointer private void button1_Click(object sender, EventArgs e){ Button1 Button1_click() callback click 2. button1_Click( ) 1. button1.Click += button1_click( )

GUI Topics Components* GUI layout* Events* Graphics Manipulation Animation Databases MVC