I. Overview
1. Version
| Designer |
|---|
| 11.0 |
2. Application scenarios
"Developer Debug" preview can be divided into: preview the initial effect + adjust the layout:
1) Preview: If the template works well in Developer Debug preview, then it must work well in PC Preview. And since the adaptive scaling logic is based on the template's initial effect, the template's adaptive effect will be better if the preview looks good under Developer Debug.
2) Debug: When the template production encountered more complex style requirements, using the Developer Debug preview mode, you can directly adjust the size and layout of components in the template preview interface, click save immediately effective, that is "WYSIWYG". The operation demonstration is as follows:
3. Function introduction
Template preview mode drop down to see the "Developer Debug" option, hover the mouse prompt: Click the template to switch to browser debugging, click to adjust the template layout in the browser to realize "WYSIWYG".
Note: If the dashboard is an old version, you need to click the "Convert to new version" button in the shortcut toolbar to use Developer Debug after conversion.
Note that after using the developer debug preview, the designer will close and lock the template. In the locked state, the designer cannot open the template, as shown in the following figure:
II. Introduction to debug
1. Adjust the component position
Hover the cursor over the component, hold down and drag the left mouse button to adjust the position of the component, as shown below:
Drag to align other components using guides (red guides appear when the component border is aligned) and autosorption (autosorption when close to alignment).
When a component is selected, a rectangle with white text on a red background appears in the upper left corner. This is the horizontal and vertical coordinate of the component, not the size of the component. You can use this coordinate to determine whether the component is aligned or not.
2. Adjust the component size
After the component is selected, 8 white dots will appear on the border to adjust the size of the component from different angles. You can drag the cursor over these dots, as shown below:
It is also possible to lock component proportions when resizing, so that the component width-to-height ratio remains the same, as shown below:
Method of open the lock: select the component, the upper right part of the component floating toolbar, click inside the "Lock Aspect Ratio" tool.
3. Adjust the component level
When components are stacked, the display level of components can be adjusted, as shown below:
Method of adjusting the hierarchy: select the component, and the floating toolbar appears on the upper right of the component. Click "Put on top", "Put on bottom", "Move up one level", "Move down one level" inside.
4. Save and Undo operations
When developer debug, there is a toolbar at the top of the page, which has four tools, their functions are as follows:
Save: After making changes to the layout and components, clicking the "Save" button saves the changes and takes effect on the template in the designer.
Undo: A maximum of five steps can be taken to undo a change.
Restore: Restores the undo action, supports a maximum of 5 restore steps.
Unpin: The tool panel is fixed by default, and clicking on this button will automatically hide the tool panel after the cursor has left the area.
When the browser clicks the "Save" button for the first time, the following dialog box will pop up. After the dialog box is closed, it will not pop up again as long as the cookies of the browser are not cleared.
5. URL access developer debugg
Developer Debug is also supported when a report is accessed through a URL, by adding a suffix to the URL: &op=editable_preview
For example, to view a template such as Form5.frm on the server.
Just type in your browser's address bar: http://localhost:8075/webroot/decision/view/report?viewlet=Form5.frm&op=editable_preview
Note: During remote design, only users who have the design permission of this template can access the developer debug URL of this template, and other users will be prompted with no permission when accessing this template.
6. The impact of body adaptive layout
If the Layout Type of body is Adaptive Layout, then the developer cannot adjust the component position, the component hierarchy, only the size of the component, and the size of the component affects each other.
There is no limit to the absolute layout and all of the above adjustments are supported.
7. Nested component special operations
Both Tab Block and Absolute Layout Block can be nested with other components, and they have some special operations for developer debug, as shown in the following table:
| Component | Operations |
|---|---|
| Tab Block | You can modify the width and height of the Tab and Tab components |
| The component modification logic within the Tab block is consistent with the adaptive layout | |
| The size and location of components in the Tab block cannot exceed the size of the Tab block | |
| Absolute Layout Block | Absolute layout block supports modifying its width and height |
| The component modification logic within the absolute layout block is consistent with the absolute layout | |
| The size and location of components in the absolute layout block cannot exceed the size of the absolute layout block |
