WebDialog classは以下の特徴があります。
htmlでダイアログボックスを記述できる。
htmlの要素にrubyからアクセスできる。
rubyからhtml内のjavascriptの関数を実行できる。
htmlのjavascriptからrubyのメソッドを実行できる。
詳しくはこちら
SketchUp Ruby API Reference
http://download.sketchup.com/OnlineDoc/gsu6_ruby/Docs/ruby-webdialog.html
手順
（1）
test.html
ダイアログに表示したい内容をhtmlで用意します。
-------------------------------------------------
<html>
<head>
<script language="javascript">
<!--
function onOK()
{
window.location='skp:on_ok';
}
function ruby(msg)
{
document.getElementById("result").innerHTML = msg;
}
-->
</script>
</head>
<body>
<h1 id="result">h1</h1>
<div id="message">
This is a test.<br>
</div>
<input type=text id="myTextInput">
<input onClick="onOK()" type="button" size="100" value="Continue">
<input onClick="ruby('call from html')" type="button" size="100" value="ruby">
</body>
</htm>
-------------------------------------------------
window.location='skp:on_ok';でrubyのメソッドを呼び出します。
<input type=text id="myTextInput">
のようにidを付けておけばrubyから値を取り出せます。
(2)
ruby スクリプトはこんな感じ。
-------------------------------------------------
def web
dlg = UI::WebDialog.new("WEBDialog", true, "WEBDialog", 739, 641, 150, 150, true)
dlg.add_action_callback("on_ok") {|d,p|
t = d.get_element_value("myTextInput")
puts t
d.execute_script("ruby('call from ruby')");
}
html = File.dirname(__FILE__) +"/test.html"
dlg.set_file html
dlg.show
end
-------------------------------------------------
UI::WebDialog.newで新しくWebDialogを作ります。
dlg.add_action_callback("on_ok") でjavascriptからの呼び出しを受けます。
d.get_element_value("myTextInput") で、htmlの要素の値を取り出せます。
d.execute_script("ruby('call from ruby')")でjavascriptの関数を実行できます。
dlg.set_file htmlでhtmlをセットします。
dlg.showでhtmlを表示します。
サンプルの画像は飾りも無く、さびしいですが、htmlなので、好きなデザインにしてください。
インターネット上のファイルも表示できるので、いろいろ使えそうです。
クリックで拡大します。
