[Python初心者] Tkinter Class グループ化したい。

Question

Frameで分けているコードをclassでわかりやすくしたいです。

import tkinter as tk


#=-=-=-GUI-=-=-=
#Create Instance
win = tk.Tk()
win.title("IVT Transcode app")

win.geometry("700x700")  #Turn on for locked Resolution
win.configure(background='#52514F')  # DARK MODE! | ダークモード!
icon_photo = tk.PhotoImage(file = '/Volumes/UNSUNG HERO/PYTHON/IVTC_tool/film.png') # icon file | アイコンファイル
win.iconphoto(False, icon_photo)  # Sets the icon | アイコン
#AppTitle = tk.Label(win, text="TDBT GUI v0.1", fg="white", bg="#52514F", font=('Verdana', 20, 'bold'))

#----Frames | 枠組----
FrameOne = tk.LabelFrame(win, text="Input Settings", fg="white", bg="#52514F", padx="5", pady="5") #Input Settings Frame
FrameTwo = tk.LabelFrame(win, text="Output Settings", fg="white", bg="#52514F", padx="5", pady="5") #Output Settings Frame
FrameThree = tk.LabelFrame(win, text="Button", fg="white", bg="#52514F", pady="5", padx="5") #Buttoun Settings Frame
FrameFour = tk.LabelFrame(win, text="Progress", fg="white", bg="#52514F", padx="5", pady="5") #Progress Settings Frame
FrameFive = tk.LabelFrame(win, text="Preview", fg="white", bg="#52514F", padx="5", pady="5") #Preview Window Settings Frame


#--Widgets | 特徴----
#Input Widgets | 入力
Text_Input_Path = tk.Label(FrameOne, text="Input Path         ", fg="white", bg="#52514F", font=('Helvetica', 10))
Field_Input_Path = tk.Entry(FrameOne, fg="black", highlightbackground="#52514F")
Button_Input_Path = tk.Button(FrameOne, text="Open File", highlightbackground="#52514F", font=('Helvetica', 10))

#Output Widgets | 出力
Text_Output_Path = tk.Label(FrameTwo, text="Output Path", fg="white", bg="#52514F", font=('Helvetica', 10))
Text_Output_Name = tk.Label(FrameTwo, text="Output Filename", fg="white", bg="#52514F", font=('Helvetica', 10))
Field_Output_Path = tk.Entry(FrameTwo, fg="black", highlightbackground="#52514F")
Field_Output_Name  = tk.Entry(FrameTwo, fg="black", highlightbackground="#52514F")
Button_Output_Path = tk.Button(FrameTwo, text="Select Path", highlightbackground="#52514F", pady='2', font=('Helvetica', 10))
Extension_Value = tk.StringVar()
Extension_Value.set(".MOV") #' default value as MOV | デフォルトMOV
#Extension_Option = tk.OptionMenu(FrameTwo, Extension_Value)
#Extension_Option.config(bg='#52514F', font=('Helvetica', 10), pady='2')


#Cavas Area | キャンバスエリア
canvas = tk.Canvas(FrameFive, width = 320, height = 240)#Canvasの作成
canvas.create_rectangle(0, 0, 320, 240, fill = 'gray')#塗りつぶし
canvas.place(x=0, y=0)#Canvasの配置


#---- Button and Text | ボタンとテキスト-----
## Button Frame ##
ButtonOne = tk.Button(FrameThree,text="Previwe", highlightbackground="#52514F", padx=5, pady=5) #Preview
ButtonTwo = tk.Button(FrameThree, text="Clear", highlightbackground="#52514F", padx=5, pady=5) #Clear
Button_ffm_simple = tk.Button(FrameThree, text="Simple Transcode", highlightbackground="#52514F", padx=5, pady=5) #Simple Transcode

#Preview Widgets | プレビュー
Preview_Start = tk.Button(FrameFive, text="Start", fg="black", bg="#52514F", font=('Helvetica', 10))
Preview_ad1f = tk.Button(FrameFive, text=" < ", fg="black", bg="#52514F", font=('Helvetica', 10))
Preview_bc1f = tk.Button(FrameFive, text=" > ", fg="black", bg="#52514F", font=('Helvetica', 10))
MediaInfoOut = tk.Text(FrameFive, height=15, width=40, bg="white", highlightbackground='grey')

## Progress Frame ##
TextOutputText = tk.Text(FrameFour, height=3, width=80, bg="grey", highlightbackground='grey')
ClearButton = tk.Button(FrameFour, text="Clear", highlightbackground="#52514F", padx=5, pady=5)


#----Grid | 設計----
#AppTitle.grid(column=2, row=0, columnspan=4, pady="5",sticky='nsew')

#Frames | 枠組
FrameOne.grid(column=2, row=2, padx='20', pady='10', sticky='nsew')
FrameTwo.grid(column=2, row=3, padx='20', pady='10', sticky='nsew')
FrameThree.grid(column=3, row=2, rowspan=2, padx='20', pady='10', sticky='nsew')
FrameFour.grid(column=2, columnspan=2, row=4, padx='20', pady='10', sticky='nsew')
FrameFive.grid(column=2, columnspan=2, row=1, padx='20', pady='10', sticky='nsew')

#Input | 入力
Text_Input_Path.grid(column=0, row=0, sticky='w')
Field_Input_Path.grid(column=1, row=0, sticky='nsew')
Button_Input_Path.grid(column=2, row=0, sticky='e')

#Output | 出力
Text_Output_Path.grid(column=0, row=0, sticky='w')
Field_Output_Path.grid(column=1, row=0, sticky='nsew')
Button_Output_Path.grid(column=2, row=0, sticky='nsew')
Text_Output_Name.grid(column=0, row=1, sticky='w')
Field_Output_Name.grid(column=1, row=1, sticky='nsew')
#Extension_Option.grid(column=2, row=1, sticky='nsew')

#Preview Grid| プレビュー
Preview_Start.grid(column=1, row=5, sticky='nsew', pady=5, padx=5)
Preview_ad1f.grid(column=0, row=5, sticky='e', pady=5, padx=5)
Preview_bc1f.grid(column=2, row=5, sticky='w', pady=5, padx=5)
canvas.grid(column=0, columnspan=3, row=0, rowspan=4, pady=5, padx=5)
MediaInfoOut.grid(column=3, row=0, rowspan=3, sticky='nw', pady=10, padx=10)

#Buttons Grid | ボタンの設計
ButtonOne.grid(column=2, row=0, sticky='nw', pady=5, padx=1)
ButtonTwo.grid(column=2, row=1, sticky='nw', pady=5, padx=1)
Button_ffm_simple.grid(column=2, row=2, sticky='nw', pady=5, padx=1)

#Progress Grid | 進捗ウィンドウの設定
TextOutputText.grid(column=1, columnspan=2, row=1, sticky='nsew', pady=5, padx=5)
ClearButton.grid(column=2, row=2, sticky='e', pady=1, padx=1)


#Start the GUI | GUI開始
win.mainloop()

Applicationのメイン画面
Input_Settings
Output_Settings
Button(Controller)
Progress
Preview

上記の６つからなるフレームをClassで分けてわかりやすくしたいのですが、Classを複数持つ場合の書き方がわかりません。
どなたかご教授いただけないでしょうか？

Answer 1

以下の様なフォーマットでクラス化して書いていきます。

import tkinter as tk

class MyButton(tk.Button):
	def __init__(self, master, **kwargs):
		tk.Button.__init__(self, master, **kwargs)
		self.configure(fg="red", font=('Helvetica', 10), command=self.button_event)

	def button_event(self):
		print('hello')

win = tk.Tk()
win.title("IVT Transcode app")
win.geometry("700x700")
win.configure(background='#52514F')

button_1 = MyButton(win, text='classButton')
button_1.grid(row=0, column=0, padx=20, pady=50)

win.mainloop()

また、クラス化とは違いますがスッキリさせたいという事であれば
ウィジェット自体をリストに格納し、for文で設定と配置していくといった手法もあります。
個人的にこのやり方はスッキリして好きです。

# row, column, columnspan, padx, pady, stickyの順
# (rowspan,columnspanのデフォルト値は1の為、指定なしの場合は1を指定)
Frame_info = {'Input Settings':[2, 2, 1, 1, 20, 10, 'nsew'],
			'Output Settings':[3, 2, 1, 1, 20, 10, 'nsew'],
			'Button':[2, 3, 2, 1, 20, 10, 'nsew'],
			'Progress':[4, 2, 1, 2, 20, 10, 'nsew'],
			'Preview':[1, 2, 1, 2, 20, 10, 'nsew']}
Frames = []
for fname, info in Frame_info.items():
	tmp = tk.LabelFrame(win, text=fname, fg='white', bg='#52514F', padx=5, pady=5)
	tmp.grid(row=info[0], column=info[1], rowspan=info[2], columnspan=info[3], padx=info[4], pady=info[5], sticky=info[6])
	Frames.append(tmp)

追記①

先程の回答とほぼ同じで、Buttonをクラス化するのかLabelFrameをクラス化するのかの違いだけで
class化しても今回のケースの場合、あまりこれ以上は綺麗に見える気もしません。

class CreateFrameOne(tk.LabelFrame):
	def __init__(self, master, **kwargs):
		tk.LabelFrame.__init__(self, master, **kwargs)
		self.widget_create()

	def widget_create(self):
		self.Text_Input_Path = tk.Label(self, text="Input Path         ", fg="white", bg="#52514F", font=('Helvetica', 10))
		self.Field_Input_Path = tk.Entry(self, fg="black", highlightbackground="#52514F")
		self.Button_Input_Path = tk.Button(self, text="Open File", highlightbackground="#52514F", font=('Helvetica', 10))
		
		self.Text_Input_Path.grid(column=0, row=0, sticky='w')
		self.Field_Input_Path.grid(column=1, row=0, sticky='nsew')
		self.Button_Input_Path.grid(column=2, row=0, sticky='e')

class CreateFrameTwo(tk.LabelFrame):
	def __init__(self, master, **kwargs):
		tk.LabelFrame.__init__(self, master, **kwargs)
		self.widget_create()

	def widget_create(self):
		self.Text_Output_Path = tk.Label(self, text="Output Path", fg="white", bg="#52514F", font=('Helvetica', 10))
		self.Text_Output_Name = tk.Label(self, text="Output Filename", fg="white", bg="#52514F", font=('Helvetica', 10))
		self.Field_Output_Path = tk.Entry(self, fg="black", highlightbackground="#52514F")
		self.Field_Output_Name  = tk.Entry(self, fg="black", highlightbackground="#52514F")
		self.Button_Output_Path = tk.Button(self, text="Select Path", highlightbackground="#52514F", pady='2', font=('Helvetica', 10))
		self.Extension_Value = tk.StringVar()
		self.Extension_Value.set(".MOV")

		self.Text_Output_Path.grid(column=0, row=0, sticky='w')
		self.Field_Output_Path.grid(column=1, row=0, sticky='nsew')
		self.Button_Output_Path.grid(column=2, row=0, sticky='nsew')
		self.Text_Output_Name.grid(column=0, row=1, sticky='w')
		self.Field_Output_Name.grid(column=1, row=1, sticky='nsew')

FrameOne = CreateFrameOne(win, text="Input Settings", fg="white", bg="#52514F")
FrameTwo = CreateFrameOne(win, text="Input Settings", fg="white", bg="#52514F")
FrameOne.grid(column=2, row=2, padx='20', pady='10', sticky='nsew')
FrameTwo.grid(column=2, row=3, padx='20', pady='10', sticky='nsew')

②

それよりかは、目的がスッキリ見やすくさせたいといった場合に関しては
「ウィジェットの生成→定義→配置」と同じ動作を何度も繰り返すものであり
それならば、逆に考えれば同じ動作を繰り返せるという事ならばfor文を使用して簡略化できるという考えでした。

# for文を使用しない場合
FrameOne = tk.LabelFrame(win, text="Input Settings", fg="white", bg="#52514F", padx="5", pady="5") #Input Settings Frame
FrameTwo = tk.LabelFrame(win, text="Output Settings", fg="white", bg="#52514F", padx="5", pady="5") #Output Settings Frame
FrameThree = tk.LabelFrame(win, text="Button", fg="white", bg="#52514F", pady="5", padx="5") #Buttoun Settings Frame
FrameFour = tk.LabelFrame(win, text="Progress", fg="white", bg="#52514F", padx="5", pady="5") #Progress Settings Frame
FrameFive = tk.LabelFrame(win, text="Preview", fg="white", bg="#52514F", padx="5", pady="5") #Preview Window Settings Frame

FrameOne.grid(column=2, row=2, padx='20', pady='10', sticky='nsew')
FrameTwo.grid(column=2, row=3, padx='20', pady='10', sticky='nsew')
FrameThree.grid(column=3, row=2, rowspan=2, padx='20', pady='10', sticky='nsew')
FrameFour.grid(column=2, columnspan=2, row=4, padx='20', pady='10', sticky='nsew')
FrameFive.grid(column=2, columnspan=2, row=1, padx='20', pady='10', sticky='nsew')

# for文を使用した場合
Frame_info = {'Input Settings':[2, 2, 1, 1, 20, 10, 'nsew'],
            'Output Settings':[3, 2, 1, 1, 20, 10, 'nsew'],
            'Button':[2, 3, 2, 1, 20, 10, 'nsew'],
            'Progress':[4, 2, 1, 2, 20, 10, 'nsew'],
            'Preview':[1, 2, 1, 2, 20, 10, 'nsew']}
Frames = []
for fname, info in Frame_info.items():
    tmp = tk.LabelFrame(win, text=fname, fg='white', bg=main_bg, padx=5, pady=5)
    tmp.grid(row=info[0], column=info[1], rowspan=info[2], columnspan=info[3], padx=info[4], pady=info[5], sticky=info[6])
    Frames.append(tmp)

また「簡読化したい」というだけの目的であればという事を前提にfor文をおすすめしておりましたが
何も必ずしもfor文を使うべきであるというものでもなく、また「どうしてもclass化がしたいんだ」という事であれば完全にお門違いな回答を差し上げてしまっておりますのでその場合には申し訳御座いません。
その場合には①のコードをご参考下さい。
いずれも見やすいか見やすくないかについては、ご自身が使用するだけのものであるか他者にもコードを共有するのかで変わってくるものである為ご自身にあった方法でコーディングしていく事をおすすめします。

Comments

[退会済みユーザー]

ClassごとにInput_SettingsやButtonなどを設定し、1つの塊でFrameを管理することはできないのでしょうか？

[nto]

回答を差し上げておりますが、あくまでも「フォーマット」であり
回答例ではtk.Buttonをクラスに継承していますが、tk.LabelFrameを継承したいのであればご自身でそれぞれのtk.LabelFrameを継承する様にクラス名や引数を変えてコーディングしていけば良いと思います。

が、そもそも掲題のコードではコメントアウトで綺麗にパーツ毎に既に分けられており
見栄えや整理の観点ではクラス化してもあまりやっている事は変わらずその点においてのメリットというのはあまりない様に思えます。

その為コードの簡略化を図れる様にとfor文による配置を紹介させていただきました。

[退会済みユーザー]

ありがとうございます。
まだまだ仕組みがわかっておらず、試行錯誤しながら行なっており応用するのに時間が掛かってしまうため、回答していただいたのに申し訳ございません。