nodel-frontend

Nodel Frontend Development

Build and revise the XML dashboards served from a Nodel node's content directory.

Workflow

1. Inspect the node's actions, events, and existing content files before choosing controls.
2. Create or update content/index.xml, keeping custom CSS and JavaScript optional.
3. Start with the minimal dashboard below and bind components to the node's real action and event names.
4. Read the component reference before choosing tags or relying on an attribute.
5. Read the pattern guide when composing a complete dashboard, adding custom styling, or handling dynamic behavior.
6. Render the page against a running Nodel node and check the browser console as well as the node console.

File Layout

nodes/My Node/
├── script.py
├── nodeConfig.json
└── content
    ├── index.xml
    ├── css
    │   └── custom.css
    └── js
        └── custom.js

Minimal Dashboard

<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/xsl" href="v1/index.xsl"?>
<pages title='Dashboard' css='css/custom.css' js='js/custom.js'>
  <page title='Main'>
    <row>
      <column xs='12' sm='6'>
        <title>Power</title>
        <button action='Power' arg='On'>Turn On</button>
        <status event='Power'>Current power</status>
      </column>
    </row>
  </page>
</pages>

Remove the css or js attribute when the corresponding file does not exist.

Critical Renderer Constraints

• Keep the v1/index.xsl processing instruction. Nodel transforms the XML through that stylesheet.
• Use the stock component tags and attributes instead of assuming arbitrary HTML passes through.
• Lay out pages with the Bootstrap 3 twelve-column grid (xs, sm, md, and lg).
• Use <image source='...'>, not <img>. Always provide source, including for event-backed images.
• Place <input> directly under <header>; the built-in rendered input type is checkbox.
• Put <row> elements directly under <footer>.
• Setting core on <pages> skips custom CSS and JavaScript loading.
• Do not listen for a nodel-event DOM event. The renderer updates bound elements directly; observe the property it changes when custom JavaScript must react.