Module 7: Application Design Principles

Learning Outcomes:
At the end of the lesson, the students are able to:
 Understand the Application Design Principles in Window-Based Applications.
 Implement Menu Bar, Toolbar and Pop-up Menu using Python.
 Display database records using TKinter Treeview.
 Create a User Log-In authentication process.

Introduction
Your application should present its components to the user in a logical and task-organized manner. Menus
should follow a common organization and naming convention to enable users to use the same rules and
practices across the desktop. The following sections outline the Common Desktop Environment application
design and menu structure requirements.

Component Layout Guidelines

When you design the physical organization of the controls within your application, you should use the
following guidelines to ensure that users are presented with a consistent interface throughout the desktop.

Main Window Layout

 Your application should be composed of at least one main window.
 A main window contains a client area and, optionally, a menu bar, a command area, a message
area, and scroll bars. The client area contains the framework of the application. The use of a main
window ensures inter-application consistency.
 The default size of the application's main window must be large enough to accommodate a typical
amount of data, but should not fill the entire physical display size to minimize visual conflicts with
other applications.

Menu Bar Layout

 If your application has a menu bar, it is a horizontal bar at the top edge of the application, just
below the title area of the window frame. A menu bar organizes the most common features of an
application. It contains a list of menu topics in cascading buttons; each button is associated with
a distinct pull-down menu containing commands that are grouped by common functionality. The
use of a menu bar yields consistency across applications.
 A menu bar organizes the most common features of an application. It contains a list of menu topics
in buttons; each button is associated with a distinct pull-down menu containing commands that
 are grouped by common functionality. The use of a menu bar is not required, but it is strongly
recommended.
 There are several common menu operations that should be considered "standard". The standard
menu bar entries are File, Edit, View, Options and Help. If your application provides that
functionality to the user, it should be included in the menu bar under the appropriate name.The
contents of these menu entries are discussed below in more detail.
o Standard menu bar entries should be presented in the following order:
 File Edit View Options Help

Common Menu Types

User actions fall into categories that are similar across a wide range of applications. Your application
should use the following standard menus when possible to enable the user to easily locate desired functionality.
File Menu Contents. These requirements apply only in a left-to-right language environment in an English-
language locale. You need to make the appropriate changes for other locales.
 If your application uses a File menu, it contains the following choices, with the specified
functionality, when the actions are actually supported by your application.
o New
o Open
o Save
 Items should be presented to the user in the order listed below. In all cases where a dialog
is recommended to be displayed to the user, and the dialog has functionality
<Object-type> and Selected Menu Contents. The <object-type> menu contains controls that allow the
user to create instances of the object-type. Both the <object-type> and Selected menus allow the user to
manipulate object instances. Additional items should be added to the <object-type> or Selected menus if
they relate solely to the manipulation of objects managed by the application (as opposed to more generic
services that the application might provide).
 If your application uses an <object-type> menu or a Selected menu, it contains the following
choices, with the specified functionality, when the actions are actually supported by your
application.
o New
o Move to
o Copy to
Edit Menu Contents. These requirements apply only in a left-to-right language environment in an
English-language locale. You must make the appropriate changes for other locales.
 If your application uses an Edit menu, it contains the following choices, with the specified
functionality, when the actions are actually supported by your application:
o Undo
 o Cut
o Copy

View Menu
If your application provides a View menu, it only contains functions that affect the way the current data is
presented. It does not contain any option that alters the data itself.

Options Menu
If your application has global settings that control the way the application behaves, it provides an Options
menu from which these can be set.

Help Menu Contents

These requirements apply only in a left-to-right language environment in an English-language locale. You
must make the appropriate changes for other locales.
 If your application includes a Help menu, it contains the following set of choices, with the
specified functionality, when the actions are actually supported by your application.
o Overview
o Index
o Reference
o Tutorial

Pop-up Menus
Pop-up menus provide access to frequently used functions and should be used pervasively throughout the
Common Desktop Environment desktop environment. A pop-up menu may contain a collection of options that
appear in different menus available from the menu bar. For example, it may contain items from both the File
and Edit menus.
 Your application should provide a pop-up menu for any element that is selectable within its
data pane.
 If your application provides functions that apply to a data pane and not any specific element
therein, then a pop-up menu is provided that contains the frequently used data pane
functions and is accessible by pressing BMenu when the mouse pointer is over the
background of the pane or a nonselectable element within the pane.
Tool Bars
Tool bars are a method used to provide quick access to things that are already user-accessible in an
application by other methods. For example, an application can provide access to frequently used features from
its menus through its tool bar. Some common usages of tool bars are navigation, changing data views, accessing
frequently used tools or editors, simplifying the number of steps to complete a common operation, and
providing a fast path to frequently used menu items.
Design Issues for Tool Bars
 Would the usability of the application be improved by placing these items on the tool bar?
o Tool bars should only be used when they improve or enhance user access to
common operations, such as in an application with several large menus.
 What kinds of operations are being placed on a tool bar? How are they grouped?
o Tool bars should present a natural organization of actions. Grouping items that are
dissimilar can confuse users because they do not expect to find the item they are
looking for in that context.
 Is the tool bar too crowded?
o Placing too many items in the tool bar can cause the user to have to search for the
item they are looking for, rather then being able to quickly find it and use it. Keep
the number of buttons to a minimum so that you don't increase the difficulty of your
application when using a tool bar.
 Are the icons clearly representative of their associated action?
o Cryptic icons add to user confusion. Keep the pixmaps as simple as possible.
Remember that all graphics must be international in scope. When designing a
graphic to represent a command, such as Save, remember that the icon has to
represent a verb, as opposed to a noun like most other icons. This can make the icon
more confusing to users.

Window Titles
 The title of your primary window (the main window your application displays to the user) should
be the name of your application.
 Use initial capital letters for each word in the title (in languages that support capitalization).

Work-in-Progress Feedback
 If any command chosen by the user is expected to take longer than 2 seconds to complete, but less than
10 seconds, your application displays the standard busy pointer as feedback that the command is
executing.
 The user must receive assurance that your application has "heard" the request and is working on it. If
the results of the request cannot be displayed immediately, some feedback must be provided. The busy
cursor should be displayed within 0.5 seconds of execution of the command.
General Application Design Rules
 There is always exactly one control within any window of your application that has the input focus if
the window in which it resides has the input focus.
 If any window within your application has focus, some control within that window must have focus.
The user should not have to explicitly set focus to a control within the window.

Application Installation
Applications should be installed to folders in the Application Manager not directly to the Front Panel or
subpanels. For consistency, only Common Desktop Environment desktop components will install to these
locations. Users may choose to rearrange their Front Panel, but applications should not do this without user
consent.

ACTIVITY 7.1 – WINDOW APPLICATION DESIGN PRINCIPLES

Video Demo:
1. Open project MODULE6_FILES_ICSC106_INITIALS.

2. INSTALL THE FOLLOWING IN THE PROJECT

A. For PyCharm
i. Click File >> Settings >> Extend Project: MODULE6_FILES_ICSC106_INITIALS >> Click
Project Interpreter
ii. Click Plus (+) Sign >> Search for pip >> Double click pip >>Tick Specify Version Check Box
>> Select Version 20.0.2 >> Click Install Package Button.
iii. Go PyCharm Terminal and install the following
a. pip install pillow
b. pip install pillow-PIL
c. pip install mysql-connector-python

B. For Pydroid3
i. Tap Pydroid3 Settings >> Tap Terminal and install the following
a. pip install pillow
b. pip install pillow-PIL
c. pip install mysql-connector-python

3. CREATE IMAGES DIRECTORY AND DOWNLOAD TOOLBAR ICONS

A. Right Click package name MODULE6_FILES_ICSC106_INITIALS and select New >> Directory
>> type images.
B. Search and download a User Icon and User Table Image and resize them using paint to 24 x 24
pixel.
C. Copy the pictures to
C:\Users\[PC_Name]\PycharmProjects\MODULE6_FILES_ICSC106_INITIALS\images

*For Pyroid3 Users: Create an images folder in your project directory and copy the downloaded
images.
4. Right Click package name MODULE6_FILES_ICSC106_INITIALS and select New >> Python File >>
type name frmMain_initials.

5. IMPORT TKINTER LIBRARY AND MYSQL. Type the following codes in frmMain_initials.py

import mysql.connector as connectSQL

from PIL import Image, ImageTk

from tkinter import Tk, Frame, Menu, Button
from tkinter import LEFT, TOP, X, FLAT, RAISED
from tkinter import messagebox

6. CREATE FUNCTION FOR OPENING THE WINDOWS AND POPUP MENU. The Python Files must be
on the same project.

#Open a python gui and must be on the same project

#Open User Information Window
def userInfo():
exec(open("./frmUser_jcb.py").read())

#Open User Table Window

def userTable():
exec(open("./frmUserTable_jcb.py").read())

#Sample method for menu selection

def doNothing():
messagebox.showinfo(title="Menu Clicked", message="A Menu Was Clicked!")

#Display the PopUp Menu

def showMenu(e):
popUpMenu.post(e.x_root, e.y_root)

7. CREATE THE MAIN WINDOW - Provide the following codes after the previous section in
frmMain_initials.py

#Set Root Window

root = Tk()
#To Maximize the Window
root.state('zoomed')
root.title("MAIN MENU")

8. CREATE THE MAIN MENU AND SUB MENUS - Provide the following codes after the previous section
in frmMain_initials.py

#Create the Main Menu

menubar = Menu(root)

#Add the Menu and Sub Menu Items

filemenu1 = Menu(menubar, tearoff=0)
filemenu1.add_command(label="Student Information", command=doNothing)
 filemenu1.add_separator()
filemenu1.add_command(label="Exit Program", command=root.quit)
menubar.add_cascade(label="File", menu=filemenu1)

filemenu2 = Menu(menubar, tearoff=0)

filemenu2.add_command(label="User Table", command=userTable)
filemenu2.add_command(label="Student Table", command=doNothing)
menubar.add_cascade(label="View", menu=filemenu2)

filemenu3 = Menu(menubar, tearoff=0)

filemenu3.add_command(label="User Information", command=userInfo)
menubar.add_cascade(label="Settings", menu=filemenu3)

9. CREATE THE TOOLBAR AND BUTTONS - Provide the following codes after the previous section in
frmMain_initials.py

#Create Toolbar
toolbar = Frame(root, bd=1, relief=RAISED)
toolbar.pack(side=TOP, fill=X)

#Assign Photo and Add Toolbar Button for User

root.img = Image.open("images/userIcon.png")
imgUserRec = ImageTk.PhotoImage(root.img)
btnUserInfo = Button(
toolbar,
relief=FLAT,
compound=LEFT,
command=userInfo,
image=imgUserRec)
btnUserInfo.pack(side=LEFT, padx=0, pady=0)

#Assign Photo and Add Toolbar Button for User Table

root.img = Image.open("images/userTable.png")
imgUserTable = ImageTk.PhotoImage(root.img)
btnUserTable = Button(
toolbar,
compound=LEFT,
command=userTable,
relief=FLAT,
image=imgUserTable)
btnUserTable.pack(side=LEFT, padx=0, pady=0)

10. CREATE THE POPUP MENU AND MENU OPTIONS - Provide the following codes after the previous
section in frmMain_initials.py

#Create the PopUp Menu

popUpMenu = Menu(root, tearoff=0)

#Display Popup Menu Options and Assign Command

popUpMenu.add_command(label="User Record", command=userInfo)
popUpMenu.add_command(label="User Table", command=userTable)
 popUpMenu.add_separator()
root.bind("<Button-3>", showMenu)

11. APPLY ROOT CONFIG AND LOOPING - Provide the following codes after the previous section in
frmMain_initials.py

root.config(menu=menubar)
root.mainloop()

12. RUN FRMMAIN_INITIALS - The output should look like the image below:

13. Right Click package name MODULE6_FILES_ICSC106_INITIALS and select New >> Python File >>
type name frmUserTable_initials.

14. IMPORT TKINTER LIBRARY AND MYSQL. Type the following codes in frmUserTable_initials.py

import mysql.connector as connectSQL

from tkinter import *

from tkinter import ttk

15. SETUP THE DATABASE CONNECTION STRING. Provide the following codes after the previous
section in frmUserTable_initials.py

def connectDB():
try:
#SETUP MYSQL CONNECTION STRING
global mySQL
mySQL = connectSQL.connect(
 host = "localhost",
user = "root",
passwd = "123456", #For mobile developers using AWebserver use root as password
charset='utf8',
database = "db_bsit_justice_jcb"
)
global myCursor
myCursor = mySQL.cursor()
except ValueError:
pass

16. CREATE THE MAIN WINDOW - Provide the following codes after the previous section in
frmUserTable_initials.py

#Create the window

root = Tk()
root.title("USER TABLE")

17. SET THE MAIN FRAME - Provide the following codes after the previous section in
frmUserTable_initials.py

#Set the Main Frame

mainframe = ttk.Frame(root, padding="3 3 12 12")
mainframe.grid(column=0, row=0, sticky=(N, W, E, S))
root.columnconfigure(0, weight=1)
root.rowconfigure(0, weight=1)

18. SET THE TREEVIEW WIDGET - Provide the following codes after the previous section in
frmUserTable_initials.py

# Using treeview widget

trv = ttk.Treeview(root, selectmode='browse')

trv.grid(row=1, column=1, padx=20, pady=20)

# number of columns
trv["columns"] = ("0", "1", "2", "3", "4", "5", "6")

# Defining heading
trv['show'] = 'headings'

# width of columns and alignment

trv.column("0", width=100, anchor='c')
trv.column("1", width=100, anchor='c')
trv.column("2", width=100, anchor='c')
trv.column("3", width=100, anchor='c')
trv.column("4", width=100, anchor='c')
trv.column("5", width=100, anchor='c')
trv.column("6", width=100, anchor='c')
 # Headings
# respective columns
trv.heading("0", text="User ID")
trv.heading("1", text="Last Name")
trv.heading("2", text="First Name")
trv.heading("3", text="Middle Name")
trv.heading("4", text="Gender")
trv.heading("5", text="User Type")
trv.heading("6", text="Email Address")

19. SET THE QUERY AND POPULATE TREEVIEW WIDGET - Provide the following codes after the
previous section in frmUserTable_initials.py

# getting data from MySQL student table

connectDB()
myCursor.execute('''SELECT User_ID, First_Name, Middle_Name, First_Name,
Gender, User_Type, Email_Address from tbluser''');
records = myCursor.fetchall()
for dt in records:
trv.insert("", 'end', iid=dt[0], text=dt[0],
values=(dt[0], dt[1], dt[2], dt[3], dt[4], dt[5], dt[6]))

20. APPLY ROOT CONFIG AND LOOPING - Provide the following codes after the previous section in
frmMain_initials.py

for child in mainframe.winfo_children(): child.grid_configure(padx=10, pady=10)

root.mainloop()

21. RUN FRMUSERTABLE_INITIALS - The output should look like the image below:
22. Right Click package name MODULE6_FILES_ICSC106_INITIALS and select New >> Python File >>
type name frmLogIn_initials.

23. IMPORT TKINTER LIBRARY AND MYSQL. Type the following codes in frmLogIn_initials.py

import mysql.connector as connectSQL

from tkinter import *

from tkinter import ttk
from tkinter import messagebox

24. SETUP THE DATABASE CONNECTION STRING. Provide the following codes after the previous
section in frmUserTable_initials.py

def connectDB():
try:
#SETUP MYSQL CONNECTION STRING
global mySQL
mySQL = connectSQL.connect(
host = "localhost",
user = "root",
passwd = "123456", #For mobile developers using AWebserver use root as password
charset='utf8',
database = "db_bsit_justice_jcb"
)
global myCursor
myCursor = mySQL.cursor()
except ValueError:
pass

25. CREATE THE FUNCTION FOR USER LOGIN AND BURAHIN - Provide the following codes after the
previous section in frmLogIn_initials.py

def userLogin():
try:
if (len(strID.get()) == 0):
messagebox.showinfo(title="Data Validation", message="Please Enter User ID!")
txtID.focus()
elif (len(strPassword.get()) == 0):
messagebox.showinfo(title="Data Validation", message="Please Enter User Password!")
txtID.focus()
else:
connectDB()
strSearch = """SELECT * FROM tbluser WHERE User_ID='%s' AND Password='%s'""" %
(strID.get(),strPassword.get())
myCursor.execute(strSearch)
records = myCursor.fetchall()

if (myCursor.rowcount > 0):

root.destroy()
exec(open("./frmMain_jcb.py").read())
 else:
messagebox.showinfo(title="INVALID LOG-IN", message="User ID and Password
Invalid!")
burahin()
except ValueError:
pass

def burahin():
try:
strID.set("")
strPassword.set("")
txtID.focus()
except ValueError:
pass

26. CREATE THE MAIN WINDOW - Provide the following codes after the previous section in
frmLogIn_initials.py

#Create the window

root = Tk()
root.title("USER LOG-IN")

27. SET THE MAIN FRAME - Provide the following codes after the previous section in
frmLogIn_initials.py

#Set the Main Frame

mainframe = ttk.Frame(root, padding="3 3 12 12")
mainframe.grid(column=0, row=0, sticky=(N, W, E, S))
root.columnconfigure(0, weight=1)
root.rowconfigure(0, weight=1)

28. DECLARE THE STRING VARIABLES USER LOG-IN - Provide the following codes after the previous
section in frmLogIn_initials.py

#Declare String Variables

strID = StringVar()
strPassword = StringVar()

29. SET THE WIDGETS FOR USER LOG-IN - Provide the following codes after the previous section in
frmLogIn_initials.py

# Place the User Log-In Objects

ttk.Label(mainframe, text="USER LOG-IN").grid(column=1, row=1, sticky=W)

ttk.Label(mainframe, text="User ID:").grid(column=1, row=2, sticky=W)

txtID = ttk.Entry(mainframe, width=20, justify='center', textvariable=strID)
txtID.grid(column=2, row=2, sticky=(W, E))
 ttk.Label(mainframe, text="Password:").grid(column=1, row=3, sticky=W)
txtPass = ttk.Entry(mainframe, width=20, justify='center', textvariable=strPassword, show="*")
txtPass.grid(column=2, row=3, sticky=(W, E))

30. SET THE BUTTONS FOR LOG-IN AND CANCEL - Provide the following codes after the previous
section in frmLogIn_initials.py

#Place Command Buttons

ttk.Button(mainframe, text="LOG-IN USER", command=userLogin).grid(column=1, row=4, sticky=W)
ttk.Button(mainframe, text="CANCEL LOG-IN", command=root.quit).grid(column=2, row=4,
sticky=W)

31. APPLY ROOT CONFIG AND LOOPING - Provide the following codes after the previous section in
frmLogIn_initials.py

for child in mainframe.winfo_children(): child.grid_configure(padx=10, pady=10)

txtID.focus()
root.mainloop()

32. RUN FRMLOGIN_INITIALS - The output should look like the image below:

33. Right click frmLogin >> Select Run File >> Perform the following:
a. Log-in User
b. Test Menu Bar Items
c. Test Toolbar Button
d. Test Right Click Main Menu
Module Recap
 Your application should present its components to the user in a logical and task-organized manner.
 A main window contains a client area and, optionally, a menu bar, a command area, a message area,
and scroll bars.
 A menu bar organizes the most common features of an application. It contains a list of menu topics in
buttons; each button is associated with a distinct pull-down menu containing commands that are
grouped by common functionality.
 Your application should use the following standard menus when possible to enable the user to easily
locate desired functionality.
 If your application provides a View menu, it only contains functions that affect the way the current
data is presented. It does not contain any option that alters the data itself.
 Pop-up menus provide access to frequently used functions and should be used pervasively throughout
the Common Desktop Environment desktop environment.
 Tool bars are a method used to provide quick access to things that are already user-accessible in an
application by other methods.

Module Assessment
 Online assessment will be announced via the learning management system’s calendar.

References
1. Oracle Home Page. . Common Desktop Environment: Style Guide and Certification Checklist. Retrieved
on October 14, 2020 from https://docs.oracle.com/cd/E19455-01/806-2915/6jc3nftni/index.html