一个工具好不好用，主要体现在两个方面

一方面是工具的UI界面，界面做的简洁美

观那么用户一看上去就觉得喜欢，想用。

不过要想用户能长期使用，那必须还得有

干货后台功能要强大、健壮。不能老是出

现bug或崩溃的情况，这就第二方面。

下面我们再次来谈谈HTMLDIalog对象，

在前面SketchUp插件之HTML界面交互

中简单的给大家做了一个演示，这里我们

再来谈谈里面的常用方法。

0 1、HtmlDialog

在前面章节中我们讲了如何去创建一个HtmlDialog

对象及一些特性。我们来回顾一下。

• 初始化HtmlDialog对象

#initialize(properties) ⇒ HtmlDialog

代码示例：

dialog = UI::HtmlDialog.new(
{
  :dialog_title => "Dialog Example",
  :preferences_key => "com.sample.plugin",
  :scrollable => true,
  :resizable => true,
  :width => 600,
  :height => 400,
  :left => 100,
  :top => 100,
  :min_width => 50,
  :min_height => 50,
  :max_width =>1000,
  :max_height => 1000,
  :style => UI::HtmlDialog::STYLE_DIALOG
})
dialog.set_url("http://www.sketchup.com")
dialog.show

具体的参数值介绍请参考SketchUp插件之HTML界面交互

• JavaScript传值给Ruby后台

#add_action_callback(callback_name) {|action_context, ...| ... } ⇒ Boolean

该方法建立Ruby回调方法，html对话框可以调用该方法来执行某些功能。

在html对话框中的javaScriot使用sketchup.回调方法名 来回调方法。

该回调是异步的，JavaScript调用可能在Ruby回调甚至被调用之前返回。

使用onCompleted回调获取完成通知。

调用方法：

ruby代码

dialog.add_action_callback("say") { |action_context, param1, param2|  
     puts "JavaScript said #{param1} and #{param2}" 
}

javaScript代码

sketchup.say('Hello World', 42, {  
    onCompleted: function() {    
        console.log('Ruby side done.');  
    }
});

示例效果：

从图中可以看出当我们点击了测试按钮后JavaScript把数据传给了后台，并执行了回调完成接口。

• ruby后台执行JavaScript方法

#execute_script(script) ⇒ nil

该方法用于异步执行html对话框上的JavaScript方法。

调用方法：

js_command = "document.getElementById('ceshi').innerHTML = 'Hi! 我是测试'"
dialog.execute_script(js_command)

示例效果：

在上面示例中是通过Ruby执行JavaScript代码 点击测试将JavaScript中的文字填充到html页面上。

• 窗口置前

#bring_to_front ⇒ nil

该方法用于将窗口置于最前面，即使最小化也将其置于其他窗口之上。

调用方法：

dialog.bring_to_front

• 窗口关闭

#close ⇒ nil

该方法用于关闭html对话框

调用方法：

dialog.close

• 加载本地html文件

#set_file(filename) ⇒ nil

该方法用于标识要在HtmlDialog中显示的本地HTML文件。

调用方法：

dialog.set_file("c:/mypage.html")

示例效果：

• 设置窗口大小

set_size(width, height) ⇒ true

该方法用于设置HtmlDialog的大小（以像素为单位）。

调用方法：

dialog.set_size(320, 240）

• 展示窗口

#show ⇒ nil

该方法用于展示初始化窗口对像，如果不执行该方法，窗口将不会展示出来

调用方法：

dialog.show

• 窗口是否可见

#visible? ⇒ Boolean

该方法很有用，可以判断对话框是否显示并仍处于活动状态，如果对话框最小化或在屏幕上不可见，此对话框仍将返回true。

调用方法：

if dialog.visible?  
    dialog.bring_to_front
else  
    dialog = UI::HtmlDialog.new  
    dialog.set_url("http://www.sketchup.com")  
    dialog.show
end

上面这段代码是判断dialog是否可见。如果可见将窗口置前，否则重新实例化一个dialog窗口对象并展示。

欢迎各位评论交流
喜欢请关注我

扫一扫

一个工具好不好用，主要体现在两个方面

一方面是工具的UI界面，界面做的简洁美

观那么用户一看上去就觉得喜欢，想用。

不过要想用户能长期使用，那必须还得有

干货后台功能要强大、健壮。不能老是出

现bug或崩溃的情况，这就第二方面。

下面我们再次来谈谈HTMLDIalog对象，

在前面SketchUp插件之HTML界面交互

中简单的给大家做了一个演示，这里我们

再来谈谈里面的常用方法。

0 1、HtmlDialog

在前面章节中我们讲了如何去创建一个HtmlDialog

对象及一些特性。我们来回顾一下。

• 初始化HtmlDialog对象

#initialize(properties) ⇒ HtmlDialog

代码示例：

dialog = UI::HtmlDialog.new(
{
  :dialog_title => "Dialog Example",
  :preferences_key => "com.sample.plugin",
  :scrollable => true,
  :resizable => true,
  :width => 600,
  :height => 400,
  :left => 100,
  :top => 100,
  :min_width => 50,
  :min_height => 50,
  :max_width =>1000,
  :max_height => 1000,
  :style => UI::HtmlDialog::STYLE_DIALOG
})
dialog.set_url("http://www.sketchup.com")
dialog.show

具体的参数值介绍请参考SketchUp插件之HTML界面交互

• JavaScript传值给Ruby后台

#add_action_callback(callback_name) {|action_context, ...| ... } ⇒ Boolean

该方法建立Ruby回调方法，html对话框可以调用该方法来执行某些功能。

在html对话框中的javaScriot使用sketchup.回调方法名 来回调方法。

该回调是异步的，JavaScript调用可能在Ruby回调甚至被调用之前返回。

使用onCompleted回调获取完成通知。

调用方法：

ruby代码

dialog.add_action_callback("say") { |action_context, param1, param2|  
     puts "JavaScript said #{param1} and #{param2}" 
}

javaScript代码

sketchup.say('Hello World', 42, {  
    onCompleted: function() {    
        console.log('Ruby side done.');  
    }
});

示例效果：

从图中可以看出当我们点击了测试按钮后JavaScript把数据传给了后台，并执行了回调完成接口。

• ruby后台执行JavaScript方法

#execute_script(script) ⇒ nil

该方法用于异步执行html对话框上的JavaScript方法。

调用方法：

js_command = "document.getElementById('ceshi').innerHTML = 'Hi! 我是测试'"
dialog.execute_script(js_command)

示例效果：

在上面示例中是通过Ruby执行JavaScript代码 点击测试将JavaScript中的文字填充到html页面上。

• 窗口置前

#bring_to_front ⇒ nil

该方法用于将窗口置于最前面，即使最小化也将其置于其他窗口之上。

调用方法：

dialog.bring_to_front

• 窗口关闭

#close ⇒ nil

该方法用于关闭html对话框

调用方法：

dialog.close

• 加载本地html文件

#set_file(filename) ⇒ nil

该方法用于标识要在HtmlDialog中显示的本地HTML文件。

调用方法：

dialog.set_file("c:/mypage.html")

示例效果：

• 设置窗口大小

set_size(width, height) ⇒ true

该方法用于设置HtmlDialog的大小（以像素为单位）。

调用方法：

dialog.set_size(320, 240）

• 展示窗口

#show ⇒ nil

该方法用于展示初始化窗口对像，如果不执行该方法，窗口将不会展示出来

调用方法：

dialog.show

• 窗口是否可见

#visible? ⇒ Boolean

该方法很有用，可以判断对话框是否显示并仍处于活动状态，如果对话框最小化或在屏幕上不可见，此对话框仍将返回true。

调用方法：

if dialog.visible?  
    dialog.bring_to_front
else  
    dialog = UI::HtmlDialog.new  
    dialog.set_url("http://www.sketchup.com")  
    dialog.show
end

上面这段代码是判断dialog是否可见。如果可见将窗口置前，否则重新实例化一个dialog窗口对象并展示。

欢迎各位评论交流
喜欢请关注我

扫一扫