The design view displays an image that is the same as when the HTML tags and window parts are executed. Displayed parts can be selected, moved, resized, or deleted in part units. In addition, parts selected in the palette view can be positioned in the design view.
Note
If there is an error in the source code being edited, the design view cannot be used for editing operations. In this case, use the source view to correct the source code.
The table below shows the commands in the design view popup menu.
Item | Description |
|---|---|
Refresh | Refreshes the design view display. |
Cut | Cuts the selected part and copies it to the clipboard. |
Copy | Copies the selected part to the clipboard. |
Paste | Pastes the clipboard contents. |
Delete | Deletes the selected part. |
Align | Aligns parts. |
Define model binding | Cannot be used. |
Define event processing | Cannot be used. |
Define functional parts binding | Cannot be used. |
Automatic reflection during source view editing | Sets whether edits in the source view should be automatically reflected in the design view. |
Properties | Displays the properties view |
Information
Display/edit prohibited state of the design view
If source view edits are not configured to be automatically reflected in the design view, then the design view window becomes grey and changes to the display/edit prohibited state.
The design view changes from this state in the following situations:
When the focus is moved to it.
When Refresh is clicked in the Edit menu, or when 
(Refresh Ajax Page Editor) is clicked in the toolbar.
When 
(automatic reflection to design view during source code editing) is clicked in the toolbar.
Note that, even when the design view is in the display/edit prohibited state, a window with the latest status can be displayed by switching to the Preview tab.
The following two operations can be performed from the design view:
Parts-common operations
Part-specific operations (editing operations for container parts and calendar parts)
Parts-common operations
Parts-common operations are described below.
Position
Use the method below:
From the palette view, position the part in any position within the design view area:
Select a part in the palette view.
Move the mouse cursor to the desired position in the design view and click.
The part border remains displayed until the part position is decided, enabling the user to check the size of the part.
When a UI part is positioned in the design view from the palette view, the part ID (rcf:id attribute) is appended automatically.
To deselect a part in the palette view, press the ESC key.
For information on the palette view, refer to 8.2.4 Palette View.
For information on how to position parts within a container part, refer to Container part editing operations.
Select
Use one of the methods below:
Click on the selectable area of the design view part.
Click the part in the outline view.
Place the caret on the part tag in the source view.
Move
Use one of the methods below:
Select the part and drag it.
Select the part and press the arrow keys.
Cut
Use one of the methods below:
Select the part and select Cut from the popup menu.
Select the part and press Ctrl+X.
Copy
Use one of the methods below:
Select the part and select Copy from the popup menu.
Select the part and press Ctrl+C.
Paste
Use one of the methods below:
Select Paste from the design view popup menu.
Press Ctrl+V.
The part is pasted below right of the cut or copied part.
If the part pasted has an rcf:id set, a new value is set as the rcf:id.
Delete
Use one of the methods below:
Select Delete from the popup menu of the selected part.
Select the part and press DELETE.
Note that, if the selected part has child elements, then they are also deleted.
Resize
Use the method below:
Drag the resize marks.
When a part is selected, resize marks are displayed at each corner and side of the rectangular area.
When a container part is resized, the positions of its child elements are not changed. Other parts included in the part area after resizing do not become its child elements.
Undo
Use one of the methods below:
Select Undo from the Edit menu.
Press Ctrl+Z.
The following operations can be undone: position, move, cut, paste, delete, resize, and justify.
Redo
Use one of the methods below:
Select Redo from the Edit menu.
Press Ctrl+Y.
Justify
Use the method below:
Select two or more parts, then select a Justify option from the popup menu.
The following types of justifications are available:
Align left
Align center horizontally
Align right
Align top
Align center vertically
Align bottom
Container part editing operations
Parts held in child elements of parts that can operate in the design view are called container parts. Container parts include the following:
Container parts of window parts (except for FragmentContainers)
HTML form tags
Operations specific to container parts are described below.
Moving container parts.
This also moves the parts (child nodes) on the container part.
Positioning and moving parts to within a container part.
To add a part within a container part, position or move the part you want to add as a child element to within the container part area.
For information on container parts, refer to Container Parts in the Systemwalker Runbook Automation Reference Guide.
Calendar part editing operations
The PopupCalendar and CalendarButton are used as a pair of parts. When the CalendarButton is positioned, the PopupCalendar is also positioned automatically.
