Form Visualization

Overview

In the project file list, locate the HTML form file you need to preview. Right-click the file and select the [VJSP Edit Mode] option from the pop-up menu. The system will automatically open the form front-end preview window, displaying the form's page style, interactive effects, and field layout in real-time, facilitating developers to quickly adjust the form design.

Top Functional Area

1. Undo: Click to undo the previous operation.
2. Save: Click to save the current form settings.
3. Project: Click to open the project.
4. Form: Click to open the form.
5. Run: Click to automatically save the current page settings and view the effect of the current settings.
6. Script Generation: Click to enter the script generation page, where script settings can be configured.
7. Clear: Click to clear all layout settings on the current page.
8. Format: Formats the code in the "Code Editor", "Script Editor", and "Style Editor".
9. Help: Click to access the help documentation.

Right Functional Area

1. Toolbox

Select tools from the toolbox and drag them into the designer to edit the form page style.

2. Property Settings

Click on a component within the designer, and the properties page will open on the right side, allowing you to set the component's properties.

3. Events

Click the [Events] tab at the bottom of the right-side toolbox to set control events.

4. Styles

Click the [Styles] tab at the bottom of the right-side toolbox to set control styles.

Bottom Functional Area

1. Designer: Displays the form page style in real-time and allows for modifications.
2. Code Editor: Click to open the form code editor.
3. Script Editor: Click to open the form script editor.
4. Style Editor: Click to open the form style editor.
5. Tags: Click to view form tags. You can view the form's tags and perform modification or deletion operations.