Graphical User Interfaces

(GUI) Programming
Introduction
• A graphical user interface (GUI) allows a user to
interact visually with a program.
• GUIs are built from GUI controls (which are
sometimes called components or widgets—short for
window gadgets).
• GUI controls are objects that can display information
on the screen or enable users to interact with an app
via the mouse, keyboard or some other form of input
(such as voice commands).
Windows Form
• Windows Forms is one library
that can be used to create
GUIs.
• A Form is a graphical element
that appears on your
computer’s desktop; it can be
a dialog, a window or an MDI
window (multiple document
interface window)
• Windows Form can be
viewed in the left side
picture.
Controls
• A control consist components which
is used to design the interface of
Apps.
• The real strength of using C# for
Windows applications lies in the
number of controls that you can add
to your applications.
• The System.Windows.Forms
namespace includes many classes
that you can add to your form
representing controls with names
such as Button, Label, TextBox,
ComboBox, MainMenu, ListBox,
CheckBox, PictureBox, MenuStrip,
RadioButton, and MonthCalendar.
Label
• As the name implies, Label
• The actual text caption that
appears on the Label control object
is placed there using the Text
property.The TextAlign property
enables you to position the caption
within the label control area.The
Label object can be programmed to
be visible based on run time
dynamics using the Visible
property.By default, the Visible
property is set to true.
objects are normally used
to provide descriptive text
or labels for another
control. They can also be
used to display information
at run time. Using Visual
Studio, you can drag and
drop the Label object onto
your form.After it is added,
you can set its properties to
customize it for your
application.
Textbox
• The TextBox control object,
can be used to enter data or
display text during run time.
• This is the probably the most
commonly used control
because it can be used for
both input and output.
• Like most other objects of
the Control class, the Text
property is used to get or set
the string value in the
control.
 Button
• Button objects are added to
your form to increase
functionality.
• They enable a user to click a
button to perform a specific
task.When it is clicked by a user,
the event-andler method is
automatically called up—if the
button has an event-handler
method—and is registered as an
event to which your program is
In addition to Labels, Textbox, Buttons planning to respond.
You can also use other control tools in • You place code in the event-
the Toolbox such as ComboBox, handler method to perform any
action you choose.
RadioButton, PictureBox, CheckBox,
and others, according to your
Application needs.
Control Properties and Method
Properties
• The Properties
window is used to
view and change the
design time properties
and events
of an object.
Control Properties and Layout
• This section overviews properties that are
common to many controls. Controls derive
from class Control (namespace
System.Windows.Forms).
Event
• Normally, a user interacts with an app’s GUI to indicate the
tasks that the app should perform.
• For example, when you write an e-mail in an e-mail app,
clicking the Send button tells the app to send the e-mail to
the specified e-mail addresses. GUIs are event driven.
• When the user interacts with a GUI component, the
interaction—known as an event—drives the program to
perform a task.
• Common events (user interactions) that might cause
an app to perform a task include clicking a Button, typing
in a TextBox, selecting an item from a menu, closing a
window and moving the mouse.
Event Handling
• Event can be done by
double-clicking on the
actual Button object in the
Form Designer.
• Another option is to display
all the events using the
lightning bolt on the
Properties window and
then double-click on the
Click event.
• Example of event by clicking the button
Enjoy With GUI
First Application
• Starting the program
Select FILE > New
Project… or click the
New Project… link on
the Start Page, the New
Project dialog will
displays.
New Project for GUI Apps
Designing the form
• To start designing the
program interface, select
one of the tools in the Label and
toolbox then click on the Textbox are
Form and drag from top designed with
to bottom diagonally. It mouse (click
also can be set by and drug)
selecting the tools (label,
textbox, button, etc) and
clicking on the Form
area.
Control (tools) and Properties
• Font : Time New Roman, 15 pt, Italic
• BackColor : Green
• Forecolor : Red
• Text : Application

NOTE:
All control can be canged their
property in Properties Tools
Case Study :
Bonus Calculator
• An electronics distributor employs a
marketing employee. The employee is given a
basic wage of 1000000. The employee will get
15% bonus from the sale. Make an Application
with C # language using MS Visual Studio 2010
to calculate the total salary of the company's
marketing employees.
Variable Identification
• Basic Wage : Double
• Bonus : Double
• Total Wage : Double
Tabel Of Tool Usage
Interface Design
• Basic Interface • Ready Interface
Scripting
• Scripting is a term where a • Event dengan metode
programmer writes the source
code to make an application
Klik biasanya diterapkan
work according to the pada tombol "Button".
programmer's request that has Untuk itu, Klik tombol
designed the program. "Compute".
• Untuk menulis kode sumber
(kode program), programmer
harus menentukan event yang
diinginkan. Dalam contoh kali
ini, event yang digunakan
adalah Event dengan methode
Klik.
Event and Methode
• Metode Click yang diberikan • Methode, bisa saja dalam
untuk tombol "Cumpute." bentuk Click, Press,
• Metode Click tersebut diterapkan Change, Move, Drag, dan
kepada kotak "Total Wages."
Dimana kotak "Total Wages" akan
metode lainnya.
menampilkan Event apa. • To write the code, click
• Kira-kira maksudnya begini, Apa the "Compute" button.
yang terjadi pada kotak "Total
Wages" jika tombol "Compute" di
tekan (Click) melalui Mouse.
• Keadaan inilah yang disebut
dengan "Event". Yaitu apa yang
terjadi pada suatu objek jika
suatu "Methode" diterapkan
pada suatu Objek tertentu.
 Button1_Click

Meaning the button with the name "button1" applies

the method "Click." So when the button that
implements this method is applied then the command
code inside block will perform something according to
the command code written.
“Compute” Button
• "Compute" button is formulated to accounting
between inpu box of "Basic Wage" and "Sales
Bonus" By using methode "Click."
• The output of calculation between both of
those button is focused to output box "Total
Wages“ Using formulation of variables which
replace the role both of "Basic Wage" and
"Sales Bonus" box.
Program code “Compute”

• Please you see to the source code in the figur.

Formalation tw = bw + sb where variable of tw
will store result the calculation both of bw and
sb variables.
• Within the implementing, the variable of bw
replace the txtBasicWage, sb for txtSalesBonus
and tw for txtTotalSales. They take the type of
Double.
 Property Setting

Step 3 : Coding

Step 2 : Property Setting

Step 1 : Designing
Coding
So whatever is set as
the property name, it is
used in coding.
“Clear Form” Button
• "Clear Form" button is designed to erase the
form. It is also take "Click" methode like
"Compute" button. When that button is
clicked so all boxes will clear.
• The basic code for erasing the form such as
following script (see to the Figur).
TextChanged Event Handling
• "Event Handling" is indentical with Methode.
• Methode is styles of "Event Handling." What it is
based on methode Click, methode Press
(Keyboard), Moving Focus through Mouse or
Keyboard and many other methode which
provided on Microsoft Visual Studio C# (2010).
• TextChanged is methode where an object will
perform something depend on a command
written.
Advanced..
• In this example the methode will apply to
"Sales Bonus" box. Where it is display output
requested.

The methode means if the "txtBasicWage" is

typed so formulation bs * 0.15 will compute for
sb variable. Where variable of sb will store the
result and display it to the “txtSalesBonus”.
TextChanged Methode
Implementation

When the "Basic Wage" is

typed and the Sales
Bonus display the result
calculation.
Compute by Click Methode

When the "Compute"

button is clicked and
the "Total Wages"
display the result
calculation betweet
both of "Basic Wage"
and "Sales Bonus."
Clear Form by Click Methode

When the "Clear Form"

button is clicked and all
boxes becoming clear.
Group Discussion
• A software developer company employ an employee in a
project for online transfortation corporation. The employee is
paid in Dolar of USA and if he written program code out of
minimum line which determined he will get a reward 10%
from basic salary $230 within 14 days. The company sets limit
of minimum line of program code is 500 lines, while he has
written until 697 lines. The appointed working hours are from
9 am to 17 pm, if he work overtime it will be paid $2.5 dolars
per hours. To complete the project he has spent of time
approximately 9300 minuts.

• Based on the case above design A program to compute the

salary of the employee. Add time object to calculate The
Working hours.
Learning Outcomes
• After learn in this topic the student will be
able to :
 Proficient in GUI Objects usage
 Using the objects of Label, Textbox, Button,
Times to designing The Windows Apps.
 Implementing several methode of "event
handling“
 Implementing Arithmatic Operator
 Methode / Function Convert
The rule of discussion
• Present the case study next meeting. Each
member of group discussion have to involve in
the process. Presentation must consist such as
following matters :
 Slide of Concept
 Demo of program
 Paper of slide or file which is shared to other group
one day before meeting.
 Paper or slide file shared hope read at home to
explor and to attract questions.
 Paper of slide or file are also one of effort to
anticipate from the death of electrict.
Appendix
Advanced..
• Acknowledgment
The program that described in
the slides above is a simple
example program, I believe you
can complete the program with
best concept algorithm and
design, and also the best
program performance.
Thankyou