Visual Scripting

Visual Scripting is a tool in Dart-IDE that uses a graphical interface to help the developer create programs based on visual representations of logic rather than writing it out in the required language syntax.

How to open the visual scripting panel?

• Step 1. Open Dart-IDE

Access: https://ide.drdart.io

• Step 2. Open your project

• Step 3. Add the file UI.tsx(File name doesn’t matter). It will show you Code Editor and UI Preview.

You must use the Visual Scripting function after creating separate *.tsx file.

• Step 4. To activate Visual Scripting in UI.tsx, add and save the Button Component to the UI Preview .

1. Select UI.tsx file in the EXPLORER window.

2. Activate VISUAL SCRIPTING window by clicking the Visual Scripting checkbox.

3. Select Button in the COMPONENT PALETTE window by mouse, and drag & drop it to the UI Preview window.

4. Click the Save button at the bottom of the Visual Scripting window. Then, UI.visualScripting.ts file is automatically created. This file is only used internally, and the user does not need to edit it.

If you open other file .tsx or create new one, its own Visual Scripting panel will be shown.

Vice versa, when you turn back to the current file .tsx , The Current Visual Scripting panel will be shown.

• Step 5. To display UI tsx screen in the Index.tsx screen, replace the code within the Index.tsx to the following code.

Note.

When released, we plan to provide the function that allows you to create modules only with Visual Scripting without any code modifications.

import {
    BaseModule,
    Context,
    IDartFileSystem,
    IProgramManager,
    Message,
    ModuleScreen,
    ModuleScreenProps,
    System,
} from 'dart-api';
import React from 'react';
import { ThemeProvider } from '@mui/material/styles';
import { getDBManager, runAppDrl } from './drlUtil';
import NewComponent from './UI';

// IIFE for register a function to create an instance of main class which is inherited BaseModule.
(() => {
    System.registerModuleMainClassCreator((packageInfo) => new Module(packageInfo));
})();
class Module extends BaseModule {
    getModuleScreen(componentId: string) {
        if (componentId === 'MainScreen') {
            return MainScreen;
        }
        return null;
    }
}
class MainScreen extends ModuleScreen {
    constructor(props: ModuleScreenProps) {
        super(props);
    }
    render() {
        return (
            <ThemeProvider theme={this.systemTheme}>
                {/* Put this code in this location*/}
                <NewComponent context={this.moduleContext} />
            </ThemeProvider>
        );
    }
}

The added code in the default template is as follows.

• Added code in order to load NewComponent of UI.tsx from the top of the text

import NewComponent from './UI';

• Code that added NewComponent component inside render() within the MainScreen Class

<ThemeProvider theme={this.systemTheme}>
    {/* Put this code in this location*/}
    <NewComponent context={this.moduleContext} />
</ThemeProvider>

Now in UI.tsx, you can compose the UI Component placement and Visual Scripting. In the Index.tsx screen (start screen), the same screen as the screen configured in UI.tsx will be displayed.

Types of Component in Visual Scripting

1) Basic Component Node

Refer to this link for further information: Basic Component Node.

2) User Component Node

Refer to this page for further information: User Component Node

3) Logic Component

Refer to this link for further information: Logic Component Node

4) Read & Write Data Component Node

Refer to this link for further information: Read & Write Data Component Node

5) API Component Node

Refer to this link for further information: API Node

Articles