Hello Worldをつくる

2009年4月25日 (土)

Hello Worldをつくる3

ボタンを押してイベントを拾ってHello Worldの出力ができたので、今度は入力部分を扱ってみたいとおもいます。
入力フィールドを作って、ボタンを押すと出力用のフィールドに文字列が出るようにしてみます。

画面はこんな感じに作ってみました。

続きを読む "Hello Worldをつくる3"

| | コメント (0) | トラックバック (0)

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

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

 

| | コメント (2) | トラックバック (0)

2009年4月19日 (日)

Hello Worldをつくる1

定番のHello Worldをつくってみます。

wxFormBuilderを起動してwxFormBuilderの使い方で説明した設定をします。これだけだと味気ないので、今度はパネルを追加して文字を表示させてみます。

まずはPanelの追加。その前にレイアウトを決めるSizerというモノを追加しなければ行けません。いきなりPanelを追加しようとしてもできません。ということでLayout-->wxBoxSizerを追加。

01_2

左側のツリーにSizerのアイコンが追加されてFrameの内側が赤線で光っている状態になりました。これでSizerを追加できました。続いてContains-->wxPanelを追加。

02

パネルが表示されました。ココに文字を貼り付けるには、wxStaticTextを追加します。だけどその前にレイアウトを決めないといけないので、パネルの上に同じくSizerを追加します。手順は同じです。そして、タブよりCommon-->wxStaticTextをクリック。右側のプロパティでlabelの値をHello Worldと入力します。ついでに中央に表示させてみます。同じくプロパティよりflag-->wxALIGN_CENTER_HORIZONTALをチェックしておきます。

04

05

これで完成です。XRCファイルを出力しましょう。ファイルの中身はこんな感じです。

  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="Test1">
  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>0</option>
  13.           <flag>wxALIGN_CENTER_HORIZONTAL|wxALL</flag>
  14.           <border>5</border>
  15.           <object class="wxStaticText" name="m_staticText2">
  16.             <label>Hello World</label>
  17.           </object>
  18.         </object>
  19.       </object>
  20.     </object>
  21.   </object>
  22. </resource>
  23.  

これをxrciseでコンバートします。

$ xrcise -a App1 -o HelloWorld1.rbw noname.xrc

rubyのソースコードがこんな感じに変換されます。rubygemsの追加を忘れずに。

  1.  
  2. require 'rubygems'
  3. require 'wx'
  4.  
  5. # This class was automatically generated from XRC source. It is not
  6. # recommended that this file is edited directly; instead, inherit from
  7. # this class and extend its behaviour there. 
  8. #
  9. # Source file: noname.xrc
  10. # Generated at: Sun Apr 19 11:52:55 &#26481;&#20140; (&#27161;&#28310;&#26178;) 2009
  11.  
  12. class Test1 < Wx::Frame
  13.  
  14.   attr_reader :m_panel1, :m_statictext2
  15.  
  16.   def initialize(parent = nil)
  17.     super()
  18.     xml = Wx::XmlResource.get
  19.     xml.flags = 2 # Wx::XRC_NO_SUBCLASSING
  20.     xml.init_all_handlers
  21.     xml.load("noname.xrc")
  22.     xml.load_frame_subclass(self, parent, "MyFrame1")
  23.  
  24.     finder = lambda do | x |
  25.       int_id = Wx::xrcid(x)
  26.       begin
  27.         Wx::Window.find_window_by_id(int_id, self) || int_id
  28.       # Temporary hack to work around regression in 1.9.2; remove
  29.       # begin/rescue clause in later versions
  30.       rescue RuntimeError
  31.         int_id
  32.       end
  33.     end
  34.  
  35.     @m_panel1 = finder.call("m_panel1")
  36.     @m_statictext2 = finder.call("m_staticText2")
  37.     if self.class.method_defined? "on_init"
  38.       self.on_init()
  39.     end
  40.   end
  41. end
  42.  
  43.  
  44. class App1 < Wx::App
  45.   def on_init
  46.     f =  ::Test1.new
  47.     f.show
  48.   end
  49. end
  50. App1.new.main_loop
  51.  
  52.  

では実行してみましょう。こんなかんじで画面が表示されればOKです。

06

| | コメント (0) | トラックバック (0)