1 / 29

Lecture 6: Introduction to Graphical User Interfaces (GUIs)

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

beck-carpenter
Download Presentation

Lecture 6: Introduction to Graphical User Interfaces (GUIs)

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. Lecture 6:Introduction to Graphical User Interfaces (GUIs)

  2. 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: • Event-driven programming • Code-behind • WinForms • Controls (part 1)

  3. Part 1 • Event-driven programming…

  4. 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. 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. Part 2 • Code-behind…

  7. Code-behind • Events are handled by methods that live behind GUI • our job is to program these methods…

  8. 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. Step 1 • Create a new project of type “Windows Application” • a form will be created for you automatically…

  10. 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. GUI design cont’d… • A simple calculator: • Position and configure controls • click to select • set properties via Properties window (F4)

  12. Step 3 — code • “Code behind” the form… • Double-click the control you want to program • reveals coding window & event handler formost commonly programmed event…

  13. Step 4 — run! • Run (F5)…

  14. Part 3 • WinForms…

  15. 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. 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. 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(…) { }

  18. 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"); this.textBox1.set_Text("0"); }

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

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

  21. Part 4 • Controls…

  22. Controls • User-interface objects on the form: • labels • buttons • text boxes • menus • list & combo boxes • option buttons • check boxes • etc.

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

  26. Text boxes • Most commonly used control! • for displaying text • for data entry • Lots of interesting features…

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

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

More Related