GtkSimpleLayout Inspector

[b]Inspector介紹[/b]
Inspector是GtkSimpleLayout v0.2.x添加的一個新功能,他允許使用GtkSimpleLayout佈局的程序在運行的時候探測UI的信息。
(有關GtkSimpleLayout,請看[url]http://rubynroll.iteye.com/admin/blogs/460727[/url])

對於web開發者來說,firebug之類的工具對於調試UI很重要,因爲它可以讓你在最終展現的頁面中查看每一個UI元素,瞭解UI的佈局,參數等等。因爲很多東西在“設計時”是看不到的,所以運行時的探測能力非常重要。

對於桌面程序來說,如果也能有想firebug這樣的工具,則對調試UI也有很大幫助。特別是對於佈局非常複雜而且動態性很強的UI來說,運行時的探測能力尤其有用。

GtkSimpleLayout Inspector就是爲你的程序提供這樣的一個能力。下圖是例子calculator.rb運行時打開Inspector和未打開Inspector的屏幕截圖:

[img]http://dl.iteye.com/upload/attachment/143480/edadf772-1b26-3487-9b4a-0ad7e282215b.png[/img]

當打開Inspector功能的時候,GtkSimpleLayout自動爲每一個UI元素添加一個帶顏色的框,當你把鼠標移動到這個框的時候,在tooltips中就把這個UI元素的信息列出來,這些信息包括自頂向下的所有容器,局部參數,類型,以及組名,屬性等等。

上面的例圖顯示,按鈕'7‘是一個Gtk::Button,名字爲'7',layout參數爲[true,true](即:填充空間,自動增長),參數{:set_size_request => [30, 30]}(請求的尺寸爲30x30)。其直接父容器是一個Gtk::HBox,往上依次是VBox,HBox,最頂層的容器是VBox。各個容器的layout參數也一併列了出來。

[b]如何打開Inspector[/b]
要打開Inspector,你可以在宿主類代碼中用inspector_opt來設置.

例如,打開inspector,並告訴inspector加的框的厚度爲5像素:

class MyWin < Gtk::Window
include SimpleLayout::Base
inspector_opt :enable => true, :border_width => 5
....
end



或者,你也可以設置環境變量INSPECTOR_ENABLE爲1,INSPECTOR_BORDER_WIDTH爲5,然後運行程序,效果是一樣的。設置環境變量可以讓你不用改動目標程序的代碼。


export INSPECTOR_ENABLE=1
export INSPECTOR_BORDER_WIDTH=5
ruby calculator.rb


[b]Inspector的實現原理[/b]
Inspector的實現原理很簡單:當你放置一個UI元件時,GtkSimpleLayout自動爲這個UI元件創建一個Gtk::EventBox裹住這個UI元件,然後返回這個EventBox僞裝成這個UI元件。由於這個EventBox處於上層容器和UI元件之間,它截獲所有通過的參數,屬性,並傳遞給被裹住的UI元件,同時作記錄。最後在鼠標移動到這個EventBox的時候在tooltips中展現所記錄的UI信息(部分信息需要實時查詢)。

這個額外加入的EventBox不影響程序的運行(除了它會增加一個寬度指定的框外),也不改變UI元件的組關係,因此整個程序不用做任何改動,可以象往常一樣正常運行。當inspector沒有開啓的時候,這些EventBox不被創建,自然也不引入任何額外的開銷。

得益於GTK的UI對象模型,以及ruby的表達能力,此功能增加不到100行代碼。

Enjoy it :-)
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章