はじめに
このブログでは、現在、Pythonで、ToDoアプリの製作を進めています。アプリと言ってもまだまだ、実用に耐えうる状態では無く、全く手探りの状態で、コツコツと機能の追加等を行っています。
今回もそのToDoアプリのGUI版をバージョンアップしたいと思います。
これまでの経緯はPython_ToDoアプリ編として、こちらからご覧いただけますので宜しければご覧下さい。（→更新履歴）
現在のアプリの状態と問題点
今の「ToDoアプリ」は、このような画面になっています。
今回、仕様上で気になった点は、画面上でTODOの進行状況がわからないところです。
改善対策
そこで、画面上のToDo一覧に進捗管理用の列を１列追加して、進捗状況を表示できるようにしたいと思います。
プログラム修正を以下の手順で行います。
画面上に入力用アイテムの追加
データベースに登録項目の追加
画面上のToDo一覧表示に列追加
では、始めます。
画面上に入力用アイテムの追加
進捗状況を入力するためのアイテムとして画面上に、コンボボックスを追加します。
エントリーボックスでもよかったのですが、新たな試みとしてコンボボックスを導入することにしました。
プログラムはこのように、書きました。
#コンボボックス（状況）の設定
add_lbl3 = tk.Label(text_frame,text="状況：")
add_lbl3.pack(side=tk.LEFT)
values = [" ", "完了", "進行中", "未着手"] # 表示する選択肢
combobox = ttk.Combobox(text_frame, values=values)
combobox.state(['readonly']) # 選択のみ可
combobox.config(width=10) # 表示幅
combobox.pack(side=tk.LEFT)
valuesで、コンボボックスのプルダウンメニュー上に表示される項目を設定しています。
combobox.stateで、選択肢の選び方を設定します。
'normal'（デフォルト）、'readonly'（選択のみ可能）、'disabled'（無効化）の3つの状態があるそうですが、今回は'readonly'（選択のみ可能）を選びました。
'normal'（デフォルト）では、選択肢以外の入力も可能になるようです。
データベースに登録項目の追加
データベースに進捗状況を記録するために項目を一つ追加します。プログラム上は「status」と定義して追加しました。
query = '''CREATE TABLE myItem(
id integer primary key autoincrement,
ToDo string,
date string,
status string
)'''
項目を１つ追加すると、ここ以外にプログラム内に関係個所が数か所ありますので、すべて変更します。大変でした。
画面上のToDo一覧表示に列追加
画面上のToDo一覧表示には、ツリービューを使用しています。データベースから呼び出してくる項目を一つ増やしましたので、get_todos()関数で呼び出してきた情報をtree.insertでstr(row[3]）として追加します。
画面表示用の関数が2つあります。view_todos、view_search_todosそれぞれにに列を１列追加します。
# 関数（リストボックスにToDoデータ全件表示）
def view_todos(tree):
#テキストボックスクリア
clear_text(tree)
#ツリービュークリア
tree.delete(*tree.get_children())
#１行毎に色違いで表示
i=0
for row in get_todos():
tree.insert(parent='', index='end', tags=i, iid=row ,values=(str(row[0]), str(row[1]) ,str(row[2]),str(row[3])))
if i % 2 == 0:
# tagが偶数(レコードは奇数)の場合のみ、背景色の設定
tree.tag_configure(i,background="#e6e6fa")#'yellow'
i+=1
最後に、ツリービュー画面上に「status」を「状況」として表示するために列を１列追加します。
#########################################
# GUI フレーム（view）の設定 --- (5-2)
#########################################
# ツリービューの列の識別名を指定
column = ('id', 'ToDo', 'date','status')
# ツリービュー初期化
tree = ttk.Treeview(view_frame, columns=column)
# ツリービューの列の設定
tree.column('#0',width=0, stretch='no')
tree.column('id', anchor='e', width=50) # 右よせ
tree.column('ToDo',anchor='w', width=300) # 左よせ
tree.column('date', anchor='e', width=80) # 右よせ
tree.column('status', anchor='w', width=80)# 左よせ
# ツリービューの列の見出し設定
tree.heading('#0',text='')
tree.heading('id', text='ID',anchor='center')
tree.heading('ToDo', text='ToDo内容', anchor='center')
tree.heading('date',text='日付', anchor='center')
tree.heading('status',text='状況', anchor='center')
# ツリービューの行をマウスで選択したときのイベント
tree.bind("<<TreeviewSelect>>", select_record)
# ウィジェットの配置
tree.pack(anchor=tk.CENTER,pady=10)
以上で修正完了です。
プログラム修正後の結果
では、実際にプログラムを実行して試してみます。
プルダウンメニューの選択肢から該当する項目を選んで更新ボタンを押すと
このように表示されました。
最後に
以上、GUI版「ToDoアプリ」の見直しをしてみました。
これからも見た目や、使い勝手をよくしていこうと思っています。
プログラム修正後の全サンプルコードは、こちらからご覧いただけます（→
参照）
実行形式のファイルにする（exe化）場合は、こちらを参考にしてください（→
過去記事）
0 件のコメント:
コメントを投稿