Create  Edit  Diff  Phillro Industries  Index  Search  Changes  History  Source  RSS  Note  wikifarm  Login

tut-tut_pack

Author: NISHIO Mizuho

コントロールの配置とサイズ その2

今回は多くのコントロールを配置する時に便利なクラスを紹介します。

その1(UI::Hbox)

Ruby/GTK のGtk::HBoxにあたるクラスがUI::Hboxと言えば、その機能を推測できる人がいるかもしれません。ちなみにUI::HboxはVCLに存在しないクラスです。

$(Apollo)/sample/tutorial/pack1.rb

   1|require 'phi'
   2|require 'rgui/ui'
   3|
   4|form = RGUI::Form.new(:form1, 'formです')
   5|
   6|btn1 = Phi::Button.new(form, :button1, 'その1')
   7|btn2 = Phi::Button.new(form, :button2, 'その2')
   8|btn3 = Phi::Button.new(form, :button3, 'その3')
   9|
  10|hbox = UI::Hbox.new([btn1, btn2, btn3], 10)
  11|
  12|form.add(hbox)
  13|  
  14|btn1.on_click = proc do
  15|  form.layout
  16|end
  17|
  18|btn2.on_click = proc do
  19|  form.layout
  20|end
  21|
  22|btn3.on_click = proc do
  23|  form.layout
  24|end
  25|form.show
  26|Phi.mainloop

このスクリプトを実行すると、このような ウィンドウがあらわれます。

解説

2行目の require 'rgui/ui' はおまじないです。これから説明するパッキングを行うコントロールを使う時に必要になります。

4〜8行ではフォームやボタンの生成を行っています。ここでは4行目が今までのようにPhi::Formではなく、RGUI::Formになっていることに注意してください。これも一種のおまじないです。

10行目の hbox = UI::Hbox.new が先ほど述べたパッキングを行うコントロールを生成している行です。UI::Hboxというのは他のコントロールをのせるための透明な枠のようなもので、自分自身は何も画面に表示されませんが、自分の上にあるコントロールの配置を水平方向に自動的に変更することができます。「水平方向に自動的に変更」というのはコントロールの高さをそろえ、それぞれのコントロールの間隔を一定にするということです。パッキングというのは上のようなコントロールの配置のことを指します。

ここでは UI::Hbox.new の第1引数である[btn1, btn2, btn3] の三つがパッキングのコントロールに配置されます。

12行目は form.add( RGUI::Form#add? ) でパッキングコントロールをフォームに載せています。今までのようにコントロール生成時に親コントロールを決めていないので、違和感を感じるかもしれません。

パッキングコントロールを使えば自動的に配置を変更することは出来ますが、上の図のようにそのままではUI::Hboxの上のコントロールの配置は変更されません。コントロールの配置を変更するにはPhi::Hboxの親であるフォームの form.layout( RGUI::Form#layout? ) を実行する必要があります。

上のスクリプトでは14〜24行目で三つのボタンのうちどれかが押された時に form.layout が実行されるようにしていますので、上のスクリプトを実行してボタンが押された時に配置が変更されるかどうか確認してみてください。

RGUI::Form#layout? はフォームのサイズが変更された時にコントロールの配置を自動的に変更したい時に役立ちます。実例として、上のスクリプトを実行してフォームの大きさを変更してから、ボタンを押した時の図を載せておきます。図

最後にUI::Hbox.newの引数について少し述べます。UI::Hbox.newの第1引数は Array (配列)のオブジェクトで、その要素は自動的に配置を変更したいコントロールになります。Array の添え字の小さいものから順に左から並べられます。第2引数は自動的に配置が変更される時のコントロールの間隔になります。例えば、この値を0にすると、コントロールは隙間なく横に並ぶことになります。

クラスとメソッド

組み込みクラス

  • Array

RGUI::Form?

  • RGUI::Form.new
  • RGUI::Form#add?
  • RGUI::Form#layout?

UI::Hbox?

  • UI::Hbox.new

その2(入れ子)

$(Apollo)/sample/tutorial/pack2.rb

   1|require 'phi'
   2|require 'rgui/ui'
   3|
   4|form = RGUI::Form.new(:form1, 'formです')
   5|
   6|btn1 = Phi::Button.new(form, :button1, 'ボタンその1')
   7|btn2 = Phi::Button.new(form, :button2, 'ボタンその2')
   8|btn3 = Phi::Button.new(form, :button3, 'ボタンその3')
   9|btn_vbox = UI::Vbox.new([btn1, btn2, btn3], 5)
  10|
  11|lbl1 = Phi::Label.new(form, :label1, 'ラベルその1')
  12|lbl2 = Phi::Label.new(form, :label2, 'ラベルその2')
  13|lbl_hbox = UI::Hbox.new([lbl1, lbl2], 10)
  14|
  15|radio1 = Phi::RadioButton.new(form, :radio_btn1, 'ラジオボタンその1')
  16|radio2 = Phi::RadioButton.new(form, :radio_btn2, 'ラジオボタンその2')
  17|radio_hbox = UI::Hbox.new([radio1, radio2], 5)
  18|
  19|lbl3 = Phi::Label.new(form, :label3, 'ラベルその3')
  20|speed1 = Phi::SpeedButton.new(form, :speed_btn1, 'スピードボタンその1')
  21|speed1.flat = true
  22|other_hbox = UI::Hbox.new([lbl3, speed1], 5)
  23|
  24|vbox = UI::Vbox.new([lbl_hbox, radio_hbox, other_hbox])
  25|hbox = UI::Hbox.new([btn_vbox, vbox])
  26|  
  27|form.add(hbox)
  28|form.on_resize = proc do
  29|  form.layout
  30|end
  31|form.show
  32|Phi.mainloop

このスクリプトを実行すると、このような ウィンドウがあらわれます。

解説

逆から説明していきますが、多分その方が分かりやすいと思います。

27行目ではformにhboxを格納しています。

25行目ではformに格納されたhboxにbtn_vboxとvboxを横に並べています。図にするとこういう感じでしょうか。

pack2-1.png

24行目ではlbl_hbox、radio_hbox、other_hboxの三つをvboxに縦に格納しています。図にすると下のようになります。

pack2-2.png

9、13、17、22行目ではそれぞれのボックスにボタンやラベルを格納しています。

最後、28〜30行ではフォームの大きさが変更された時にコントロールの配置が変更されるようにしています。この部分は起動時にも実行されるので、上の図のようにコントロールの配置が変更された状態でウィンドウが現れます。

クラスやメソッド

UI::Vbox?

  • UI::Vbox.new

RGUI::Form?

Last modified:2004/11/26 06:13:22
Keyword(s):
References:[tut-tut_index]