Okno programu zostało utworzone w bibliotece tkinter. Na wykres została przewidziana osobna ramka tkinter.Frame(). W ramce tej został umieszczony wykres dzięki zastosowaniu obiektu FigureCanvasTkAgg. Obiekt ten jako parametry przyjmuje obiekt Figure oraz kontener – w tym przypadku obiekt Frame.
W oknie programu umieściłem podstawowe widżety tzn. menu programu, pole wprowadzania i przycisk tkinter.Button() umożliwiające zmianę roku, dla którego generowany jest wykres oraz pole statusu, w którym są wyświetlane komunikaty o poprawnym wczytaniu danych lub o braku danych do wygenerowania wykresu dla danego roku.
Domyślnie po uruchomieniu programu wyświetlany jest wykres cen hurtowych dla bieżącego roku.
Okno programu generującego wykres cen hurtowych paliw na podstawie podanego roku.
import tkinter as tk
import calendar
from datetime import datetime
from functools import partial
class DatePicker():
def __init__(self, root, date_entry, date_strf):
self.root = root
self.date_entry = date_entry
self.date_strf = date_strf
self.top_level = tk.Toplevel(self.root)
self.top_level.grab_set()
self.top_level.title('Date picker')
x = self.root.winfo_rootx()
y = self.root.winfo_rooty()
width = self.root.winfo_width()
height = self.root.winfo_height()
self.top_level.geometry(
'+{}+{}'.format(x + int(width / 2), y + int(height / 2)))
W metodzie __init__() tworzone jest okno potomne jako instancja klasy tk.Toplevel. Nastepnie blokowana jest możliwość aktywowania elementów interfejsu okna rodzica do momentu zamknięcia okna date picker. W kolejnych wierszach definiuję ustawienie okna date picker względem okna rodzica.
Następnie tworzę egzemplarz klasy Calendar, deklaruję zmienną dp_frame, która będzie przechowywać instancję klasy tk.Frame, a następnie aktywuję metodę create_cal_ui(), która rozmieszcza widżety w utworzonym oknie.
Kod metody create_cal_ui() wygląda następująco:
def create_cal_ui(self, year=datetime.today().year, month=datetime.today().month):
mc = self.cal.monthdayscalendar(year, month)
self.month = month
self.year = year
month_txt = self.c.month_name[month]
self.date_str = f'{month_txt} {year}'
if self.dp_frame is not None:
self.dp_frame.destroy()
self.dp_frame = tk. Frame(self.top_level)
self.dp_frame.grid(column=0, row=0)
self.prev_img = tk.PhotoImage(file='Resources/prev.gif')
self.next_img = tk.PhotoImage(file='Resources/next.gif')
prev_btn = tk.Button(self.dp_frame, image=self.prev_img, relief='flat')
prev_btn.bind(
'<Button-1>', lambda event: self.set_date(event, 'prev_btn'))
prev_btn.grid(row=0, column=0)
next_btn = tk.Button(self.dp_frame, image=self.next_img, relief='flat')
next_btn.bind(
'<Button-1>', lambda event: self.set_date(event, 'next_btn'))
next_btn.grid(row=0, column=6)
self.date_lbl = tk.Label(self.dp_frame, text=self.date_str,
font=12)
self.date_lbl.grid(row=0, column=1, columnspan=5, sticky='WE')
week_names = self.c.day_abbr
for i, name in enumerate(week_names):
label = tk.Label(self.dp_frame, text=name).grid(column=i, row=1)
col = 0
row = 2
for week in mc:
for day in week:
state = 'normal'
if day == 0:
state = 'disabled'
day = ''
day = str(day)
button = tk.Button(self.dp_frame, text=day,
relief='flat', state=state, command=partial(self.get_date, day))
button.grid(column=col, row=row)
col += 1
row += 1
col = 0
Metoda create_cal_ui() pobiera jako argumenty rok oraz miesiąc, dla którego ma być wyświetlony kalendarz. Domyślnie wyświetlany jest kalendarz dla bieżącego miesiąca i bieżącego roku. Na wstępie za pomocą metody monthdayscalendar() klasy Calendar pobierana jest lista dni w miesiącu – każdy tydzień jest opisywany jako osobna lista tzn. metoda zwraca listę list. Dni nie należące do wybranego miesiąca są oznaczane jako 0. W zmiennej month_txt przechowywana jest tekstowa nazwa miesiąca, którego wartość liczbową przechowuje zmienna self.month.
if self.dp_frame is not None:
self.dp_frame.destroy()
Powyższa instrukcja warunkowa sprawdza, czy nie dokonano wyboru kolejnego miesiąca. W takim przypadku bieżąca ramka przechowująca elementy dla wcześniej utworzonego miesiąca zostaje usunięta.
Następnie w ramce dp_frame tworzone są przyciski do zmiany miesiąca prev_btn, next_btn, etykieta wyświetlająca aktualnie wybrany miesiąc i rok date_lbl oraz przyciski reprezentujące poszczególne dni w miesiącu.
Zmiana miesiąca na poprzedni lub kolejny dokonywana jest dokonywana za pomocą dowiązania do przycisku – metoda bind. Zdarzenie (event) przesyłane do metody po aktywowaniu przycisku w tkinterze nie zawiera danych np. o nazwie wciśniętego przycisku. Aby zidentyfikować, jaki przycisk aktywował daną metodę musiałem utworzyć anonimową funkcję, która przesyła dodatkowy argument do metody obsługującej aktywowanie przycisku tzn.
Powyższy kod umożliwia uruchomienie metody set_date() po kliknięciu na odpowiedni przycisk, przy czym do metody set_date() jest przesyłany również argument typu String, identyfikujący który przycisk wywołał metodę.
Poniższy kod wyświetla nagłówek dni tygodnia w wyświetlanym kalendarzu. Nazwy dni wyświetlane są w formie skróconej:
week_names = self.c.day_abbr
for i, name in enumerate(week_names):
label = tk.Label(self.dp_frame, text=name).grid(column=i, row=1)
col = 0
row = 2
for week in mc:
for day in week:
state = 'normal'
if day == 0:
state = 'disabled'
day = ''
day = str(day)
button = tk.Button(self.dp_frame, text=day,
relief='flat', state=state, command=partial(self.get_date, day))
button.grid(column=col, row=row)
col += 1
row += 1
col = 0
Powyższy kod wyświetla przyciski dni dla wybranego miesiąca. Jeśli tydzień zawiera dni z poprzedniego lub następnego miesiąca, to przyciski dla tych dni są dezaktywowane. Po naciśnięciu na wybrany przycisk uruchamiana jest metoda get_date() za pomocą funkcji partial modułu functools. Lambda w tym przypadku nie zadziała tak, jak można by oczekiwać z powodu tzn. late binding.
Kod metody set_date() uruchamiany po naciśnięciu przycisków: next_btn oraz prev_btn:
def set_date(self, event, sender):
if sender == 'prev_btn':
self.month -= 1
if self.month < 1:
self.month = 12
self.year -= 1
if sender == 'next_btn':
self.month += 1
if self.month > 12:
self.month = 1
self.year += 1
self.create_cal_ui(self.year, self.month)
Powyższa metoda jako argument sender pobiera nazwę przycisku, który ją aktywował. Niestety argument event nie udostępnia takiej informacji. Po kliknięciu następuje uaktualnienie widżetów poprzez wywołanie metody create_cal_ui().
Kod metody get_date() uruchamianej po wybraniu konkretnej daty z date pickera wygląda następująco:
def get_date(self, day):
day = int(day)
self.date_entry.delete(0, tk.END)
d = datetime(self.year, self.month, day)
self.date_entry.insert(0, d.strftime(self.date_strf))
self.top_level.destroy()
W powyższej metodzie wybrany dzień – argument day jest rzutowany na obiekt int, dzięki czemu można utworzyć egzemplarz klasy datetime na podstawie wybranego dnia, miesiąca i roku. Następnie kasowane jest pole date_entry w oknie rodzica i wypełniane tekstem reprezentującym wybraną datę na podstawie wybranego formatowania. Po aktualizacji widżetu z okna rodzica, okno date pickera zostaje usunięte.
Następnie ustawiany jest tytuł okna potomnego. Metoda grab_set() powoduje, że okno główne jest nieaktywne – nie można np. wcisnąć żadnego przycisku itp. Kolejnym krokiem jest ustawienie etykiet tekstowych opisujących pola wprowadzania, które definiuję poniżej, wraz z ze zmiennymi typu StringVar, przechowującymi wartości wprowadzane do tych pól:
Na dole okna wyświetlone zostają przyciski Save oraz Cancel do zapisania danych o nowym aucie w bazie danych lub zamknięcia okna 'Add car’.
def save_new_car(self, event=None):
if self.make_sv.get() and self.model_sv.get() and self.year_sv.get() and self.vrn_sv.get() and self.vin_sv.get():
self.helper.add_car(self.make_sv.get(),
self.model_sv.get(),
self.year_sv.get(),
self.vrn_sv.get(),
self.vin_sv.get())
self.top_level.destroy()
self.parent.show_cars()
else:
self.info_sv.set('Please fill in all entry fields')
Kod metody save_new_car() jest aktywowany, jeśli naciśnięto przycisk Save. Jeśli wypełnione zostały wszystkie wartości potrzebne do utworzenia nowego auta to zostaje uruchomiona metoda add_car() klasy Helper, a następnie zamykane jest okno potomne i aktualizowane są wpisy o autach w oknie głównym za pomocą metody show_cars() klasy CarManager.
Okno potomne 'Add car’. Komunikat wyświetla się, gdy nie wypełnione wszystkie pola wprowadzania. Focus ustawiony na pierwszym elemencie.
***
Kod klasy RepairsWindow, aktywowany po naciśnięciu przycisku repairs_button okna głównego:
import tkinter as tk
from tkinter import ttk
from sql_helper import Helper
from date_picker import DatePicker
class RepairsWindow():
def __init__(self, root, car):
self.top_level = tk.Toplevel(root)
self.root = root
self.top_level.title('Repairs')
self.top_level.grab_set()
self.car = car
self.helper = Helper()
x = self.top_level.winfo_screenwidth()
y = self.top_level.winfo_screenheight()
geometry = '+{}+{}'.format(int((x / 2) - 150),
int((y / 2) - 150))
size = self.top_level.geometry(geometry)
Na początku importuję wszystkie niezbędne klasy. W metodzie __init__() tworzone jest nowe okno – egzemplarz klasy TopLevel, ustawiany jest tytuł okna na 'Repairs’. Następnie za pomocą metody grab_set() blokowana jest możliwość uruchamiania widżetów z okna głównego. Ustawiane są zmienne self.car i self.helper, a następnie dokonywane jest pozycjonowanie okna potomnego względem okna głównego.
W oknie potomnym tworzona jest ramka toolbox_frame, w której umieszczony zostaje przycisk add_repair_button. Do utworzonego przycisku zostaje dowiązana metoda add_repair() – aktywowana za pomocą myszki lub klawiatury po naciśnięciu Enter na klawiaturze numerycznej lub głównej. Sprawdzane jest następnie, czy auto nie jest oznaczone jako 'sprzedane’, wtedy przycisk umożliwiający dodawanie nowych napraw jest nieaktywny.
col_headers = ('No', 'Date', 'Description')
self.repairs_tv = ttk.Treeview(self.top_level, columns=col_headers,
show='headings', selectmode='none')
self.repairs_tv.tag_configure('c1', background='ivory2')
self.repairs_tv.tag_configure('c2', background='ivory3')
for i, col in enumerate(col_headers):
self.repairs_tv.heading(col, text=col)
self.repairs_tv.column(col, anchor='center')
if i == 0:
self.repairs_tv.column(col, width=50, stretch='NO')
self.repairs_tv.grid(column=0, row=2, sticky='NSWE')
scrollbar = tk.Scrollbar(self.top_level, command=self.repairs_tv.yview)
scrollbar.grid(column=1, row=2, sticky='NS')
self.show_repairs()
Kolejny fragment kodu opisuje utworzenie widżetu Treeview, w którym będą wyświetlane dane o naprawach. Dla poprawienia czytelności utworzyłem dwa tagi, które ustawiają kolory tła wpisywanych elementów widżetu. Metoda __init__() kończy się wywołaniem metody show_repairs(), która dodaje elementy o naprawach do widżetu Treeview.
def show_repairs(self):
repairs = self.helper.show_repairs(self.car)
self.repairs_tv.delete(*self.repairs_tv.get_children())
for i, repair in enumerate(repairs, start=1):
repair = (i, repair[0], repair[2])
if i % 2:
self.repairs_tv.insert('', 'end', values=repair, tag='c1')
else:
self.repairs_tv.insert('', 'end', values=repair, tag='c2')
W metodzie show_repairs() wywoływana jest odpowiednia metoda klasy Helper, która pobiera dane o naprawach z bazy danych. Następnie kasowane są elementy repairs_tv i ustawiane są zaktualizowane dane. Dla poprawienia czytelności kolejne wiersze są naprzemiennie kolorowane tzn.
Kod metody add_repair, który jest aktywowany, gdy naciśnięto przycisk add_repair_button za pomocą myszki lub z klawiatury:
W metodzie add_repair() tworzona jest ramka w której umieszczone są pola etykiet i pola wprowadzania danych o dacie naprawy i opisie naprawy. Focus ustawiany jest na pole wpisywania daty – date_entry. Obok pola wprowadzania daty jest umieszczony przycisk do aktywowania obiektu date picker. Metoda zawiera jeszcze deklarację dwóch przycisków: cancel_button oraz save_button służące do zapisu wpisu o naprawie lub zamknięcia ramki dodawania wpisu tzn.
Okno Repairs po wciśnięciu przycisku add_repair_button
Kod metody cancel_repair(), która chowa ramkę repair_frame:
def save_repair(self, event=None):
if self.date_sv.get() and self.description_sv.get():
self.helper.add_repair(self.car, self.date_sv.get(),
self.description_sv.get())
self.show_repairs()
self.add_repair_frame.grid_remove()
W metodzie save_repair() dokonywana jest podstawowa walidacja formularza tzn. sprawdzane jest czy wszystkie wymagane pola do utworzenia wpisu o naprawie są wypełnione. Jeśli tak, to notatka o naprawie jest zapisywana w bazie danych (metoda add_repair klasy Helper), a następnie uaktualniane są wpisy o naprawach i chowana jest ramka repair_frame.
Pozostała metoda show_cal(), która jest aktywowana po wciśnięciu przycisku show_cal_btn:
Medoda show_cal() tworzy instancję klasy DatePicker, którą utworzyłem w celu pobierania daty i wstawiania jej do podanego pola Entry. Klasa ta jako argument umożliwia wstawienie wybranego formatowania wybranej daty, dzięki czemu np. w ustawieniach aplikacji użytkownik mógłby wybrać jak ma być wyświetlana data.
P.S. Jeśli okno główne ma się uruchamiać jako zmaksymalizowane, ale z opcją zmiany rozmiaru to w metodzie __init__() klasy CarManager należy dopisać:
root.attributes('-zoomed', True)
P.P.S. Jeśli wpisy o autach mają wyświetlać się z formatowaniem wierszy to metodę show_cars() można zmodyfikować, dopisując tagi definiujące kolory wierszy tzn.
def show_cars(self):
all_cars = self.helper.show_all_cars()
self.car_tview.delete(*self.car_tview.get_children())
for i, car in enumerate(all_cars, start=1):
car = list(car)
car.insert(0, i)
if i % 2:
self.car_tview.insert('', 'end', values=car, tag='c2')
else:
self.car_tview.insert('', 'end', values=car, tag='c1')
self.car_tview.tag_configure('c1', background='ivory3')
self.car_tview.tag_configure('c2', background='ivory2')
widżet Treeview z uwzględnieniem tagów formatujących
We wcześniejszym wpisie utworzyłem główne okno aplikacji. Następnie uzupełnię metody, które obsługują zdarzenia inicjowane przez elementy interfejsu.
Najpierw uzupełnię metodę show_cars(), która jest aktywowana po wczytaniu widgetów do okna głównego jak również każdorazowo np. po dodaniu lub usunięciu auta z bazy.
def show_cars(self):
all_cars = self.helper.show_all_cars()
self.car_tview.delete(*self.car_tview.get_children())
for i, car in enumerate(all_cars, start=1):
car = list(car)
car.insert(0, i)
self.car_tview.insert('', 'end', values=car)
Na początku uruchamiana jest metoda show_all_cars() klasy Helper. Zwraca ona wszystkie auta z bazy danych w postaci listy krotek. Następnie usuwane są wszystkie elementy widżetu TreeView, aby wczytać ponownie listę aut po zmianach. Do każdego elementu dodawana jest liczba porządkowa.
Aby ułatwić obsługę metod del_car(), sell_car(), show_repairs() wyodrębnię prywatną metodę: __get_car_from_selection(), która zwraca instancję klasy Car na podstawie zaznaczonego wiersza tzn.
def __get_car_from_selection(self):
selected_item = self.car_tview.focus()
if selected_item == '':
messagebox.showinfo('Information', 'No item selected')
else:
selection_dict = self.car_tview.item(selected_item)
selection = selection_dict.get('values')
i, *args = selection
car = Car.from_list(args)
return car
Na początku w powyższej metodzie sprawdzane jest, czy zaznaczony jest jakiś wiersz zawierający dane o samochodzie. Jeśli tak, to zwracany jest element obiektu TreeView w formie słownika. Dane o wybranym aucie obecne są jako wartość dla klucza 'values’. Z listy usuwany jest pierwszy element, będący liczbą porządkową wiersza. Tak zmodyfikowana lista jest argumentem metody from_list() klasy Car.
Kod metody del_car():
def del_car(self):
car = self.__get_car_from_selection()
if car and messagebox.askyesno('Delete', 'Delete selected car?'):
self.helper.del_car(car)
self.show_cars()
W powyższej metodzie sprawdzane jest, czy zmienna car nie jest typu None i czy również użytkownik potwierdził w oknie dialogowym usuwanie danych o aucie. Jeśli oba te warunki są spełnione to zostaje uruchomiona metoda klasy Helper kasująca auto z bazy danych. Następnie uaktualniane są wpisy o autach w bazie danych za pomocą metody show_cars() klasy CarManager.
Kod metody sell_car():
def sell_car(self):
car = self.__get_car_from_selection()
if car and car.sold:
messagebox.showinfo('Information', 'Already marked as sold')
elif car and messagebox.askyesno('Sell', 'Mark car as sold?'):
self.helper.set_sold(car)
self.show_cars()
W powyższej metodzie sprawdzane jest czy auto nie zostało już wcześniej oznaczone jako sprzedane. Jeśli nie to wyświetlony zostaje okno dialogowe w celu potwierdzenia. Jeśli użytkownik zaakceptuje, to wywoływana jest metoda set_sold() klasy Helper a następnie metoda show_cars() obiektu CarManager.
Kod metody show_repairs():
def show_repairs(self):
car = self.__get_car_from_selection()
if car:
repairs = RepairsWindow(self.root, car)
W metodzie show_repairs(), gdy zmienna car nie jest typu None zostaje utworzone nowe okno potomne, które opisuje klasa RepairsWindow.
Ostatnią opisaną w tym wpisie metodą jest metoda add_car(), która jest aktywowana po naciśnięciu przycisku add_car_button.
Dopisania wymagają jeszcze metody dowiązane do pola wprowadzania search_entry tzn. on_entry_in(), on_entry_out() i on_entry_return(), tzn.
def on_entry_in(self, event):
self.search_entry.config(fg='black')
self.search_variable.set('')
def on_entry_out(self, event):
self.search_entry.config(fg='grey')
self.search_variable.set('Search car by VRN')
Uzyskanie focusa przez pole wyszukiwania search_entry powoduje wyczyszczenie pola wyszukiwania i zmianę koloru czcionki. Strata focusa powoduje wypisanie w polu search_entry szarego napisu 'Search car by VRN’.
def on_entry_return(self, event):
vrn = self.search_variable.get()
if vrn == '':
self.show_cars()
else:
car = self.helper.search_by_vrn(vrn)
self.car_tview.delete(*self.car_tview.get_children())
if car:
car = list(car)
car.insert(0, 1)
self.car_tview.insert('', 'end', values=car)
Powyższy kod metody on_entry_return sprawdza, czy po naciśnięciu klawisza Enter pole wyszukiwania jest puste. Jeśli tak, to wyświetlane są dane o wszystkich dostępnych autach z bazy. Jeśli w polu wyszukiwania jest wpisana jakaś fraza, to zostaje uruchomiona metoda search_by_vrn() klasy Helper, a następnie uaktualniona zawartość widżetu car_tview, wyświetlająca wyniki wyszukiwania.
W poprzednim wpisie opisałem prosty program CRUD, który modyfikował bazę danych (w tym przypadku SQLite). Do utworzonego wcześniej programu utworzę gui w bibliotece tkinter. Interfejs będzie rozwijany stopniowo, dzięki czemu łatwiej będzie wytłumaczyć zastosowane metody.
Utworzone we wcześniejszym wpisie pliki nieznacznie zmodyfikuję tzn. do pliku opisującego klasę Car() dopiszę metodę klasy, która tworzy instancję, gdy jako argument podano listę. Ponadto w klasie Helper() metoda del_car() oprócz usuwania auta z bazy danych, usuwa również wszystkie dane o wpisanych naprawach związanych z tym autem. W produkcyjnej bazie danych lepszym rozwiązaniem byłoby zapewne oznaczenie auta jako „skasowanego” zamiast faktycznego kasowania z bazy.
Kod dopisanych fragmentów wygląda następująco:
class Car():
@classmethod
def from_list(cls, list):
make, model, year, vrn, vin, sold = list
return cls(make, model, year, vrn, vin, sold)
class Helper():
def del_car(self, car):
with self.conn:
self.c.execute("SELECT ROWID FROM cars WHERE vin=:vin",
{'vin': car.vin})
car_id = self.c.fetchone()
self.c.execute("DELETE FROM repairs WHERE car=?",
(car_id))
self.c.execute("DELETE FROM cars WHERE vin=:vin", {'vin': car.vin})
Kod pliku car_manager.py zawierający klasę CarManager() opisującą graficzny interfejs.
import tkinter as tk
from tkinter import messagebox, ttk
from sql_helper import Helper
from car import Car
class CarManager(tk.Frame):
def __init__(self, root):
super().__init__(root)
self.root = root
self.helper = Helper()
root.title('Car manager')
root.iconphoto(True, tk.PhotoImage(file='Resources/car_logo.png'))
root.bind('<Control-x>', self.close_app)
root.columnconfigure(1, weight=1)
root.rowconfigure(2, weight=1)
self.create_widgets()
self.show_cars()
if __name__ == '__main__':
root = tk.Tk()
cm = CarManager(root)
cm.mainloop()
Podczas tworzenia egzemplarza klasy CarManager tworzę instancje klasy pomocniczej Helper, ustawiam nazwę tworzonego okna na 'Car Manager’, dodaję ikonkę programu z katalogu Resources. Oprócz tego ustawiam skrót klawiszowy do zakończenia programu (Ctrl+x). Następnie ustawiany jest sposób w jaki mają być skalowane widgety podczas zmiany rozmiaru okna. Ostatnie dwa wiersze metody __init__() uruchamiają metody odpowiedzialne za utworzenie wszystkich widgetów okna głównego oraz za wyświetlenie danych z bazy danych o zapisanych autach.
Kod metody close_app() uruchamianej podczas naciśnięcia skrótu (Ctrl+x):
def close_app(self, event):
result = tk.messagebox.askyesno('Exit', 'Close application?')
if result:
self.root.destroy()
Jeśli rezultat jest wartością True tzn. użytkownik wybrał przycisk potwierdzający zamknięcie aplikacji to okno główne aplikacji jest zamykane.
Kod metody create_widgets() odpowiedzialnej za wyświetlenie elementów interfejsu:
W metodzie create_widgets() kolejno tworzone jest menu programu, następnie pasek narzędziowy zawierające przyciski dodawania auta do bazy, usuwania auta, dodawania danych o naprawach auta oraz oznaczania sprzedaży auta. Następnie tworzone jest pole wyszukiwania auta po numerze rejestracyjnym, do którego podpięte są metody, które reagują na zdarzenia uzyskania/stracenia focusa oraz zatwierdzania danych przez wciśnięcie klawisza ENTER na: klawiaturze numerycznej (<KP_Enter>) lub podstawowej (<Return>). Kolejne linie definiują widget TreeView, w którym będą przedstawiane kolejne wiersze zawierające dane o autach oraz pasek przewijania, jeśli dane nie mieszczą się na stronie.
Po zmianach główne okno programu powinno wyglądać następująco:
