Chapter 4 Windows Forms GUI/EDP

1. Chapter 4Windows FormsGUI/EDP Yingcai Xiao

2. .NET GUI Forms and Controls

3. Concepts: GUI • Windows Forms—for writing GUI based applications (Windows Applications). • GUI: Graphical User Interface, to make programs easy to use, WYSIWYG (What you see is what you get). • Designing GUI-based Applications: Look & Feel Look => Appearance (Layout Design) Feel => Response (Event Handling) User => Button Click => Event => Event Handler (a method). GUI-based application => Event-driven programming • Two main tasks of GUI-based EDP: Design interface appearance (look) Implement even handlers (feel).

4. Concepts: GUI Design Principles • Users first: let users control the program not the other way around. • Elegant: simple but powerful. E.g.: iPot, iPhone, Google • Intuitive: don’t need too much training to use it. Compare operating interfaces of cars and airplanes. • Clarity: use icons and keywords that are standardized or clearly defined. (AWK?). Give users hints when they hesitating. • Hierarchical: only put the most frequently used and most important controls at the top level. • Speedy: users do not have patience to wait for too long. • Forgiving: allow users to make mistakes. Undo and redo. • Alignment: use tables. • Internationalization: use symbols. • More: http://www.iie.org.mx/Monitor/v01n03/ar_ihc2.htm http://www.asktog.com/basics/firstPrinciples.html

5. GUI Items are defined in System.Windows.Forms. System.Windows.Forms.Form class: all forms derive from it. Properties (can be treated as “public” data members): ClientRectangle (drawing area not including the borders) ClientSize BorderStyle Text (Title Bar) Methods: OnPaint (event handler for the PAINT event) .NET GUI Classes (Event Generators)

6. System.Windows.Forms Control Classes  Controls (Windows GUI Items)

7. System.Windows.Forms Control Classes  Controls (Windows GUI Items) Cont.

8. System.Windows.Forms Control Classes  Controls (Windows GUI Items) Cont.

9. System.Windows.Forms Control Classes  Controls (Windows GUI Items) Cont.

10. Start Visual Studio • New project • Windows Forms Application • Toolbox->All Windows Forms->Common Controls->Button • drag it to Form1 • Double click on button1 in Form1 • Add to button1_Click • Text = "Hello!"; • Build and run Programming a GUI APP using VS

11. Use Notepad to write the program • Create your form (GUI) by sub-classing System.Windows.Forms.Form. • Add controls (GUI items) to the form. • Code your program logic. • Compile the program using csc. Example: T:\Xiao\Windows Programming\Examples\C4\DialogDemo\DialogDemo.cs Programming a GUI APP using Notepad

12. 1. Instantiate the corresponding control class. 2. Initialize the control by setting its property values. • Add the control to the form by calling the “Add” method of the form’s Controls collection. 4. Map event handlers to the events. 5. Implement the event handlers. Programming a Control

13. //Create and initialize the button Button MyButton = new Button (); MyButton.Location = new Point (16, 16); MyButton.Size = new Size (96, 24); MyButton.Text = "Click Me"; // add the button to the form’s Controls collection. Controls.Add (MyButton); // Add event handlers to events MyButton.Click += new EventHandler (OnButtonClicked); // Write the event handlers void OnButtonClicked (Object sender, EventArgs e){… } T:\Xiao\Windows Programming\Examples\C4\DialogDemo\DialogDemo.cs Adding a Button to a Form

14. Common Dialog Classes Defined in System.Windows.Forms Dialog Boxes

15. class MyDialog : Form { Label WidthLabel; TextBox WidthBox; Button OKButton; public int UserWidth { get { return Convert.ToInt32 (WidthBox.Text); } set { WidthBox.Text = value.ToString (); } } public MyDialog () { // Initialize the dialog's visual properties ClientSize = new Size (296, 196); StartPosition = FormStartPosition.CenterParent; FormBorderStyle = FormBorderStyle.FixedDialog; Text = "Edit Ellipse"; ShowInTaskbar = false; DialogDemo.cs

16. // Create the dialog's controls WidthLabel = new Label (); WidthLabel.Location = new Point (16, 16); WidthLabel.Size = new Size (48, 24); WidthLabel.Text = "Width"; WidthBox = new TextBox (); WidthBox.Location = new Point (64, 12); WidthBox.Size = new Size (96, 24); WidthBox.TabIndex = 1; DialogDemo.cs

17. OKButton = new Button (); OKButton.Location = new Point (184, 12); OKButton.Size = new Size (96, 24); OKButton.TabIndex = 3; OKButton.Text = "OK"; OKButton.DialogResult = DialogResult.OK; AcceptButton = OKButton; // Add the controls to the dialog Controls.Add (WidthLabel); Controls.Add (WidthBox); Controls.Add (OKButton); } } DialogDemo.cs

18. // In the parent form who starts the dialog: MyDialog dlg = new MyDialog (); if (dlg.ShowDialog (this) == DialogResult.OK) { MyWidth = dlg.UserWidth; // get the input from the form Invalidate (); // update the display of the parent form } DialogDemo.cs

19. EDP

20. Concepts: EDP • Event-Driven Programming (EDP): Application waits (idles) after initialization until the user generates an event trough an input device (keyboard, mouse, …). The OS dispatches the event to the application who owns the active window. The corresponding event handler(s) of the application is invoked to process the event.

21. A menu in C++: char c; bool done = false; while(!done) { cout << “Please make your selection, q to end:” cin >> c; switch(c) { case “+”: add( ); break; case “-”: sub( ); break; case “q”: done = true; break; } } Event Loop Event Event Mapping & Even Dispatching Event Handler Events

22. Key Componentsof EDP (1) Event Generators: keyboard, GUI items (buttons, menus, …), NUI devices. (2) Events / Messages: MouseClick, KeyDown, … (3) Event Loop: an infinite loop constantly waits for events. (4) Event Mapping / Event Registration: inform event dispatcher which event an event hander is for. (5) Event Dispatcher: dispatch events to the corresponding event handlers. (6) Event Handlers: methods for processing events. OnMouseClick(), …

23. Key Componentsof EDP in .NET (1) Event Generators - commonly used GUI items are predefined. - used by programmers / GUI designers. (2) Events / Messages - commonly used ones predefined. (3) Event Loop: - taken care of by .NET. (4) Event Mapping / Registration: - implemented by .NET. - to be used by the programmers with appropriate matching: event – delegate – even handler (5)Event Dispatching: - taken care of by .NET. (6) Event Handlers - to be implemented by programmers.

24. (1) GUI Items (Event Generators) System.Windows.Forms.Form Button, Dialog, …. (2) Events: predefined Windows Messages: e.g. WM_KEYDOWN (3) Event Loop: Built in System.Windows.Forms.Application Class: static Run( ) method starts an application’s event loop. .NET EDP Classes

25. (4) Event Mapping / Registration: System defined ones have their names fixed: e.g. OnPaint(). Other handlers need to be registered to the events with their corresponding delegates by the programmer. e.g. : MyButton.Click += new EventHandler (OnButtonClicked); The Resource Editor will do this automatically when the programmer double-clicks on a button. (5) Event Dispatching: Built in: HW->OS->Active Application->Event Object-> Delegate:Invoke->Handlers.. .NET EDP Classes

26. (6) Event Handlers: Programmers’ work. void HandlerName (Object sender, EventArgs e) //sender can be omitted. HandlerName = “On”“EventName” e.g. OnKeyDown(Object sender, EventArgs e); .NET based GUI EDP: • Identify needed GUI items; code or visually design GUI. • Identify related event; register event handlers with the events via their delegates. • Implement event handlers. .NET EDP Classes

27. Mouse and Keyboard Events/Handlers

28. Mouse and Keyboard Events/Handlers

29. WM_KEYDOWN protected override void OnKeyDown (KeyEventArgs e) { // from the form      if (e.KeyCode == Keys.F1) // Function key F1 was pressed { … } } • WM_CHARprotected override void OnKeyPress (KeyPressEventArgs e) {     if  (e.KeyChar == 'C') { … } // Do something } Mouse and Keyboard Events/Handlers

30. Other Form-Level Events

31. // Create a MainMenu object MainMenu menu = new MainMenu (); // Add a File menu and populate it with items MenuItem item = menu.MenuItems.Add ("&File"); item.MenuItems.Add ("&New", new EventHandler (OnFileNew)); item.MenuItems.Add ("&Open...", new EventHandler (OnFileOpen)); // Add an Edit menu and populate it, too item = menu.MenuItems.Add ("&Edit"); item.MenuItems.Add ("Cu&t", new EventHandler (OnEditCut)); Processing Menu Commands void HandlerName (Object sender, EventArgs e) Main Menus: top-level menu.

32. Context Menus: pop up context menus ContextMenu menu = new ContextMenu (); menu.MenuItems.Add ("&Open", new EventHandler (OnOpen)); menu.MenuItems.Add ("&Rename", new EventHandler (OnRename)); menu.MenuItems.Add ("&Delete", new EventHandler (OnDelete)); menu.Show (this, new Point (x, y)); Menu Item States: item.Checked = true; Context Menus

33. Shortcut keys: key combinations to directly invoke a command e.g. Control O to open a file item.MenuItems.Add (new MenuItem ("&Open...", new EventHandler (OnFileOpen), Shortcut.CtrlO)); http://www.computerhope.com/shortcut.htm • Keyboard Accelerators: to help accessing a menu item without using the mouse. An accelerator key related to a menu item is preceded with an “&” and is displayed underlined. e.g. Alt F to access the File menus, then O to open a file item.MenuItems.Add (new MenuItem ("&Open...", new EventHandler (OnFileOpen), Shortcut.CtrlO)); Microsoft defines Keyboard Accelerators the same as Shortcuts. http://msdn.microsoft.com/en-us/library/ms645526(VS.85).aspx Shortcuts and Accelerators

34. .NET Drawing Classes: in System.Drawing. • Graphics Device Interface (GDI) software to interface with the graphics hardware. • GDI+ Graphics Primitives (System.Drawing.Drawing2D): Bitmap, Font, HatchBrush, LinearGradientBrush, Pen, SolidBrush, TextureBrush, DrawArc, DrawCurve, DrawEllipse, DrawIcon, DrawImage, DrawLine, DrawPie, DrawPolygon, DrawString, FillEllipse, FillPie, FillPolygon, FillRectangle. Drawing in .NET

35. GDI+ : stateless, a form passes parameters detailing output characteristics to every Graphics method it calls. For (stateless) Internet use. • Old Windows GDI: stateful, drawing parameters are stored as state variables in the GDI’s device context. Example: DialogDemo.cs – OnPaint(PaintEventArgs e) Dispose your GDI+ Objects to avoid running out of GDI+ resourses. e.g. brush.Dispose(); Drawing in .NET cont.

36. DirectX: Direct3D, DirectMusic, DirectSound. Xbox (based on DirectX): Video Game XNA (Xbox New Architecture, XNA is Not an Acronym): Video Game development and management • WPF: Windows Presentation Foundation • Introduced in .NET 3.0 • Based on DirectX, not GDI • 2D and 3D GDI and Beyond

37. GUI-based windows application development: GUI-based programming. forms and controls, look and feel EDP events and handlers GDI Summary