1. Lecture 6: Introduction to Graphical User Interfaces (GUIs)

2. 6-2 MicrosoftIntroducing CS using.NETJ# in Visual Studio.NET Objectives “With today's modern class libraries and development tools, GUI programming is very intuitive — drag, drop, and code..NET and Visual Studio.NET make GUI programming particularly straightforward. The difference in programming style is learning to give up control of the main program to the system, then sit back and wait for events to occur…” 4 Sections: 1.Event-driven programming 2.Code-behind 3.WinForms 4.Controls (part 1)

3. 6-3 MicrosoftIntroducing CS using.NETJ# in Visual Studio.NET Part 1 Event-driven programming…

4. 6-4 MicrosoftIntroducing CS using.NETJ# in Visual Studio.NET Event-driven programming GUI programming = event-driven programming –responding to events triggered by user's actions –Analogy: baseball game. Everything is setup, waiting for the pitch. Common GUI events: –mouse move –mouse click –mouse double-click –key press –button click –change in focus –window activation

5. 6-5 MicrosoftIntroducing CS using.NETJ# in Visual Studio.NET Event-driven applications Idea is very simple: –individual user actions are translated into “events” –events are passed, 1 by 1, to application for processing –main program loop? Written for us to route events to objects… GUI App

6. 6-6 MicrosoftIntroducing CS using.NETJ# in Visual Studio.NET Part 2 Code-behind…

7. 6-7 MicrosoftIntroducing CS using.NETJ# in Visual Studio.NET Code-behind Events are handled by methods that live behind GUI –our job is to program these methods…

8. 6-8 MicrosoftIntroducing CS using.NETJ# in Visual Studio.NET Example Let's build a simple GUI calculator GUI apps are based on the notion of forms and controls… –form object represents a window –form object contains 0 or more control objects –control objects interact with the user Let's create calculator in a series of steps…

9. 6-9 MicrosoftIntroducing CS using.NETJ# in Visual Studio.NET Step 1 Create a new project of type “Windows Application” –a form will be created for you automatically…

10. 6-10 MicrosoftIntroducing CS using.NETJ# in Visual Studio.NET Step 2 — GUI design Select desired controls from toolbox… –hover mouse over toolbox to reveal –drag-and-drop onto form –position and resize control

11. 6-11 MicrosoftIntroducing CS using.NETJ# in Visual Studio.NET GUI design cont’d… A simple calculator: Position and configure controls –click to select –set properties via Properties window (F4)

12. 6-12 MicrosoftIntroducing CS using.NETJ# in Visual Studio.NET Step 3 — code “Code behind” the form… Double-click the control you want to program –reveals coding window & event handler for most commonly programmed event…

13. 6-13 MicrosoftIntroducing CS using.NETJ# in Visual Studio.NET Step 4 — run! Run (F5)…

14. 6-14 MicrosoftIntroducing CS using.NETJ# in Visual Studio.NET Part 3 WinForms…

15. 6-15 MicrosoftIntroducing CS using.NETJ# in Visual Studio.NET WinForms Another name for traditional, Windows-like GUI applications in.NET –vs. WebForms, which are web-based Based on the.NET Framework Class Library –we are using FxCL classes, not JCL classes –portable to any.NET platform

16. 6-16 MicrosoftIntroducing CS using.NETJ# in Visual Studio.NET Form events Most common events you're likely to program: – Load :occurs just before form is shown for first time. Use to initialize form. – Closing :occurs as form is being closed (ability to cancel) Use to ask user to save changes or not. – Closed :occurs as form is definitely being closed Use to save data before closing. – Resize :occurs after user resizes form Use to rearrange controls. – Click :occurs when user clicks on form's background. Used with right-click for contextual help – KeyPress : occurs when form has focus & user presses key Used for keyboard shortcuts

17. 6-17 MicrosoftIntroducing CS using.NETJ# in Visual Studio.NET How to program Form's events? View form in VS.NET, then click on form to select it Press F4 for properties window, then click on "Lightning bolt”. This gives a list of events. Find event in list, double-click to stub out event handler… private void Form1_Load(…) { } private void Form1_Load(…) { }

18. 6-18 MicrosoftIntroducing CS using.NETJ# in Visual Studio.NET Example #1 Initialize calculator's text fields before form is shown to user –code the form's Load event handler to do this… –Later we will see how to use the sender and event e to customize the behavior of a method. private void Form1_Load(Object sender, System.EventArgs e) { this.textBox1.set_Text("0"); } private void Form1_Load(Object sender, System.EventArgs e) { this.textBox1.set_Text("0"); }

19. 6-19 MicrosoftIntroducing CS using.NETJ# in Visual Studio.NET Example #2 Ask user before closing form –code the form's Closing event handler –this let's us to cancel the closing if we want… private void Form1_Closing(…, System.ComponentModel.CancelEventArgs e) { DialogResult r; r = MessageBox.Show("Do you really want to close?", "Calculator", MessageBoxButtons.YesNo, MessageBoxIcon.Question, MessageBoxDefaultButton.Button1); if (r == DialogResult.No) // then don't close... e.set_Cancel(true); else ; // do nothing, form & thus app will continue closing... } private void Form1_Closing(…, System.ComponentModel.CancelEventArgs e) { DialogResult r; r = MessageBox.Show("Do you really want to close?", "Calculator", MessageBoxButtons.YesNo, MessageBoxIcon.Question, MessageBoxDefaultButton.Button1); if (r == DialogResult.No) // then don't close... e.set_Cancel(true); else ; // do nothing, form & thus app will continue closing... }

20. 6-20 MicrosoftIntroducing CS using.NETJ# in Visual Studio.NET Example #2 (cont..) DialogResult.No Is an element of an enumerated type that gives one of the possible return values: public enum DialogResult { Abort, Cancel, Ignore, No, None, OK, Retry, Yes }. if (r == DialogResult.No) // then don't close... e.set_Cancel(true);.... if (r == DialogResult.No) // then don't close... e.set_Cancel(true);...

21. 6-21 MicrosoftIntroducing CS using.NETJ# in Visual Studio.NET Part 4 Controls…

22. 6-22 MicrosoftIntroducing CS using.NETJ# in Visual Studio.NET Controls User-interface objects on the form: –labels –buttons –text boxes –menus –list & combo boxes –option buttons –check boxes –etc.

23. 6-23 MicrosoftIntroducing CS using.NETJ# in Visual Studio.NET Naming conventions Set control's name via Name property: F4, see (Name) at top A common naming scheme is based on prefixes: – cmdAdd refers to a command button control – txtNumber1 refers to a text box control – lstCustomers refers to a list box control

24. 6-24 MicrosoftIntroducing CS using.NETJ# in Visual Studio.NET Labels For static display of text –used to label other things on the form –used to display read-only results No events Interesting properties: – Text :what user sees – Font :how user sees it

25. 6-25 MicrosoftIntroducing CS using.NETJ# in Visual Studio.NET Command buttons For the user to click & perform a task Interesting properties: – Text :what user sees – Font :how user sees it – Enabled :can it be clicked Interesting events: – Click :occurs when button is "pressed“ –To shutdown use: java.lang.System.exit(1); private void button2_Click(...) { this.Close(); // exit app by closing main form } private void button2_Click(...) { this.Close(); // exit app by closing main form }

26. 6-26 MicrosoftIntroducing CS using.NETJ# in Visual Studio.NET Text boxes Most commonly used control! –for displaying text –for data entry Lots of interesting features…

27. 6-27 MicrosoftIntroducing CS using.NETJ# in Visual Studio.NET Text box events Interesting events: – Enter, Leave :occurs on change in focus – KeyPress :occurs on ASCII keypress – KeyDown, KeyUp :occurs on any key combination – TextChanged :occurs whenever text is modified – Validating and Validated Validating gives you a chance to cancel on invalid input Reminder: select the Properties Window “Lightning Bolt” for events

28. 6-28 MicrosoftIntroducing CS using.NETJ# in Visual Studio.NET Example Let's ensure the user enters an integer before adding… –you'll need to do this for both text boxes… –The first time the exception is thrown there is a delay private void textBox1_Validating(...) { String input; input = this.textBox1.get_Text().trim(); // trim blanks try { Integer.parseInt(input); // is input legal? } catch(Exception ex) { MessageBox.Show("Please enter an integer..."); e.set_Cancel(true); // send focus back so user can fix } } //validating private void textBox1_Validating(...) { String input; input = this.textBox1.get_Text().trim(); // trim blanks try { Integer.parseInt(input); // is input legal? } catch(Exception ex) { MessageBox.Show("Please enter an integer..."); e.set_Cancel(true); // send focus back so user can fix } } //validating

29. 6-29 MicrosoftIntroducing CS using.NETJ# in Visual Studio.NET Summary Event-driven programming is very intuitive for GUI apps WinForms programming is.NET programming –uses.NET Framework Class Library, not Java Class Library Forms are the first step in GUI design –each form represents a window on the screen –form designer enables drag-and-drop GUI construction User interacts primarily with controls on the form –labels, text boxes, buttons, etc. –most GUI programming is control programming