Algoritme Pemrograman

Graphical User Inteface (GUI)

Tim TPB Alpro

1
Graphical User Interfaces

Concept:

A graphical user interface allows the user to

interact with the operating system and other
programs using graphical elements such as
icons, buttons, and dialog boxes.

12-2
Graphical User Interfaces
A computer’s user interface is the part of the computer that the
user interacts with
User interface consists of
• Hardware devices
• Commands from the user the operating system accepts
Command line interface displays a prompt and the user
types a command which is then executed

Figure 12-1 A command line interface

12-3
Graphical User Interfaces

• The key ideas of graphical user interfaces (on-screen windows, icons,

menus, buttons etc, and a pointing device (mouse)) were developed at
Xerox PARC during the late 1970s.
• These ideas were adopted by Apple, first in the Lisa (1983) and then in the
popular Macintosh (1984). In 1985, Microsoft introduced Windows, first as
an application and later as an operating system.
• Python makes it very easy to implement simple GUIs, so we will look at the
main points.

12-4
Graphical User Interfaces

A graphical user interface (GUI) allows the user to interact with the
operating system and other programs through graphical elements
(icons, buttons, slider bars, etc.) on the screen.

• GUIs popularized the use of the mouse.

• GUIs allow the user to point at graphical elements and click the
mouse button to activate them.

12-5
Graphical User Interfaces
Interaction with a GUI is done through dialog boxes – small
windows that display information and allow the user to perform
actions

Figure 12-2 A dialog box

12-6
Graphical User Interfaces
GUI Programs Are Event-Driven
User determines the order in which things happen
GUI programs respond to the actions of the user, thus
they are event driven.

Figure 12-3 A GUI program

12-7
Event-driven programming
• GUI applications use a style of programming called event-driven. Events
are mouse movements, mouse clicks, key presses, and many higher-
level events constructed from these.
• (For example, clicking the mouse while the pointer is over a button
generates a button press event).
• Some events are handled completely within the main loop provided by
Tkinter.
• (For example, mouse movements are used to update the position of the
pointer on the screen; clicking the minimize button of the window has the
usual effect.)

8
Python - GUI Programming
Python provides various options for developing graphical user interfaces (GUIs). Most important are
listed below:
• Tkinter: Tkinter is the Python interface to the Tk GUI toolkit shipped with Python. We would look
this option in this tutorial.
• Qt (pyQt)
• wxPython: This is an open-source Python interface for wxWindows http://wxpython.org.
• JPython: JPython is a Python port for Java, which gives Python scripts seamless access to Java class
libraries on the local machine http://www.jython.org.
Tkinter Programming
• Tkinter is the standard GUI library for Python. Python when combined
with Tkinter provides a fast and easy way to create GUI applications.
Tkinter provides a powerful object-oriented interface to the Tk GUI
toolkit.
• Creating a GUI application using Tkinter is an easy task. All you need
to do is perform the following steps −
• Import the Tkinter module.
• Create the GUI application main window.
• Add one or more of the above-mentioned widgets to the GUI application.
• Enter the main event loop to take action against each event triggered by the
user.
Using Tkinter in python
• Example
Tkinter Widgets
• Tkinter provides various controls, such as buttons, labels and text
boxes used in a GUI application. These controls are commonly called
widgets.
• There are currently 15 types of widgets in Tkinter. We present these
widgets as well as a brief description in the following table −
Tkinter Widgets
Operator Description
Button The Button widget is used to display buttons in your application.
Canvas The Canvas widget is used to draw shapes, such as lines, ovals, polygons and rectangles, in
your application.

Checkbutton The Checkbutton widget is used to display a number of options as checkboxes. The user can
select multiple options at a time.

Entry The Entry widget is used to display a single-line text field for accepting values from a user.

Frame The Frame widget is used as a container widget to organize other widgets.
Label The Label widget is used to provide a single-line caption for other widgets. It can also contain
images.

Listbox The Listbox widget is used to provide a list of options to a user.

Menubutton The Menubutton widget is used to display menus in your application.
Menu The Menu widget is used to provide various commands to a user. These commands are
contained inside Menubutton.
Tkinter Widgets
Operator Description
Message The Message widget is used to display multiline text fields for accepting values from a user.

Radiobutton The Radiobutton widget is used to display a number of options as radio buttons. The user can
select only one option at a time.

Scale The Scale widget is used to provide a slider widget.

Scrollbar The Scrollbar widget is used to add scrolling capability to various widgets, such as list boxes.

Text The Text widget is used to display text in multiple lines.

Toplevel The Toplevel widget is used to provide a separate window container.
Spinbox The Spinbox widget is a variant of the standard Tkinter Entry widget, which can be used to
select from a fixed number of values.

PanedWindow A PanedWindow is a container widget that may contain any number of panes, arranged
horizontally or vertically.

LabelFrame A labelframe is a simple container widget. Its primary purpose is to act as a spacer or
container for complex window layouts.

tkMessageBox This module is used to display message boxes in your applications.

Standard attributes
• Let us take a look at how some of their common attributes.such as
sizes, colors and fonts are specified.
• Dimensions
• Colors
• Fonts
• Anchors
• Relief styles
• Bitmaps
• Cursors
Dimensions
Fonts
Relief Styles
Geometry Management
• All Tkinter widgets have access to specific geometry management
methods, which have the purpose of organizing widgets throughout
the parent widget area. Tkinter exposes the following geometry
manager classes: pack, grid, and place.
• The pack() Method - This geometry manager organizes widgets in blocks
before placing them in the parent widget.
• The grid() Method - This geometry manager organizes widgets in a table-like
structure in the parent widget.
• The place() Method -This geometry manager organizes widgets by placing
them in a specific position in the parent widget.
Designing a GUI
Let's go for a layout along the following lines:

text entry area

label for result Check Quit

20