前回に引き続き公式ドキュメントにあるNode作成のHTML Fileを読み解きます。
Nodeの.htmlファイルにはNodeのEditorでの描写を定義します。これは3つの<script>タグで構成されます。
- Editorに登録されている主Node定義。パレットのカテゴリ、編集可能なプロパティ（デフォルト）やアイコンを定義します。通常のJavascriptのScriptタグ内にあります。
- Nodeの編集ダイアログの内容を定義。
typeにtext/x-red、data-template-nameにNodeのタイプ名を持つScriptタグで定義されています。 - サイドバーのinfoタブに表示されるヘルプテキスト。
typeにtext/x-red、data-help-nameにNodeのタイプ名を持つScriptタグで定義されています。
Nodeの定義
NodeはRED.nodes.registerType関数を使用してEditorに登録する必要があります。この関数にはNodeのタイプとその定義の2つの引数があります。
<script type="text/javascript">
RED.nodes.registerType('Nodeのタイプ', {
// Nodeの定義
});
</script>
Nodeのタイプ
NodeタイプはEditor全体でNodeを識別するために使用されます。これは対応する.jsファイルとRED.nodes.registerTypeへの呼び出しで使用される値が一致する必要があります。
タイプはパレット内のNodeのラベルとして使用されます。タイプが"in"または"out"で終わる場合は"in/out"部分はラベルから消去されます。たとえば、"mqtt in"や"mqtt out"の場合はラベルに"mqtt"と表示されます。
Node定義
Node定義はEditorで必要なNodeに関するすべての情報が含まれています。それは次のプロパティを持つオブジェクトです。
-
category: (string) Nodeを配置するパレットのカテゴリ -
defaults: (object) Nodeの編集可能なプロパティ -
credentials: (object) Nodeの認証系プロパティ -
inputs: (number) Nodeのインプットコネクタ数（0か1が指定可能） -
outputs: (number) Nodeのアウトプットコネクタ数（0かそれ以上指定可能） -
icon: (string) Nodeのアイコン -
color: (string) Nodeの背景色 -
label: (string|function) Nodeのラベル -
paletteLabel: (string|function) Nodeのパレット上のラベル -
labelStyle: (string|function) ラベルのスタイル -
align: (string) アイコンとラベルの位置 -
oneditprepare: (function) 編集ダイアログを開く時のイベント -
oneditsave: (function) 編集ダイアログを保存する時のイベント -
oneditcancel: (function) 編集ダイアログをキャンセルする時のイベント -
oneditdelete: (function) 編集ダイアログの削除ボタンが押された時のイベント -
onpaletteadd: (function) Nodeタイプがパレットに追加された時のイベント - `onpaletteremove: (function) Nodeタイプがパレットから削除された時のイベント
編集ダイアログ
Nodeの編集ダイアログの内容を定義しています。
<script type="text/x-red" data-template-name="node-type">
<div class="form-row">
<label for="node-input-name"><i class="fa fa-tag"></i> Name</label>
<input type="text" id="node-input-name" placeholder="Name">
</div>
</script>
このテンプレートには以下の規則があります。
-
form-rowクラスを持つ<div>要素は編集ダイアログのひとつの行を表します - 典型的な行はアイコンを持つラベルと対応する
<input>要素を持ちます - アイコンは
<i>要素のクラスにAwesomeフォントを指定します
ヘルプテキスト
Nodeが選択されるとサイドバーのinfoタブにテキストが表示されます。ここで、Nodeへの入力メッセージと出力メッセージのプロパティの解説など、Nodeの内容について解説する必要があります。
パレット内のNodeをマウスオーバーすると<p>タグの内容がツールチップとして使用されます。
<script type="text/x-red" data-help-name="node-type">
<p>Some useful help text about the node.</p>
<p>Outputs an object called <b>msg</b> containing <b>msg.topic</b> and
<b>msg.payload</b>. msg.payload is a String.</p>
</script>