Index.tsx

This is the basic code for the main script file for installing and running the DART-Platform module package. The code in *.tsx is automatically generated when arranging UI Components by Drag&Drop in DART-IDE.

You can find index.tsx file in EXPLORER window

Project name ▸ Package name ▸ src ▸ index.tsx

Document - Guides - Advanced User Guide - Module Resources - Open index.tsx file

example index.tsx

CODE

import { System, BaseModule, ModuleScreen, ModuleService } from "dart-api"; // Required when using DART-API
import React from "react"; // Required when using ModuleScreen (UI) component
import { ... } from "@mui/material"; // Required when using Common / Bussiness UI Component in ModuleScreen (UI) component
import { ThemeProvider } from "@mui/material/styles"; // For React.Component to apply the DART-Platforms's system theme, <ThemeProvider> TAG must be declared as the root.
import customStyles from "./assets/styles/custom_styles.scss"; // Required when using custom style

// The code below (lines 9~12) is used to access the BaseModule inherited class of the module package in the DART-Platform system.
// Must be automatically entered into the main script file at build-time
// iffy for register a function to create an instance of main class which is inherited BaseModule.
(() => {
    System.registerModuleMainClassCreator(modulePackageInfo => new Module(modulePackageInfo));
})();

// Base class for querying ModuleScreen / ModuleService components of DART-Platform module package in DART-Platform system.
// The main script file of the DART-Platform module package must include one class which is inherited BaseModule.
class Module extends BaseModule {
    getModuleScreen(componentId: string): typeof ModuleScreen | null {
        if (componentId === "JogPlusScreen") {
            return MainScreen;
        } else {
            return null;
        }
    }

    getModuleService(componentId: string): typeof ModuleService | null {
        if (componentId === "JogPlusService") {
            return MainService;
        } else {
            return null;
        }
    }

    onModulePackageInstalled(): void {
        // TODO: implement here if needed
    }
 
    onModulePackageUpdated(oldVersion: string, newVersion: string): void {
        // TODO: implement here if needed
    }
}

// 'ModuleScreen' is an abstract class for developing 'Screen' component that provides UI of DART-Platform module package.
// Codes generated through Layout Design and Visual Scripting of DART-IDE should be added.
class MainScreen extends ModuleScreen {
    ....
    render() {
        return (
            <ThemeProvider theme={this.systemTheme}>
               <div>
                   ...
                   <img src="assets/images/img_app_help_mount.png" alt="mounting" />
               </div>
            </ThemeProvider>
        );
    }
}

// 'ModuleService' is an abstract class for developing 'Service' component to operate code without UI of DART-Platform module package.
// It can only be written arbitrarily through the code-editor of DART-IDE (TBD)
class MainService extends ModuleService {
    onStart(): void {
        // TODO: implement here
    }

    onStop(): void {
        // TODO: implement here
    }
}