« Hello Worldをつくる1 | トップページ | Hello Worldをつくる3 »

2009年4月25日 (土)

Hello Worldをつくる2

やはり文字だけ表示されてもつまらないのでボタンを追加してみます。
ボタンを押したら文字が表示されるようにしてみましょう。

先ほどのプロジェクトを開いて、とりあえずFrameのsubclassをTest2に変えておきます。
次に、一番内側のSizerを選択してCommon-->xwButtonをクリック。プロパティのlabelを"Click here"と入力します。同じくwxALIGN_CENTER_HORIZONTALとwxEXPANDをチェックして細長いボタンを作製します。

01 02

wxStaticTextのプロパティlabelを値無しにセットします。続いて、ツールバーのExpandとStretchアイコンで面積を最大にします。この辺は好みです。最後にstyle-->wxALIGN_CENTREと、wxST_NO_AUTORESIZEをチェックしてテキストを中央寄せしておきましょう。

03

  1. <?xml version="1.0" encoding="UTF-8" standalone="yes" ?>
  2. <resource xmlns="http://www.wxwindows.org/wxxrc" version="2.3.0.1">
  3.   <object class="wxFrame" name="MyFrame1" subclass="Test2">
  4.     <style>wxDEFAULT_FRAME_STYLE|wxTAB_TRAVERSAL</style>
  5.     <size>500,300</size>
  6.     <title></title>
  7.     <object class="wxPanel" name="m_panel1">
  8.       <style>wxTAB_TRAVERSAL</style>
  9.       <object class="wxBoxSizer">
  10.         <orient>wxVERTICAL</orient>
  11.         <object class="sizeritem">
  12.           <option>1</option>
  13.           <flag>wxALIGN_CENTER|wxALIGN_CENTER_HORIZONTAL|wxALIGN_CENTER_VERTICAL|wxALL|wxEXPAND</flag>
  14.           <border>5</border>
  15.           <object class="wxStaticText" name="m_staticText2">
  16.             <style>wxALIGN_CENTRE|wxST_NO_AUTORESIZE</style>
  17.             <label></label>
  18.           </object>
  19.         </object>
  20.         <object class="sizeritem">
  21.           <option>0</option>
  22.           <flag>wxALIGN_CENTER_HORIZONTAL|wxALL|wxEXPAND</flag>
  23.           <border>5</border>
  24.           <object class="wxButton" name="m_button1">
  25.             <label>Click here</label>
  26.             <default>0</default>
  27.           </object>
  28.         </object>
  29.       </object>
  30.     </object>
  31.   </object>
  32. </resource>
  33.  

これでXRCファイルを生成します。今度は多少オプションを変えます。

$ xrcise -o Test2.rb noname.xrc

今までは-aオプションを指定していたので、Wx:Appのクラスまでコードが生成されていましたが、コレが無くなったのでFrameクラス部分のコードだけが生成されるようになりました。

今後、今回のように後からボタン追加やその他画面の変更があるかもしれないので、自動生成されるコードを直接いじるのではなく、このクラスを継承して、必要な処理を追加していくやり方にします。後からの変更が合った場合の影響範囲が少なくなって作りやすくなります。

ということで、新しく別ファイルを開いてrubyのコードを書いていきます。とりあえず新しく作った画面を表示するだけのソースコードを書いてみます。

  1. require 'rubygems'
  2. require 'wx'
  3. require 'Test2.rb'
  4.  
  5. class Hello_World2 < Test2
  6.   def initialize(parent = nil)
  7.     super()
  8.   end
  9. end
  10.  
  11.  
  12. class App < Wx::App
  13.   def on_init
  14.     f =  ::Hello_World2.new
  15.     f.show
  16.   end
  17. end
  18. App.new.main_loop
  19.  

Hello_World2.rb でセーブしました。これを実行すると、下部にボタンだけがある画面が表示されるようになったはずです。

では次に、ボタンが押されたときの処理を追加してみます。ボタンクリック時のイベントハンドラを記述すると、クリックしたときの反応を定義できます。

wxRuby Documentation: Class ReferenceでWx:ButtonのEvent handler項目を見てみるとevt_button(id) { | event | ... }と書いてあります。実際どのような感じで書けばよいのかさらに調べてみるとwxRubyのTutorialにサンプルが載っていました。これを今作った環境に合わせて書き換えてみます。

今回追加したボタンのattr_readerはm_button1なのでコレに置き換えて
押された場合はon_buttonClickを呼んで、そこで処理させることにします。処理の中身はwxStaticTextのlabelにHello Worldをセットすることです。これもリファレンスのwxStaticText項目を見るとset_label()を使用すると文字をセットできそうです。
なので、このように書いてみました。

  1. require 'rubygems'
  2. require 'wx'
  3. require 'Test2.rb'
  4.  
  5. class Hello_World2 < Test2
  6.   def initialize(parent = nil)
  7.     super()
  8.     evt_button(m_button1.get_id()) {|event| on_buttonClick(event)}
  9.   end
  10.  
  11.   def on_buttonClick(event)
  12.     m_statictext2.set_label('Hello World')
  13.   end
  14. end
  15.  
  16.  
  17. class App < Wx::App
  18.   def on_init
  19.     f =  ::Hello_World2.new
  20.     f.show
  21.   end
  22. end
  23. App.new.main_loop

では、実行してみましょう。

$ ruby Hello_World2.rb

04

このように表示されました。

 

|

« Hello Worldをつくる1 | トップページ | Hello Worldをつくる3 »

Hello Worldをつくる」カテゴリの記事

コメント

私にとっては大変有用な内容です。ありがとうございます。
さて、Test2.rb をみると、
@m_button1 = finder.call("m_button1")
という部分があったので、もしやと思い
evt_button( m_button1.get_id() ) を
evt_button( @m_button1 ) と書き換えたところ
同じように動作しましたので報告します。

投稿: 河村 | 2010年6月25日 (金) 20時49分

情報ありがとうございます!>河村さん

投稿: | 2010年9月24日 (金) 01時51分

コメントを書く



(ウェブ上には掲載しません)




トラックバック

この記事のトラックバックURL:
http://app.f.cocolog-nifty.com/t/trackback/1201593/29194527

この記事へのトラックバック一覧です: Hello Worldをつくる2:

« Hello Worldをつくる1 | トップページ | Hello Worldをつくる3 »