diff options
Diffstat (limited to 'dgbuilder/nodes/99-sample.html.demo')
| -rw-r--r-- | dgbuilder/nodes/99-sample.html.demo | 79 |
1 files changed, 79 insertions, 0 deletions
diff --git a/dgbuilder/nodes/99-sample.html.demo b/dgbuilder/nodes/99-sample.html.demo new file mode 100644 index 00000000..4dcc8ba5 --- /dev/null +++ b/dgbuilder/nodes/99-sample.html.demo @@ -0,0 +1,79 @@ +<!-- + Copyright 2014 IBM Corp. + + Licensed under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. + You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. +--> + +<!-- Sample html file that corresponds to the 99-sample.js file --> +<!-- This creates and configures the onscreen elements of the node --> + +<!-- If you use this as a template, update the copyright with your own name. --> + +<!-- First, the content of the edit dialog is defined. --> + +<script type="text/x-red" data-template-name="sample"> + <!-- data-template-name identifies the node type this is for --> + + <!-- Each of the following divs creates a field in the edit dialog. --> + <!-- Generally, there should be an input for each property of the node. --> + <!-- The for and id attributes identify the corresponding property --> + <!-- (with the 'node-input-' prefix). --> + <!-- The available icon classes are defined Twitter Bootstrap glyphicons --> + <div class="form-row"> + <label for="node-input-topic"><i class="fa fa-tasks"></i> Topic</label> + <input type="text" id="node-input-topic" placeholder="Topic"> + </div> + + <br/> + <!-- By convention, most nodes have a 'name' property. The following div --> + <!-- provides the necessary field. Should always be the last option --> + <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> + + +<!-- Next, some simple help text is provided for the node. --> +<script type="text/x-red" data-help-name="sample"> + <!-- data-help-name identifies the node type this help is for --> + <!-- This content appears in the Info sidebar when a node is selected --> + <!-- The first <p> is used as the pop-up tool tip when hovering over a --> + <!-- node in the palette. --> + <p>Simple sample input node. Just sends a single message when it starts up. + This is not very useful.</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> + +<!-- Finally, the node type is registered along with all of its properties --> +<!-- The example below shows a small subset of the properties that can be set--> +<script type="text/javascript"> + RED.nodes.registerType('sample',{ + category: 'input', // the palette category + defaults: { // defines the editable properties of the node + name: {value:""}, // along with default values. + topic: {value:"", required:true} + }, + inputs:1, // set the number of inputs - only 0 or 1 + outputs:1, // set the number of outputs - 0 to n + // set the icon (held in icons dir below where you save the node) + icon: "myicon.png", // saved in icons/myicon.png + label: function() { // sets the default label contents + return this.name||this.topic||"sample"; + }, + labelStyle: function() { // sets the class to apply to the label + return this.name?"node_label_italic":""; + } + }); +</script> |