レイアウトとウィジェットについてもう少し

これは、 PyGTKに関する一連の記事の続きです。



前の記事では、PyGTKアプリケーションを開発するためにWindowsとUbuntuを準備し、Gladeインターフェイスエディターで作業し、水平および垂直レイアウトタイプを調べ、スクロールペインとテキストエディター、ボタン、ボタン、および小さな信号の垂直グループを使用しました。 その結果、UbuntuとWindowsで正常に機能する最初の真のクロスプラットフォームアプリケーションを手に入れました。 前の記事をまだ読んでいない場合は、 それから始めることをお勧めします。



この記事では、簡単なゲームを作成し、その過程でレイアウトについてもう少し学び、PyGTKウィジェットに精通し続け、ダイアログを操作します。

アイデア、脚本

まず第一に、私たちが何をするかについてお話したいと思います。 ゲームになります。 ゲームはシンプルで楽しいものでなければなりません。 私に起こった最も簡単なことは三目並べでした。 ゲームには対戦相手のキャラクターが必要です。 私が知っている最もクールなキャラクターはベンダーです。 そのため、ベンダーを敵として三目並べを作成します。



ウィキペディアでゲームのアルゴリズムを使用してください。非常にシンプルでわかりやすく説明されています。 私たちはPyGTKをマスターしているので、メイントピックから複雑なアルゴリズムを取り除いてください。 アルゴリズムについて詳しく知りたい場合は、 Donald Knuthをご覧ください。



シナリオは次のとおりです。プレーヤーはクロスを配置し、ベンダーはゼロで応答します。 ゲームの終わりに、勝者にお祝いの言葉が表示され、その後ゲームが再開されます。



すぐに、使いやすさの観点から、メインウィンドウに重なるダイアログが使用されるため、ゲームが非常に悪いことに注意してください。 良いニュースは、ダイアログに精通し、任意のウィンドウからモーダルダイアログを作成できることです。



Inkscapeのインターフェースをスケッチしましょう：





インターフェースファイルを作成するには、Gladeインターフェースエディターを使用します。 Gladeを実行してください。 何が危険なのかわからない場合は、 前の記事を読んでください。

テーブルレイアウト

テーブルレイアウトは、多数のウィジェットを配置する場合に非常に便利です。これは私たちの場合です。



スケッチから、三目並べに3本の線が必要であり、ボタンを上下に配置するのに1本の線が必要であることがわかります。

新しいウィンドウを作成する



すぐに表示します（これがプログラムのメインウィンドウになります）。



テーブルレイアウトを追加します



5行3列で

。

テーブルのセルが正方形になるようにウィンドウをスケーリングし、最終結果を想像しやすくしました

。



2つのボタンを追加します。 テーブルの最初のセルにボタンを配置します。

。

ご覧のとおり、ボタンはセル全体を占めていました。 この機能を使用して競技場を描画できますが、実行しません。ここでは、この動作も必要ないため、プロパティの[パッケージ]タブに切り替えます。 「垂直オプション」で「フィル」のチェックを外します

。

したがって、ボタンは利用可能なすべてのスペースを高さで埋めるべきではないことを示します

。

気づいたら、表のセルの幅は同じではありません。 これにより、同じセルで競技場を作成できなくなります。 したがって、table1を選択し、主なプロパティで「均質性」を「はい」に変更します

、

セルの幅は同じになりました。



スケッチでは、上部と下部のボタンが水平方向のスペース全体を占有し、上部のボタンは1つのセルのみを占有します。 幅が3つのセルを占めることが必要です。 ボタンを選択し、プロパティ「パッケージング」、「右側に追加」、



値を3に増やします。 ボタンの幅は3セルです

。

アイコンボタン

「New game」ボタンと「Quit the game」ボタンにテキストだけでなくアイコンも含めるようにします。 これは非常に簡単です。 メインプロパティで、[タイプの編集]を[コンテナ]に変更します。

。

これで、ボタンの表面のコンテナに何でも配置できます。



アイコン付きのテキストを配置する最も簡単で最も正しい方法は、別のレイアウトツールを使用することです。 「アライメント」ボタンに追加します

、

主なプロパティで、垂直および水平スケーリングをゼロに設定します

、

したがって、アラインメントは、利用可能なすべてのスペースを「キャプチャ」しませんが、必要最小限に制限されます。 これが必要なのは、アイコンがテキストから離れないようにするためです。



配置内には、1つの要素だけのスペースがあり、2つ配置する必要があります。 2つのセルを持つ水平レイアウトを使用し、配置に配置します

。

左のセルにアイコンを配置します

、

右側-「New Game」というテキストの付いたテキストラベル

、

。



アイコンを検索して描画しないために、後でプログラムが起動したときにアイコンをロードしないように、既製のGTKアイコンを使用します。 メインプロパティの[作成]アイコンを選択します

。



アイコンがマークに近すぎます。 これは、水平レイアウトのギャップサイズを設定するか、アイコン自体のピクセル単位でパディングを設定することで修正できます。 アイコンに4ピクセルのパディングを設定します

。

結果は次のようになります。

。



下部の[ゲームを終了]ボタンについても同じ操作を行います。 このようなものでなければなりません

、

閉じるアイコンを使用しました。



インターフェイスをgui.gladeファイルに保存すると、ゲームの開始時にプログラムによってプレイフィールドが作成されます。

競技場

それらの機能をよりよく研究するために、テキストラベルに基づいて競技場を構築します。



9つのラベルがあり、Gladeでそれぞれ個別に作業することは意味がありません。これは数行のコードでこれを行うことができるためです。 さらに、すべてのラベルのプロパティを一度に変更する機会がありますが、これは間違いなく必要です。



空白のプログラムを作成しましょう：

 ＃！/ usr / bin / env python
 ＃コーディング：utf-8
インポートシステム
輸入OS
 pygtkをインポートする
 pygtk.require（ '2.0'）
インポートgtk
インポートgtk.glade
        
クラスアプリ：

     def __init __（self）：
         ＃インターフェースファイルをダウンロードする
         self.gladefile = "gui.glade"
         ＃インターフェース要素のツリー
         self.widgetsTree = gtk.glade.XML（self.gladefile）
         ＃表        
         self.table1 = self.widgetsTree.get_widget（ "table1"）       
         ＃競技場を初期化する   
         self.init_board（）
         ＃ウィンドウを閉じるイベントをアプリケーション終了関数に接続します
         self.window = self.widgetsTree.get_widget（ "window1"）
         if（self.window）：
             self.window.connect（ "destroy"、self.close_app）
           
     def close_app（self、widget）：    
         gtk.main_quit（）        
    
 __name__ == "__main__"の場合：
     app = App（）
     gtk.main（）

ゲームフィールドはself.init_board（）で作成されます。

     def init_board（self）：
         ＃競技場の辞書保管ラベル
         self.board_widgets = {}
         ＃1〜3行目にラベルを追加します
        範囲（0.3）の行の場合：
             ＃ストレージ行を初期化し、空の辞書を作成
             ＃テーブルセルの内容を保存する
             self.board_widgets [行] = {}
             ＃列0から2を通過
            範囲（0,3）の列の場合：
                 ＃ラベルを作成します。そのテキストには行と列の番号が含まれます
                 self.board_widgets [行] [列] = \
                                 gtk.Label（ "label_％d_％d"％（列、行））
                 ＃ラベルをテーブルに添付
                 self.table1.attach（self.board_widgets [行] [列]、 
                                   列、列+ 1
                                   行+ 1、行+ 2）
                 ＃ラベルを表示する
                 self.board_widgets [行] [列] .show（）

競技場は、辞書に基づいて作成された「2次元配列」に保存されます。 ラベルコンストラクターgtk.Label（）は、ラベルが表示するテキストを渡します。 アタッチテーブルメソッドは、ウィジェットを最初のパラメーター、この場合はラベルとして使用します。 2番目はラベルの左側が添付される列番号、3番目はラベルの右側が添付される列番号です。 つまり、最初の列にラベルを配置するには、2番目と3番目のパラメーターが0と1である必要があります。 ドキュメントのすべてのパラメータの説明を読むことができます 。



プログラムを起動すると、次のようなウィンドウが表示されるはずです。

。

イベントエリア、フレーム

プログラムを復活させる時が来ました。下のボタンを機能させ、マウスの左ボタンをクリックするためのハンドラーを各ラベルに追加します。 Gladeを開いて、ボタンにクリックハンドラーを追加します。 ボタンを選択し、プロパティの「信号」タブに移動して、クリックした信号にハンドラーを割り当てます

。

変更を保存し、コード編集に戻ります。 次の行を__init__に追加します。

         ＃ハンドラー関数とイベントの関連付けを指定する語彙
         dic = {                 
                 「button2_clicked_cb」：self.close_app、
             }
         ＃シグナルをハンドラーに接続するマジックコマンド
         self.widgetsTree.signal_autoconnect（dic）

コードを保存します。 下のボタンをクリックすると、プログラムが閉じるかどうかを確認できます。



各ラベルには、マウスクリックイベントハンドラーbutton-press-eventも必要です。 ただし、今すぐ追加してプログラムを実行し、機能するかどうかを確認してから、機能しないことを確認してください。 ラベルには独自のウィンドウがないため、このようなイベントを処理することはできません。 独自のウィンドウを持たないすべてのウィジェットは、このリストにリストされています 。



この制限を克服するには、特別なタイプのレイアウト-イベントエリアを使用する必要があります。 Gladeパレットでは、このように見えます

。

次のように機能します。イベントエリアはウィンドウに配置され、ラベルはイベントエリアに配置されます。 イベントハンドラーは、イベントペインに割り当てられます。 その結果、必要なすべてのイベントがインターセプトされます。



これをself.init_board（）に反映すると同時に、イベントエリアのイベントハンドラーを追加する必要があります。

     def init_board（self）：
         ＃競技場の辞書保管ラベル
         self.board_widgets = {}
         ＃1〜3行目にラベルを追加します
        範囲（0.3）の行の場合：
             ＃ストレージ行を初期化し、空の辞書を作成
             ＃テーブルセルの内容を保存する
             self.board_widgets [行] = {}
             ＃列0から2を通過
            範囲（0,3）の列の場合：
                 ＃イベントエリアを作成
                 event_box = gtk.EventBox（）
                 ＃ラベルを作成します。そのテキストには行と列の番号が含まれます
                 label = gtk.Label（ "label_％d_％d"％（列、行））
                 ＃ラベルを表示する
                 label.show（）
                 ＃イベントエリアにラベルを貼る
                 event_box.add（ラベル）
                 ＃エリアのイベントハンドラーを定義する
                 event_box.connect（ "button_press_event"、self.label_clicked、行、列）
                 ＃この経済をすべてストレージに書き込む
                 self.board_widgets [行] [列] = event_box                
                 ＃ラベル付きのイベントエリアをテーブルに添付
                 self.table1.attach（self.board_widgets [行] [列]、 
                                   列、列+ 1
                                   行+ 1、行+ 2）
                 ＃ラベルが表示されたイベントエリアを作成する
                 self.board_widgets [行] [列] .show（）    

     def label_clicked（自己、ウィジェット、イベント、行、列）：
         print "column％s、row％s"％（列、行）

接続関数では、信号とウィジェットに加えて、行と列という2つの追加パラメーターも指定します。 これらのパラメーターはlabel_clickedで読み取られ、ゲームの制御に使用されます。 イベントエリアとラベルの両方をshow（）を使用して表示する必要があります。 プログラムを実行してラベルをクリックすると、コンソールで、ラベルが配置されているテーブルの列と行の出力の形式で反応が表示されます。



インターフェイスはほとんど準備ができていますが、セルに線のマークを付けずにプレイするのは不便です。 ラベルにフレームを追加する必要があります。 GTKには、フレームを表示する特別なウィジェットコンテナーがあります。 Gladeでは、「フレーム」と呼ばれます

。



イベント領域がフレーム内に収まるようにコードを変更する必要があります。 同時に、ラベル上のテキストの出力を削除します。これはもう必要ありません。

     def init_board（self）：
         ＃競技場の辞書保管ラベル
         self.board_widgets = {}
         ＃1〜3行目にラベルを追加します
        範囲（0.3）の行の場合：
             ＃ストレージ行を初期化し、空の辞書を作成
             ＃テーブルセルの内容を保存する
             self.board_widgets [行] = {}
             ＃列0から2を通過
            範囲（0,3）の列の場合：
                 ＃フレームを作成
                フレーム= gtk.Frame（）
                 frame.set_shadow_type（gtk.SHADOW_ETCHED_IN）
                 ＃イベントエリアを作成
                 event_box = gtk.EventBox（）
                 ＃ラベルを作成
                ラベル= gtk.Label（）
                 ＃ラベルを表示する
                 label.show（）
                 ＃イベントエリアにラベルを貼る
                 event_box.add（ラベル）
                 ＃エリアのイベントハンドラーを定義する
                 event_box.connect（ "button_press_event"、self.label_clicked、行、列）
                 event_box.show（）
                 frame.add（event_box）
                 ＃この経済をすべてストレージに書き込む
                 self.board_widgets [行] [列] =フレーム                
                 ＃ラベル付きのイベントエリアをテーブルに添付
                 self.table1.attach（self.board_widgets [行] [列]、 
                                   列、列+ 1
                                   行+ 1、行+ 2）
                 ＃ラベルが表示されたイベントエリアを作成する
                 self.board_widgets [行] [列] .show（）

そのような窓が判明

ラベル上の書式付きテキスト出力

タグはフォーマットされたテキストを表示できます。 特定のフォント、サイズ、スタイル、色でテキストを表示できます。 init_boardに数行追加します

                 ＃ラベル後= gtk.Label（）
                 label.set_use_markup（True）
                 label.set_markup（ "<span font_desc = 'Arial 64'> X </ span>"）

プログラムを実行します。

。

対話

Gladeには、ほとんどすべての機会にダイアログがあります。 任意のウィンドウに基づいてモーダルダイアログを作成する方法を紹介します。



新しいウィンドウを作成し、そのプロパティに移動します。





矢印は、ウィンドウのモダリティと関連するウィンドウという2つの重要なプロパティを強調しています。 モダリティに注目すべき理由は明らかだと思います-モーダルな対話を行っています。 「リンクウィンドウ」プロパティは、これがモーダルダイアログになるメインウィンドウを示します。



既知のウィジェットとレイアウトを使用して、このダイアログをスケッチしました。



ウィジェットツリー：





すべてが非常に簡単です。イメージについては、ファイルがソースとして指定されていることに注意してください。





インターフェイスを保存し、コードエディターに戻ります。



最初に行うことは、削除イベントダイアログウィンドウイベントのハンドラーを設定することです。 これが行われない場合、ウィンドウタイトルのXボタンを使用してダイアログを閉じた後（またはウィンドウマネージャーを使用して他の方法で）、このウィンドウのすべてのウィジェットが「消滅」します。 次回このウィンドウを開くと、微視的になり、完全に空になります。 __init__に追加します

         self.winner_dialog = self.widgetsTree.get_widget（ "window2"）        
         self.winner_dialog.connect（ "delete-event"、self.on_delete_event）

on_delete_eventメソッドは、イベントがさらに処理されないようにTrueを返す必要があります。



一般に、ほとんどすべての準備が整ったので、メソッドコードは興味深いものになり、ゲームの勝者が表示されます。

     def show_winner（self）：
         self.game.and_the_winner_is（）== -1：の場合
             self.widgetsTree.get_widget（ "image3"）。set_from_file（ '1.png'）
             self.widgetsTree.get_widget（ "label3"）。set_markup（ 
                         "<span font_desc = 'Arial 18'>さて、あなたは私よりも賢いということを理解していますか？</ span>"）
             self.widgetsTree.get_widget（ "label4"）。set_text（ "はい、ワームですので認めています。"）
             self.widgetsTree.get_widget（ "label5"）。set_text（
                          「あなたはただの\ n缶、ベンダー、\ nandだ、今それを証明します！」）        
        その他：
             self.widgetsTree.get_widget（ "image3"）。set_from_file（ '2.png'）
             self.widgetsTree.get_widget（ "label3"）。set_markup（ 
                         "<span font_desc = 'Arial 18'>男はロボットに負けなければなりません！</ span>"）
             self.widgetsTree.get_widget（ "label4"）。set_text（ "はい、ちょうど幸運です。"）
             self.widgetsTree.get_widget（ "label5"）。set_text（ "あなたは少数ですか？さて、ちょっと待ってください！"）
         self.winner_dialog.show（）

set_from_fileメソッドを使用して画像ファイルを指定します。ラベルのset_markupはマークアップを示し、self.winner_dialog.show（）はダイアログを開きます。



Windowsでゲームを実行するために残ります：



およびLinux



意図したとおり、すべてが両方のOSで動作します！



アルゴリズムは、プレーヤーが弱い場合（子供など）、偶然に動きます。そのため、勝つチャンスがあり、ベンダーは負けます。

今こそゲームをダウンロードし、ベンダーで遊ぶ時間です。