Node-App User Manual

English

中文

English

中文

Appearance

HTML ​

HTML blocks are used to represent UI elements. Some elements are also called containers, and they can contain other elements. Container blocks include row, column, and group. All HTML blocks have a style socket on the right side for connecting styles to set appearance characteristics. Styles will be explained in the Style chapter.

Blocks in the HTML category will ultimately generate elements represented in HTML (Hypertext Markup Language). These elements can be divided into two main categories: inline elements and block-level elements, which have significant differences in page layout and display.

  • Inline elements

    • Inline elements do not generate line breaks before or after them; they will be arranged on the same line as adjacent inline elements.
    • The width and height of inline elements are determined by the content and cannot be set directly.
    • The top and bottom margin/padding of inline elements are invalid, but the left and right margins/padding are valid.

  • Block-level elements

    • Block-level elements start on a new line and occupy the entire width of the parent container.
    • Block-level elements can have their width and height set.
    • All margins/padding of block-level elements are valid.

Inline element blocks include text, link, image, button, and tag. The rest of the blocks will generate block-level elements.

root ​

The HTML root container is the initial block automatically generated by the workspace. All UI elements should be connected to the root container, laid out from top to bottom.

Attributes

  • bgcolor - Page background color.
  • fluid - Full width. By default, the root container automatically adjusts its outer margin based on the viewport width; when checked, the root container will occupy the entire viewport width.

Clicking the settings icon opens the HTML settings dialog:

App Language
Additional CSS
1

Settings

  • App Language - App interface language (English/中文). Node-App built-in controls (such as widgets) display the corresponding language interface based on this option.

    The App Language setting affects user programs created by Node-App. The toolbar language option sets the interface language of Node-App itself.

  • Additional CSS - Additional CSS. Added as internal style to the app page. Users familiar with CSS can define style classes here, and apply them to specified elements through the class name (classes) block in the Style category. Or define CSS Media Queries rules to achieve responsive design.

row ​

A row block can contain columns or other HTML blocks. Column blocks within a row support the grid system, a way of dividing the interface, which will be explained in the column width style in the Style chapter.

column ​

Column blocks should be contained within a row block, allowing rows to be nested within columns to create complex layouts. Column blocks support the grid system, which will be explained in the column width style in the Style chapter.

group ​

A group wraps its internal blocks as a single unit (using the <div> tag), which simplifies layout adjustments or applying styles. When the ID attribute is set, the group container can be styled by DOM scripts. The relevant script blocks are explained in the DOM chapter.

Attributes

  • ID - Unique identifier of the element. When this ID is set, the group container can be styled by DOM scripts.
  • type - Group type:
    • div - Division group.
    • control - Control group.

When the type is a control group, the text, label, input, select, and button contained within the group will be packaged as a single control.

Examples

  1. Division group (does not affect the appearance of internal elements).

    Input

  2. Control group (internal elements are packaged as a single control).

    Input

text ​

A text block represents an inline text. When multiple Text blocks are connected, they will be displayed as a continuous line. When the ID attribute is set, the text content can be accessed by DOM scripts.

Attributes

  • text - Text content.
  • ID - Unique identifier of the element. When this ID is set, the text content can be accessed by DOM scripts (text get/set content).

Example

@text1@text2

paragraph ​

A paragraph block represents a paragraph of text. Unlike inline text, multiple consecutive paragraphs will not be joined together. Paragraphs are implemented with the HTML <p> tag. Use <br> for line breaks inside the paragraph. When the ID attribute is set, the text content can be accessed by DOM scripts.

Attributes

  • paragraph - Text content.
  • ID - Unique identifier of the element. When this ID is set, the text content can be accessed by DOM scripts (text get/set content).

Example

The first line of paragraph.
The second line of paragraph.

Another paragraph.

A link is an inline element block that represents a hyperlink to a URL address.

Attributes

  • text - The text displayed.
  • target - The target location for opening the link:
    • self - Current tab.
    • blank - Open in a new tab.
  • href - The URL address of the link.

Links displayed in the Node-App preview area will automatically open in a new tab. When the application is published, it will revert to the set target location.

Example

Node-Matrix

image ​

An image is an inline element block, which represents an image specified by a URL source. When the ID attribute is set, the image's source can be accessed by DOM scripts.

Attributes

  • ID - Unique identifier of the element. When this ID is set, the image's URL source can be accessed by DOM scripts (image get/set src).
  • align - The alignment of the image when placed alongside inline text:
    • default - Default alignment.
    • top - Align with the top of the line.
    • bottom - Align with the bottom of the line.
    • middle - Align with the middle of the parent element.
    • baseline - Align the baseline with the parent element's baseline.
    • text-top - Align the top with the top of the parent element's font.
    • text-bottom - Align the bottom with the bottom of the parent element's font.
  • src - The URL source of the image.

Example

TEXT

label ​

A label is typically used with input controls (input, textarea, select, checkbox, range) to identify the control's name or function. The label is associated with the control through its ID. When the label is clicked, the associated control will receive focus.

Attributes

  • label - The label text.
  • for - The ID of the associated control.
  • row align - Row alignment. When the label and the associated control are on the same row but different columns, check this option to align them.

Example

input ​

An input field is used to receive user input and supports various input types. When the ID attribute is set, the input field can be accessed by DOM scripts to get or set input values, handle events, toggle states, or apply styles. Related script blocks are described in the DOM chapter.

Attributes

  • ID - Unique identifier of the element. When this ID is set, the input field can be accessed by DOM scripts.
  • type - The type of input field:
    • text - Text.
    • number - Number (including decimals).
    • password - Password.
    • date - Date (yyyy-mm-dd).
    • time - Time (hh:mi).
    • datetime - Date and time (yyyy-mm-ddThh:mi).
    • color - Color (#rrggbb).

Example

textarea ​

A text area is used for multi-line text input. When the ID attribute is set, the text area can be accessed by DOM scripts to get or set input text, handle events, toggle states, or apply styles. Related script blocks are described in the DOM chapter.

Attributes

  • ID - Unique identifier of the element. When this ID is set, the text area can be accessed by DOM scripts.
  • rows - The number of displayed rows.

Example

button ​

A button is an inline element block used to trigger DOM click events. When the ID attribute is set, the button can be accessed by DOM scripts to handle events, toggle states, or apply styles. Related script blocks are described in the DOM chapter.

Attributes

  • ID - Unique identifier of the element. When this ID is set, the button can be accessed by DOM scripts.
  • icon - The icon of the button.
  • label - The text displayed on the button.
  • color - The color of the button.

Example

select ​

A select list consists of a select block and its contained option blocks. The value of the select list is the currently selected option's value. When the ID attribute is set, the select list can be accessed by DOM scripts to get or set the selected value, handle events, toggle states, or apply styles. Related script blocks are described in the DOM chapter.

Attributes

  • ID - Unique identifier of the element. When this ID is set, the select list can be accessed by DOM scripts.
  • option - Dropdown options. A dropdown list can contain multiple option blocks. Option attributes:
    • value - Option value. Defines the value that DOM scripts can get or set.
    • text - Option text. The name of the option displayed in the interface.

Example

checkbox ​

A checkbox is used to retrieve the user's binary selection ('true'/'false' or 1/0). When the ID attribute is set, the checkbox can be accessed by DOM scripts to get or set the value, handle events, toggle states, or apply styles. Related script blocks are described in the DOM chapter.

Attributes

  • ID - Unique identifier of the element. When this ID is set, the checkbox can be accessed by DOM scripts.
  • label - Label text.
  • switch - When checked, the checkbox will display as a toggle switch.
  • inline - Check to make this an inline element when multiple consecutive checkboxes need to be placed on the same line.

Example

radio ​

Radio buttons are usually grouped. Radio buttons with the same name form a group, where only one button can be selected at a time. Radio buttons are accessed through the name attribute instead of the ID. For a group of radio buttons with the same name, the DOM block radios get value can get the selected value, and the DOM block radios set value can set the selected value. The script blocks related to radio buttons are described in the DOM chapter.

Attributes

  • name - Group name of the radio buttons. DOM scripts use the group name to get or set the selected value.
  • label - Label text.
  • value - Option value. Defines the value that DOM scripts can get or select.
  • inline - Check to make this an inline element when multiple consecutive radio buttons need to be placed on the same line.

Example

range ​

A range slider is used to input a series of values. When the ID attribute is set, the slider can be accessed by DOM scripts to get or set the value, handle events, toggle states, or apply styles. Related script blocks are described in the DOM chapter.

Attributes

  • ID - Unique identifier of the element. When this ID is set, the slider can be accessed by DOM scripts.
  • min - Minimum value (can be negative or decimal).
  • max - Maximum value (can be negative or decimal).
  • step - Step interval (must be an integer).

Example

tag ​

The tag block represents text-level elements defined by HTML. Common text-level elements include: <i> (italic), <b> (bold), <u> (underline), <sup> (superscript), <sub> (subscript), <mark> (highlight), <kbd> (keyboard input), etc.

Attributes

  • <tag> - Tag name.
  • text - Text content.

Example

italicsubboldmarkCtrl