Name: CARAGAY, JOHN RUSSELL A.

Section:
Date Submitted: Date Performed:

Finals Laboratory Exercise No. 1

Tkinter GUI

1. Objective(s):

The activity aims to introduce and to create a program using Graphical User Interface

2. Intended Learning Outcomes (ILOs):

The students shall be able to:

 Create a graphical user interface using tkinter in anaconda
 Design a graphical user interface in python
 Create a program using the components button and textbox.

3. Resources:

1 Desktop Computer
Anaconda / IDLE Python

4. Discussion

Tkinter is the Python interface for Tk. Tkinter is an acronym for "Tk interface".

Tk was developed as a GUI extension for the Tcl scripting language by John Ousterhout. The first release
was in 1991. Tk proved as extremely successful in the 1990's, because it is easier to learn and to use than
other toolkits. So it is no wonder that many programmers wanted to use Tk independently of Tcl. That's why
bindings for lots of other programming languages have been developed, including Perl, Ada (called TASH),
Python (called Tkinter), Ruby, and Common Lisp.

Tk provides the following widgets:

 button
 canvas
 checkbutton
 combobox
 entry
 frame
 label
  labelframe
 listbox
 menu
 menubutton
 message
 notebook
 tk_optionMenu
 panedwindow
 progressbar
 radiobutton
 scale
 scrollbar
 separator
 sizegrip
 spinbox
 text
 treeview

Tk/Tcl has long been an integral part of Python. It provides a robust and platform independent
windowing toolkit, that is available to Python programmers using the tkinter package, and its extension,
the tkinter.tix and the tkinter.ttk modules.

The tkinter package (“Tk interface”) is the standard Python interface to the Tk GUI toolkit. Both Tk
and tkinter are available on most Unix platforms, as well as on Windows systems. (Tk itself is not part of
Python; it is maintained at ActiveState.)

5. Procedure
1. Start with Tkinter

Usually, to use Tkinter all you need is a simple import statement:

import tkinter
Or, more often:

from tkinter import *

Type in the program then run

Blank Tk window will appear:

Changing the title of the result program

Add this code to your script: root.title("First Program")

root.title("My Do-Nothing Application")

Size of the Windows Manager:

root.maxsize(1000, 400)
Screenshot:

2. Hello Tkinter Label

We will start our tutorial with one of the easiest widgets of Tk (Tkinter), i.e. a label. A Label is a Tkinter
Widget class, which is used to display text or an image. The label is a widget that the user just views but not
interact with.

The following Python script uses Tkinter to create a window with the text "Hello Tkinter". You can use the
Python interpretor to type this script line after line, or you can save it in a file, for example, "hello.py":

If you run the command under the Gnome and Linux, the window the window will look like this:

Under Windows it appears in the Windows look and feel:

Explanation:

The tkinter module, containing the Tk toolkit, has always to be imported. In our example, we imported
tkinter which is the preferred way to do it:
from tkinter import *
To initialize tkinter, we have to create a Tk root widget, which is a window with a title bar and other
decoration provided by the window manager. The root widget has to be created before any other widgets
and there can only be one root widget.
root = Tk()
The next line of code contains the Label widget. The first parameter of the Label call is the name of the
parent window, in our case "root". So our Label widget is a child of the root widget. The keyword parameter
"text" specifies the text to be shown:
w = Label(root, text="Hello Tkinter!")
The pack method tells Tk to fit the size of the window to the given text.
w.pack()

The window won't appear until we enter the Tkinter event loop:
root.mainloop()
Our script will remain in the event loop until we close the window.

3. Using Image as Label

The following example contains two labels, one with a text and the other one with an image.
If you start this script, it will look like this:

Note: The py.gif image is on the same folder of the script hello.py
Or use the full directory address of the image.

The "justify" parameter can be used to justify a text on the LEFT, RIGHT or CENTER. padx can be used to
add additional horizontal padding around a text label. The default padding is 1 pixel. pady is similar for
vertical padding. The previous example without justify (default is centre) and padx looks like this:

PROBLEM #1
Make the text of label justified CENTER. Screen shot the output and code, paste it below:
(I used jupyter here since it is not working in spyder)

OUTPUT CODE
PROBLEM #2
Make a new python program having one Label name is label1 with text is “Black Text”. Screen shot the
output and code, paste it below:

OUTPUT CODE

4. Styling/ Designing a Label

 Setting Options (Text Color)

Options control things like the color and border width of a widget. Options can be set in three ways:

At object creation time, using keyword arguments

fred = Label(root, text=”Red Text”, fg="red")
After object creation, treating the option name like a dictionary index
fred = Label(root, text=”Red Text”)
fred["fg"] = "red"
Use the config() method to update multiple attrs subsequent to object creation
fred = Label(root, text=”Red Text”)
fred.config(fg="red")

 Setting Option (Colorized Labels in various fonts)

Write the script:
If you start this script, it will look like this:

Some Tk widgets, like the label, text, and canvas widget, allow you to specify the fonts used to display text.
This can be achieved by setting the attribute "font". typically via a "font" configuration option. You have to
consider that fonts are one of several areas that are not platform-independent.

The attribute fg can be used to have the text in another colour and the attribute bg can be used to change
the background colour of the label.

Problem#3 Explain what is the script below:

Screenshot:

Explain:
The word “text” shows the input; “bg” is for the background of the text; “fg” is for the color of
the text itself. The function “.pack()” is calling the function itself, then the instructions inside it
makes the design of the output itself. “fill=X” means that the whole x-axis (horizontal) will be
filled with color. “side = LEFT” makes the output on the left side and the “fill = Y” makes the fill
to be putted in the whole Y axis (vertical)

5. Button
 The Button widget is a standard Tkinter widget, which is used for various kinds of buttons. A button is a
widget which is designed for the user to interact with, i.e. if the button is pressed by mouse click some
action might be started. They can also contain text and images like labels.

Code:

Screenshot:

Explain: The word “Button” calls the button widget which makes the user interact with the use of
their mouse by clicking it. “text” outputs what label you want for the button and “fg” is for the
font color that you desire.

A Python function or method can be associated with a button. This function or method will be executed, if
the button is pressed in some way.

The following script defines two buttons: one to quit the application and another one for the action, i.e.
printing the text "Tkinter is easy to use!" on the terminal.
Screenshot:

Explain: Functions were used in order to call and output the desired results if the user clicked a certain
button.

6. SUPPLEMENTAL ACTIVITY

Create a graphical user interface in python for the following:

1. Button if it is click it will change the text from “Click Me” to “ITE 003” and text-color from “Red”
to “Green”

Code:
Output:

2. Button if it is click it will change the text-color from “Red” to “Green” and Label text from “Red
Text” to “Green Text” and text-color from “Red” to “Green”

Code:
Output:

7. Conclusion:
Based from the results of the experiment

This activity helped us to use Tkinter where we used spyder and jupyter in order to run a GUI or graphical user
interface that will surely help us in the future. We knew some of the basics like using the buttons. I know that in the
future we will learn more about how useful it is and apply in our own careers.