User Interface Programming in C#: Basics and Events

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

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

3. 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, …

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

5. Getting Started • Visual Studio • New Application • Drag-n-drop GUI builder • Code editor • Properties • Methods • Events

6. Visual Studio .Net designer controls Properties, events

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

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

9. 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} ); }

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

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

12. Layout Combinations Button Button TextBox

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

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

15. Events

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

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

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

19. GUI Events App1 App2 mouseclick OK OK Cancel Cancel App2 code: OKbtn_click() { do stuff; } CancelBtn_click() { do different stuff; } App2Form_click() { do other stuff; } App1 event loop WindowSystem event loop App2 event loop whichapp? inputdevice whichcontrol?

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

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

22. GUI Topics • Components* • GUI layout* • Events* • Graphics • Manipulation • Animation • Databases • MVC