The Structure View

The Structure view provides a structural view of components on the canvas. You can use it to see the hierarchy of a page's components and to reposition components within the page's structure. You can also add components in the Structure view. Click Structure in the Page Designer to show or hide the Structure view.

Selecting a component in the Structure view also selects it on the canvas and displays its properties in the Properties pane. You can organize and reposition components on the page either by dragging them into position in the Structure view or by dragging them from the Structure view directly to the canvas. You can also select multiple components in the Structure view to simultaneously reposition them (for example, to move them into a new container).

It's also possible to add components to a page by dragging components from the Components palette or the canvas into the Structure view; you can also click Insert Component in the right-click menu. This option can help you position a component exactly where you want to add it, especially if you're working with complex layouts. When you select Insert Component on a selected component, you'll be able to add a component before, inside, or after the selected one. If the selected component has multiple slots, you will have the option to drop the component into a particular slot; if it's a single slot, the component is dropped directly into the slot.

Use the Page Structure Menu () to set your Structure view preferences.

Description of the illustration page-designer-structure.png

You can choose to display a component's details, for example, its id, classes, or hints about its content (enabled by default). You can use Show Visible Components Only to view only the nodes of the components visible on the page. When combined with the default view that fades into the background components that are not currently displayed on the page, this option can trim background information and allow you to focus on parts of the page, a section at a time.

You can also enable Show Slots to display the location of empty as well as occupied slots. When slots are visible, you can easily locate the slot where you want to drop a component, as shown here:

Description of the illustration showslots.png

Even if you don't enable the option to show slots, it's possible to locate available slots by pausing over a component node when dragging a component into Structure view. If the component node has slots, a pop-up menu that lists the available slots opens; you can then drop your component into the desired slot in the pop-up menu.

Description of the illustration page-designer-structure-slots.png

You can also right-click a slot and select Insert Component to drop a component directly into a slot. Doing this brings up the list of components, including a set of recommended ones. Recommended components show under a Preferred category and are based on the type of component that can be used in the slot. For example, components recommended for a button's startImage and endImage slots are icons and images:

Description of the illustration preferred-components.png