7. ダイアログウィンドウを作成する
ダイアログはユーザーとの相互作用のためと、特定の入力を得るために使われます。前のセクションは、前もってビルドされたダイアログwxFileDialogを使いました。Aboutメニューアイテムのために、自作のカスタムダイアログを開発することにしましょう。
- 作成しようとするダイアログは新しいウィンドウを必要とします。これはwxFrame1ウィンドウのコンポーネントではありません。同じアプリケーションでも、wxFrame1とは別のソースファイルとして保存します。エディタウィンドウの「wxApp1」タブをクリックします。Applicationタブが開いていると思います。
- パレットバー上で、「New」タブを選択し、wxDialogボタンを選択します。これは新しいソースファイルwxDialogボタンを作成し、そして自動的に作成中のモジュールにこの新しいソースファイルが追加されます。SaveボタンでwxFrame1と同じディレクトリに保存しておいてください(wxApp1タブも更新されていますので保存してください)。
- ユーザーが「About」メニューアイテムをクリックしたら、今のダイアログを表示するようにするため、「OnHelpitems0Menu」メソッドにコードを書き込むことにします。wxFrame1タブに戻り、そのwxFrame1ウィンドウ内のExploreタブをクリックします。wxFrame1を展開し、OnMnuhelpitems0Menuをダブルクリックして、コード内のOnMnuhelpitems0Menuメソッドに来ます。以下のコードを追加します。
def OnMnuhelpitems0Menu(self, event):
dlg = wxDialog1.wxDialog1(self)
try:
dlg.ShowModal()
finally:
dlg.Destroy()
- このコードはwxDialogモジュールを参照します。このコードが動く前に、wxDialog1モジュールをインポートする必要があります。慣習的にインポートはソースのはじめにします。wxFrame1.pyでwxpythonのインポート文の直後に以下を記述します。
import wxDialog1
- 3つのソースファイルを全て保存してください。アプリケーションを今実行することができます。「Help」メニューから「About」オプションを選択したら、今作成したダイアログが表示されるはずです。注意してほしいのは、ダイアログはモーダルなので、いったんAboutメニューアイテムをクリックしてwxDialog1を出したら、wxFrame1にアクセスする前にまずこのダイアログを閉じてなければいけません。アプリケーションを閉じ、Boa Constructorに戻ります。
- さて、ダイアログへいくつかオブジェクトを追加します。このガイドでは、一つのビットマップファイルが必要となります。ここではBoa.bmpというのを使います(各自適当に作ってください)。ペイントソフトなりで作った自作のビットマップを使うことができます。ビットマップをアプリケーションを作成しているディレクトリにコピーします。
- wxDialog1.pyタブを選択し、デザイナを立ち上げます。
- まずダイアログにラベルを追加しましょう。パレットから「Basic Controls」を選択します。このペインからwxstaticTextコントロールを選択します。デザイナ上でマウスボタンをクリックしラベルを作成します。
- インスペクタ上で「Label」フィールドを編集します。値を「Notebook - Simple Text Editor」にセットします。デザイナ上のラベルは、テキストがどんどん増えるほど長く伸びていきます。
- ラベル内のテキストのアライメントを設定するためにstyleフィールドを編集します。。styleプロパティをwxALIGN_CENTREに変えて下さい。このフォールドの他のオプションについてはwxPythonオンラインヘルプを参照して下さい。
- インスペクタからプロパティタブを選択します。fontフィールドを編集します。フォントを適切な大きさのフォント、12とか14ポイントにします。このプロパティではフォントとそのサイズの両方を変えることができるのに注意してください。
- デザイナウィンドウ上ではラベルは長方形上の8つのマーカーによって表示されます。マウスをこれらのマーカー上でクリック(して押しつづける)して、ボックスのサイズを変えるためマウスを動かしてください。ラベルの中央でクリックすることもでき、そうしてマウスを押しつづけたまま動かすとラベルが動きます。いろいろやってラベルをボックスの上部に置いてください。
- 以下ではまず他のラベルを追加します。テキストを「This is my first Boa Constructor application」とセットします。インスペクタ上でプロパティペインを選択し、「BackgroundColour」を編集します。カラーセットの中から好きな色を選んでOKを押してください。ラベルをいろいろな色にしたり位置を直したりしてください。
- 次にビットマップを貼り付けます。「Basic Controls」からwxStaticBitmapコントロールを選択してください。インスペクタ中でコンストラクタペインを選択し、Bitmapフィールドを編集します。これをクリックすると、「ファイルを開く」ダイアログが開きます。さきほど作っておいたビットマップを選択しましょう。デザイナ上のwxStaticBitmapフィールドはビットマップを適切に配置するために動かします。2つのラベルの間でうまく配置できたと思うまでビットマップを動かしてください。
- 最後に、ダイアログにボタンを一つ追加します。パレット上で「Buttons」ペインを選択してください。基本のボタンであるwxButtonを選びます。これをフォーム上のビットマップの上に置きます。インスペクタ上のコンストラクタタブ上で「Label」を編集し、「Close」とします。インスペクタからeventsタブを選択、ButtonEventグループをクリックするとEVT_BUTTONが表示されますのでそれをダブルクリックします。ヒント:まずイベントグループを選択し、それからイベントをタブルクリックします。要はメニュー作成の時と同じです。
- それぞれのコントロールの位置やサイズを好きに変えてみてください。
- デザイナ上からwxDialog1を選択します。インスペクタからコンストラクタタブ上で、Titleフィールドを編集します。これを「About Notebook」とします。
- インスペクタ上でPostボタンを押し、今やったことをソースコードに反映させます。
- 最後に、Closeボタン用にイベントハンドラを実装する必要があります。エディタ上でwxDialog1のソースを選択します。「OnButton1Button」メソッドにカーソルを合わせます。たぶん一番下です。「Exit」メニューアイテムで作ったように、同じ「Close」メソッドを使います。注意点としては、Closeはウィンドウを閉じるということです。ルートウィンドウを閉じればアプリケーションが終了しますが、子ウィンドウを閉じることは単に親ウィンドウに戻るだけです。
def OnButton1Button(self, event):
self.Close()
アプリケーションを実行します。作成したダイアログは以下のように見えるはずです。
おめでとうございます。BoA Constructorを使った最初のアプリケーションを作成したわけです。エディタは完全です。
このチュートリアルでは Boaのコアコンポーネントを使いました。
あなたかこれまでやってきたことを再調査するために時間を掛けてください。あなたは以下のことを学びました
- アプリケーションの作成
- フレーム、メニュー、ステータスバーの作成
- ボタン、テキスト入力フィールド、ラベルなどのコントロールの作成
- コントロールの適切な設定
- コモンダイアログの使用
- カスタムダイアログのデザイン