レイアウト管理

以下の例で、いくつかの重要な概念を紹介します。

#! /usr/bin/env python

# gotoclass.py

import wx

class GoToClass(wx.Frame):
    def __init__(self, parent, id, title):
        wx.Frame.__init__(self, parent, id, title, size=(390, 350))
        panel = wx.Panel(self, -1)

        font = wx.SystemSettings_GetFont(wx.SYS_SYSTEM_FONT)
        font.SetPointSize(9)

        vbox = wx.BoxSizer(wx.VERTICAL)

        hbox1 = wx.BoxSizer(wx.HORIZONTAL)
        st1 = wx.StaticText(panel, -1, 'Class Name')
        st1.SetFont(font)
        hbox1.Add(st1, 0, wx.RIGHT, 8)
        tc = wx.TextCtrl(panel, -1)
        hbox1.Add(tc, 1)
        vbox.Add(hbox1, 0, wx.EXPAND | wx.LEFT | wx.RIGHT | wx.TOP, 10)

        vbox.Add((-1, 10))

        hbox2 = wx.BoxSizer(wx.HORIZONTAL)
        st2 = wx.StaticText(panel, -1, 'Matching Classes')
        st2.SetFont(font)
        hbox2.Add(st2, 0)
        vbox.Add(hbox2, 0, wx.LEFT | wx.TOP, 10)
        
        vbox.Add((-1, 10))

        hbox3 = wx.BoxSizer(wx.HORIZONTAL)
        tc2 = wx.TextCtrl(panel, -1, style=wx.TE_MULTILINE)
        hbox3.Add(tc2, 1, wx.EXPAND)
        vbox.Add(hbox3, 1, wx.LEFT | wx.RIGHT | wx.EXPAND, 10)

        vbox.Add((-1, 25))

        hbox4 = wx.BoxSizer(wx.HORIZONTAL)
        cb1 = wx.CheckBox(panel, -1, 'Case Sensitive')
        cb1.SetFont(font)
        hbox4.Add(cb1)
        cb2 = wx.CheckBox(panel, -1, 'Nested Classes')
        cb2.SetFont(font)
        hbox4.Add(cb2, 0, wx.LEFT, 10)
        cb3 = wx.CheckBox(panel, -1, 'Non-Project classes')
        cb3.SetFont(font)
        hbox4.Add(cb3, 0, wx.LEFT, 10)
        vbox.Add(hbox4, 0, wx.LEFT, 10)

        vbox.Add((-1, 25))

        hbox5 = wx.BoxSizer(wx.HORIZONTAL)
        btn1 = wx.Button(panel, -1, 'Ok', size=(70, 30))
        hbox5.Add(btn1, 0)
        btn2 = wx.Button(panel, -1, 'Close', size=(70, 30))
        hbox5.Add(btn2, 0, wx.LEFT | wx.BOTTOM, 5)
        vbox.Add(hbox5, 0, wx.ALIGN_RIGHT | wx.RIGHT, 10)
        
        panel.SetSizer(vbox)
        self.Centre()
        self.Show(True)

app = wx.App()
GoToClass(None, -1, 'gotoclass.py')
app.MainLoop()

レイアウトは簡単です。 垂直のSizerを作成し、5つの水平Sizerをその中に入れます。

font = wx.SystemSettings_GetFont(wx.SYS_SYSTEM_FONT)
font.SetPointSize(9)

標準のシステムフォントの大きさは10pxです。 私の環境ではこの手のウィンドウに対しては大きすぎるので、9pxに変更しました。

vbox.Add(hbox3, 1, wx.LEFT | wx.RIGHT | wx.EXPAND, 10)

vbox.Add((-1, 25))

flag 変数と border 変数を組み合わせることで、ウィジェット同士の距離を調整する方法は先程学びました。 しかし、現実的には制約があります。 Add() メソッドでは、与えられた辺に対して1つの枠線だけを設定することができます。 今回の例では、10pxの枠線を右左に与えました。 しかし、25pxの余白を下に与えることはできないのです。 この時できるのは左右と同じく10pxにするか、 wx.Bottom を外したければ0pxにするかのどちらかです。 ですから、異なった値を設定する必要があるときは、余分に空白を追加できます。 Add() メソッドで、ウィジェットとスペースを追加しましょう。

vbox.Add(hbox5, 0, wx.ALIGN_RIGHT | wx.RIGHT, 10)

2つのボタンをウィンドウの右側に配置しました。 これを実現するためには、3つの重要なことを知っておかねばなりません。 比率(proportion) と アラインメントフラグ と wx.EXPAND フラグです。 proportion 変数の値は必ず0でなければいけません。 ボタンはウィンドウサイズが変更されても大きさを変更すべきではないからです。

また、wx.EXPANDフラグを設定してはいけません。 ボタンは与えられた領域からはみ出るべきではないからです。

そして最後に、 wx.ALIGN_RIGHT フラグを設定しなければなりません。 水平なSizerはウィンドウの左端から右端に広がります。 wx.ALIGN_RIGHT フラグを設定していると、望んだとおりに、ボタンは右端に配置されます。

続いては複雑なサンプルです。 検索と置換ダイアログを作ります。 この手のダイアログは、EclipseなどのIDEで見かけます。

#! /usr/bin/env python

# findreplace.py

import wx

class FindReplace(wx.Dialog):
    def __init__(self, parent, id, title):
        wx.Dialog.__init__(self, parent, id, title, size=(255, 365))

        vbox_top = wx.BoxSizer(wx.VERTICAL)
        panel = wx.Panel(self, -1)

        vbox = wx.BoxSizer(wx.VERTICAL)

        #panel1
        panel1 = wx.Panel(panel, -1)
        grid1 = wx.GridSizer(2, 2)
        grid1.Add(wx.StaticText(panel1, -1, 'Find: ', (5, 5)), 0, wx.ALIGN_CENTER_VERTICAL)
        grid1.Add(wx.ComboBox(panel1, -1, size=(120, -1)))
        grid1.Add(wx.StaticText(panel1, -1, 'Replace with: ', (5, 5)), 0, wx.ALIGN_CENTER_VERTICAL)
        grid1.Add(wx.ComboBox(panel1, -1, size=(120, -1)))
        
        panel1.SetSizer(grid1)
        vbox.Add(panel1, 0, wx.BOTTOM | wx.TOP, 9)

        # panel2
        panel2 = wx.Panel(panel, -1)
        hbox2 = wx.BoxSizer(wx.HORIZONTAL)

        sizer21 = wx.StaticBoxSizer(wx.StaticBox(panel2, -1, 'Direction'), orient=wx.VERTICAL)
        sizer21.Add(wx.RadioButton(panel2, -1, 'Forward', style=wx.RB_GROUP))
        sizer21.Add(wx.RadioButton(panel2, -1, 'Backward'))
        hbox2.Add(sizer21, 1, wx.RIGHT, 5)

        sizer22 = wx.StaticBoxSizer(wx.StaticBox(panel2, -1, 'Scope'), orient=wx.VERTICAL)
        sizer22.Add(wx.RadioButton(panel2, -1, 'All', style=wx.RB_GROUP))
        sizer22.Add(wx.RadioButton(panel2, -1, 'Selected Lines'))
        hbox2.Add(sizer22, 1)
        
        panel2.SetSizer(hbox2)
        vbox.Add(panel2, 0, wx.BOTTOM, 9)

        # panel3
        panel3 = wx.Panel(panel, -1)
        sizer3 = wx.StaticBoxSizer(wx.StaticBox(panel3, -1, 'Options'), orient=wx.VERTICAL)
        vbox3 = wx.BoxSizer(wx.VERTICAL)
        grid = wx.GridSizer(3, 2, 0, 5)
        grid.Add(wx.CheckBox(panel3, -1, 'Case Sensitive'))
        grid.Add(wx.CheckBox(panel3, -1, 'Wrap Search'))
        grid.Add(wx.CheckBox(panel3, -1, 'Whole Word'))
        vbox3.Add(grid)
        vbox3.Add(wx.CheckBox(panel3, -1, 'Regular expressions'))
        sizer3.Add(vbox3, 0, wx.TOP, 4)

        panel3.SetSizer(sizer3)
        vbox.Add(panel3, 0, wx.BOTTOM, 15)
        
        # panel4
        panel4 = wx.Panel(panel, -1)
        sizer4 = wx.GridSizer(2, 2, 2, 2)
        sizer4.Add(wx.Button(panel4, -1, 'Find', size=(120, -1)))
        sizer4.Add(wx.Button(panel4, -1, 'Replace/Find', size=(120, -1)))
        sizer4.Add(wx.Button(panel4, -1, 'Replace', size=(120, -1)))
        sizer4.Add(wx.Button(panel4, -1, 'Replace All', size=(120, -1)))

        panel4.SetSizer(sizer4)
        vbox.Add(panel4, 0, wx.BOTTOM, 9)

        # panel5
        panel5 = wx.Panel(panel, -1)
        sizer5 = wx.BoxSizer(wx.HORIZONTAL)
        sizer5.Add((191, -1), 1, wx.EXPAND | wx.ALIGN_RIGHT)
        sizer5.Add(wx.Button(panel5, -1, 'Close', size=(50, -1)))

        panel5.SetSizer(sizer5)
        vbox.Add(panel5, 1, wx.BOTTOM, 9)
        
        vbox_top.Add(vbox, 1, wx.LEFT, 5)
        panel.SetSizer(vbox_top)
        
        self.Centre()
        self.ShowModal()
        self.Destroy()

app = wx.App()
FindReplace(None, -1, 'findreplace.py')
app.MainLoop()

※ Windowsユーザーの方は、self.SetClientSize(panel.GetBestSize())の行をShowModal()メソッドの前に置いてください。

レイアウトを記述していく前に、目標を達成する方法について考えておかねばなりません。 複雑なダイアログやウィンドウをシンプルにスケッチしておくことは非常に有効です。 ダイアログのスクリーンショットを見るときは、 そのダイアログが5つの部品に分解可能だということを、はっきりと理解しましょう。 Closeボタンは分割パネルを持っています。 それぞれの部品が独立したwx.Panelです。 合わせると6つのパネルがあることになります。 最初のパネルは親パネルで、私たちが確認できる5つのパネルを保持しています。

5つのパネルは全て一列に並んでいます。 親パネルは垂直なwx.BoxSizerになります。 wx.BoxSizerから離れて、wx.GridSizerを使います。 wx.GridSizerは次の章で説明します。 wx.GridSizerの使い方はとても簡単ですから、そう多くを説明することはありません。

sizer4 = wx.GridSizer(2, 2, 2, 2)
sizer4.Add(wx.Button(panel4, -1, 'Find', size=(120, -1)))
sizer4.Add(wx.Button(panel4, -1, 'Replace/Find', size=(120, -1)))
sizer4.Add(wx.Button(panel4, -1, 'Replace', size=(120, -1)))
sizer4.Add(wx.Button(panel4, -1, 'Replace All', size=(120, -1)))

wx.GridSizerのサンプルは有用性が高いです。 同じ大きさの4つのボタンを特定のパネルに収めたいわけですが、こういうときこそwx.GridSizerの出番です。 なぜなら、wx.GridSizerはあらゆるウィジェットをマス目の中に配置するからです。 これらのマス目は全て同じ幅と高さです。

The first example is intentionally a very simple one. So that it could be easily understood. There is no need to be afraid of wx.GridBagSizer. Once you understand it's logic, it is quite simple to use it. In our example, we will create a rename dialog. It will have one wx.StaticText, one wx.TextCtrl and two wx.Button-s.

最初のサンプルは意図的に簡単なものにしてあるので、理解しやすいでしょう。 wx.GridBagSizerを恐れることはありません。 一度理屈を分かってしまえば、使うのはとても容易いのです。 このサンプルでは、名前変更ダイアログを作ります。 このダイアログは、wx.StaticTextを1つ、wx.TextCtrlを1つ、そしてwx.Buttonを2つ使用しています。

#! /usr/bin/env python

# rename.py

import wx

class Rename(wx.Frame):
    def __init__(self, parent, id, title):
        wx.Frame.__init__(self, parent, id, title, size=(320, 130))

        panel = wx.Panel(self, -1)
        sizer = wx.GridBagSizer(4, 4)

        text = wx.StaticText(panel, -1, 'Rename To')
        sizer.Add(text, (0, 0), flag=wx.TOP | wx.LEFT | wx.BOTTOM, border=5)

        tc = wx.TextCtrl(panel, -1)
        sizer.Add(tc, (1, 0), (1, 5), wx.EXPAND | wx.LEFT | wx.RIGHT, 5)

        buttonOk    = wx.Button(panel, -1, 'Ok', size=(90, 28))
        buttonClose = wx.Button(panel, -1, 'Close', size=(90, 28))
        sizer.Add(buttonOk, (3, 3))
        sizer.Add(buttonClose, (3, 4), flag=wx.RIGHT | wx.BOTTOM, border=5)

        sizer.AddGrowableCol(1)
        sizer.AddGrowableRow(2)
        panel.SetSizerAndFit(sizer)
        self.Centre()
        self.Show(True)

app = wx.App()
Rename(None, -1, 'rename.py')
app.MainLoop()

We must look at the dialog window as a one big grid table.

ダイアログウィンドウを一つの大きなマス目の表として見なければなりません。

text = wx.StaticText(panel, -1, 'Rename To')
sizer.Add(text, (0, 0), flag=wx.TOP | wx.LEFT | wx.BOTTOM, border=5)

The text 'Rename to' goes to the left upper corner. So we specify the (0, 0) position. Plus we add some space to the bottom, left and bottom.

'Rename to' というテキストは左上隅に行きます。 (0, 0) という場所を設定したのです。 さらに、上・左・下に余白をいくらか追加します。

tc = wx.TextCtrl(panel, -1)
sizer.Add(tc, (1, 0), (1, 5), wx.EXPAND | wx.LEFT | wx.RIGHT, 5)

The wx.TextCtrl goes to the beginning of the second row (1, 0). Remember, that we count from zero. It expands 1 row and 5 columns. (1, 5). Plus we put 5 pixels of space to the left and to the right of the widget.

wx.TextCtrl は2行目の (1, 0) に配置されます。 行や列の添字は0から始まっていることに気をつけてください。 wx.TextCtrl は (1, 5) まで伸びます。 さらに、左右に5ピクセルの余白を配置しています。

sizer.Add(buttonOk, (3, 3))
sizer.Add(buttonClose, (3, 4), flag=wx.RIGHT | wx.BOTTOM, border=5)

We put two buttons into the fourth row. The third row is left empty, so that we have some space between the wx.TextCtrl and the buttons. We put the ok button into the fourth column and the close button into the fifth one. Notice that once we apply some space to one widget, it is applied to the whole row. That's why I did not specify bottom space for the ok button. A careful reader might notice, that we did not specify any space between the two buttons. e.g. we did not put any space to the right of the ok button, or to the right of the close button. In the constructor of the wx.GridBagSizer, we put some space between all widgets. So there is some space already.

4行目には2つのボタンを配置しました。 3列目は左側が空なので、 wx.TextCtrl とボタンとの間にいくらか隙間を入れておきます。 Okボタンを4列目に、Closeボタンを5列目に配置します。 あるウィジェットに一度でも余白を適用すると、列全体に適用されることに注意しましょう。 Okボタンに下の空白を設定していないのはそのためです。 注意深い読者の方ならお気づきでしょうが、2つのボタンの間には空白を設定していません。 どういうことかというと、Okボタンの右側と、Closeボタンの右側に空白を入れていないのです。 実は、 wx.GridBagSizer のコンストラクタで、全てのウィジェット同士の隙間を設定しているのです。 ですから、設定せずとも空白は既に存在するのです。

The next example will be a bit more complicated. We will create an Open Resource window. This example will show a layout of a very handy dialog which you can find in Eclipse IDE.

次のサンプルはもうちょっとだけ複雑になります。 リソースを開くためのウィンドウを作成します。 このサンプルは、Eclipseの統合開発環境にあるような、非常に便利なダイアログの配置を表示します。

#! /usr/bin/env python

# openresource.py

import wx

class OpenResource(wx.Frame):
    def __init__(self, parent, id, title):
        wx.Frame.__init__(self, parent, id, title, size=(400, 500))

        panel = wx.Panel(self, -1)
        sizer = wx.GridBagSizer(4, 4)

        text1 = wx.StaticText(panel, -1, 'Select a resource to open')
        sizer.Add(text1, (0, 0), flag=wx.TOP | wx.LEFT | wx.BOTTOM, border=5)

        tc = wx.TextCtrl(panel, -1)
        sizer.Add(tc, (1, 0), (1, 3), wx.EXPAND | wx.LEFT | wx.RIGHT, 5)

        text2 = wx.StaticText(panel, -1, 'Matching resources')
        sizer.Add(text2, (2, 0), flag=wx.TOP | wx.LEFT | wx.BOTTOM, border=5)

        list1 = wx.ListBox(panel, -1, style=wx.LB_ALWAYS_SB)
        sizer.Add(list1, (3, 0), (5, 3), wx.EXPAND | wx.LEFT | wx.RIGHT, 5)

        text3 = wx.StaticText(panel, -1, 'In Folders')
        sizer.Add(text3, (8, 0), flag=wx.TOP | wx.LEFT | wx.BOTTOM, border=5)

        list2 = wx.ListBox(panel, -1, style=wx.LB_ALWAYS_SB) 
        sizer.Add(list2, (9, 0), (3, 3), wx.EXPAND | wx.LEFT | wx.RIGHT, 5)

        cb = wx.CheckBox(panel, -1, 'Show derived resources')
        sizer.Add(cb, (12, 0), flag=wx.LEFT | wx.RIGHT, border=5)

        buttonOk     = wx.Button(panel, -1, 'OK', size=(90, 28))
        buttonCansel = wx.Button(panel, -1, 'Cancel', size=(90, 28))
        sizer.Add(buttonOk, (14, 1))
        sizer.Add(buttonCansel, (14, 2), flag=wx.RIGHT | wx.BOTTOM, border=5)

        help = wx.BitmapButton(panel, -1, wx.Bitmap('icons/help.png'), style=wx.NO_BORDER)
        sizer.Add(help, (14, 0), flag=wx.LEFT, border=5)

        sizer.AddGrowableCol(0)
        sizer.AddGrowableRow(3)
        sizer.AddGrowableRow(9)
        sizer.SetEmptyCellSize((5, 5))
        panel.SetSizer(sizer)

        self.Centre()
        self.Show(True)

app = wx.App()
OpenResource(None, -1, 'openresource.py')
app.MainLoop()

sizer.AddGrowableRow(3)
sizer.AddGrowableRow(9)

We want to have both wx.ListBox-es growable. So we make the first row of each wx.ListBox growable.

両方の wx.ListBox を伸びるようにしたいので、 1行目にある wx.ListBox をどちらも伸びるように設定しました。

newclass.py example is a type of a window, that I found in JDeveloper. It is a dialog window for creating a new class in Java.

newclass.py サンプルは、JDeveloperにあるJavaの新しいクラスを作るためのダイアログウィンドウです。

#! /usr/bin/env python

# newclass.py

import wx

class NewClass(wx.Frame):
    def __init__(self, parent, id, title):
        wx.Frame.__init__(self, parent, id, title)

        panel = wx.Panel(self, -1)
        sizer = wx.GridBagSizer(0, 0)

        text1 = wx.StaticText(panel, -1, 'Java Class')
        sizer.Add(text1, (0, 0), flag=wx.TOP | wx.LEFT | wx.BOTTOM, border=15)

        icon = wx.StaticBitmap(panel, -1, wx.Bitmap('icons/exec.png'))
        sizer.Add(icon, (0, 4), flag=wx.LEFT, border=45)

        line = wx.StaticLine(panel, -1)
        sizer.Add(line, (1, 0), (1, 5), wx.TOP | wx.EXPAND, -15)

        text2 = wx.StaticText(panel, -1, 'Name')
        sizer.Add(text2, (2, 0), flag=wx.LEFT, border=10)

        tc1 = wx.TextCtrl(panel, -1, size=(-1, 30))
        sizer.Add(tc1, (2, 1), (1, 3), wx.TOP | wx.EXPAND, -5)

        text3 = wx.StaticText(panel, -1, 'Package')
        sizer.Add(text3, (3, 0), flag=wx.LEFT | wx.TOP, border=10)

        tc2 = wx.TextCtrl(panel, -1)
        sizer.Add(tc2, (3, 1), (1, 3), wx.TOP | wx.EXPAND, 5)

        button1 = wx.Button(panel, -1, 'Browse...', size=(-1, 30))
        sizer.Add(button1, (3, 4), (1, 1), wx.TOP | wx.LEFT | wx.RIGHT, 5)

        text4 = wx.StaticText(panel, -1, 'Extends')
        sizer.Add(text4, (4, 0), flag=wx.TOP | wx.LEFT | wx.RIGHT, border=10)

        combo = wx.ComboBox(panel, -1)
        sizer.Add(combo, (4, 1), (1, 3), wx.TOP | wx.EXPAND, 5)

        button2 = wx.Button(panel, -1, 'Browse...', size=(-1, 30))
        sizer.Add(button2, (4, 4), (1, 1), wx.TOP | wx.LEFT | wx.RIGHT, 5)

        sb = wx.StaticBox(panel, -1, 'Optional Attributes')
        boxsizer = wx.StaticBoxSizer(sb, wx.VERTICAL)
        boxsizer.Add(wx.CheckBox(panel, -1, 'Public'), 0, wx.LEFT | wx.TOP, 5)
        boxsizer.Add(wx.CheckBox(panel, -1, 'Generate Default Constructor'), 0, wx.LEFT, 5)
        boxsizer.Add(wx.CheckBox(panel, -1, 'Generate Main Method'), 0, wx.LEFT | wx.BOTTOM, 5)
        sizer.Add(boxsizer, (5, 0), (1, 5), wx.EXPAND | wx.TOP | wx.LEFT | wx.RIGHT, 10)
        button3 = wx.Button(panel, -1, 'Help', size=(-1, 30))
        sizer.Add(button3, (7, 0), (1, 1), wx.LEFT, 10)

        button4 = wx.Button(panel, -1, 'Ok', size=(-1, 30))
        sizer.Add(button4, (7, 3), (1, 1), wx.LEFT, 10)

        button5 = wx.Button(panel, -1, 'Cancel', size=(-1, 30))
        sizer.Add(button5, (7, 4), (1, 1), wx.LEFT | wx.BOTTOM | wx.RIGHT, 10)

        sizer.AddGrowableCol(2)
        
        panel.SetSizer(sizer)
        sizer.Fit(self)

        self.Centre()
        self.Show(True)

app = wx.App()
NewClass(None, -1, 'newclass.py')
app.MainLoop()

line = wx.StaticLine(panel, -1 )
sizer.Add(line, (1, 0), (1, 5), wx.TOP | wx.EXPAND, -15)

Notice, that we have used negative number for setting the top border. We could use wx.BOTTOM with border 15. We would get the same result.

上の枠線を設定するのに、負の数字を使っていることに注目してください。 枠線の幅が15pxの wx.BOTTOM と同じ結果を得ることができます。

icon = wx.StaticBitmap(panel, -1, wx.Bitmap('icons/exec.png'))
sizer.Add(icon, (0, 4), flag=wx.LEFT,  border=45)

We put an wx.StaticBitmap into the first row of the grid. We place it on the right side of the row. By using images we can make our applications look better.

グリッドの1行目の右側に wx.StaticBitmap を配置します。 画像を使用することで、アプリケーションの見た目が良くなります。

sizer.Fit(self)

We did not set the size of the window explicitly. If we call Fit() method, the size of the window will exactly cover all widgets available. Try to comment this line and see what happens.

ウィンドウの大きさをはっきりと設定していません。 Fit() メソッドを呼ぶと、ウィンドウの大きさがぴったりと広がり、全てのウィジェットが使えるようになります。 Fit() の部分をコメントアウトして、どうなるか試してみてください。

The original page is here.