用 JavaScript 控制 Widget

前言

在之前的在 Qt 環境使用 JavaScript 裡基本的使用 JavaScript ，這次要用 JavaScript 來控制 Widget

，在此把學習的過程做個紀錄。

內容

先到 [ GitLab ] HelloQt 下載範例，這次應用的專案路徑
(HelloQt' directory)/JSEngine/UseWidget，執行結果如下

範例的執行結果

上方會有預設的程式碼，按下右下的"Run"可以執行，執行完後可以看到左下的 PushButton 會改變顯示的字，按下後會列印偵錯訊息。

看到 MainWindow::MainWindow() ，程式碼如下

MainWindow::MainWindow(QWidget *parent)
: QMainWindow(parent)
, ui(new Ui::MainWindow)
{
  ui->setupUi(this);
  //
  connect( ui->runButton , &QPushButton::clicked , this , &MainWindow::onRunButtonClicked );
  //
  m_cJSEngine.installExtensions( QJSEngine::ConsoleExtension );
  //
  m_cJSEngine.globalObject().setProperty( "myButton" , m_cJSEngine.newQObject( ui->myButton ) );
  //Default code
  ui->textEdit->setText( tr(
    "myButton.text = 'Hello myButton.';\n"\
    "myButton.clicked.connect( function( clicked ){\n"\
    "  console.log('myButton clicked!');\n"\
    "});"
  ) );
}

程式開頭綁定"Run"的事件與初始化 QJSEngine ，接著就是在 JavaScript cript 產生對應的變數，變數名為"myButton"，要產生這樣的變數要透過 QJSEngine::newQObject() 來產生，參數的型態是 QObject ，由於大部份的 Widget 都繼承 QObject ，所以直接輸入就可以，不需要轉型，變數會透過 QJSEngine::globalObject() 來取得 JavaScript 的 root object ，接著透過 QJSValue::setProperty() 來新增變數就完成新增 Widget 的變數。最後的部分是新增 JavaScript 的預設程式碼，程式碼直接透過"myButton"來控制，範例透過"text"來控制按鈕顯示的字串，接著是事件的綁定，跟 C++ 不太一樣，要透過 (事件名稱).connect() 來綁定事件，這裡單純就顯示偵錯訊息。

這次的範例只是簡單的應用，重點放在如何產生變數讓 JavaScript 來控制，至於要如何控制的部分目前沒找到可以查找可以用的變數(像是"text")，似乎只能用猜的(跟在設計介面的參數同名)，以後有機會再多多研究。

參考資料

[ doc.qt.io ] QJSEngine Class

Hosee的空間

2020年10月27日星期二