2010年9月1日水曜日

Gladeで画面を作ってみましょうか

Gladeを起動して、トップレベルウィンドウのスタイルを決めます。
トップレベルウィンドウというのは、いわゆるGUI画面の大外の画面、つまりメインとなる画面のことですね。メインウィンドウとも言います。
そのスタイルを決めましょう、ということです。
今回は、いわゆるダイアログ形式、OKボタン、キャンセルボタンがついてる形式で問題ないと思われるので、トップレベルはそれにしてしまいましょう。



ダイアログボックスを選択します。
そして、画面の白いところをクリックすると、メインウィンドウが出ます。これがいわゆるトップレベルウィンドウになるわけです。



何もなかった白い部分に、なんかそれっぽいものが表示されました。
このメインウィンドウに名前とウィンドウが表示される時のタイトルを付けなければなりません。
まあ、デフォルトのままでもいいちゃいいんですが、せっかくだから、プログラムするときに解り易い名前にしといた方が後でラクなので、付けときましょう。
「名前」の欄に「TopLevel」、「ウィンドウのタイトル」に「みくんちゅ♪セットアップヘルパ」と入れておきましょう。
ちょっと専門用語を使うと、このTopLevelが、このウィンドウオブジェクトの名称となります。
※この先、たびたびオブジェクトって単語が出てきますけど、別に身構える必要はありません。専門用語は専門用語ですが、オブジェクトそのものは、「あるもの」を指す場合によく使われています。まあ、ひとつのくくりなわけですが。まあ、理解としては、オブジェクト=キャバ嬢でもいいかも知れません。キャバクラにいるオネーちゃんをひとくくりにしている言葉がキャバ嬢ですから。

後で触れていきますが、Pythonのプログラムからアクセスする場合に、この名前でアクセスすることになるので、なんなのか解り易い名前にしとくとよいと思います。
※キャバクラに行ったときに、指名するために、ちゃんと名刺を貰って名前を覚えますよね?それと同じです。

では、次に、なんだか気になる下の方に二つ開いている余白にボタンを埋め込んでみましょうか。
ダイアログボックスなので、普通OKとキャンセルがあると思います。
まあ、適用とキャンセルだったり、OKと閉じるだったりしますけど。
いずれにせよ、なんらかの選択結果をユーザーが適用する、という意思表示をするボタンと、操作を適用せずにやめてしまうという意思表示を行うボタンが付いてるのが通常だと思われます。
この下の方の二つの余白は、そのための余白なんですね。
なので、右側にOK、左側にキャンセルボタンを埋め込んでみましょう。
Windowsだと逆なんですが、なぜかGNOMEの流儀では、この並びになっているようです。
ぶっちゃけ、Windowsに合わせようよ、と思うんですが、ここでワタクシ一人が頑張っても、意味がないのでGNOMEの流儀に合わせた方が親切というか、UIデザイン的に正しいと思われます。



左側のコントロールと表示のエリアから、「標準ボタン」を選択します。
そして、右側の余白部分をクリックすると、そこにボタンが出来上がります。

出来上がったボタンを選択し、右側のプロパティ表示の領域から、「ボタンの中身を設定する」の部分でストックボタンのラジオボタンを選択します。
そうすると、ストックボタン(標準でGNOMEに用意されているボタン)が選択できるようになりますので、ずっと上の方にあるOKボタンを選択しましょう。
もちろん、用途によっては、他のストックボタンを使用することも可能です。
なぜストックボタンを使用するか、といえば、ストックボタンであれば、標準で用意されているものであり、多言語対応がすでに行われているものだからです。
その辺を意識せずに使える、また各種GTKテーマも適用されるので、ストックボタンを使える場面ではストックボタンを使うのが「無難」と言えます。
※ちょっと、こめんどく書いてますけど、ぶっちゃけ、ストックボタンを使える場面では、ストックボタンを使ったほうがラクってだけの話です。

もちろん、GTKのボタンは多機能なので、「こんなことをやりたい!」も十分な知識があれば可能な場合が多いのですが、今は知識がないことが前提なので、素直にストックボタンでガマンしときましょうか。
先程もいいましたが、ガマン汁が出てからが本番なのです。(謎

というわけで、同様にキャンセルボタンも設定してしまいましょうか。

これでOKボタンとキャンセルボタンが出来ました。
これらのボタンもオブジェクトなので、名前には使うときに解り易い名前を付けておきましょう。
※気に入ったコが複数いる場合、やはり名前はきちんと覚えてますよね?
ここではbtOKとbtCancelにしています。
わかり易ければ何でもいいです。

さて、こうなると、大きな空白も埋めてしまいたくなるのが人情というものです。
埋めたくなりますよね?
穴があったら入れたくなるのが本能なのです。(謎

ここでGTK特有のコンテナというものを使います。
これは、先程のボタンオブジェクトのようなウィジェット(コントロールをGTKではウィジェットと呼びます)を格納するための入れ物で、水平ボックスと垂直ボックスの2種類があります。
※他にもありますが、基本がこの二つ、というだけです。
※ついでに。ボタンやテキストボックスなど、ひとつのオブジェクトに「機能」が割りつけられてるものをコントロールと言ったり、ウィジェットと言ったりします。まあ、メイドさんや執事は多機能ですが、主人の言いつけ通りの動作をすることを考えると、ひとつのウィジェット/コントロールと考えることも出来ますが、まあ、人間なので、普通はそんな呼び方はしませんね。(笑)

今回は、「インストールするアプリ名を縦に並べてチェックしていくツール」なので、垂直にウィジェットが並べばよい、ということになるので、垂直ボックスを選択して、大きな空白をクリックします。



すると、下記のようにアイテムの数を聞かれます。



デフォルトでは3となっていますが、これを増減することが可能です。
とりあえず、デフォルトの3のまま進めても、後から追加/削除は可能なので問題はありません。予め数が決まってるなら、その数を入れときましょう、って程度の話です。
アイテム数を設定すると、その数分で区切られた縦の箱が三つできます。



一番上の箱には、このアプリのタイトルとしてラベルを入れてみましょうか。
コントロールと表示から、ラベルを選択して、一番上の空箱をクリックします。



右側のプロパティの「ラベル」にタイトルである「みくんちゅ♪セットアップヘルパ」を入力すると、そのように画面にも表示されます。

次に、下の二つの空箱には、チェック・ボタンを設定してみましょう。
やはりコントロールと表示から「チェック・ボタン」を選択して、空箱をクリックします。



このチェック・ボタンにも名前と、表示されるラベルを設定します。
今回は、「みくつべ♪のインストール」としています。
もう一つは、「みくかべ♪のインストール」として、同様に作成してしまいましょう。
重要なのが、名前です。後からPythonプログラムで使用するときに、解り易い名前をつけておきましょう。
これはTopLevel同様に、非常に重要です。この名前で、プログラムから、このウィジェットが参照されるので、解り易い名前にしておかないと、後で大変苦労することになります。
※キャバクラで、指名間違えて、なんか別の女のコが来た時のがっかり感を想像して貰えれば、多少はイメージ出来るでしょうか。
なので、 「みくつべ♪のインストール」のウィジェットの名前は「chkMikutube」、「みくかべ♪のインストール」は「chkMikukabe」としておきましょうか。
まあ、自分なりのルールで決めてしまって構いませんが、そのルールは忘れないようにしておくことが大事です。
とはいえ、おっさんなので、すぐに忘れます。(笑)
ま、そん時は、仕方ないので、プログラミング時に、Glade開いて、ウィジェットの名前を確認しながら、プログラムするようにすればいいでしょう。




これで、Gladeによる作業は一旦終わりになります。
空白は全部埋まって、ダイアログボックスらしいGUIが出来ましたね。
この時点では、色々と間延びして見えますが、実行時には文字のサイズなどを含めてウィンドウの大きさが決定されますので、あまり気にしなくても大丈夫です。
気になるなら、細かい設定も可能ですが、それはまた、おいおいということで、最低限の知識だけで、先へ先へと進めていきたいと思います。

というわけで、完成したGUIを保存しましょう。
予めNetBeansでプロジェクトを作っておいたのは、実はこの時のためだったのです。
作成したNetBeansプロジェクトおsrcフォルダに、このGUIのファイルを保存します。
名前は、mikunchu.uiとしときましょうか。



これで、本当にGladeの作業は一旦終わりです。
「一旦?」そう一旦です。また後でGladeでの作業がありますが、そろそろガマン汁も限界に近いのではないでしょうか。
いよいよ、実際に、作成したダイアログ画面を表示するステップに入りましょうか。

0 件のコメント:

コメントを投稿