DAZ Scriptでウィンドウを表示する

※本記事は、Blogの方にも投稿しています。
http://lowpolysnow.com/wp/20181203/61/

---

DAZ Scriptではウィンドウを表示する機能はなく、代わりにモーダルダイアログを利用します。

```javascript
(function () {
    var dialog = new DzDialog;
    dialog.exec();
})();
```

実行結果は次のようになります。
![1540471607786.png](https://qiita-image-store.s3.amazonaws.com/0/267708/b2a24a26-ae17-a27b-71b5-f6f2642148d1.png)
ちなみにモーダレスダイアログ（開いている間もアプリを操作できるウィンドウ）は作ることが出来ません。[^1]

## ダイアログ要素の追加

「new DzDialog」で生成したインスタンスを引数に取ることで、ダイアログには様々な要素を追加することが出来ます。
例えば、ラベルを追加するときは、[DzLabel](http://docs.daz3d.com/doku.php/public/software/dazstudio/4/referenceguide/scripting/api_reference/object_index/label_dz)オブジェクトをnewし、ボタンを追加するときも[DzButton](http://docs.daz3d.com/doku.php/public/software/dazstudio/4/referenceguide/scripting/api_reference/object_index/button_dz)オブジェクトをnewします。

### ラベル要素

```javascript
(function () {
    var dialog = new DzDialog;

    //ラベル要素
    var dialog_label = new DzLabel(dialog);
    dialog_label.text = "label text";

    //ダイアログの大きさを設定（要素を追加すると、大きさを指定しないとデバッグで表示されません）
    dialog.width = 200;
    dialog.height = 100;

    dialog.exec();
})();
```

実行結果は以下のようになります。
![1540571172231.png](https://qiita-image-store.s3.amazonaws.com/0/267708/deef5318-064b-47a3-82f2-05e1ac596c4c.png)

### ボタン要素

```javascript
(function () {
    var dialog = new DzDialog;

    //ボタン要素
    var dialog_button1 = new DzPushButton(dialog);
    dialog_button1.text = "button1";

    //ダイアログの大きさを設定（要素を追加すると、大きさを指定しないとデバッグで表示されません）
    dialog.width = 200;
    dialog.height = 100;

    dialog.exec();
})();
```

実行結果は以下のようになります。
![1540571350488.png](https://qiita-image-store.s3.amazonaws.com/0/267708/7585bfb0-ff03-8d56-61e4-85084790f7eb.png)

### グループボックスやレイアウト設定まとめ

```javascript
(function () {
    var dialog = new DzDialog;

    //各要素を縦に等配置するDzVBoxLayoutオブジェクトを設定します。
    var dialog_layout = new DzVBoxLayout(dialog);
    dialog_layout.autoAdd = true;
    dialog_layout.margin = 5;
    dialog_layout.spacing = 5;

    //ボタン要素
    var dialog_button1 = new DzPushButton(dialog);
    dialog_button1.text = "button1";

    //ラベル要素
    var dialog_label = new DzLabel(dialog);
    dialog_label.text = "label text";

    //グループボックス要素
    var dialog_button_group = new DzVGroupBox(dialog);
    dialog_button_group.title = "Button Group";
    dialog_button_group.columns = 1;

    //  グループボックス要素にボタンを追加します
    var dialog_button2 = new DzPushButton(dialog_button_group);
    dialog_button2.text = "&Exit";
    dialog.setRejectButton(dialog_button2);

    //ダイアログの大きさを設定（要素を追加すると、大きさを指定しないとデバッグで表示されません）
    dialog.width = 200;
    dialog.height = dialog.minHeight;

    dialog.exec();
})();
```

実行結果は以下のようになります。
![1540571514710.png](https://qiita-image-store.s3.amazonaws.com/0/267708/8fac01b0-1507-dfb8-85aa-0beb04c41285.png)
ちなみに、[DzVBoxLayout](http://docs.daz3d.com/doku.php/public/software/dazstudio/4/referenceguide/scripting/api_reference/object_index/vboxlayout_dz)オブジェクトを使用しないと、各要素がすべて上部に配置されてしまいます。
この作り方はQtScript由来のもので[^2]、次項でもそうですが、DAZ Scriptは基本的にQtScriptをベースとし、それにDAZ Studio特有の機能を載せていくという形でプログラムを組んでいくことになります。
![1540571878991.png](https://qiita-image-store.s3.amazonaws.com/0/267708/0c76e6ef-591a-7059-9414-34f592be830a.png)


## クリックイベントと実行メソッドの紐づけ

ボタンをクリックしたとき、同じスクリプト内の別の関数が実行されるようにするには、Globalオブジェクトのconnectメソッドを使用します。（[Globalオブジェクトについては別記事参照](https://qiita.com/lowpolysnow/items/63e84e9377446d3d7949)）

connectメソッドはオブジェクトとイベントと実行する関数を紐付けます。JavaScriptのaddEventListener()のようなものだと思ってください。

下記の例では、オブジェクトに対し、シグナルというイベント(例ではclicked())を発行し、メソッドを実行します。

```javascript
(function () {
    var dialog = new DzDialog;
    var doit_button = new DzPushButton(dialog);
    doit_button.text = "call doit()";
    connect(doit_button, "clicked()", doit);
    dialog.exec();
})();

function doit() {
    MessageBox.information("do it.", "doit()", "OK");
    return;
}
```

実行結果は以下のようになります。
![1540617020240.png](https://qiita-image-store.s3.amazonaws.com/0/267708/08112056-ad27-c532-ef40-91736ea6594b.png)
「call doit()」ボタンをクリックすると、cliked()シグナルに紐づけられたdoit()関数が呼び出され、メッセージボックスが表示されます。
![1540485223699.png](https://qiita-image-store.s3.amazonaws.com/0/267708/9220fedc-83f7-f290-d31a-54e2324692c8.png)

[^1]: [参照：how make a modalless dialog?](https://www.daz3d.com/forums/discussion/comment/657812/#Comment_657812)
[^2]: [参照：QVBoxLayout Class | Qt 4.8](http://doc.qt.io/archives/qt-4.8/QVBoxLayout.html)