Custom Component Development

Development Process

1. Environment Preparation
2. Installing Developer Tools
3. Generating Component Packages
4. Developing Components
5. Previewing Components
6. Publishing Components

Environment Preparation

Go to the Node.js official website and download and install a Node.js version suitable for your operating system. Node.js supports the Windows, macOS, and Linux operating systems.

Installing Developer Tools

1. Log in to the DLV management console. On the Control Center > Components page, click Download Developer Tools in the upper right corner of the page to download the developer tool package named dlv-cli-x.x.x, where x.x.x indicates the tool version.
   Figure 1 Downloading the tool
   
2. Decompress the dlv-cli-x.x.x package to the local host. Open the command prompt window in Windows or open the CLI terminal in Linux or Mac. Run the cd command to go to the dlv-cli-x.x.x directory, and run the npm link command to install the dlv-cli developer tool.
3. After the tool is installed, run the dlv command. If the information shown in Figure 2 is displayed, the tool is successfully installed. Table 1 shows the information about the current developer tool.
   Figure 2 Running the dlv command
   

   Table 1 Description of developer tool commands

   Command	Description
   dlv init	Quickly initialize component templates.
   dlv start	Start component packages to preview components.
   dlv package	Package components.

Generating Component Packages

A component package is a custom component template provided by DLV. You can develop components based on the custom template.

Create a directory, for example, newCom, go to the directory, and run the dlv init command to create a component, as shown in Figure 3. Enter the information about the new component as prompted.

Do not run the dlv init command in the directory of developer tool dlv-cli-x.x.x. Otherwise, the developer tool cannot be used properly.

Figure 3 dlv init

If the corresponding template file is generated in the new directory, the component package is successfully generated.

├──node_modules # npm dependency package

├──gui.json # Component configuration

├──index.js # Component entry

├──index.less # Component style

└──package.json # npm module description

Developing Components

After a component package is generated, you can customize components based on the generated template. For details, see Component Development Guide.

Previewing Components

Go to the component directory and run the dlv start command to preview a component. If the command output shows that the service is started, the Chrome browser is automatically launched and navigates to the component preview page.

The preview page consists of the central canvas area and the toolbar on the right. The details are as follows:

• Central canvas area

  The central canvas area displays components and allows you to observe component changes in real time.

  All configurations and data modifications made on the toolbar on the right are displayed on the components of the central canvas in real time.

  The black frame of a component indicates the container size of the component. The black frame can be scaled in each direction to test the scaling performance of the component.

• Toolbar

  The toolbar on the right consists of the pattern, data, and interaction panels.

Publishing Components

Go to the component directory and run the dlv package command. A tar.gz package named in the format of component name-version number is generated outside the component directory. Upload the package to a component package on the Components page of the DLV management console to publish the package.