Web Page Editor
Editor
The editor is where much of the overall editing experience takes place.
It can be configured, via the toolbar, to display both a WYSIWYG and
source view of the current document in either horizontal or vertical
split modes, or can be configured to display only either the WYSIWYG or
the source view (the image above shows split WYSIWYG and source views).
The currently-selected element is synchronized between all views.
Palette
The palette displays an item for each tag in the JSP tag libraries that
are on the application's classpath, in addition to standard HTML and
JSP tags. The tag items can be dragged and dropped onto the WYSIWYG
design canvas to rapidly design web pages. The palette can be pinned open,
or can be set to automatically expand when the cursor is placed over it
while it is in its collapsed state.
Design/Preview Tabs
The Design/Preview tabs of the editor allow the user to toggle between
the editable view (as shown in the first image) and a non-editable
preview (as shown in the image above) that closely emulates the web page
as it will be rendered at runtime.
Toolbar
The toolbar allows the following functions:
- Selecting horizontally-split WYSIWYG and source views
- Selecting vertically-split WYSIWYG and source views
- Selecting WYSIWYG-only view
- Selecting source-only view
- Underlining selected text
- Bolding selected text
- Italicizing selected text
- Making selected text small
- Making selected text large
Properties View
The properties view allows inspection and editing of the selected element's
attributes. The "Quick Edit" tab within the view provides access to the
most-commonly edited attributes, while the "Attributes" tab provides access
to all attributes.
Element Navigation
The element navigation drop-down allows selection of the
currently-selected element's parent elements for editing within the
properties view.
Outline View
The outline view allows the user to visually inspect document structure
and allows selection of the current element to be changed. It also allows
elements to be dragged and dropped within the view, and a context menu
allows element and attribute manipulation.
Status Bar
The status bar displays the hierarchical location within the document
of the currently-selected element.
Working with Elements in the WYSIWYG View
Inspecting Elements
By floating the cursor over an element or the border that represents the
element, tooltips provide feedback on which element will be selected if
the mouse is clicked.
Selecting Elements
Upon clicking an element or the border that represents the element, a
selection border displays the selected element (and the selection is
synchronized across all views).
Editing Elements Using Context Menu
Right-clicking elements will bring up a context menu that allows editing,
selection, and other functionality on the selected element. As can be seen
in the image above, some elements allow tag-specific editing functionality.
Visually Inspecting and Selecting Non-Visual Child Components
By floating the cursor over an element, non-visual child components of this
element (such as converters and validators) can be seen as semi-transparent
icons to the top-right of the element.
Selecting the element and then clicking the "pin" icon that appears at the
top-right of the element will then allow selection of the non-visual child
component by clicking the component's icon.