渋日記@shibu.jp

前回のエントリーのQtのクラスをJSから触れるようにするで、QtのクラスがJSが使えるようになりましたので、ダイアログを表示します。Qtのクラスはすべてグローバルに置かれているので、PySideやPyQtに慣れている人は戸惑うかもしれません。

QtにはGUIをグラフィカルに設計するツールがあります。単体のツールになっているQtDesignerと、統合ツールのQtCreatorです。まあどちらもGUI作成に関しては同じです。ツールを使って.uiファイルを作成します。作成するのはQWidgetとします。スクリーンショットはめんどうなので、後回しにしますが、Root直下にボタン(QPushButton)が2個、もしくはRoot直下にレイアウトを置いてボタンが置かれているものとします。名前はdoButton, closeButtonとします。あと、こちらのCommonJSスタイルのrequireが使えるようにしてあるものとします。

// MyDialog.js
var MyDialog = function ()
{
    QDialog.call(this);

    var layout = new QGridLayout();
    var loader = new QUiLoader();
    var file = new QFile(__dirname + '/../dialogs/MyDialog.ui');
    if (file.exists())
    {
        if (file.open(QIODevice.ReadOnly))
        {
            this.widget = loader.load(file);

            // つけた名前でアクセスできる
            this.doButton = this.widget.doButton;
            this.closeButton = this.widget.closeButton;
            // こんな感じでシグナルを使う
            this.doButton.clicked.connect(this, this.onDoButtonClicked);
            this.closeButton.clicked.connect(this, this.onCloseButtonClicked);
            layout.addWidget(this.widget, null, null);

            file.close();
        }
    }

    this.setLayout(layout);
};

// 継承
MyDialog.prototype = new QDialog();

MyDialog.prototype.onDoButtonClicked = function ()
{
    // プロパティへのアクセス。代入で行けます。
    this.doButton.text = "Button Clicked";
};

MyDialog.prototype.onCloseButtonClicked = function ()
{
    this.done(QDialog.Accepted);
    // もしくは
    this.done(QDialog.Rejected);
};
exports.MyDialog = MyDialog;

このコードを使う場合は:

var MyDialog = require('MyDialog').MyDialog;
var dialog = new MyDialog();
if (dialog.exec()) // doneにAcceptedが渡されると真
{
    // Closeが押された後の処理
}

このコードはそんなに長くないですが以下の要素が含まれています：

• Qtのクラスへのアクセス
• Qtクラスの継承
• フォームのロード
• フォームの要素のウィジェットへのアクセス
• シグナルとプロパティの利用