9
Introduction to
Windows
Programming
C# Programming: From Problem Analysis to Program Design
3rd Edition
C# Programming: From Problem Analysis to Program Design
1
COS240 O-O Languages
AUBG, COS dept
Lecture 33
Title:
C# vs. Java
(GUI Programming)
Reference: COS240 Syllabus
Lecture Contents:
• Contrasting Windows and Console
Applications
• Graphical User Interfaces
• Using C# & Visual Studio to Create
Windows based Applications
• Windows Forms
• Controls
Contrasting Windows and Console
Applications
• Console applications
– Each line in Main( ) method executed sequentially –
then the program halts
– Method calls might branch to different locations in the
program, however control always returns back to Main
– Program initiates interaction with the user by calling the
OS to get data using ReadLine() method
– Program calls OS to output data through method calls
like WriteLine() or Write()
• Console applications run IPO model of
computing process
Contrasting Windows and Console
Applications
• Windows applications
– Instead of the program executing sequential
statements from top to bottom, the application,
once launched, sits in what is called a process
loop and waits for an event
– Sits in a process loop, waiting for event to
execute
• Windows applications run Event-driven
model of a computing process
Contrasting Windows and Console
Applications
• Event: notification from OS that an action,
such as the user clicking the mouse or the user
pressing a key, has occurred
• Instead of calling the OS with IO request as
console applications, Windows applications
receive messages from OS that event has
occurred
• It is must to write methods, called Event
Handlers to indicate what should be done
when an event occurs
Graphical User Interfaces
• Windows applications also look different
from console applications
• User Interface: front end of a program
– Visual image you see when you run a program
– Algorithmic functionality stays behind GUI
– Often users of programs actually identify the
interface of the program itself, when in reality,
the interface is just one facet of the program.
– Algorithmic complexity is hidden behind GUI.
Graphical User Interfaces
• Graphical user interface (GUI) includes:
– Menus, labels, text boxes, list boxes,
– Other controls (pictures, buttons, etc.)
– Text in many different colors and sizes
• Controls are objects that can display and
respond to user interaction.
• Controls are placed in a container, called
form, which is an object as well. It is
instance of a class derived from predefined
class Form
Windows Applications
• Reference and import
System.Windows.Forms namespace
• Class heading definition
– Includes not only the class name, but a colon
followed by another class name
• Derived class (first class)
• Colon ( : ) – delimiter, separator
• Base class (second class)
• public class Form1 : Form
• Derived classes inherit from base class
C# Programming: From Problem Analysis to Program Design
9
Windows Applications (continued)
• Text
– A property for setting/getting title bar caption
– Can be used in constructor
• Windows forms/controls offer many properties
including Text, Color, Font, and Location
• Execution begins in Main( ) method
– Main( ) is located in Program.cs file for the application
– Call to Run( ) method places application in process
loop
C# Programming: From Problem Analysis to Program Design
10
// Windows0.cs
Author: Doyle
using System.Windows.Forms;
// Line 1
New
namespace Windows0
namespace
referenced
{
Base class
public class Form1 : Form
// Line 2
{
Constructor
public Form1( )
// Line 3
{
Text = "Simple Windows Application"; // Line 4
Sets
}
title bar
caption
static void Main( )
{
Form1 winForm = new Form1( );
// Line 5
Application.Run(winForm);
// Line 6
}
Starts
process
}
loop
}
C# Programming:
From Problem Analysis to Program Design
11
Windows Application (continued)
Output
generated
from
Windows0
application
Figure 9-1 Windows-based form
C# Programming: From Problem Analysis to Program Design
12
Elements of Good Design
• Appearance matters
– Human-computer interaction (HCI) research
• Design considerations
–
–
–
–
–
Consistency
Alignment
Avoid clutter
Color
Target audience
C# Programming: From Problem Analysis to Program Design
13
Using C# & Visual Studio to Create
Windows based Applications
• Primitive approach
– Manually create Win based application in C#
using a text editor like Notepad, or Textpad etc
• Professional approach
– Using IDE like MS Visual Studio
– Select File Menu: New >> Project
– Select Visual C#, Windows and Windows
Forms Application from Visual Studio Installed
Templates pane, see next 3 slides
Use Visual Studio to Create
Windows-Based Applications
Select
File
New
Project
Windows
Forms
Application
template
Name
Browse
to
location
to store
your
work
Figure 9-2 Visual Studio New Windows application
C# Programming: From Problem Analysis to Program Design
15
Windows-Based Applications
Properties
Window
Design View
Toolbox
Figure 9-3 Initial design screen
C# Programming: From Problem Analysis to Program Design
16
Windows-Based Applications (continued)
Figure 9-4 Dockable windows
C# Programming: From Problem Analysis to Program Design
17
Windows Based Applications
• MS VS automatically generates code to create a
blank Windows Form object. The IDE opens the
Form Designer pane showing the form
• If you see Code Editor pane instead, you press
Shift+F7 to view Designer. F7 reveals Code Editor
• Other panes used at application design time:
Toolbox, Solution Explorer, Properties
• Other panes used at application run time: Error List
pane and Output pane
• Pushpin icon and dockable panes (auto hide state)
Windows Based Applications
• How to run Windows based application?
• Like console applications
– Select from Debug menu
• Start Debugging (shortcut F5)
• Or
• Start Without Debugging (Ctrl+F5)
Windows Based Applications
• Task: create a new project named
pureFCLForm to display a pure empty
form
• Build the solution
• Run the application
Windows Forms
• Extensive collection of Control classes
• Top-level window for an application is called a
Form
• Each control has large collection of properties and
methods
– Select property from an alphabetized list
(Properties window)
– Change property by clicking in the box and
selecting or typing the new entry
C# Programming: From Problem Analysis to Program Design
21
Windows Form Properties
Property value
Properties
Figure 9-5 Properties window
C# Programming: From Problem Analysis to Program Design
22
Windows Form Properties
(continued)
C# Programming: From Problem Analysis to Program Design
23
Windows Forms
• Task: Modify the PureFCLForm application
• Find appropriate property and type a new value
–
–
–
–
–
Change the following Form properties:
Text
BackColor
Size
FormBorderStyle
Windows Form Events
• Add code to respond to events, like button clicks
• From the Properties window, select the lightning
bolt (Events)
– Double-click on the event name to generate code
• Registers the event as being of interest
• Adds a heading for event-handler method
C# Programming: From Problem Analysis to Program Design
25
Windows Form Properties (continued)
Events
button
selected
Figure 9-6 Form1 events
C# Programming: From Problem Analysis to Program Design
26
Windows Form – Closing Event
• Code automatically added to register event
this.Closing += new System.ComponentModel.CancelEventHandler
(this.Form1_Closing);
• Code automatically added for method heading
private void Form1_Closing(object sender,
System.ComponentModel.CancelEventArgs e)
{
}
• You add statement to event-handler method body
MessageBox.Show("Hope you are having fun!");
C# Programming: From Problem Analysis to Program Design
27
Windows Forms
• Task: Modify the PureFCLForm application
• Write your user reaction (fill the body of
corresponding event handlers with C# statements) in
order to process the following events associated with
the form:
– Load form event
– Mouse entering form event
• For example, type a statement like
MessageBox.Show("Message at form loading time");
MessageBox.Show("Message at mouse entering form");
Simple Windows Application
• IDE separates the source code into three separate
files
– Form1.cs: normally this is the only one you edit
– Form1.Designer.cs: holds the auto generated code
– Program.cs: contains the Main( ) method, where
execution always begins
• Form1.cs and Form1.Designer.cs both include
partial class definitions for the Form1 class
C# Programming: From Problem Analysis to Program Design
29
Windows Form Events (continued)
Expand Form1.cs
node to reveal the
Form1.Designer.cs
file
Figure 9-7 Solution Explorer window
C# Programming: From Problem Analysis to Program Design
30
Controls
• Controls are all classes
– Button, Label, TextBox, ComboBox, MainMenu,
ListBox, CheckBox, PictureBox, MenuStrip,
RadioButton, and MonthCalendar
• Each comes with its own predefined properties
and methods
• Each fires events
• Each is derived from the
System.Windows.Forms.Control class
C# Programming: From Problem Analysis to Program Design
31
Controls (continued)
Dots
indicate
other
classes
are
derived
from the
class
Figure 9-9 Control class hierarchy
C# Programming: From Problem Analysis to Program Design
32
Standard Controls
Figure 9-10 Windows Forms controls
C# Programming: From Problem Analysis to Program Design
33
Controls (continued)
• Two procedures to place controls
– From Toolbox, double-click on control or drag and
drop
• Move, resize, and delete controls
• Format controls
– Align controls
– Make same size
– Horizontal and vertical spacing
C# Programming: From Problem Analysis to Program Design
34
Properties of the Control Class
C# Programming: From Problem Analysis to Program Design
35
Methods of the Control Class
C# Programming: From Problem Analysis to Program Design
36
Controls (continued)
Figure 9-11 GUI controls
C# Programming: From Problem Analysis to Program Design
37
Label Objects
• Provide descriptive text or labels for other controls
• Instantiate object
Label labelName = new Label( );
• Add control to Form
this.Controls.Add(labelName);
• Set property values (some from Control class)
– Text; TextAlign; Font; Location
C# Programming: From Problem Analysis to Program Design
38
Creating a TaxApp
Properties set for the Form
container
C# Programming: From Problem Analysis to Program Design
39
Creating a TaxApp Form
Add
Label
objects to
Form
object,
then
format
Figure 9-12 Formatting Label objects
C# Programming: From Problem Analysis to Program Design
40
Adding Labels to TaxApp Form
Add Label objects, then set
their properties using the
Properties window
(View Properties window)
C# Programming: From Problem Analysis to Program Design
41
TextBox Objects
• Used to enter data or display text during run time
– Used for both input and output
• Instantiate object
TextBox textBoxName = new TextBox( );
• Add control to Form
this.Controls.Add(TextBoxName);
• Interesting properties
– MultiLine, ScrollBars, MaxLength, PasswordChar,
CharacterCasing
C# Programming: From Problem Analysis to Program Design
42
TextBox Objects (continued)
C# Programming: From Problem Analysis to Program Design
43
Adding TextBox Objects to
TaxApp Form
Add TextBox objects,
then set their property
values
C# Programming: From Problem Analysis to Program Design
44
Button
• Enables user to click button to perform task
– If button has event-handler method and is registered as
an event to which your program is planning to respond,
event-handler method is called automatically when
button clicked
• Button object’s properties, methods, and events
– Inherits from Control (Table 9-2 & 9-3)
• Text, Enabled, Focused, TabIndex
C# Programming: From Problem Analysis to Program Design
45
Adding Button Objects to
TaxApp Form
Add Button objects,
then set their property
values
C# Programming: From Problem Analysis to Program Design
46
Adding Button
Objects to
TaxApp Form
(continued)
Figure 9-14 Events
C# Programming: From Problem Analysis to Program Design
47
Adding Button Objects to
TaxApp Form (continued)
•When you double-click on event, an event-handler
method is created:
private void btnCompute_Click(object sender, System.EventArgs e)
{
}
•AND registers click event:
this.btnCompute.Click +=
new System.EventHandler
(this.btnCompute_Click);
C# Programming: From Problem Analysis to Program Design
48
Adding Button Objects to
TaxApp Form (continued)
private void btnCompute_Click(object sender, System.EventArgs e)
{ string inValue;
double purchaseAmt, percent, ans;
inValue = txtPurchase.Text;
purchaseAmt = Int32.Parse(inValue);
inValue = label5.Text; //inValue previously declared as string
inValue = inValue.Remove(inValue.Length-1, 1);
percent = double.Parse(inValue) / 100;
percent =
(double.Parse(label5.Text.Remove(label5.Text.Length-1,1))) / 100;
ans = (purchaseAmt * percent) + purchaseAmt;
txtTotalDue.Text =
String.Format("{0:C}",ans).ToString();
C# Programming:
From Problem Analysis to Program Design
49
}
TaxApp Form
Figure 9-15 Tax calculator output
C# Programming: From Problem Analysis to Program Design
50
Tasks
• Windows Based Application
• Start from scratch and develop your own version
of the TAX CALCULATOR program
Tasks
• Windows Based Application
• Start from scratch and develop your own program
• Input: separate text box for each one of your
names
• Output: text box or label or both to display all
your names concatenated to one string.
Tasks
• Windows Based Application
• Start from scratch and develop your own program
• Input: separate text box to enter two numeric
values
• Output: text boxes to display result of addition,
subtraction, multiplication and division of the
input values.
Tasks
• Windows Based Application
• Start from scratch and develop your own
CURRENCY CONVERTER program
• GUI design on your choice.
Tasks
• Windows Based Application
• Start from scratch and develop your own
LINEAR EQUATION SOLVER program
• GUI design on your choice.
Coding Standards
• Guidelines for Naming Controls
– Consistency
– Use appropriate prefix for controls
C# Programming: From Problem Analysis to Program Design
56
Thank You
For
Your attention