TkDocs_Tk Organizing Complex Interfaces

Information

TkDocs_Tk チュートリアル

Our Host


TkDocs_Tk Organizing Complex Interfaces.	H.Kamifuji .

目　次

目　次

Organizing Complex Interfaces

Multiple windows

White space

Separator

Label Frames

Paned Windows

Notebook

サンプル( sample_03.pl )

サンプル( sample_08.pl )

サンプル( sample_04.py )

サンプル( sample_09.py )

サンプル( sample_13.pl )

サンプル( sample_14.py )

サンプル( sample_18.pl )

サンプル( sample_18_2.pl )

サンプル( sample_19.py )

サンプル( sample_19_2.py )

サンプル( sample_23.pl )

サンプル( sample_24.py )

参照ページ

リリースノート

関連ページ

Organizing Complex Interfaces

　大規模なユーザーインターフェイスを使用している場合は、ユーザーを複雑にすることなく圧倒的な方法で整理する方法を見つける必要があります。これにはさまざまなアプローチがあります。ここでもまた、一般的およびプラットフォーム固有のヒューマンインタフェースのガイドラインは、決定の際の参考になります。

　この章の複雑さについては、プログラムをどのように組み立てるかという基本的な複雑さではなく、ユーザーにどのように提示されるかということに注意してください。ユーザーインタフェースは、多くの異なるモジュールからまとめて取り出すことができ、複数のキャンバスウィジェットと深くネストされたフレームから構築することができますが、必ずしも複雑であるとは限りません。

Top

Multiple windows

　アプリケーションで複数のウィンドウを使用する利点の 1 つは、ユーザーが一度に 1 つのウィンドウの内容にのみ集中するように要求することにより、ユーザーインターフェイスを簡素化することです（複数のウィンドウに焦点を合わせたり、反対の効果）。同様に、（グリッドを介して）現在のタスクに関連するウィジェットだけを表示すると、ユーザーインターフェイスが簡単になります。

Top

White space

　画面上に多数のウィジェットを同時に表示する必要がある場合は、それらを視覚的に整理する方法について考える必要があります。グリッドがどのように役立つのかを見て、ウィジェット同士を簡単に合わせることができます。空白は別の有用な助けです。関連するウィジェットを互いに非常に近くに配置すると（直前の説明ラベルで可能です）、関連性の低い他のウィジェットから空白で区切られているため、ユーザーは自分の考え方でユーザーインターフェースを整理できます。

　異なるウィジェットの周り、ウィジェットのグループ間、境界線の周りなどの空白の量は、プラットフォーム固有のものです。正確なピクセル数を心配することなく適切な作業を行うことができますが、高度に洗練されたユーザーインターフェイスが必要な場合は、各プラットフォームでこれを調整する必要があります。

Top

Separator

　1 つのディスプレイにウィジェットをグループ化する第 2 の方法は、ウィジェットのグループ間に細い水平または垂直のルールを配置することである。ホワイトスペースを使用するよりスペース効率が良いことがありますが、これはタイトな表示に関係します。 Tk は、この目的のための非常に単純なセパレータウィジェットを提供します。

　perl Tkx : セパレータは、new_ttk__separatorメソッドa.k.a. Tkx :: ttk__separatorを使用して作成されます。

$sep = $parent->new_ttk__separator(-orient => 'horizontal');

　Python : セパレータは、ttk.Separator関数を使用して作成されます。

 = ttk.Separator(parent, orient=HORIZONTAL)

　"orient"オプションは、 "horizontal"または "vertical"のいずれかとして指定できます。

Top

Label Frames

　グループボックスとも呼ばれる labelframe ウィジェットは、関連するコンポーネントをグループ化する別の方法を提供します。通常の ttk::frame のように動作します。通常は、内部でグリッド化された他のウィジェットのコンテナとして使用されます。ただし、ユーザーインターフェイスの残りの部分から目に見える形で表示されます。ラボフレームの外側に表示されるテキストラベルをオプションで指定できます。

　perl Tkx : Labelframesは、new_ttk__labelframeメソッドa.k.a. Tkx :: ttk__labelframeを使用して作成されます。

$lf = $parent->new_ttk__labelframe(-text => "Label");

　Python : Labelframeは、ttk.Labelframe関数を使用して作成されます

lf = ttk.Labelframe(parent, text='Label')

Top

Paned Windows

　panedwindow ウィジェットを使用すると、2 つ以上のサイズ変更可能なウィジェットを上下（または左右）にスタックできます。ユーザは、各ペインの相対的な高さ（または幅）を、それらの間にあるサッシをドラッグすることによって調整できます。通常、パンウィンドウに追加するウィジェットは、他の多くのウィジェットを含むフレームになります。

　perl Tkx : Panedwindowsは、new_ttk__panedwindowメソッドa.k.a. Tkx :: ttk__panedwindowを使用して作成されます。

$p = $mw->new_ttk__panedwindow(-orient => 'vertical');
# first pane, which would get widgets gridded into it:
$f1 = $p->new_ttk__labelframe(-text => "Panel", -width => 100, -height => 100);
$f2 = $p->new_ttk__labelframe(-text => "Pane2", -width => 100, -height => 100); # second pane
$p->add($f1);
$p->add($f2);

　Python : パテントウィンドウは、ttk.Panedwindow関数を使用して作成されます。

p = ttk.Panedwindow(parent, orient=VERTICAL)
# first pane, which would get widgets gridded into it:
f1 = ttk.Labelframe(p, text='Pane1', width=100, height=100)
f2 = ttk.Labelframe(p, text='Pane2', width=100, height=100)   # second pane
p.add(f1)
p.add(f2)

　panedwindow は、 "vertical" （互いに縦に積み重なっている）または "horizontal" です。重要なことは、あなたが panedwindow に追加するすべてのペインは、panedwindow 自身の直接の子でなければならないということです。

　 "add" メソッドを呼び出すと、ペインのリストの最後に新しいペインが追加されます。 "insert position subwindow" メソッドを使用すると、ペインのリスト ( 0..n-1 ) の所定の位置にペインを配置できます。ペインがすでにパンウィンドウによって管理されている場合、そのペインは新しい位置に移動されます。「サブウィンドウを忘れる」を使用して、panedwindow からペインを削除することができます。サブウィンドウの代わりに位置を渡すこともできます。

　他のオプションを使用すると、各枠に相対的な重みを付けることができます。これにより、全体的な枠ウィンドウのサイズが変更された場合、特定の枠には他の枠より多くのスペースが得られます。また、枠内のアイテム間の各サッシの位置を調整することもできます。詳細については、コマンドリファレンスを参照してください。

Top

Notebook

　ノートブックウィジェットは、タブ付きノートブックのメタファを使用して、ユーザーがインデックスタブを使用して複数のページのうちの 1 つを切り替えることを可能にします。この場合、ペイントされたウィンドウとは異なり、ユーザーは一度に 1 つのページ（ペインに似ています）だけを見ることができます。

　perl Tkx : ノートブックは、new_ttk__notebookメソッド、a.k.a. Tkx :: ttk__notebookを使用して作成されます。

$n = $mw->new_ttk__notebook;
$f1 = $n->new_ttk__frame; # first page, which would get widgets gridded into it
$f2 = $n->new_ttk__frame; # second page
$n->add($f1, -text => "One");
$n->add($f2, -text => "Two");

　Python : ノートブックは、ttk.Notebook関数を使用して作成されます。

n = ttk.Notebook(parent)
f1 = ttk.Frame(n)   # first page, which would get widgets gridded into it
f2 = ttk.Frame(n)   # second page
n.add(f1, text='One')
n.add(f2, text='Two')

　タブ付ノートブックの操作は、パウンドウィンドウの操作と似ています。各ページは典型的にはフレームであり、再びノートブック自体の直接の子（サブウィンドウ）である。新しいページとそれに関連するタブがタブのリストの最後に追加されます。"add subwindow ?option value...?" 方法。 "text" タブオプションは、タブ上のラベルを設定するために使用されます。 "normal" 、 "disabled" （選択不可）、または "hidden" の値を持つことができる "state" タブオプションも便利です。

　リストの終わり以外にタブを挿入するには、 "insert position subwindow？option value ...？" を使用して、特定のタブを削除するには、 "forget" メソッドを使用して、 ( 0..n-1 ) またはタブのサブウィンドウに表示されます。ノートに含まれるすべてのサブウィンドウのリストを "tabs" メソッドで取得することができます。

　現在選択されているサブウィンドウを取得するには、"select" メソッドを呼び出し、タブの位置またはサブウィンドウ自体をパラメータとして渡して、選択したタブを変更します。

　タブオプション（タブまたはその状態のテキストラベルのように）を変更するには、 "tabid tabid option value" メソッドを使用します（ tabidはタブの位置またはサブウィンドウです）。オプションの現在の値を返すために "value" を省略してください。

　現在選択されているサブウィンドウを取得するには、 "select" メソッドを呼び出し、タブの位置またはサブウィンドウ自体をパラメータとして渡して、選択したタブを変更します。

Top

サンプル( sample_03.pl )

use Tkx;

$mw = Tkx::widget->new(".");

$little = $mw->new_ttk__label(-text => "Little");
$little->g_grid(-column => 0, -row => 0);

$sep = $mw->new_ttk__separator(-orient => 'horizontal');
$sep->g_grid(-column => 0, -row => 1, -padx => 5, -ipadx => 70);

$bigger = $mw->new_ttk__label(-text => "Much Bigger Label");
$bigger->g_grid(-column => 0, -row => 2);

# Tkx::after(2000, sub {$little->g_raise();});
Tkx::MainLoop();

Top

サンプル( sample_08.pl )

use Tkx;

$mw = Tkx::widget->new(".");

$little = $mw->new_ttk__label(-text => "Little");
$little->g_grid(-column => 0, -row => 0, -padx => 5);

$sep = $mw->new_ttk__separator(-orient => 'vertical');
$sep->g_grid(-column => 1, -row => 0, -pady => 5, -ipady => 20);

$bigger = $mw->new_ttk__label(-text => "Much Bigger Label");
$bigger->g_grid(-column => 2, -row => 0, -padx => 5);

# Tkx::after(2000, sub {$little->g_raise();});
Tkx::MainLoop();

Top

サンプル( sample_04.py )

from tkinter import *
from tkinter import ttk

root = Tk()

little = ttk.Label(root, text="Little")
bigger = ttk.Label(root, text='Much bigger label')
s = ttk.Separator(root, orient=HORIZONTAL)

little.grid(column=0,row=0)
# s.grid(column=0, row=1, padx=5)
s.grid(column=0, row=1, padx=5, ipadx=70)
bigger.grid(column=0,row=2)

# root.after(2000, lambda: little.lift())
root.mainloop()

Top

サンプル( sample_09.py )

from tkinter import *
from tkinter import ttk

root = Tk()

little = ttk.Label(root, text="Little")
bigger = ttk.Label(root, text='Much bigger label')
s = ttk.Separator(root, orient=VERTICAL)

little.grid(column=0,row=0, padx=5)
# s.grid(column=0, row=1, padx=5)
s.grid(column=1, row=0, pady=5, ipady=20)
bigger.grid(column=2,row=0, padx=5)

# root.after(2000, lambda: little.lift())
root.mainloop()

Top

サンプル( sample_13.pl )

use Tkx;

$mw = Tkx::widget->new(".");

$lf = $mw->new_ttk__labelframe(
	-text => "Label 01",
	-width => 120,
	-height => 90
);

$lf->g_grid(-column => 0, -row => 0, -padx => 10, -pady => 10);

$lf = $mw->new_ttk__labelframe(
	-text => "Label 02",
	-width => 180,
	-height => 90
);

$lf->g_grid(-column => 0, -row => 1, -padx => 10, -pady => 10);

# Tkx::after(2000, sub {$little->g_raise();});
Tkx::MainLoop();

Top

サンプル( sample_14.py )

from tkinter import *
from tkinter import ttk

root = Tk()

lf = ttk.Labelframe(
		root,
		text='Label 01',
		width=120,
		height=90
		)

lf.grid(column=0, row=0, padx=10, pady=10)

lf2 = ttk.Labelframe(
		root,
		text='Label 02',
		width=180,
		height=90
		)

lf2.grid(column=0, row=1, padx=10, pady=10)

# root.after(2000, lambda: little.lift())
root.mainloop()

Top

サンプル( sample_18.pl )

use Tkx;

$mw = Tkx::widget->new(".");

$p = $mw->new_ttk__panedwindow(-orient => 'vertical');
$ph = $mw->new_ttk__panedwindow(-orient => 'horizontal');
$pv = $mw->new_ttk__panedwindow(-orient => 'vertical');

$f1 = $mw->new_ttk__labelframe(
	-text => "Pane 01",
	-width => 100,
	-height => 100
);

$f2 = $mw->new_ttk__labelframe(
	-text => "Pane 02",
	-width => 100,
	-height => 100
);

$f3 = $mw->new_ttk__labelframe(
	-text => "Pane 03",
	-width => 100,
	-height => 100
);

$f4 = $mw->new_ttk__labelframe(
	-text => "Pane 04",
	-width => 100,
	-height => 100
);

$f5 = $mw->new_ttk__labelframe(
	-text => "Pane 05",
	-width => 100,
	-height => 100
);

$ph->add($f1);
$ph->add($f2);
$ph->add($f3);
$ph->g_grid(-column => 0, -row => 0, -padx => 10, -pady => 10);

$pv->add($f4);
$pv->add($f5);
$pv->g_grid(-column => 0, -row => 1, -padx => 10, -pady => 10);

# $p->add($ph);
# $p->add($pv);
# $p->g_grid(-column => 0, -row => 0, -padx => 10, -pady => 10);

# Tkx::after(2000, sub {$little->g_raise();});
Tkx::MainLoop();

Top

サンプル( sample_18_2.pl )

use Tkx;

$mw = Tkx::widget->new(".");

$p = $mw->new_ttk__panedwindow(-orient => 'vertical');
$ph = $mw->new_ttk__panedwindow(-orient => 'horizontal');
$pv = $mw->new_ttk__panedwindow(-orient => 'vertical');

$f1 = $mw->new_ttk__labelframe(
	-text => "Pane 01",
	-width => 100,
	-height => 100
);

$f2 = $mw->new_ttk__labelframe(
	-text => "Pane 02",
	-width => 100,
	-height => 100
);

$f3 = $mw->new_ttk__labelframe(
	-text => "Pane 03",
	-width => 100,
	-height => 100
);

$f4 = $mw->new_ttk__labelframe(
	-text => "Pane 04",
	-width => 100,
	-height => 100
);

$f5 = $mw->new_ttk__labelframe(
	-text => "Pane 05",
	-width => 100,
	-height => 100
);

$ph->add($f1);
$ph->add($f2);
$ph->add($f3);
# $ph->g_grid(-column => 0, -row => 0, -padx => 10, -pady => 10);

$pv->add($f4);
$pv->add($f5);
# $pv->g_grid(-column => 0, -row => 1, -padx => 10, -pady => 10);

$p->add($ph);
$p->add($pv);
$p->g_grid(-column => 0, -row => 0, -padx => 10, -pady => 10);

# Tkx::after(2000, sub {$little->g_raise();});
Tkx::MainLoop();

Top

サンプル( sample_19.py )

from tkinter import *
from tkinter import ttk

root = Tk()

p = ttk.Panedwindow(root, orient=VERTICAL)
ph = ttk.Panedwindow(root, orient=HORIZONTAL)
pv = ttk.Panedwindow(root, orient=VERTICAL)

f1 = ttk.Labelframe(
		root,
		text='Pane 01',
		width=100,
		height=100
		)

f2 = ttk.Labelframe(
		root,
		text='Pane 02',
		width=100,
		height=100
		)

f3 = ttk.Labelframe(
		root,
		text='Pane 03',
		width=100,
		height=100
		)

f4 = ttk.Labelframe(
		root,
		text='Pane 04',
		width=100,
		height=100
		)

f5 = ttk.Labelframe(
		root,
		text='Pane 05',
		width=100,
		height=100
		)

ph.add(f1)
ph.add(f2)
ph.add(f3)
ph.grid(column=0, row=0, padx=10, pady=10)

pv.add(f4)
pv.add(f5)
pv.grid(column=0, row=1, padx=10, pady=10)

# p.add(ph)
# p.add(pv)
# p.grid(column=0, row=0, padx=10, pady=10)


# root.after(2000, lambda: little.lift())
root.mainloop()

Top

サンプル( sample_19_2.py )

from tkinter import *
from tkinter import ttk

root = Tk()

p = ttk.Panedwindow(root, orient=VERTICAL)
ph = ttk.Panedwindow(root, orient=HORIZONTAL)
pv = ttk.Panedwindow(root, orient=VERTICAL)

f1 = ttk.Labelframe(
		root,
		text='Pane 01',
		width=100,
		height=100
		)

f2 = ttk.Labelframe(
		root,
		text='Pane 02',
		width=100,
		height=100
		)

f3 = ttk.Labelframe(
		root,
		text='Pane 03',
		width=100,
		height=100
		)

f4 = ttk.Labelframe(
		root,
		text='Pane 04',
		width=100,
		height=100
		)

f5 = ttk.Labelframe(
		root,
		text='Pane 05',
		width=100,
		height=100
		)

ph.add(f1)
ph.add(f2)
ph.add(f3)
# ph.grid(column=0, row=0, padx=10, pady=10)

pv.add(f4)
pv.add(f5)
# pv.grid(column=0, row=1, padx=10, pady=10)

p.add(ph)
p.add(pv)
p.grid(column=0, row=0, padx=10, pady=10)


# root.after(2000, lambda: little.lift())
root.mainloop()

Top

サンプル( sample_23.pl )

use Tkx;

$mw = Tkx::widget->new(".");

$n = $mw->new_ttk__notebook;
$f1 = $n->new_ttk__frame; # first page, which would get widgets gridded into it
$f2 = $n->new_ttk__frame; # second page
$f3 = $n->new_ttk__frame; # third page

$t1 = $f1->new_ttk__label(-text => "One");
$t1->g_grid(-column => 0, -row => 0, -padx => 10, -pady => 10);

$t2 = $f2->new_ttk__label(-text => "Two");
$t2->g_grid(-column => 0, -row => 0, -padx => 10, -pady => 10);

$t3 = $f3->new_ttk__label(-text => "Three");
$t3->g_grid(-column => 0, -row => 0, -padx => 10, -pady => 10);

$n->add($f1, -text => "One");
$n->add($f2, -text => "Two");
$n->add($f3, -text => "Three");

$n->g_grid(-column => 0, -row => 0, -padx => 10, -pady => 10, -ipadx => 100, -ipady => 100);

# Tkx::after(2000, sub {$little->g_raise();});
Tkx::MainLoop();

Top

サンプル( sample_24.py )

from tkinter import *
from tkinter import ttk

root = Tk()

n = ttk.Notebook(root)

f1 = ttk.Frame(n)   # first page, which would get widgets gridded into it
f2 = ttk.Frame(n)   # second page
f3 = ttk.Frame(n)   # third page

t1 = ttk.Label(f1, text='One')
t1.grid(column=0, row=0, padx=10, pady=10)

t2 = ttk.Label(f2, text='Two')
t2.grid(column=0, row=0, padx=10, pady=10)

t3 = ttk.Label(f3, text='Three')
t3.grid(column=0, row=0, padx=10, pady=10)


n.add(f1, text='One')
n.add(f2, text='Two')
n.add(f3, text='Three')

n.grid(column=0, row=0, padx=10, pady=10, ipadx=100, ipady=100)

# root.after(2000, lambda: little.lift())
root.mainloop()

Top

参照ページ

Organizing Complex Interfaces

リリースノート
2023/03/11 Ver=1.03 Python 3.11.2 で確認

2020/10/27 Ver=1.01 Python 3.9.0 で確認

2018/11/08 Ver=1.01 初版リリース

関連ページ
Python インストール Windows 版

Python インストール Linux 版

MAX_PATH を除去する

Top