NodeModel ケース スタディ - カスタム UI
Last updated
Last updated
NodeModel ベースのノードは、Zero-Touch ノードよりも大幅に柔軟性に優れ強力です。この例では、矩形のサイズをランダム化する統合されたスライダを追加して、Zero-Touch グリッド ノードのレベルを高めます。
スライダでセルのスケールをそのサイズに対して相対的に変更するため、スライダで正確な範囲を設定する必要はありません。
Dynamo は、UI をバックエンドから分離しておくためのモデル - ビュー - ビューモデル(MVVM)ソフトウェア アーキテクチャ パターンに基づいています。ZeroTouch ノードを作成する場合は、Dynamo はノードのデータとその UI の間でデータ バインドを実行します。カスタム UI を作成するには、データバインド ロジックを追加する必要があります。
大まかには、Dynamo では次の 2 つのパーツでモデルとビューの関係を確立します。
ノードのコア ロジック(「モデル」)を確立する NodeModel
クラス
NodeModel
の表示方法(「ビュー」)をカスタマイズする INodeViewCustomization
クラス
NodeModel オブジェクトには既にビューとモデルの関連付け(NodeViewModel)があるため、検討するのはカスタム UI のモデルとビューのみです。
NodeModel ノードには Zero-Touch ノードと大きく異なる点がいくつかあり、この例でそれを説明します。UI のカスタマイズに進む前に、まず NodeModel ロジックをビルドします。
1.プロジェクト構造を作成する。
NodeModel ノードは関数のみを呼び出すことができるため、NodeModel と関数を別のライブラリに分割する必要があります。Dynamo パッケージでこの操作を行う標準的な方法として、それぞれ別のプロジェクトを作成します。まず、プロジェクトを包含する新しいソリューションを作成します。
File > New > Project
を選択します。
Other Project Types
を選択して Solution オプションを表示します。
Blank Solution
を選択します。ソリューションに
CustomNodeModel
という名前を付けます。
Ok
を選択します。
ソリューションで 2 つの C# クラス ライブラリ プロジェクトを作成します。関数用のプロジェクトと、NodeModel インタフェースを実装するためのプロジェクトです。
ソリューションを右クリックして、
Add > New Project
を選択します。クラス ライブラリを選びます。
CustomNodeModel
という名前を付けます。[
Ok
]をクリックします。このプロセスを繰り返して、
CustomNodeModelFunctions
という名前の別のプロジェクトを追加します。
次に、自動的に作成されたクラス ライブラリの名前を変更し、CustomNodeModel
プロジェクトに追加する必要があります。クラス GridNodeModel
は抽象クラス NodeModel を実装し、ビューのカスタマイズには GridNodeView
が使用され、GridFunction
には呼び出す必要のある関数が含まれています。
CustomNodeModel
プロジェクトを右クリックしてAdd > New Item...
を選択し、Class
を選んで別のクラスを追加します。
CustomNodeModel
プロジェクトにはGridNodeModel.cs
クラスとGridNodeView.cs
クラスが必要です
CustomNodeModelFunction
プロジェクトにはGridFunctions.cs
クラスが必要です
クラスにコードを追加する前に、このプロジェクトに必要なパッケージを追加します。CustomNodeModel
には ZeroTouchLibrary と WpfUILibrary が必要で、CustomNodeModelFunction
には ZeroTouchLibrary のみが必要です。WpfUILibrary は、後で説明する UI のカスタマイズに使用し、ZeroTouchLibrary はジオメトリの作成に使用します。パッケージは、プロジェクトに個別に追加できます。これらのパッケージには依存関係があるため、Core および DynamoServices が自動的にインストールされます。
プロジェクトを右クリックして、
Manage NuGet Packages
を選択します。そのプロジェクトに必要なパッケージのみをインストールします。
Visual Studio は、参照した NuGet パッケージをビルド フォルダにコピーします。これを false に設定できるため、パッケージ内に不要なファイルはありません。
Dynamo NuGet パッケージを選択します。
Copy Local
を false に設定します。
2.NodeModel クラスを継承する
前述のとおり、NodeModel ノードが ZeroTouch ノードと異なるのは、主に NodeModel
クラスを実装するという点です。NodeModel ノードにはこのクラスのいくつかの関数が必要です。クラス名の後に :NodeModel
を追加すると、これらの関数を取得できます。
次のコードを GridNodeModel.cs
にコピーします。
これが、Zero-Touch ノードとは異なるところです。それぞれの機能について説明します。
Name、Category、InPort/OutPort の名前、InPort/OutPort のタイプ、説明などの、Node 属性を指定します。
public class GridNodeModel : NodeModel
は、NodeModel
クラスを Dynamo.Graph.Nodes
から継承するクラスです。
public GridNodeModel() { RegisterAllPorts(); }
は、ノードの入力と出力を登録するコンストラクタです。
BuildOutputAst()
は、AST (抽象構文ツリー)を返します。これは、NodeModel ノードからデータを返すために必要な構造です。
AstFactory.BuildFunctionCall()
は、GridFunctions.cs
から RectangularGrid 関数を呼び出します。
new Func<int, int, double, List<Rectangle>>(GridFunction.RectangularGrid)
は、関数とそのパラメータを指定します。
new List<AssociativeNode> { inputAstNodes[0], inputAstNodes[1], sliderValue });
は、ノードの入力を関数パラメータにマッピングします。
AstFactory.BuildNullNode()
は、入力ポートが接続されていない場合に、null ノードを作成します。これは、ノードに警告が表示されないようにするためです。
RaisePropertyChanged("SliderValue")
は、スライダの値が変化したときに UI に通知します。
var sliderValue = AstFactory.BuildDoubleNode(SliderValue)
は、スライダ値を表すノードを AST で作成します。
functionCall 変数 new List<AssociativeNode> { inputAstNodes[0], sliderValue });
にある変数 sliderValue
への入力を変更します。
3.関数を呼び出す
CustomNodeModelFunction
プロジェクトは、呼び出すことができるように、CustomNodeModel
とは別のアセンブリにビルドされます。
次のコードを GridFunction.cs
にコピーします。
この関数クラスは、Zero-Touch グリッドのケース スタディに非常に似ていますが、次の点のみ異なります。
[IsVisibleInDynamoLibrary(false)]
によって Dynamo には後に続くメソッドとクラスが「見えなく」なります。これは、関数が既に CustomNodeModel
から呼び出されているためです。
NuGet パッケージの参照の追加と同様に、CustomNodeModel
は関数を呼び出すために CustomNodeModelFunction
を参照する必要があります。
CustomNodeModel の using ステートメントは、関数を参照するまで非アクティブになります。
CustomNodeModel
を右クリックして、Add > Reference
を選択します。
Projects > Solution
を選びます。
CustomNodeModelFunction
をオンにします。[
Ok
]をクリックします。
4.ビューをカスタマイズする
スライダを作成するには、INodeViewCustomization
インタフェースを実装して UI をカスタマイズする必要があります。
次のコードを GridNodeView.cs
にコピーします。
public class CustomNodeModelView : INodeViewCustomization<GridNodeModel>
で、UI をカスタマイズするために必要な関数を定義します。
プロジェクトの構造を設定したら、Visual Studio の設計環境を使用してユーザ コントロールを作成し、.xaml
ファイルでそのパラメータを定義します。ツール ボックスから、<Grid>...</Grid>
にスライダを追加します。
CustomNodeModel
を右クリックして、Add > New Item
を選択します。
WPF
を選択します。ユーザ コントロールに
Slider
という名前を付けます。[
Add
]をクリックします。
次のコードを Slider.xaml
にコピーします。
スライダ コントロールのパラメータは、.xaml
ファイルの In で定義されています。Minimum および Maximum__ の属性は、このスライダの数値範囲を定義します。
<Grid>...</Grid>
内に、Visual Studio ツールボックスからさまざまなユーザ コントロールを配置できます。
Slider.xaml
ファイルを作成すると、Visual Studio によって自動的に Slider.xaml.cs
という C# ファイルが作成され、スライダが初期化されます。このファイルの名前空間を変更します。
名前空間は CustomNodeModel.CustomNodeModel
にする必要があります
GridNodeModel.cs
で、スライダの計算ロジックを定義します。
5.パッケージとして構成する
プロジェクトをビルドする前に、最後の手順として、pkg.json
ファイルを追加して Dynamo でパッケージの読み込みができるようにします。
CustomNodeModel
を右クリックして、Add > New Item
を選択します。
Web
を選択します。
JSON File
を選択します。ファイルに
pkg.json
という名前を付けます。[
Add
]をクリックします。
次のコードを pkg.json
にコピーします。
"name":
で、Dynamo ライブラリでのパッケージとそのグループの名前を決定します。
"keywords":
で、Dynamo ライブラリを検索するための検索語を指定します。
"node_libraries": []
は、パッケージに関連付けられているライブラリです。
最後に、ソリューションをビルドし、Dynamo パッケージとしてパブリッシュします。オンラインでパブリッシュする前にローカル パッケージを作成する方法と、Visual Studio から直接パッケージをビルドする方法については、「パッケージの配置」の章を参照してください。