Transcript 5. Introduction to Graphical User Interfaces (GUIs)

Lecture 6:
Introduction to Graphical User
Interfaces (GUIs)
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)
Introducing
Microsoft
J#
in Visual Studio
CS using
.NET
.NET
6-2
Part 1
• Event-driven programming…
Introducing
Microsoft
J#
in Visual Studio
CS using
.NET
.NET
6-3
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
Introducing
Microsoft
J#
in Visual Studio
CS using
.NET
.NET
6-4
Event-driven applications
• Idea is very simple:
– individual user actions are translated into “events”
– events are passed, 1 by 1, to application for processing
GUI App
– main program loop? Written for us to route events to objects…
Introducing
Microsoft
J#
in Visual Studio
CS using
.NET
.NET
6-5
Part 2
• Code-behind…
Introducing
Microsoft
J#
in Visual Studio
CS using
.NET
.NET
6-6
Code-behind
• Events are handled by methods that live behind GUI
– our job is to program these methods…
Introducing
Microsoft
J#
in Visual Studio
CS using
.NET
.NET
6-7
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…
Introducing
Microsoft
J#
in Visual Studio
CS using
.NET
.NET
6-8
Step 1
• Create a new project of type “Windows Application”
– a form will be created for you automatically…
Introducing
Microsoft
J#
in Visual Studio
CS using
.NET
.NET
6-9
Step 2 — GUI design
• Select desired controls from toolbox…
– hover mouse over toolbox to reveal
– drag-and-drop onto form
– position and resize control
Introducing
Microsoft
J#
in Visual Studio
CS using
.NET
.NET
6-10
GUI design cont’d…
• A simple calculator:
• Position and configure controls
– click to select
– set properties via Properties window (F4)
Introducing
Microsoft
J#
in Visual Studio
CS using
.NET
.NET
6-11
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…
Introducing
Microsoft
J#
in Visual Studio
CS using
.NET
.NET
6-12
Step 4 — run!
• Run (F5)…
Introducing
Microsoft
J#
in Visual Studio
CS using
.NET
.NET
6-13
Part 3
• WinForms…
Introducing
Microsoft
J#
in Visual Studio
CS using
.NET
.NET
6-14
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
Introducing
Microsoft
J#
in Visual Studio
CS using
.NET
.NET
6-15
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
Introducing
Microsoft
J#
in Visual Studio
CS using
.NET
.NET
6-16
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(…)
{
}
Introducing
Microsoft
J#
in Visual Studio
CS using
.NET
.NET
6-17
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");
}
Introducing
Microsoft
J#
in Visual Studio
CS using
.NET
.NET
6-18
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...
}
Introducing
Microsoft
J#
in Visual Studio
CS using
.NET
.NET
6-19
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,
.
if (r == DialogResult.No) // then don't close...
No,
e.set_Cancel(true);
. . .
None,
OK,
Retry,
Yes
}
Introducing
Microsoft
J#
in Visual Studio
CS using
.NET
.NET
6-20
Part 4
• Controls…
Introducing
Microsoft
J#
in Visual Studio
CS using
.NET
.NET
6-21
Controls
• User-interface objects on the form:
–
–
–
–
–
–
–
–
labels
buttons
text boxes
menus
list & combo boxes
option buttons
check boxes
etc.
Introducing
Microsoft
J#
in Visual Studio
CS using
.NET
.NET
6-22
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
Introducing
Microsoft
J#
in Visual Studio
CS using
.NET
.NET
6-23
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
Introducing
Microsoft
J#
in Visual Studio
CS using
.NET
.NET
6-24
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
}
Introducing
Microsoft
J#
in Visual Studio
CS using
.NET
.NET
6-25
Text boxes
• Most commonly used control!
– for displaying text
– for data entry
• Lots of interesting features…
Introducing
Microsoft
J#
in Visual Studio
CS using
.NET
.NET
6-26
Text box events
• Interesting events:
– Enter, Leave:
– KeyPress:
– KeyDown, KeyUp:
– TextChanged:
occurs on change in focus
occurs on ASCII keypress
occurs on any key combination
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
Introducing
Microsoft
J#
in Visual Studio
CS using
.NET
.NET
6-27
Example
• Let's ensure the user enters an integer before adding…
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
– you'll need to do this for both text boxes…
– The first time the exception is thrown there is a delay
Introducing
Microsoft
J#
in Visual Studio
CS using
.NET
.NET
6-28
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
Introducing
Microsoft
J#
in Visual Studio
CS using
.NET
.NET
6-29