名前の付いたパネルまたはダイアログ ボックスを作成する
views 拡張機能を使用すると、プラグインの名前の付いたビューを定義することができます。名前付きビューには、ドッキング可能なパネルやモーダル ダイアログ ボックスなどがあります。名前付きビューを定義したら、このビューの名前を使用してプラグイン内の他の場所からこのビューを参照し、menu 拡張機能から開くなどの操作を実行できるようになります。別のプラグインから名前の付いたビューを開くこともできます。たとえば、標準のエディタ カラー ピッカー ダイアログ ボックスが別の独自のプラグインで定義されている場合も、このプラグインからダイアログ ボックスを表示することができます。
.stingray_plugin ファイル内で、それぞれの views 拡張機能に次の設定を行うことができます。
views = [
{
name = "project-manager"
type = "dialog"
path = "project-manager"
title = "Project Manager"
width = 910
height = 600
}
]
name
ビューの一意の名前です。この名前は、すべての Stingray プラグイン内で登録されているすべてのビューで一意である必要があります。別の拡張機能から、またはプラグイン内の JavaScript コードからビューを開く場合は、この名前を使用してビューを参照します。必須。
type
ビューのタイプです。dialog (通常はモーダル)、panel (ツール ウィンドウ)、または window (最上位のウィンドウ)のいずれかを指定できます。必須。
ビューをパネルとして登録する場合は、任意のタブ バーの + ボタンを使用することもできます。
エディタによってビューにロードされる HTML ファイルのパスおよびファイル名です。このパスは、.stingray_plugin ファイルの位置を基準に設定する必要があります。必須。
title
エディタのパネル タブまたはダイアログ ボックスのタイトル バーに表示されるビューのタイトルです。オプション。
width
ビューの初期の幅の既定値です(ピクセル単位)。オプション。
height
ビューの初期の高さの既定値です(ピクセル単位)。オプション。
menus 拡張機能を使用すると、名前の付いたビューで開かれた Stingrayt エディタ内に新しいメニュー項目を作成することができます。詳細については、「新規メニュー項目を作成する」を参照してください。開くビューの名前を指定するには、view プロパティを使用します。
Stingray の Window メニューの General カテゴリ内にあるツールのほとんどは、プラグインで登録された名前の付いたビューから取得されています。
stingray-editor.stingray_plugin ファイルはグローバル アクション open-view を設定します。プラグインのこのアクションを使用して、アクションを実行できる任意の場所から名前の付いたビューを開くことができます。
たとえば、次のコンテキスト アクション拡張機能は、ユーザが任意のアセットを右クリックするたびに、コンテキスト メニューに「Show Dependencies」というメニュー項目を追加します。このメニュー項目をクリックすると、dependency という名前のビューがエディタ内に開きます。
contextual_actions = [
{
type = "asset"
label = "Show Dependencies"
when = {
extension = "*"
}
do = [
"open-view \"dependency\""
]
}
]
extensions/views モジュールを使用すると、プラグインの JavaScript コード内の任意の場所からパネルを開くことができます。
// From dependency-actions.js
define([
'app',
'lodash',
'extensions/views',
'services/event-service'
], function (app, _, views, eventService) {
'use strict';
return {
showDependencies: function (dependencyPath) {
// use the views module to open a view called "dependency" passing this view a custom resource query parameter
return views.open('dependency', {}, {
resource: encodeURIComponent(dependencyPath)
});
}
};
});
ドッキング可能なパネルと同様に、extensions/views モジュールを使用して、プラグインの JavaScript コード内の任意の場所から、ダイアログ ボックスを開き、ユーザがダイアログ ボックスを閉じたときに返り値を戻すことができます。
~{js} // From asset-browser-controller.js function createNewFolder(uniqueDirectoryEntry) { return hostService.openModalTextInputDialog("Enter new folder name", uniqueDirectoryEntry.Filename); }
~~
// From host-service.js
define([
'app',
'lodash',
'extensions/views'
], function (app, _, views, eventService) {
'use strict';
return {
openModalTextInputDialog = function (title, defaultValue, options) {
// Open the dialog called "text-input-dialog"
return views.openDialog('text-input-dialog', {
title,
defaultValue,
settings: options
}).then(function (result) {
// When the dialog is closed, if its result is valid (dialog hasn't been canceled) returns the
// dialog result to the caller
if (result.accepted)
return result.result.TextValue;
});
}
};
});
エディタでカスタム ダイアログ ボックスを開くと、いくつかの便利な変数および関数がグローバルな window オブジェクトに挿入されます。これらを使用すると、プラグイン コードからのダイアログ ボックスの操作を簡易化することができます。
window.options
views.openDialog 関数に渡される 3 番目の引数です(存在する場合)。これを使用すると、ダイアログ ボックスを開くモジュールからプレーンな JSON オブジェクトを渡して､ダイアログ ボックスのコントローラから同じオブジェクトを選択することができます。
window.accept(result)
ダイアログ ボックスを閉じ、ダイアログ ボックスを開いたモジュールに result を戻します。ダイアログ ボックスは有効とみなされます。
window.reject(result)
ダイアログ ボックスを閉じ、ダイアログ ボックスを開いたモジュールに result を戻します。ダイアログ ボックスは拒否またはキャンセルされたとみなされます。
// From text-input-dialog.js
// Fetch initial values from the `views.openDialog` options parameter:
$scope.dataContext = {
TextValue: window.options.defaultValue
};
$document.on('keydown', function (evt) {
if (evt.keyCode === keycodes.KEYCODE_ENTER) {
// 'Enter' to accept
$scope.close(lastValidationState);
// Stop propagation
return false;
} else if (evt.keyCode === keycodes.KEYCODE_ESCAPE) {
// Discard dialog (cancelling it) on escape
window.reject('discarded');
// Stop propagation
return false;
}
return true;
});
$scope.close = function (accepted) {
if (accepted && lastValidationState) {
// Accept the dialog result passing back the TextValue in the dataContext object
return window.accept($scope.dataContext);
}
window.close();
};
