Node-RED 연구 노트 -HTML 파일

Node 노드의 .html 파일은 노드와 편집기의 표시 형식을 정의합니다. 여기에는 세 가지 부품이 포함되어 있으며 각 부품은 자체 마크로 포장되어 .html <script>있습니다.

1. 노드 정의 : 에디터에 등록 된 메인 노드 정의, 팔레트 카테고리 정의, 편집 가능한 속성, 사용할 아이콘 등 일반 자바 스크립트 스크립트 태그에 있습니다.defaults

2. 편집 대화 상자  data-template-name: 노드 편집 대화 상자의 내용을 정의하는 편집 템플릿입니다.type="text/html" data-template-name="node-type"

3. 도움말 텍스트 data-help-name: "정보 사이드 바"탭에 표시되는 도움말 텍스트  입니다.type="text/html" data-help-name="node-type"

노드 정의

이 RED.nodes.registerType함수를 사용하여  편집기에 노드를 등록하십시오. 이 함수는 노드 유형과 정의의 두 가지 매개 변수를 사용합니다.

<script type="text/javascript">
    RED.nodes.registerType('node-type',{
        // node definition
    });
</script>

노드 유형

노드 유형은 편집기 전체에서 노드를 식별하는 데 사용됩니다. js 파일 이름과 일치해야합니다. 예를 들면,node-type.js

노드 정의

노드 정의에는 편집기에 필요한 노드에 대한 모든 정보가 포함됩니다. 다음 속성을 가진 개체입니다.

• category： （字符串） Node-red界面操作面板中节点类别
• defaults：（对象）节点的可编辑属性
• credentials：（对象）节点的凭据属性
• inputs：（数字）节点的输入数
• outputs：（数字）节点的输出数
• color： （字符串）要使用的背景颜色
• paletteLabel：（字符串+函数）要在调色板中使用的标签
• label：（字符串+函数）要在工作区中使用的标签
• labelStyle：（字符串+函数）要应用于标签的样式
• inputLabels：（字符串+函数）可选标签，用于将悬停添加到节点的输入端口
• outputLabels：（字符串+函数）可选标签，用于将鼠标悬停到节点的输出端口
• icon：（字符串）要使用的图标
• align：（字符串）图标和标签的对齐方式
• button：（对象）向节点边缘添加一个按钮
• oneditprepare：（函数）在构建编辑对话框时调用
• oneditsave： （函数） 在编辑对话框正常时调用
• oneditcancel：（函数）在编辑对话框取消时调用
• oneditdelete：（函数）在按下配置节点的编辑对话框中的删除按钮时调用
• oneditresize：（函数）在编辑对话框调整大小时调用
• onpaletteadd：（函数）在节点类型添加到调色板时调用
• onpaletteremove：（函数）从调色板中删除节点类型时调用

편집 대화 상자

노드의 편집 템플릿은 편집 대화 상자의 내용을 설명합니다.

<script type="text/html" 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>
    <div class="form-tips"><b>Tip:</b> This is here to help.</div>
</script>

도움말 텍스트

노드를 선택하면 노드 작업에 대한 설명을 제공하는 도움말 텍스트가 정보 탭에 표시됩니다. 보내는 메시지에 설정된 속성과받는 메시지에 설정할 수있는 속성을 포함합니다.

<script type="text/html" data-help-name="node-type">
   <p>Some useful help text to introduce the node.</p>
   <h3>Outputs</h3>
       <dl class="message-properties">
       <dt>payload
           <span class="property-type">string | buffer</span>
       </dt>
   <h3>Details</h3>
   <p>Some more information about the node.</p>
</script>