mikutter開発日記: MUiなんとなくできてきた、ような…

あれから紆余曲折あったけどMUiが構想からなんとなく動くものになってきた。
MUiの略称は Mikutter UI くらいにしておこうとおもう。GTKだってGimp Tool Kitだったしね

できるだけ、SXMLをそのままUIとしてレンダリングしたい！…と思っていたわけなんだけど、実際の動くコードは今こんなかんじ。

require File.join(File.dirname(__FILE__), '..', 'mui')

MUi.toolkit = 'gtk'
window = mui([:window, [:button, 'hello, world']])
window.add_event_listener(:close){
  mui.mainloop_quit
}
(window / 'button').add_event_listener(:click){
  p 'clicked!!'
}
mui.mainloop

ﾄﾞﾔｧ
まあ最初の方は授業とかでおまじないと言われるアレですね

window = mui([:window, [:button, 'hello, world']])

これは、以下のようなSXMLをRubyの配列で表現したもの

(window
  (button "hello, world"))

mui()というのは、jQueryで言うところの$()みたいなものと思っていただければ。$("<div>")とかやるじゃん
これが実際何をしているかというと、引数をMUiのGtkプラグインで定義されるオブジェクトでラップしたものを返してます。そのクラスはMUiBaseクラスのサブクラスで、MUiBaseはArrayのサブクラス。そして中身の値も渡された配列と全く同じになるようにコピーされます。

渡された配列にいろいろextendしていく方法とこちらの方法で迷ったんだけど、extendする方法だと、freezeされた配列が渡されてきたときにエラーにせざるを得ないのと、この方法なら、同じ配列を雛形にして何度もMUiオブジェクトを作れるというメリットがある。

そしてDOMにはイベントのAPIで、AddEventListenerというのがあるので、ちょちょいと実装しました。これといって特筆することはないです、単に、第一引数にイベント名を取って、イベントが呼ばれたらブロックが実行されるだけなので。

二つ目のイベントの

(window / 'button').add_event_listener(:click){
  p 'clicked!!'
}

window / 'button' というやつは、「windowウィジェットの子の中で要素名がbuttonのもの」という意味です。最終的にはCSSセレクタまがいなことが出来れば、と思ってる。少なくとも#.くらいは使えたほうがいいかとか。今は最初にマッチしたものを返してるだけなんだけど、jQueryって、複数返って来た時に、呼ばれたメソッドを各ウィジェット毎に繰り返し適用してるよね？あれ便利だけどどうなのかな。

…というわけで

実行したらこうなります＼(＾o＾)／ポイントとしては

配列でいいんだし、複雑なのは外部からYAMLで流しこめばいいでしょ
イベントのバインドはらくらく

意外とメリットが少ない…
もちろんMUiプラグインをgtk以外のものにすればいろいろ応用がきく、というのはちゃんと視野に入ってますよ。例えばまだ全然できてないけどマルチプロセス用のプラグインを指定すれば、gtkの時と全く同じようにマルチプロセスになるとか、ね。

・・・

・・・

・・・

やばいなんか微妙な気がしてきた大丈夫かこれうあああああ＾ｐ＾

2011年5月2日月曜日

MUiなんとなくできてきた、ような…