Details View

『🧱 Details View』はウィジェットの１つです。

下図のような「📰 Details」パネル同様の UI を利用できるのが特徴です。

使用する際の注意点

『Editor Utility Widget』単体で 🧱 Details View を利用しようと考えた際には、図のように組めば表示させることが可能ですが‥

すると Editor Utility Widget 内の全ての変数を UI として表示してしまうだけでなく、不要なプロパティも大量に表示してしまいます。

全てのプロパティを開いた状態	全てのプロパティを閉じた状態

そのため『Editor Utility Widget』とは別の BP で UI に表示したい変数を作成しておき『Editor Utility Widget』で指定して Details View に表示するのが基本的な使い方になるようです。

Details View の使用方法

コンテンツブラウザに作成するツール本体である『Editor Utility Widget』と「Details View」の外観として変数を利用するためだけの BP を作成します。

外観用の BP に変数を追加

先に外観用の BP「BP_AssetActionUtility」を開いて String 型の変数を追加して「DV_PrintText」と名付けました。これだけでOKなので、コンパイルして保存して閉じます。

Editor Utility Widget で 🧱 Details View を追加

次に『Editor Utility Widget』を開き、デザイナーの作業サイズを Custom に変更して作業しやすい適当なサイズを入力します。

🎨 Palette から「🧱 Details View」をキャンバスに追加します。この時点では Details View には何も紐づけられていないため、空っぽの枠組みだけが表示されます。

ちなみに設定は Anchors で上下左右に固定、Offset を 0.0 にして全域にフィットさせています。

処理を実行するための 🧱 ボタンを１つ配置して On Clicked イベントを追加します。

グラフの編集

まずはツール起動と同時に Details View をちゃんとした外観にするために、先ほど用意した外観用の「BP＿AssetActionUtility」を紐づけてあげる必要があります。

そこで起動と同時に処理が走る「📕 Prew Construct」を追加し、次に「BP_AssetActionUtility」を利用できるよう「Construct Object from Class（クラスからオブジェクトを構成）」を追加して Class に「BP_AssetActionUtility」を設定し「Outer」には「Get a reference to self」を繋ぎます。

ウィジェット配置により追加されている変数の「Details View」をグラフ内にドロップして Get を追加、線を引っ張って「📘 Set Object」を追加します。

そしてウィジェットの「Details View」にオブジェクトをセットします。

この時点でコンパイルすればデザイナーの Details View に外観が反映されます。

次に「Construct Object from Class（クラスからオブジェクトを構成）」で作成したオブジェクト（インスタンス）を変数に格納していつでも利用できるようにしておきましょう。出力ピン上で右クリック「Promote to Variable（変数を昇格）」を利用して変数を追加し‥

変数の名前は「BPObject」と名付けました。

変数「BPObject」から Set を作って中に格納しておきます。これで起動直後の準備はOKです。

ボタンクリックイベントの方は「BP_AssetActionUtility」の変数を直接取得するために、変数「BPObject」の Get から変数「DV_PrintText」の値を取得してログに出力するようにします。

コンパイルして保存します。

Editor Utility Widget を実行

それでは、早速『Editor Utility Widget』を実行します。

テキストボックスに好きな文字列を入力してボタンを押すと、入力した文字列がログに表示されるのを確認できれば成功です。今回のような手順で Details View に表示されている UI の変数の値に自由にアクセスすることができます。