Follow Techotopia on Twitter

On-line Guides
All Guides
eBook Store
iOS / Android
Linux for Beginners
Office Productivity
Linux Installation
Linux Security
Linux Utilities
Linux Virtualization
Linux Kernel
System/Network Admin
Programming
Scripting Languages
Development Tools
Web Development
GUI Toolkits/Desktop
Databases
Mail Systems
openSolaris
Eclipse Documentation
Techotopia.com
Virtuatopia.com

How To Guides
Virtualization
General System Admin
Linux Security
Linux Filesystems
Web Servers
Graphics & Desktop
PC Hardware
Windows
Problem Solutions

  




 

 

Eclipse JavaServer Faces Tooling User Guide
Previous Page Home Next Page

Web Page Editor

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

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

Preview

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

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

Properties

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

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

Outline Context Menu

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

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

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

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

Inspecting 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 Child Components

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.

 
 
  Published under the terms of the Eclipse Public License Version 1.0 ("EPL") Design by Interspire