Week4 GUI

Software Engineering
Week 4
Software Engineering
Wk Lecture Practical
1 Introduction Canvas, Assessment Understand the case study.
Software lifecycle Write the user stories.
Design the database and the
2 Work as a group! Agile
software
Plan the work on the UI Review of the software requirements and
Set the version control
and the Use Case diagram. design
Review of the OOP concepts.
3 User Stories Git
4 Plan the work on the user Graphical User Interface. MVC pattern. Coding
stories Retrospective
Check if you are on track.
5 Plan the work on the From UML to C# code
database Create and connect the database to the
application.
6 Plan the current task Testing
7-9 Retrospective. Design patterns More coding.

Plan the current task. Accomplish the quality.
Secure coding.
10 Software Validation and Verification Double check.
No new features.
Software Maintenance.
Enhancements.
11 Software Management.
12 Review Presentation
Learning Outcomes
Become familiar with the Graphical User Interface (GUI)

concepts and principles.
Learn how to separate the back end code from the code
for the GUI.
Graphical User Interface (GUI)
A Graphical User Interface contains graphical elements

such as buttons, text boxes, dialog boxes, etc.
A GUI is used by the user to interact with the program.

Graphical User Interface
Console Interface
Graphical User Interface
The user determines the order of

actions.
Console Interface
The program determines the order of

actions.
The Graphical User Interface programs are Event-Driven

because they respond to external actions.
An event-driven application handles an event that occurs.
Event selection Event handle

A Graphical User Interface is made of GUI controls that are

objects that can display information or enable users to
interact with them.
Form
Text box
Button
Developing GUI in C#
Create a Window Form Application:

1.Open Microsoft Visual Studio or Visual C# Express.
2.Click on File menu, select New, select Project .
Window Forms is a library for creating GUIs.

A Form is a graphical element that appears on the screen:
- a window
- a dialog
- an MDI (multiple document interface) window
A Form is a container for controls and components.
3. Select Visual C#. 5. Select Windows Forms
4. Select Windows Applications
6. Change the Project’s name

7. Change the Solution’s name

8. Change the Location name

9. Press Ok.
Projects and Solutions
Solution
Each Visual C# application is
called a project. A project
consists of several files.
A solution holds one or more
projects.
A new project open
Solution Explorer Window – holds the solution with the

embedded project. It is used to navigate among the projects’
files.
A new project open
Properties Window – used to visualise and change the

control’s properties.
A new project open
Designer Window– used to create an application’s GUI. It

shows the form and allow you to add the desired controls.
A new project open
Toolbox – a window containing the

controls.
A new project open
Control used Properties

A new project open
Control used Events

GUI controls
A component is an instance of a class that implements the

IComponent interface which defines the behaviours that
components must implement.
A control (Button or Label), is a component that has a

graphical representation at runtime.
A Form is a container for controls and components.

GUI controls
The controls are dragged and dropped from the Toolbox onto
the form or a piece of code is written to add them to the form.
The used controls are objects (instances of controls from the

Toolbox).
All controls have a number of:

• properties (what the control has)
• events (what the control does)
In C# all controls are grouped in a hierarchy.

Hierarchy of controls
Hierarchy of
components and
controls in the
System.Windows.Forms
namespace.
http://msdn.microsoft.com/en-us/library/8w7ed3ba
%28v=vs.71%29.aspx
How to handle the controls
An object is created for every control dragged and

dropped on the form.
Where can you see these objects?
How do you make a control to behave as you want?

How to handle the controls
Visual Studio generates code that creates the object

and sets its basic properties for every item dragged
from the Toolbox.
This code is updated when the control or
component’s properties are modified in the IDE.
Removing a control or component from the Form
deletes the corresponding generated code.
The IDE maintains the generated code in a
separate file using partial classes — classes that
are split among multiple files and assembled into
a single class by the compiler.
FileName[Design]
FileName.cs [Design] shows the form with its controls.

Here you drag and drop the controls from the Toolbox.
Use the Properties

window to change
the properties and
name the events
you want to
handle.
FileName
FileName.cs shows that the form inherits

System.Windows.Form.
Here you write the

code for every
event generated
that you want to
handle.
FileName.Designer
FileName.Designer.cs
shows the auto generated
code.
Properties
Most of the controls inherit their properties from their base

class System.Windows.Forms.Control.
Properties
Property Description
Anchor Determines the edges of the container to which the
control is bound and how the control is resized with
its container
Dock Determines which control borders are docked to its
container and how the control is resized with its
container
Enabled = true, if the control can receive input from the user
= false, otherwise
Height/Width The height and width of the control

Properties
Property Description
Name The name used to reference the control in the code.
Parent The parent of the control

TabIndex The number the control has in the tab order of its
container
TabStop = true if the control can be accessed by the Tab key
= false otherwise
Text The text displayed by the control

Visible = true if visible at runtime
= false otherwise
Properties
The control’s properties are listed in the window Properties.

Events
The events generated by the controls on Windows Forms

are usually associated with user actions.
The System.Windows.Forms.Control class defines a number

of common events to all its subclasses.
Events
Event Description
Click Occurs when the control is clicked.
Occurs when the control is double-clicked.

DoubleClick Note: If click event is handled then double-click
doesn’t occur.
DragDrop
DragEnter
Occur during a drag and drop operation.
DragLeave
DragOver
Events
Event Description
KeyDown/ Occur when the key is pressed/released while the
KeyUp control has focus.
KeyPress KeyDown occurs before KeyPressed.
GotFocus
Occurs when a control receives/loses focus.
LostFocus
MouseDown Occurs when the mouse pointer is over a control

MouseUp and a mouse button is pressed/released.
MouseMove Occurs whilst the mouse moves over the control.

Events
The events a control responds to are listed in the window

Properties.
Reading List
Deitel, H., Deitel, P., C# 6 for Programmers, Sixth Edition,

Prentice Hall, 2016
Chapters 14 and 15.
Contains a good description of the Windows Forms.
https://www.homeandlearn.co.uk/csharp/csharp_s1p5.html
Questions

Week4 GUI

Uploaded by

Copyright:

Available Formats

Week4 GUI

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Week4 GUI

Uploaded by

Copyright:

Available Formats

Software Engineering

7-9 Retrospective. Design patterns More coding.

Become familiar with the Graphical User Interface (GUI)

A Graphical User Interface contains graphical elements

A GUI is used by the user to interact with the program.

Graphical User Interface

Graphical User Interface

The user determines the order of

The program determines the order of

The Graphical User Interface programs are Event-Driven

An event-driven application handles an event that occurs.

Event selection Event handle

A Graphical User Interface is made of GUI controls that are

Create a Window Form Application:

Window Forms is a library for creating GUIs.

6. Change the Project’s name

7. Change the Solution’s name

8. Change the Location name

Solution Explorer Window – holds the solution with the

Properties Window – used to visualise and change the

Designer Window– used to create an application’s GUI. It

Toolbox – a window containing the

Control used Properties

Control used Events

A component is an instance of a class that implements the

A control (Button or Label), is a component that has a

A Form is a container for controls and components.

The used controls are objects (instances of controls from the

All controls have a number of:

In C# all controls are grouped in a hierarchy.

An object is created for every control dragged and

How do you make a control to behave as you want?

Visual Studio generates code that creates the object

FileName.cs [Design] shows the form with its controls.

Use the Properties

FileName.cs shows that the form inherits

Here you write the

Most of the controls inherit their properties from their base

Height/Width The height and width of the control

Parent The parent of the control

Text The text displayed by the control

The control’s properties are listed in the window Properties.

The events generated by the controls on Windows Forms

The System.Windows.Forms.Control class defines a number

Occurs when the control is double-clicked.

MouseDown Occurs when the mouse pointer is over a control

MouseMove Occurs whilst the mouse moves over the control.

The events a control responds to are listed in the window

Deitel, H., Deitel, P., C# 6 for Programmers, Sixth Edition,

Chapters 14 and 15.

Contains a good description of the Windows Forms.

You might also like