aardio + Ruby 可視化快速開發獨立 EX

aardio + Ruby 可視化快速開發獨立 EXE 桌面程序

ardio 可以方便地調用 Buby，支持系統自帶 Ruby 環境。如果沒有安裝 Ruby ，aardio 會自動安裝。所以 aardio + Ruby 開發的軟件可以生成體積較小的獨立 EXE 文件。

用 aardio 執行 Ruby 代碼

用法很簡單，aardio 代碼示例：

import win.ui;
var winform=win.form(text="執行Ruby代碼")
winform.add(
edit={cls="edit";left=26;top=16;right=737;bottom=435;edge=1;multiline=1}
)
import process.ruby;

//執行 Ruby 代碼
var out=process.ruby.exec("puts '測試UTF-8'")
winform.edit.print(out);

//解析 Ruby 表達式并返回為 aardio 對象
var out=process.ruby.eval(`[1, 2, { name: "tanaka", age: 19 }]`)
winform.edit.print(out);

winform.show();
win.loopMessage();

在 aardio 中運行上面的代碼：

process.ruby.exe() 以管道方式打開 Ruby 進程執行 Ruby 代碼，第一個參數可以是 *.rb 代碼文件路徑，也可以直接指定 Ruby 代碼。可以添加不定個數啟動參數，也可以在一個字符串參數中寫多個啟動參數。

process.ruby.eval() 可以解析第一個字符串參數指定的 Ruby 表達式的值，返回值會自動轉換為純 aardio 對象。

CGI 調用 Ruby

import win.ui;
var winform=win.form(text="Ruby CGI")

var code=/*
require 'cgi'

cgi=CGI.new
puts cgi.header
puts "<html><body>This is a test</body></html>"
*/

//創建測試文件
string.save("/res/index.rb",code);

//啟動嵌入式 HTTP 服務器，自動分配空閑服務端口
import process.ruby.simpleHttpServer;
var url=process.ruby.simpleHttpServer.startUrl("/res/index.rb");

//創建瀏覽器控件顯示網頁
import web.form;
var wb=web.form(winform);
wb.go(url);

winform.show();
win.loopMessage();

process.ruby.simpleHttpServer 基于 aardio 標準庫 wsock.tcp.simpleHttpServer 創建了一個嵌入式的多線程 HTTP 服務器，自動分配空閑服務端口，不會與其他程序沖突，在程序退出時此 HTTP 服務器會自動退出。很省心不需要寫多余的代碼。

上面的 "/res/index.rb" 可以放到工程資源目錄下，發布的時候能生成獨立 EXE 文件。

創建 Ruby 交互解釋器

aardio 代碼示例：

import console
console.setTitle("Ruby 交互解釋器");

import process.ruby;
process.ruby.cmd("irb");

按 Ctrl + D 或者輸入 exit 以后回車可以退出。

執行 Rake 命令

import win.ui;
/*DSG{{*/
var winform=win.form(text="執行Rake命令")
winform.add(
edit={cls="edit";left=26;top=16;right=737;bottom=435;edge=1;multiline=1;z=1}
)
/*}}*/

var rakefile=/*
task :purchaseAlcohol,[:arg1, :arg2] do |t, args|
  puts "#{args[:arg1].to_i + args[:arg2].to_i}"
end
*/

//創建測試文件
string.save("/rakefile",rakefile )

import process.ruby;
var result,err=process.ruby.rake("purchaseAlcohol[123,2]");
winform.edit.print(result,err);

winform.show();
win.loopMessage();

process.ruby.rake() 創建進程管道運行 rake 命令，返回值分別為：標準輸出，錯誤輸出。

第一個參數指定 rake 命令。可選自第二個參數開始指定其他命令行參數。多個命令行參數自動合并，不在雙引號內、且包含空白或需要轉義的參數轉義處理后首尾自動添加雙引號。

需要先在工作目錄下創建 rakefile 。可以用 process.ruby.workDir 指定 Ruby 工作目錄。默認工作目錄為 "/" ，"/" 在 aardio 中表示應用程序根目錄（開發時為工程根目錄，發布后為 EXE 所在目錄）。

用 aardio 可視化開發圖形界面

用 aardio + Ruby 混合開發的主要目的是為了使用 aardio 的可視化開發圖形界面。

如果不熟悉 aardio ，建議先看一遍 aardio 開始頁的《 aardio 編程語言快速入門——語法速覽》。aardio 開發界面很簡單，相關教程、范例、開源項目也很多，這里就不多講了。

一篇文章Stimulus 狀態管理，幻燈片顯示講述了Stimulus的狀態管理，接下來我們看看如何跟蹤外部資源的狀態。

有時候我們的controllers需要跟蹤外部的資源的狀態，這里的外部指的是不在DOM或不在Stimulus中的任何東西。例如，我們可能需要發出HTTP請求，并在請求狀態變化時進行響應。或者我們希望啟動一個定時器，然后當controller斷開連接時停止定時器。在本文，我們將解決這些問題。

接下來，我們學習一下，如何通過加載和插入遠程HTML片段，來異步填充頁面的各個部分。

我們要創建一個通用的用于加載內容的controller，所有的HTML內容都是從服務器獲取的。然后我們將用它來加載一系列未讀的消息，就像你在郵箱里看到的那樣。

打開public/index.html：

<div data-controller="content-loader"
    data-content-loader-url-value="/messages.html"></div>

然后創建一個public/messages.html

<ol>
    <li>New Message: Stimulus Launch Party</li>
    <li>Overdue: Finish Stimulus 1.0</li>
</ol>

在真實應用中，這個內容是服務器動態生成的，但是這里出于示范的目的，我們就用一個靜態文件。

現在我們實現一下我們的controller：

import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
    static values={ url: String }

    connect() {
        this.load()
    }

    load() {
        fetch(this.urlValue)
            .then(response=> response.text())
            .then(html=> this.element.innerHTML=html)
    }
}

當controller連接元素時，會根據data-content-loader-url-value屬性值設置的url，發起請求。然后把請求得到的HTML內容，賦值給連接元素的innerHTML。

打開瀏覽器的開發者工具，點開網絡查看tab頁，然后刷新頁面。您將看到一個表示初始頁面加載的請求，隨后是controller對messages.html的后續請求。

我們繼續優化一下controller，隔段時間就刷新div內的內容，讓它一直顯示最新的內容。

我們使用data-content-loader-refresh-interval-value屬性值來設定刷新的時間間隔，單位是毫秒，

<div data-controller="content-loader"
    data-content-loader-url-value="/messages.html"
    data-content-loader-refresh-interval-value="5000"></div>

現在我們修改一下controller，檢查間隔，如果間隔值存在，就啟動一個定時器來刷新。

在controller里添加一個static values，然后定義一個新方法startRefreshing():

export default class extends Controller {
    static values={ url: String, refreshInterval: Number }
    
    startRefreshing() {
        setInterval(()=> {
            this.load()
        }, this.refreshIntervalValue)
    }

    // …
}

然后修改connect()方法，如果refreshInterval值存在的話，就調用startRefreshing()方法。

connect() {
    this.load()

    if (this.hasRefreshIntervalValue) {
        this.startRefreshing()
    }
}

刷新頁面，然后通過開發者工具，觀察一下，是不是每5秒鐘就會有一個新請求。然后可以嘗試修改public/messages.html，所有的改變都會出現在div內。

當controller連接元素時，我們啟動了定時器，但是我們沒有停止它。這意味著，如果我們的controller連接的元素消失的話，controller將在后臺繼續發起HTTP請求。

我們修復這個問題，修改startRefreshing()方法，保存一個對定時器的引用：

startRefreshing() {
    this.refreshTimer=setInterval(()=> {
        this.load()
    }, this.refreshIntervalValue)
}

然后添加一個對應的stopRefreshing()方法，來取消定時器：

stopRefreshing() {
    if (this.refreshTimer) {
        clearInterval(this.refreshTimer)
    }
}

最終，我們告訴Stimulus當controller失去連接時，取消定時器，好，我們添加一個disconnect()方法：

disconnect() {
    this.stopRefreshing()
}

現在我們可以確定，內容加載器controller只會在連接到DOM時才會發出請求。

我們來看一下最終的controller類：

import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
    static values={ url: String, refreshInterval: Number }

    connect() {
        this.load()

        if (this.hasRefreshIntervalValue) {
            this.startRefreshing()
        }
    }

    disconnect() {
        this.stopRefreshing()
    }

    load() {
        fetch(this.urlValue)
            .then(response=> response.text())
            .then(html=> this.element.innerHTML=html)
    }

    startRefreshing() {
        this.refreshTimer=setInterval(()=> {
            this.load()
        }, this.refreshIntervalValue)
    }

    stopRefreshing() {
        if (this.refreshTimer) {
            clearInterval(this.refreshTimer)
        }
    }
}

本文介紹了如何使用Stimulus生命周期回調來獲取和釋放外部資源。

一篇文章Stimulus：連接HTML和JavaScript的橋梁，實現簡單的controller，并學習了Stimulus是如何連接HTML與JavaScript的。現在我們使用Stimulus來實現復制文本到粘貼板的按鈕。

比如說，我們現在有一個需求，就是幫助用戶生成密碼，在密碼旁邊放置一個按鈕，點擊按鈕后密碼就被拷貝到粘貼板上了，這樣就方便用戶使用這個密碼了。

打開public/index.html，修改body內容，填充一個簡單的按鈕，如下：

<div>
    PIN: <input type="text" value="1234" readonly>
    <button>Copy to Clipboard</button>
</div>

下一步，創建src/controllers/clipboard_controller.js，然后添加一個copy()方法：

import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
    copy() {
    }
}

然后，給div添加data-controller=“clipboard”。只要是給元素添加了data-controller屬性，Stimulus就會連接一個controller實例。

<div data-controller="clipboard">

我們還需要一個對輸入框的引用，這樣我們就可以在調用粘貼板API之前獲取輸入框的內容。給文本框添加data-clipboard-target=“source“：

PIN: <input data-clipboard-target="source" type="text" value="1234" readonly>

在controller中定義一個target，然后就可以通過this.sourceTarget訪問文本框了。

import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
    static targets=[ "source" ]
    
    copy() {
    }
}

解釋一下這個targets：

當Stimulus加載你的controller類時，它會查看靜態數組targets的字符串元素，對于每一個字符串，Stimulus會在controller中添加3個屬性。在這里，對于“source”，會添加如下屬性：

this.sourceTarget 在controller的域內的第一個source

this.sourceTargets 在controller的域內所有的source組成的一個數組

this.hasSourceTarget 在controller的域內是否有source

我們希望點擊按鈕時調用controller中的copy()方法，所以我們需要添加data-action=“clipboard#copy“

<button data-action="clipboard#copy">Copy to Clipboard</button>

你可以已經注意到在上面的動作描述符中省略了click->。那是因為Stimulus給button設置了click作為它默認的事件。

某些其他元素也有默認事件。下面是個全部列表：

元素	默認事件
a	click
button	click
details	toggle
form	submit
input	input
input type=“submit”	click
select	change
textarea	input

最終，在copy()方法中，我們獲取輸入框的內容，調用粘貼板API

copy() {
    navigator.clipboard.writeText(this.sourceTarget.value)
}

刷新頁面，點擊按鈕，然后快捷鍵粘貼到Greet按鈕前到輸入框，可以看到1234。

到目前為止，在頁面上同一時間只有一個controller實例。在頁面上同時有一個controller的多個實例也是很正常的。

我們的controller是可以復用的，只要你需要在頁面上添加復制內容的按鈕，無論是哪個頁面，只要把對應的屬性值寫好，我們的controller都是生效的。

還是上面的例子，再添加另外一個復制按鈕：

<div data-controller="clipboard">
    PIN: <input data-clipboard-target="source" type="text" value="3737" readonly>
    <button data-action="clipboard#copy" class="clipboard-button">Copy to Clipboard</button>
</div>

刷新頁面，驗證一下兩個復制按鈕是否都生效。

我們再添加一個可以復制的元素，不用button，我們用a標簽，

<div data-controller="clipboard">
    PIN: <input data-clipboard-target="source" type="text" value="6666" readonly>
    <a href="#" data-action="clipboard#copy" class="clipboard-button">Copy to Clipboard</a>
</div>

Stimulus允許我們使用任何元素，只要它設置了合適的data-action屬性，就可以觸發復制。

這個例子里，要注意一點，點擊鏈接會使瀏覽器追蹤a標簽內的href屬性跳轉，可以取消這種默認行為，只需要在action中調用 event.preventDefault()就可以了。

copy(event) {
    event.preventDefault()    
    navigator.clipboard.writeText(this.sourceTarget.value)
}

還有另外一個方法，拷貝粘貼板上

copy(event) {
    event.preventDefault()    
    this.sourceTarget.select()
    document.execCommand("copy")
}

在本文中，我們看了一個在現實中把瀏覽器API包裝在Stimulus的controller中的例子。還有一個controller的多個實例如何同時出現在頁面上，我們還探索了actions和targets如何保持HTML和JavaScript的松散耦合。

下一篇文章，我們將優化一下這個復制粘貼板的功能，讓它運行起來更加健壯。

Stimulus：瀏覽器不支持復制或者弱網條件下，怎么辦？

在線咨詢

上一篇：HTML表單元素初識2-零基礎自學網頁制作
下一篇：2021年要了解的34種JavaScript優化技術

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。