Component Designer
Overview
In large information systems, we face a challenge: how to achieve more humanized interface data interaction in complex scenarios. General-purpose and atomic system designs are difficult to meet this demand.
To achieve this goal, the platform provides methods such as custom components and external systems, embedding pages pre-developed by front-end developers through iframe. However, this method undoubtedly increases the ability requirements for system designers.
To lower the threshold, we urgently need to find a simpler and easier method. For this reason, the platform has launched the Component Designer function. Through drag-and-drop operations, designers can easily build page display and interaction logic. In addition, the system also provides tools such as templates, style sheets, scripts, and blueprints to realize page data binding and data flow logic.
Concepts
Designers need to be familiar with the following basic concepts in the Component Designer to get started quickly
Template
HTML-based template syntax. After designers design through drag-and-drop operations on the canvas, the corresponding Html code structure is generated. Designers can also directly modify the code structure and update it to the canvas.
Style Sheet (css)
For beautifying the content displayed by the template, you can use style declarations to personalize the elements in the template, or you can use the same style declaration to beautify elements that use this declaration.
TIP
The module also provides template element interface configuration items, and designers can also directly implement the same function through configuration.
Script
Perfect the data, interaction logic, etc. of the designed template.
- Public utility class file dependencies
- Data definition
- Data processing
- Template lifecycle interception
- Template event processing
Blueprint
A graphical implementation of scripts. The system provides rich steps to help designers quickly implement business logic
Principle
In the current version, the platform uses Vue for rendering components built by the Component Designer during rendering.
The platform will convert the templates, styles, and scripts (script blueprints will be automatically converted to scripts) built by designers into a single file component (SFC) according to the Vue component specification group. After generating the Vue component file, it is compiled by Vue Cli in library mode (lib) to generate the final css and js, and then the function that references the component dynamically mounts CSS and JS to finally render the designed component to the user. This entire process is automatically completed by the platform without the intervention of designers.