Using the Outline Palette
The Outline palette shows the object/widget hierarchy for the current page. You can select a widget or subwidget from the Outline palette and the corresponding widget will become selected on the page editor canvas.
The Outline palette also provides a way to show/hide widgets in various states (e.g. show a dialog box when a button is clicked). You click on the eye icon (shown in the left column in the Outline palette) to toggle the visibility of the widget on the page editor canvas. See the tutorial Task Manager (Application States) for an example.
Outline Palette Toolbar
The Outline palette toolbar contains two icons for displaying the Outline palette in Widgets mode or Source mode.
- Widgets mode (default) - displays the widgets contained on the page in a tree hierarchy.
- Source mode - displays the HTML source tags containted on the page in a tree hierarchy. This mode is useful when viewing the page editor canvas in Source mode.
Outline Palette Widget Hierarchy
The widgets in the Outline palette are displayed in a tree hierarchy, where each node in the tree can be collapsed or expanded.
- At the top of the tree is the filename.
- The next level in the tree is all the top-level widgets on the page.
- If a widget contains sub-widgets, the widget is displayed as a parent node with expand/collapse controls.
- Sub-widgets or nested widgets are indented under their parent.
Widget Identifiers
For each widget entry, after the widget type the following property values are displayed to help identify the widget:
- label - the label is displayed in quotes (e.g. Button text or <label> text)
- title - the title is displayed in quotes (e.g. for each ContentPane in a TabContainer, this is the Tab title)
- id - the value of the id property (starts with "#")
- class - the value of the class property (starts with ".")
Widget Selection
You can select a widget by clicking on its entry in the Outline palette. The corresponding widget in the page editor canvas then becomes selected. This is handy for selecting widgets that are difficult to select from the page editor canvas, such as sub-widgets, very small widgets or hidden widgets.
Moving Widgets
You can move widgets around on the canvas from within the Outline palette. First select the widget, then drag it to the desired location. This is handy for moving widgets to someplace that might be hidden on the canvas (for example moving a widget from Tab 1 to Tab 2 in a TabContainer).
Widget Context Menu
Each widget has a context menu with the following commands:
- cut - delete the currently selected widget and copy it to your clipboard.
- copy - copy the currently selected widget to your clipboard.
- paste - paste the widget from your clipboard (click paste, then click your cursor where you want to make the paste).
- delete - delete the currently selected widget.
- surround with <A> - select 1 or more widgets and enclose in a <a>.
- surround with <DIV> - select 1 or more widgets and enclose in a <div>.
- surround with <SPAN> - select 1 or more widgets and enclose in a <span>.
To use the widget's context menu, first select the widget, then right-click (ctrl-click on Mac) on the widget.
Toggling Widget Visibility with the Eye Icon
Every widget has an eye icon next to it in the Outline palette (in the left-most column). When you click on the eye icon it toggles the visibility of the widget. An open eye indicates visibility, and a closed eye indicates invisibility. When you make a parent widget invisible, all of its children also become invisible. Invisible widgets are hidden on the page editor canvas and in Preview in browser view. Widget visibility can be toggled for different application states, thus providing an interactive experience to the user. When using this feature, you need to pay particular attention to the selected state in the States palette.