使用HTML為Ruby構建GUI的工具:ShenmeGUI

dwd4 9年前發布 | 13K 次閱讀 ShenmeGUI Ruby開發

ShenmeGUI是一套受Shoes啟發而誕生的GUI工具,擁有相似的DSL語法,使用HTML構建界面,并實現了前后端數據的雙向綁定,可以便捷地實現一些輕量的GUI應用。

安裝

執行gem install shenmegui。

示例代碼

require 'shenmegui'

ShenmeGUI.app do
  form(title: 'Your Application') do
    button('alert').onclick do
      alert 'Hello World!'
    end
    button('open an image').onclick do
      path = get_open_file_name
      @t.text = path
      @i.src = path
    end
    stack do
      label 'image path:'
      @t = textarea '', width: '100%'
    end
    @i = image "http://7jpqbr.com1.z0.glb.clouddn.com/bw-2014-06-19.jpg"
    @p = progress(75)
    button('+').onclick { @p.percent += 5 }
    button('-').onclick { @p.percent -= 5 }
  end
end

ShenmeGUI.start!

將會產生如圖所示的界面:

使用HTML為Ruby構建GUI的工具:ShenmeGUI

如未自動打開瀏覽器,可手動打開程序代碼同目錄的index.html。

button定義按鈕,并通過onclick綁定上了點擊事件。第一個按鈕彈出一個對話框,第二個按鈕彈出一個打開文件的對話框,將文件路徑寫到下方定義的textarea里,并改變image的src以顯示這個圖片。

下方的兩個按鈕演示了進度條的增減。

系統需求

Ruby版本大于等于2.0.0。

因為前后端通訊使用了websocket,所以需要使用支持websocket的瀏覽器。

目前打開文件對話框只實現了windows版本,在Linux等使用會出錯,以后會嘗試在其他系統實現,除此之外對系統沒有要求。

項目主頁:http://www.baiduhome.net/lib/view/home/1427853158303

 本文由用戶 dwd4 自行上傳分享,僅供網友學習交流。所有權歸原作者,若您的權利被侵害,請聯系管理員。
 轉載本站原創文章,請注明出處,并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺,歡迎各類分享!