1 / 22

User Interface Programming in C#: Basics and Events

User Interface Programming in C#: Basics and Events. Chris North CS 3724: HCI. 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

omana
Download Presentation

User Interface Programming in C#: Basics and Events

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  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

More Related